코린이[코딩 어린이]

브라우저 객체 모델

브라우저 객체 모델은 웹 브라우저와 관련된 객체의 집합( window, navigator, history, screen, document )으로 웹 브라우저 기능 요소를 직접 관리 / 제어할 수 있는 특별한 객체 모읍입니다.

:: 자바스크립트 프로그래밍 언어를 작동하게 하는 웹 브라우저라는 플랫폼이 제공하는 기능

참고자료

• 모질라 웹 API 문서 -> 바로가기
  파이어폭스 웹 브라우저를 만든 모질라에서 제공하는 참고 자료입니다.
• Dev Docs -> 바로가기
  웹 브라우저에서 확인할 수 있는 참고 자료입니다. 자바스크립트를 포함한 모든 웹 개발과 관련된 문서를 제공합니다.
• Zeal Docs -> 바로가기
  오프라인 상태에서도 사용할 수 있는 윈도우, 리눅스 전용 참고 자료입니다. 자바스크립트를 포함해 대부분의 프로그래밍 언어, 프레임워크, 라이브러리와 관련된 문서를 제공합니다.
• Kapeli -> 바로가기
  오프라인 상태에서도 사용할 수 있는 맥 전용 참고 자료입니다. 자바스크립트를 포함한 모든 웹 개발과 관련된 문서를 제공합니다.

브라우저 관련 객체

브라우저 객체 모델( BOM, Browser Object Model )은 웹 브라우저와 관련된 객체의 집합을 의미합니다. 대표적인 브라우저 객체 모델로는 아래와 같으며, window,location, navigator, history, screen, document 객체가 있습니다.

간단하게 문서 객체 모델 ( DOM, Document Object Model )이라 통해서 부릅니다.

window 객체

window 객체의 속성 예

    var output = '';
    for(let key in window) {
        output += 'ㅁ' + key + ': ' + window[key] + '\n';
    }
    console.log(output);

수많은 속성들이 줄줄이 나타납니다.

:: window 객체는 자바스크립트의 브라우저 기반 최상위 객체입니다. alert(), prompt() 함수 모두 window 객체의 메서드입니다.

기본 변수와 window 객체

var 키워드로 선언한 일반 변수는 모두 window 객체의 속성이 됩니다.

기본 변수와 window 객체 예

var test = 273;
console.log(window.test); // 273

새로운 window 객체 생성

window 객체의 윈도우 생성 메서드

window 객체의 open() 메서드는 네 개의 매개변수가 있습니다. 입력해도 되고 하지 않아도 되는 매개변수를 옵션이라고 하는데, open() 메서드의 모든 매개변수는 옵션입니다.

open() 메서드 예

window.open()

위 코드를 실행하면 새로운 웹 브라우저 윈도우가 만들어집니다.

open() 메서드의 옵션 사용 예

window.open('http://shiro21.tistory.com', 'child', 'width=600, height=300', true);

코드를 실행시키면 자동으로 주소창에 해당하는 팝업창이 뜹니다.

open() 메서드의 매개변수

• 첫 번째 매개변수 : 열고자 하는 HTML 페이지의 URL
• 두 번째 매개변수 : 윈도우 간 통신하는 데 사용하는 윈도우 이름
• 세 번째 매개변수 : 윈도우를 어떤 모양으로 출력하지 지정하는 옵션

윈도우 형태 옵션 ( 세 번째 매개변수에 사용하는 옵션 )

open() 메서드는 새로운 window 객체를 생성하는 객체입니다. 단지 팝업창을 여는 것에서 끝나지 않고 윈도우 객체를 리턴합니다. 

따라서 아래 코드처럼 새로운 윈도우 객체에 접근해 속성과 메서드를 사용할 수 있습니다.

open() 메서드의 리턴 값 예

var child = window.open('', '', 'width=300, height=200');

child.document.write('<h1>window</h1>');

팝업차단

일부 웹 브라우저에서 실행할 때 웹 페이지 오류가 발생하면 팝업창 허용을 누르고 다시 실행합니다.

아래 코드처럼 처리하면 오류 메시지를 제거할 수 있습니다.

인터넷 익스플로러 8 이하의 팝업 차단 검사

var child = window.open('', '', 'width=300, height=200');

if(child) {
    child.document.write('window');
} else {
    alert('팝업 차단을 해제해주세요');
}

underscore 라이브러리 바로가기

underscore 라이브러리

배열 정렬과 같은 기본적인 유틸리티 기능을 모아놓은 underscore 라이브러리

:: underscore 라이브러리는 모든 웹 브라우저에서 작동하므로, 인터넷 익스플로러 8 이하의 웹 브라우저에서 ECMAScript 5에 추가된 메서드를 사용할 수 없을 때 보완하기 위한 목적으로도 활용할 수 있습니다.

underscore 라이브러리 활용하기

Development Version ( 개발버전 ) or Production Version ( 배포버전 ) 다운로드 -> underscore 라이브러리 경로 지정해주기

underscore 라이브러리 활용 예

var students = [
    { name: 'shiro', korean: 87, english: 99, math: 100, science: 87 },
    { name: 'AAA', korean: 65, english: 36, math: 55, science: 100 },
    { name: 'BBB', korean: 87, english: 78, math: 0, science: 11 },
    { name: 'CCC', korean: 87, english: 12, math: 55, science: 92 },
    { name: 'DDD', korean: 99, english: 55, math: 96, science: 77 },
    { name: 'SSS', korean: 78, english: 89, math: 100, science: 91 },
    { name: 'ADS', korean: 99, english: 99, math: 45, science: 90 }
];

var sortByScience = _.sortBy(students, function(item) {
    return item.science
}).slice(0, 3);

console.log(JSON.stringify(sortByScience, null, 2));
/*
[
{
"name": "BBB",
"korean": 87,
"english": 78,
"math": 0,
"science": 11
},
{
"name": "DDD",
"korean": 99,
"english": 55,
"math": 96,
"science": 77
},
{
"name": "shiro",
"korean": 87,
"english": 99,
"math": 100,
"science": 87
}
]
*/
var sortByAverage = _.sortBy(students, function(item) {
    return (item.korean + item.english + item.math + item.science) / 4
}).slice(0, 3);

console.log(JSON.stringify(sortByAverage, null, 2));
/*
[
{
"name": "BBB",
"korean": 87,
"english": 78,
"math": 0,
"science": 11
},
{
"name": "CCC",
"korean": 87,
"english": 12,
"math": 55,
"science": 92
},
{
"name": "AAA",
"korean": 65,
"english": 36,
"math": 55,
"science": 100
}
]
*/
// 과학성적이 가장 높은 학생 추출하기
var scienceTop = _.max(students, function(item) { return item.science})

console.log(JSON.stringify(scienceTop, null, 2));
/*
{
"name": "AAA",
"korean": 65,
"english": 36,
"math": 55,
"science": 100
}
*/

화살표 함수를 사용한 Array 객체의 메서드 활용 - ECMAScript 6

일반적인 배열 메서드 사용 예

var students = [
    { name: 'shiro', korean: 87, english: 99, math: 100, science: 87 },
    { name: 'AAA', korean: 65, english: 36, math: 55, science: 100 },
    { name: 'BBB', korean: 87, english: 78, math: 34, science: 11 }
];

var filterA = students.filter(function(item) {
    return item.science > 90;
});

console.log(filterA);

var filterB = students.filter(function(item) {
    return ((item.korean + item.english + item.math + item.science) / 4) > 90;
});

console.log(filterB);

화살표 함수를 사용한 Array 객체의 메서드 활용 예

var students = [
    { name: 'shiro', korean: 87, english: 99, math: 100, science: 87 },
    { name: 'AAA', korean: 65, english: 36, math: 55, science: 100 },
    { name: 'BBB', korean: 87, english: 78, math: 34, science: 11 }
];

var filterA = students.filter((item) => item.science > 90);

console.log(filterA);

var filterB = students.filter((item) => ((item.korean + item.english + item.math + item.science) / 4) > 90)

console.log(filterB);

ES6를 사용할 수 있는 환경이라면, 특수한 경우를 제외하고 무조건 익명 함수를 화살표 함수로 교체하는 하는 것이 retrun 키워드를 생략해서 코드를 깔끔하게 구성할 수 있습니다.

JSON 객체

ECMAScript 5부터는 정식으로 JSON 객체를 지원합니다. JSON ( JavasScript Object Notation )은 자바스크립트 객체의 형태를 갖는 문자열을 뜻합니다.

ECMAScript 5 JSON 객체의 메서드

JSON.stringify() 메서드 예

var object = {
    name: 'shiro',
    region: '의정부'
};

console.log(JSON.stringify(object)); // {"name":"shiro","region":"의정부"}

위 코드를 실행하면 객체의 속성과 값을 쉽게 확인할 수 있습니다.

for in 반복문을 사용하는 것보다 훨씬 편하지만 for in 반복문을 사용하는 것이 여러가지 기능 확장에 유리합니다.

JSON.parse() 메서드 예

var object = {
    name: 'shiro',
    region: '의정부'
};

var obj = JSON.stringify(object);
var copy = JSON.parse(obj);

console.log(copy.name + ' : ' + copy.region); // shiro : 의정부

toJSON() 메서드

JSON.stringify() 메서드의 매개변수에 넣은 객체에 toJSON() 메서드가 없다면 객체 전체를 JSON으로 변환합니다. 반면 toJSON() 메서드가 있다면 toJSON() 메서드에서 리턴한 객체를 JSON으로 변환합니다.

toJSON() 메서드 예

var object = {
    name: 'object',
    region: 'object',
    toJSON: function() {
        return {
            custom: 'custom'
        };
    }
};

console.log(JSON.stringify(object)); // {"custom":"custom"}

ECMAScript 5 Array 객체

HTML5와 함께 출현한 자바스크립트 표준안을 ECMAScript 5라고 합니다.

ECMAScript 5는 기존 자바스크립트에서 객체 관련 부분을 많이 보완했습니다.

확인 메서드

ECMAScript 5에서는 Array 생성자 함수에 아래 메서드를 추가했습니다.

Array 생성자 함수의 메서드

typeof키워드로 Array객체의 자료형을 확인하면 object가 나오므로 Array객체임을 확인하려면 constructor()메서드로 자료형을 비교하는 방법을 응용해야합니다.

Array.isArray() 메서드 예

console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray({})); // false
console.log(Array.isArray(1)); // false

탐색 메서드

ECMAScript 5 Array 객체의 탐색 메서드

index(), lastIndexOf()메서드 모두 매개변수에 검색하려는 객체를 입력합니다. 만약 내부에 검색하려는 객체가 있으면 해당 객체가 위치하는 인덱스를 리턴하고, 없으면 -1을 리턴합니다.

ECMAScript 5 Array 객체의 탐색 메서드 예

var array = [1, 2, 3, 4, 5, 5, 4, 3, 2, 1];

var output1 = array.indexOf(4);
var output2 = array.indexOf(8);
var output3 = array.lastIndexOf(4);
var output4 = array.lastIndexOf(8);

var output = '';
output += output1 + ' : ' + output2 + '\n';
output += output3 + ' : ' + output4;

console.log(output);
/*
3 : -1
6 : -1
*/

index()메서드는 앞쪽부터 검색을 시작하고, lastIndexOf()메서드는 뒤쪽부터 검색을 시작합니다.

반복 메서드

ECMAScript 5 Array 객체의 반복 메서드

jQuery의 each()메서드와 비슷한 반복문입니다.

forEach() 메서드 예

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var sum = 0;
var output = '';
array.forEach(function(element, index, array) {
    sum += element;
    output += index + ' : ' + element + ' -> ' + sum + '\n';
});

console.log(output);
/*
0 : 1 -> 1
1 : 2 -> 3
2 : 3 -> 6
3 : 4 -> 10
4 : 5 -> 15
5 : 6 -> 21
6 : 7 -> 28
7 : 8 -> 36
8 : 9 -> 45
9 : 10 -> 55
*/

매개변수로 입력 함수에 배열의 요소와 관련된 정보를 넣어 반복합니다. for in 반복문과 연관해서 생각하면 쉽게 이해가 됩니다.

forEach()메서드의 매개변수로 입력한 함수는 매개변수로 element, index, array가 있습니다.

• element : 현재 반복에서 배열의 요소를 뜻합니다.
• index : 현재 반복에서 요소의 인덱스를 뜻합니다.
• array : 현재 반복 수행하는 배열 자체를 뜻합니다.

map() 메서드 예

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var output = array.map(function(element) {
    return element * element;
})

console.log(output); // 1, 4, 9, 16, 25, 36, 49, 64, 81, 100

배열의 각 요소를 변경해 새로운 배열을 리턴하는 메서드입니다. 위 코드는 각각의 요소를 제곱해 리턴했습니다.

조건 메서드

forEach()메서드의 매개변수로 입력하는 함수의 형태는 filter()메서드를 비롯해 every()메서드, some()메서드에서도 사용합니다.

ECMAScript 5 Array 객체의 조건 메서드

filter() 메서드 예

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

array = array.filter(function(element, index, array) {
    return element <= 5;
})

console.log(array); // 1, 2, 3, 4, 5

filter()메서드의 매개변수로 입력한 함수는 불 자료형 값으로 리턴해야 합니다. 이때 리턴 하는 값이 true인 배열의 요소만을 골라 새로운 배열을 만듭니다. 위 코드는 요소의 크기가 5 이하인 숫자를 골라서 새로운 배열을 생성했습니다.

every() 메서드와 some() 메서드 예

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

function lessThanFive(element, index, array) {
    return element < 5;
}
function lessThanTwenty(element, index, array) {
    return element < 20;
}

var output1 = array.every(lessThanFive); // 모든 요소가 true면 true 하나라도 false면 false
var output2 = array.every(lessThanTwenty); // 모든 요소가 true면 true 하나라도 false면 false
var output3 = array.some(lessThanFive); // 하나 이상의 요소가 true면 true
var output4 = array.some(lessThanTwenty); // 하나 이상의 요소가 true면 true

var output = '';

output += output1 + ' : ' + output2 + '\n';
output += output3 + ' : ' + output4 + '\n';

console.log(output);
/*
false : true
true : true
*/

연산 메서드

ECMAScript 5 Array 객체의 연산 메서드

reduce() 메서드 예

// reduce
var array = [1, 2, 3, 4, 5];

var output = '';
array.reduce(function(previousValue, currentValue, index, array) {
    output += previousValue + ' : ' + currentValue + ' : ' + index + '\n';
});
console.log(output);
/*
1 : 2 : 1
undefined : 3 : 2
undefined : 4 : 3
undefined : 5 : 4
*/


// reduceRight
var array = [1, 2, 3, 4, 5];

var output = '';
array.reduceRight(function(previousValue, currentValue, index, array) {
    output += previousValue + ' : ' + currentValue + ' : ' + index + '\n';
});
console.log(output);
/*
5 : 4 : 3
undefined : 3 : 2
undefined : 2 : 1
undefined : 1 : 0
*/

reduce()메서드와 reduceRight()메서드를 이해하기 위해 감소라는 의미가 있는 이유를 알아야 합니다.

reduce()메서드를 사용하면 아래와 같은 형태로 배열의 요소를 함수의 매개변수로 전달합니다.

처음에는 배열의 요소 다섯 개에서 두 개를 검사하고 이를 하나로 합쳐줍니다. 이어서 하나로 합친 값을 다음 요소와 비교해 또 하나로 합칩니다. 이렇게 점점 배열의 요소를 하나가 될 때까지 줄여나가므로 reduce()메서드라는 이름이 붙은 것입니다.

reduce() 메서드 활용 예

var array = [1, 2, 3, 4, 5];

var result = array.reduce(function(previousValue, currentValue) {
    return previousValue + currentValue;
})

console.log(result); // 15

reduceRight()메서드는 reduce()메서드와 비슷합니다. 다만 오른쪽부터 실행합니다.

ECMAScript 5 String 객체

ECMAScript 5 String 객체의 메서드

trim() 메서드 예

var text = ' text ';

var output = '';

output += '++' + text + '++\n';
output += '++' + text.trim() + '++';

console.log(output);
/*
++ text ++
++text++
*/

trim()메서드를 사용하면 문자열 양 끝의 빈 문자열이 제거됩니다.

Math 객체

Math객체는 자바스크립트의 기본 내장 객체 중 유일하게 생성자 함수를 사용하지 않는 객체입니다.

Math객체는 이름 그대로 수학과 관련된 속성과 메서드를 갖는 객체입니다.

Math 객체의 속성

Math객체는 생성자 함수가 아니기 때문에 그냥 아래 코드처럼 사용합니다.

Math 객체의 속성

console.log(Math.E); // 2.718281828459045
console.log(Math.LN2); // 0.6931471805599453
console.log(Math.LN10); // 2.302585092994046
console.log(Math.LOG2E); // 1.4426950408889634
console.log(Math.LOG10E); // 0.4342944819032518
console.log(Math.PI); // 3.141592653589793
console.log(Math.SQRT1_2); // 0.7071067811865476
console.log(Math.SQRT2); // 1.4142135623730951

Math 객체의 메서드

Math객체의 메서드로 넘겨진 모든 매개변수는 종류에 관계없이 모두 숫자로 변환됩니다.

메서드의 함수화 예

var max = Math.max;

console.log(max(52, 273, 103, 57, 32)); // 273

Date 객체

Date객체는 날짜와 시간을 표시하는 객체입니다.

생성

객체 생성과 출력 예

var date = new Date();

console.log(date); // Tue Jun 21 2022 10:28:01 GMT+0900 (한국 표준시)

위 코드를 실행하면 위 코드처럼 현재 시각이 출력됩니다. 현재 실행 위치가 한국이므로 GMT+0900이나 UTC+0900의 표준 시간이 표시됩니다.

웹 브라우저에 따라 기본 설정이 GMT(greenwich Mean Time)일 수도 있고, UTC(Universal Time Coordinated)일 수도 있습니다.

문자열을 사용한 Date 객체 생성 예

var date = new Date('December 9, 1991');
var date = new Date('December 9, 1991 02:24:23');

문자열을 입력하는 것 이외에도 매개변수에 숫자를 연, 월 - 1, 일, 시, 분, 초, 밀리 초 순서로 입력해 Date객체를 생성합니다.

숫자를 사용한 Date 객체 생성 예

var date = new Date(1991, 11, 9);
var date = new Date(1991, 11, 9, 2, 24, 23);
var date = new Date(1991, 11, 9, 2, 24, 23, 1);

:: 월은 - 1을 입력하는 것이므로 0은 1월, 1은 2월순으로 표시됩니다. 위 코드는 11이기 때문에 12월을 표시합니다.

Unix Time을 사용한 Date 객체 생성 예

var date = new Date(273274154673);

Unix Time은 1970년 1월 1일 12시 자정을 기준으로 경과한 시간을 밀리 초 단위로 나타내는 방식입니다.

메서드

Date객체는 많은 메서드를 갖습니다.  Date객체의 메서드를 세 가지로 분류하면 getter, setter, to~String형태로 분류합니다.

[ getOO(), setOO(), toOOString() ]

일주일 후의 시간 구하기 예

var date = new Date();

date.setDate(date.getDate() + 7);

console.log(date); // Tue Jun 28 2022 10:41:25 GMT+0900 (한국 표준시)

getter와 setter를 이용하면 간단히 일주일 후의 시간을 구할 수 있습니다.

:: 연도와 관련된 메서드 중 이름이 비슷한 getYear()메서드와 getFullYear()메서드가 있습니다. getYear()메서드는 웹 브라우저에 따라 조금씩 다른 결과를 출력하기 때문에 getFullYear()메서드를 사용하는 것이 좋습니다.

Date 객체의 to ~ String() 메서드

var date = new Date(1991, 11, 9);

var output = '';

output += 'toDateString: ' + date.toDateString() + '\n';
output += 'toGMTString: ' + date.toGMTString() + '\n';
output += 'toLocaleDateString: ' + date.toLocaleDateString() + '\n';
output += 'toLocaleString: ' + date.toLocaleString() + '\n';
output += 'toLocaleTimeString: ' + date.toLocaleTimeString() + '\n';
output += 'toString: ' + date.toString() + '\n';
output += 'toTimeString: ' + date.toTimeString() + '\n';
output += 'toUTCString: ' + date.toUTCString() + '\n';

console.log(output);

/*
toDateString: Mon Dec 09 1991
toGMTString: Sun, 08 Dec 1991 15:00:00 GMT
toLocaleDateString: 1991. 12. 9.
toLocaleString: 1991. 12. 9. 오전 12:00:00
toLocaleTimeString: 오전 12:00:00
toString: Mon Dec 09 1991 00:00:00 GMT+0900 (한국 표준시)
toTimeString: 00:00:00 GMT+0900 (한국 표준시)
toUTCString: Sun, 08 Dec 1991 15:00:00 GMT
*/

시간 간격 계산

Date객체는 D-Day를 구할 때도 활용할 수 있습니다. 날짜 간격을 구할 때는 getTime() 함수를 사용합니다.

getTime()함수를 사용하면 1970년 1월 1일 자정부터 지난 밀리 초를 구합니다.

날짜 간격을 구하는 방법 예

var now = new Date();
var before = new Date('December 9, 1991');

// 날짜 간격 구하기
var interval = now.getTime() - before.getTime();
interval = Math.floor(interval / (1000 * 60 * 60 * 24));

console.log('interval: ' + interval + '일'); // interval: 11152일

위 코드를 실행하면 날짜 사이의 간격이 구해집니다.

:: Math.floor : 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 정수를 반환합니다.

프로토타입에 날짜 간격을 구하는 메서드 추가 예

Date.prototype.getInterval = function(other) {
    var interval;

    if(this > other) {
        interval = this.getTime() - other.getTime();
    } else {
        interval = other.getTime() - this.getTime();
    }

    return Math.floor(interval / (1000 * 60 * 60 * 24));
};

var now = new Date();
var before = new Date('December 9, 1991');

console.log('Interval: ' + now.getInterval(before) + '일'); // Interval: 11152일

오늘, 하루 전, 날짜 구분하기 예

// 오늘날짜 2022년 06월 21일
Date.prototype.getInterval = function(other) {
    var output;
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();

    if(date.toDateString() === other.toDateString()) {
        output = '오늘';
    } else if(other.getMonth() + 1 === month && other.getDate() + 1 === day) {
        output = '하루 전';
    } else {
        output = other.toLocaleString();
    }
    return output;
};
var date2 = new Date();
var before = new Date(2022, 5, 21);

console.log(date2.getInterval(before)); // 오늘

Array 객체

Array객체는 여러가지 자료를 쉽게 관리할 수 있게 도와주는 객체입니다.

생성

Array객체는 생성자 함수로 생성합니다.

Array객체는 아래처럼 총 네 가지 방법으로 생성할 수 있습니다.

Array 객체 생성 예

var array1 = [1, 2, 3, 4, 5];
var array2 = new Array();
var array3 = new Array(10);
var array4 = new Array(1, 2, 3, 4, 5);

속성과 메서드

배열은 몇 개의 요소가 있는지 나타내는 length속성이 있습니다.

Array 객체의 속성

Array 객체의 length 속성 예

var array = ['A', 'B', 'C', 'D'];

var output = '';

for(var i = 0; i < array.length; i++) {
    output += i + ' : '  + array[i] + '\n';
}

console.log(output);
/*
0 : A
1 : B
2 : C
3 : D
*/

Array 객체의 메서드

* 표시된 메서드는 자기 자신을 변화시킵니다.

sort() 메서드( Array 객체의 메서드를 사용할 때 주의할 점 ) 예

var array = [5, 543, 1, 32432, 111];

array.sort();

console.log(array); // 1, 111, 32432, 5, 543

sort()메서드를 사용하면 모든 요소를 문자열 오름차순으로 정렬합니다. 따라서 위 코드처럼 Array 객체가 '문자열 오름차순'으로 정렬됩니다.

:: 숫자 오름차순이 아닌 문자열 오름차순으로 정렬됩니다.

정렬

Array 객체의 sort()메서드의 정렬 방법에 변화를 주고 싶을 때는 sort()메서드의 매개변수로 함수를 넣어줍니다. sort()메서드의 매개변수로 넣는 함수는 기본적으로 다음과 같이 매개변수 두 개를 받을 수 있어야 합니다.

sort() 메서드 형태

array.sort(function(left, right) {

});

웹 브라우저는 이 함수를 이용해 퀵 소트 또는 머지 소트 같은 정렬을 진행합니다. 간단하게 하면 정렬 기준을 매개변수로 입력한 함수가 리턴하는 숫자의 부호에 따라 정렬 방식이 결정됩니다.

배열의 자료를 정렬하는 경우는 대부분 숫자를 정렬하는 경우가 많으므로 아래 형태를 많이 사용합니다.

위 표처럼 코드를 사용하면 아래코드처럼 숫자 오름차순으로 정렬할 수 있습니다.

sort() 메서드의 정렬 방식 지정 예

var array = [5, 543, 1, 32432, 111];

array.sort(function(left, right) {
    return left - right;
});

console.log(array); // 1, 5, 111, 543, 32432

학생 성적 정렬 예

function Student(name, korean, math, english, science) {
    this.name = name;
    this.korean = korean;
    this.math = math;
    this.english = english;
    this.science = science;

    // 메서드
    this.getSum = function() {
        return this.korean + this.math + this.english + this.science;
    };
    this.getAverage = function() {
        return this.getSum() / 4;
    };
    this.toString = function() {
        return this.name + '\t' + this.getSum() + '\t' + this.getAverage();
    };
}

var students = [];
students.push(new Student('shiro', 99, 67, 78, 55));
students.push(new Student('AAA', 65, 99, 43, 12));
students.push(new Student('BBB', 74, 78, 65, 43));
students.push(new Student('CCC', 12, 33, 86, 55));
students.push(new Student('DDD', 44, 64, 48, 65));
students.push(new Student('EEE', 54, 65, 68, 100));

// 3등까지만 배열에 남기기
students.sort(function(left, right) {
    return right.getSum() - left.getSum();
});
students = students.slice(0, 3);

var output = '이름 \t 총점 \t 평균 \n';
for(var i = 0; i < students.length; i++) {
    output += students[i].toString() + '\n';
}

console.log(output);
/*
이름    총점    평균 
shiro  299    74.75
EEE    287    71.75
BBB    260    65
*/

sort()메서드와 slice()메서드를 사용해서 총점을 내림차순으로 정렬하고 0번째 인덱스부터 세 개만 변수 students에 다시 할당했습니다.

sort()메서드는 정렬한 배열을 리턴하기 때문에, 아래 코드처럼 메서드 체이닝을 사용할 수도 있습니다.

객체 메서드 체이닝 예

// 3등까지만 배열에 남기기 (메서드 체이닝 ver.)
students = students.sort(function(left, right) {
    return right.getSum() - left.getSum();
}).slice(0, 3);

요소 제거

Array객체의 메서드에는 특정 요소를 제거하는 메서드가 따로 없습니다. 대신 splice()메서드를 사용하면 특정 요소를 제거하는 기능을 만들 수 있으며 아래코드처럼 프로토타입에 remove()메서드를 추가하면 배열의 요소를 쉽게 제거할 수 있습니다.

Array 객체의 remove() 메서드 예

// Array 생성자 함수의 프로토타입에 remove()메서드를 추가합니다.
Array.prototype.remove = function(index) {
    this.splice(index, 1);
}

위 코드에서 만든 remove()메서드는 매개변수로 삭제하고자 하는 인덱스를 적으면 되므로 쉽게 사용할 수 있습니다. 반복문으로 특정 조건에 맞는 Array객체의 요소를 제거할 때는 주의사항이 있습니다.

잘못된 Array 객체의 요소 제거 예

// Array 생성자 함수의 프로토타입에 remove()메서드를 추가합니다.
Array.prototype.remove = function(index) {
    this.splice(index, 1);
}

var array = [52, 273, 103, 32, 274, 129];

for(var i = 0; i < array.length; i++) {
    if(array[i] > 100) {
        array.remove(i);
    }
}
console.log(array); // 52, 103, 32, 129

배열의 요소가 제거되면서 인덱스가 앞으로 당겨지기 때문에 이러한 문제가 발생합니다.

1번 요소인 273이 지워지면 2번 요소였던 103이 1번 요소로 바뀌면서 문제가 발생하는 것입니다.

올바른 Array 객체의 요소 제거( 역 for 반복문 ) 예

// Array 생성자 함수의 프로토타입에 remove()메서드를 추가합니다.
Array.prototype.remove = function(index) {
    this.splice(index, 1);
}

var array = [52, 273, 103, 32, 274, 129];

for(var i = array.length - 1; i >= 0 ; i--) {
    if(array[i] > 100) {
        array.remove(i);
    }
}
console.log(array); // 52, 32

String 객체

String객체는 자바스크립트에서 가장 많이 사용하는 내장 객체입니다.

String 객체 생성하기 예

var string = "Hello World";
var stringConstructor = new String("Hello World");

var output = '';
output += typeof (string) + '\n';
output += typeof (stringConstructor) + '\n';
console.log(output);
/*
string
object
*/

기본 속성과 메서드

String객체는 length속성을 갖습니다.

글자 수를 이용하는 프로그램은 굉장히 많이 있습니다.

String 객체의 length 속성

var char = prompt("비밀번호를 입력해주세요", "6글자 이상");

if(char.length < 6) {
    alert("6글자 이상 입력해주세요.");
} else {
    alert("로그인되었습니다.");
}

위 코드를 실행하면 사용자에게 문자열을 입력받고 5글자까지는 "6글자 이상 입력해주세요." 경고창을 출력하고, 6글자 이상이면 "로그인되었습니다" 경고창을 출력합니다.

String객체는 속성이 하나밖에 없지만 메서드는 굉장히 많습니다. String객체의 메서드는 크게 기본 메서드와 HTML관련 메서드로 구분됩니다.

String 객체의 메서드

잘못된 String 객체의 메서드 사용 예

var string = 'abcdasdf';

string.toUpperCase();
console.log(string); // abcdasdf

올바른 String 객체의 메서드 사용 예

var string = 'abcdasdf';

string = string.toUpperCase();
console.log(string); // ABCDASDF

위 코드를 실행하면 대문자를 출력합니다.

HTML 관련 메서드

HTML 관련 메서드는 자기 자신을 변화시키지 않고 리턴합니다.

메서드 체이닝

자바스크립트의 기술 중 메서드 체이닝(Method Chaining)이라는 기술이 있습니다.

간단하게 메서드를 줄줄이 사용한다는 뜻입니다.

기본적인 메서드 사용 예

var string = "Hello World";

string = string.toLowerCase();
string = string.substring(0, 7);
string = string.anchor('name');

console.log(string); // <a name="name">hello w</a>

String객체의 메서드들은 자기 자신의 내용을 바꾸지 않고 리턴하므로 조금 귀찮지만 이렇게 사용합니다.

자기 자신을 바꾸지 않는 이유는 여러가지가 있지만 메서드 체이닝을 그 이유 중 하나로 들 수 있습니다. String객체의 메서드를 사용하면 String객체를 리턴하므로 아래코드처럼 연속해서 메서드를 사용할 수 있습니다.

메서드 체이닝

var string = "Hello World";

string = string.toLowerCase().substring(0, 7).anchor('name');

console.log(string); // <a name="name">hello w</a>

String객체의 메서드를 체이닝한다고 String객체의 메서드만 사용할 수 있는 것은 아닙니다. 예를 들어 String 객체의 charCodeAt()메서드를 사용하면 Numer객체를 리턴하므로, 곧바로 Number객체의 메서드로 체이닝할 수도 있습니다.

Number 객체

Number객체는 자바스크립트에서 가장 단순한 객체로 숫자를 표현할 때 사용합니다.

Number 객체 생성 예

var number = 100;
var numberConstructor = 100;

console.log(typeof (number)); // number
console.log(typeof (numberConstructor)); // number

메서드

Number객체는 Object객체가 갖는 일곱 가지 메서드는 물론이고 아래 메서드를 추가로 갖습니다.

위 표의 메서드는 모두 매개변수로 숫자를 하나 입력받습니다. toPrecision()메서드는 유효 숫자의 자릿수를 의미하며, 그 외에 메서드는 소수점 몇째 자리까지 나타낼 것인지를 의미합니다.

세 메서드 모두 비슷한 기능을 수행합니다.

Number 객체의 메서드 예

var number = 100.235456;

var output = '';
output += number.toFixed(1) + '\n';
output += number.toFixed(4);

console.log(output);
/*
100.2
100.2355
*/

직접 호출하기 예

var number = (100.235456).toFixed(2);
console.log(number); // 100.24

변수 안에 숫자를 넣지 않아도 메서드를 사용할 수 있습니다.

생성자 함수의 속성

생성자 함수의 속성과 메서드 생성 예

function Constructor() {}
Constructor.property = 222;
Constructor.method = function() {};

console.log(Constructor.property); // 222

위 코드를 실행하면 property속성을 정상적으로 출력합니다. 이렇게 함수는 속성과 메서드를 가질 수 있습니다.

Number생성자 함수도 아래처럼 속성과 메서드가 있습니다.

Number 생성자 함수의 속성 표

Number 객체의 MAX_VALUE 속성 예

var number = Number.MAX_VALUE + 1;

console.log(number); // 1.7976931348623157e+308

최대 숫자에 1을 더해도 출력에 Infinity를 출력하지 않고 '1.7976931348623157e+308'라는 결과를 출력했습니다.

이 결과는 실제로 1을 더한 것이 아닙니다.

지수 표기로 전환됐을 때는 적어도 아래 코드만큼의 수치를 더해야 1을 더한 것이 됩니다.

Number.MAX_VALUE에서 Infinity로 변환 예

var addNumber = Number('0.0000000000000001e+308');
var number = Number.MAX_VALUE + addNumber;

console.log(number); // Infinity

자바스크립트는 1.7976931348623157e+308까지 나타낼 수 있기 때문에 그 이후부터는 무한한 양의 숫자로 인식합니다.