JavaScript - 기본 내장 객체 심화

ECMAScript 5부터 추가된 메서드를 다룬다.

Array 객체

메서드 이름	설명
Array.isArray()	배열인지 아닌지를 확인한다.

typeof 키워드로 Array 객체의 자료형을 확인하면 Object로 나온다. 따라서 Array 객체임을 확인하려면 construct() 메서드로 자료형을 비교하는 방법을 응용하는 식으로 확인을 하게 되는데 그런 귀찮은 방법을 이용하지않고 위의 메서드를 사용하면 해당 변수가 Array 객체 인지 쉽게 ture와 false로 표기되어 알 수 있다.

// true 출력 alert(Array.isArray([1, 2, 3])); // false 출력 alert(Array.isArray({})); // false 출력 alert(Array.isArray(1)); // true 출력 let array=[1, 2, 3, 4, 5]; alert(Array.isArray(array));

탐색 메서드는 특정 요소를 앞쪽 또는 뒤쪽부터 검색하는 기능이다.

메서드 이름	설명
indexOf()	특정 요소를 앞쪽부터 검색한다.
lastIndexOf()	특정 요소를 뒤쪽부터 검색한다.

메서드를 실행하려면 메서드에 매개변수를 검색하려는 Array 객체를 입력하고 내부에 해당되는 요소가 존재한다면 인덱스를 반환하고, 없다면 -1을 반환한다.

let array=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1]; // 3 반환 alert(array.indexOf(4)); // -1 반환 alert(array.indexOf(11)); // 10 반환 alert(array.lastIndexOf(1)); // -1 반환 alert(array.lastIndexOf(0));

indexOf()는 앞쪽부터 검색을 시작하고, lastIndexOf()는 뒤쪽부터 검색을 시작한다.

반복 메서드는 아래과 같다.

메서드 이름	설명
forEach()	배열의 요소를 사용해 for in 반복문과 같이 실행한다.
map()	기존의 배열에 특정 규칙을 적용해 새로운 배열을 만든다.

forEach() 메서드는 jQuery의 each() 메서드와 유사하다.

forEach() 메서드

let array=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; let sum=0; let result=''; array.forEach(function(element, index, array){      sum+=element;      result+=index+' : '+element+' -> '+sum+'\n'; }); alert(result);

매개변수로 입력 함수에 배열의 요소와 관련된 정보를 넣고 반복한다. forEach()메서드의 매개변수로 입력한 함수는 매개변수로 'element', 'index' 그리고 'array'가 있다.

1. element는 현재 반복에서 배열의 요소
2. index는 현재 반복에서 요소의 인덱스 
3. array는 현재 반복을 수행하는 배열 자체

map() 메서드는 각 배열의 각 요소를 변경해 새로운 배열을 반환하게 해준다.

map() 메서드

let array=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; let result=array.map(function(element){      return element*element; }) alert(result);

map() 메서드의 입력 함수는 forEach() 메서드와 다르게 매개변수로 element(요소)만을 받고, 받은 각각의 요소를 함수안에서 바꾼후 반환을 하는데 위의 코드는 받은 각각의 요소들을 제곱하고 반환하게 만들어 준다.

조건 메서드는 아래와 같다.

메서드 이름	설명
filter()	특정 조건을 만족하는 요소를 모아 새로운 배열을 만든다.
every()	배열의 요소가 특정 조건을 모두 만족하는지 확인한다.
some()	배열의 요소가 특정 조건을 하나라도 만족하는지 확인한다.

filter() 메서드

let array=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; array=array.filter(function(element, index, array){      return element <=5; }) // array=[1, 2, 3, 4, 5]로 바뀜 alert(array);

filter() 메서드나 바로 아래 나올 every() 메서드와 some() 메서드는 forEach() 메서드 처럼 매개변수로 'element', index 그리고 'array'를 넣는다. 또한 조건 메서드들은 Boolean 자료형 값으로 반환을 한다. every() 메서드는 모든 요소가 조건에 대해 true라면 true를 하나라도 false라면 false를 반환하고, some() 메서드는 모든 요소가 조건에 대해 하나라도 true라면 true를 반환한다.

every() 메서드 & some() 메서드

let array=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; function lessThanFive(element, index, array){      return element <5; } function lessThanEleven(element, index, array){      return element <11; } // array 배열에 5보다 작지 않은 요소가 있기 때문에 false출력 let result1=array.every(lessThanFive); // arrey 배열에 요소는 모두 11보다 작기 때문에 true 출력 let result2=array.every(lessThanEleven); // array 배열에 5보다 작지 않은 요소가 적어도 1개 존재하기 때문에 true 출력 let result3=array.some(lessThanFive); // array 배열에 요소는 모두 11보다 작기 때문에 true 출력 let result4=array.some(lessThanEleven); let summery=''; summery+='every() 메서드 : '+result1+' : '+result2+'\n'; summery+='some() 메서드 : '+result3+' : '+result4+'\n'; console.log(summery);

위에서 보았던 메서드 들은 모두 for in 반복문과 비슷한 형태를 가진것과는 다르게 연산 메서드는 조금 다르다.

메서드 이름	설명
reduce()	요소가 하나가 될 때까지 왼쪽부터 2개씩 묶는 함수 실행
reduceRight()	요소가 하나가 될 때까지 오른쪽부터 2개씩 묶는 함수 실행

 이 둘은 상당히 복잡한 매개변수를 입력하게 된다.

reduce() 메서드

let array=[1, 2, 3, 4, 5]; let result=''; array.reduce(function(previousValue, currentValue, index, array){      result+=previousValue+' : '+currentValue+' : '+index+'\n'; }) console.log(result);

reduceRight() 메서드

let array=[1, 2, 3, 4, 5]; let result=''; array.reduceRight(function(previousValue, currentValue, index, array){      result+=previousValue+' : '+currentValue+' : '+index+'\n'; }) console.log(result);

위가 reduce() 메서드를 사용한 것이고, 아래가 reduceRight() 메서드를 사용한 결과이다. reduce() 메서드를 쉽게 풀어쓰면 아래와 같다.

Array.reduce(function(누적값, 현재값, 대상 배열의 인덱스, 대상 배열){      reduce() 메서드의 내용 및 return 값 }, 초기값);

reduceRight() 메서드도 위와 동일하다. reduce 함수의 시작은 초기값이고 첫 누적값은 초기값과 같다. 만약 초기값을 넣지 않으면 대상 배열의 0번째 인덱스의 값이 초기값이 된다. 예를 들어 배열안에 있는 값을 모두 합하는 reduce() 메서드를 만들면 아래와 같다.

reduce() 메서드를 이용한 배열의 요소의 전체합

let array=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; let result=0; array.reduce(function(prv, cur, index, array){      return result=prv+cur; },0); // result는 1부터 10까지 더한 55가 출력된다. console.log(result);

위의 코드를 실행하면 배열안에 있는 1부터 10까지의 요소를 전부 합한 결과가 출력이 된다. 표로 정리하면 이렇게 된다.

함수가 호출된 횟수	누적값(또는 초기값)	현재값	인덱스	return값
1	0	1	0	1
2	1	2	1	3
3	3	3	2	6
4	6	4	3	10
5	10	5	4	15
6	15	6	5	21
7	21	7	6	28
8	28	8	7	36
9	36	9	8	45
10	45	10	9	55

위의 코드는 초기값이 0을 넣었기 때문에 함수가 첫 번째로 호출이 될 때의 누적값은 초기값과 같은 0으로 시작이 된다. 그 뒤에 첫 번째 인덱스(0)는 1이기 때문에 현재값은 1이 되고 초기값 0과 현재값 1이 더해져 return값은 1이 되고, 두 번째 호출때 누적값은 1이 되고 두번째 인덱스(1)의 값은 2가 되기 때문에 현재값은 2가 되고 return값은 누적값 1과 현재값 2를 더해 3이 된다. 이런식으로 배열안에 모든 값을 처리하고 마지막에 나온 값을 결과로 55가 나오게 되는 것이다.

String 객체

메서드 이름	설명
trim()	문자열 양쪽 끝의 공백을 제거한다.

간단한 메서드이다. 

let text = ' JavaScript '; //  ** JavaScript ** 출력 console.log('**'+text+'**'); // **JavaScript** 출력 console.log('**'+text.trim()+'**');

기본 내장 객체 심화.html

0.00MB