ECMAScript5 - 생성자함수와 객체

ECMAScript

ECMA가 표준화한 JavaScript의 표준안으로 ECMAScript5에서는 몇가지 메서드들이 추가 되었다.

1. 생성자함수의 메서드

메서드	설명
Array.isArray()	배열인지 아닌지 불린값으로 확인

typeof 키워드를 사용해서 Array 객체의 자료형을 확인하면 문자열'object' 가 나온다. 

이때문에 constructor() 메서드를 활용해 자료형 비교를 응용해야 하는데 ECMAScript5를 사용할수 있는 환경이라면 손쉽게 확인해 볼 수 있다.

ex) Array.isArray() 

// 변수 array1 의 배열선언

var array1 = [1,2,4];

// 변수 array2의 함수 선언

var array2 = function(){}

// 변수 array1의 자료형이 배열인지 확인

console.log(Array.isArray(array1));

// 변수 array2의 자료형이 배열인지 확인

console.log(Array.isArray(array2));

2. Array 객체 1 

메서드	설명
filter()	특정 조건을 만족하는 요소를 추출해 새로운 배열을 만든다.
forEach()	배열 각각의 요소를 사용해 특정함수를 for in 문 처럼실행한다.
every()	배열 요소가 특정 조건을 모두 만족하는지 확인
map()	기존 배열에 특정 규칙을 적용해 새로운 배열을 만든다.
some()	배열 요소가 특정 조건을 적어도 하나 만족하는지 확인
indexOf()	특정 요소를 앞쪽부터 검색
lastIndexOf()	특정 요소를 뒤쪽부터 검색
reduce()	배열의 요소가 하나가 될 때까지 요소를 왼쪽부터 두개씩 묶는다.
reduceRight()	배열의 요소가 하나가 될 때까지 요소를 오른쪽 부터 두개씩 묶는다.

array 객체의 메서드들은 모두 for in 반복문과 비슷하게 작동한다. 

forEach(), filter(), every(), some() 메서드는 element, index, array 매개변수를 갖는다. 

element 는 현재 반복에서 배열요소를 뜻하고 

index 는 현재 반복에서 배열요소의 인덱스,

array 는 현재 반복을 수행하는 배열을 뜻한다. 

filter(), every(), some() 메서드는 불린값을 리턴해야한다. 

reduce() 와 redeceRight() 메서드는 previousValue(이전), currentValue(현재), index(인덱스), num(배열)을 매개 변수로 전달한다. 

ex 1) filter()

// 1~5까지의 숫자를 담은 num 배열변수 선언

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

// 변수 nuwNum 선언

var numNum;

// filter()메서드를 사용해서 num 변수의 3 이하의 숫자를 골라 numNum 변수에 담는다.

numNum = num.filter(function(element, index, num){

  return element <= 3;

}); 

// 화면에 numNum 출력

console.log(numNum);

ex 2) forEach() - jQuery의 each() 메서드와 비슷하다. 

// 1~5까지의 숫자를 담은 num 배열변수 선언

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

// sum , print 변수 선언 및 초기화

var sum = 0;

var print = '';

// forEach() 메서드를 이용 num 배열의 인덱스 만큼 반복

num.forEach(function(element, index, num){

  //  sum 변수에 element 를 계속 더 한다.   

  sum += element;

  // print 변수에 인덱스 번호와 해당배열의 요소를 답고 그 합을 담는다. 

  print += index + ':' + element + '=' + sum + '\n';

});

// 화면에 출력

console.log(sum);

ex 3) every() 와 some()

// 배열변수 선언

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

// 함수 aa 선언

function aa (element, index, num){

  // num 변수의 인덱스를 하나씩 검사해서  3보다 작은값을 확인 

  return element < 3;

}

// 함수 bb 선언

function bb (element, index, num){

  // num 변수의 인덱스를 하나씩 검사해서  50보다 작은값을 확인  

  return element < 50;

}

// every() 메서드를 이용 aa 함수를 실행해서 값을 출력

console.log(num.every(aa));

// every() 메서드를 이용 bb 함수를 실행해서 값을 출력

console.log(num.every(bb));

// some() 메서드를 이용 aa 함수를 실행해서 값을 출력

console.log(num.some(aa))

// some() 메서드를 이용 bb함수를 실행해서 값을 출력

console.log(num.some(bb));

every() 메서드는 배열의 모든 요소가 true 이면 true 를 리턴하고 그게 아니면 false 를 리턴한다

some() 메서드는 배열의 요소중 하나라도 true를 리턴하면 모두 true 를 리턴한다. 

ex 4) map()

// 배열변수 선언

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

// print 변수에 num 배열의 map()메서드를 이용 num 배열의 엘리먼트의 재곱을 배열로 리턴한다.

var print = num.map(function(element){

  return element * element;

});

// print 배열 출력

console.log(print);

map() 는 다른 메서드들과 달리 간단한 형태로 element를  매개변수로 담는다.

ex 5) indexOf() 와 lastIndexOf()  

// 배열변수 선언

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

// indexOf() 메서드를 이용 앞쪽부터 검색, num 변수에 3이 있는지 확인

console.log(num.indexOf(3));

// indexOf() 메서드를 이용 앞쪽부터 검색, num 변수에 8이 있는지 확인

console.log(num.indexOf(8));

// lastIndexOf() 메서드를 이용 뒤쪽부터 검색, num 변수에 3이 있는지 확인

console.log(num.lastIndexOf(3));

// lastIndexOf() 메서드를 이용 뒤쪽부터 검색, num 변수에 8이 있는지 확인

console.log(num.lastIndexOf(8));

indexOf()와 lastIndexOf()는 검색하려는 요소가 내부에 있으면 해동 요소가 위치하는 인덱스를 리턴하고 

없으면 -1 을 리턴한다. 

ex 6 - 1 ) reduce()

// 1~5까지의 숫자를 담은 num 배열변수 선언

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

// 변수 print 선언

var print="";

// num배열에 reduce메서드를 이용 왼쪽부터 두개씩묶는다

num.reduce(function(previousValue, currentValue, index, num){

  // print 변수에 이전값, 현재값, 인덱스값을 표기하고 줄바꿈

  print += previousValue + ':' +  currentValue + ':' + index + '\n';

});

// 화면에 출력

console.log(print);

ex 6 - 2 ) reduce() 활용

// 1~5까지의 숫자를 담은 num 배열변수 선언

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

// print 변수에 num 배열에 reduce메서드를 실행 왼쪽부터 두개씩묶는다.

var print= num.reduce(function(previousValue, currentValue, index, num){

  // 이전값과 현재값을 더해서 결과값 반환

  return previousValue + currentValue;

});

// 화면에 print 출력

console.log(print);

reduce() 메서드의 실행순서

ex 7 ) reduceRight() 

// 1~5까지의 숫자를 담은 num 배열변수 선언

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

// print 변수에 num 배열에 reduce메서드를 실행 오른쪽부터 두개씩묶는다.

var print= num.reduceRight(function(previousValue, currentValue, index, num){

  // 이전값과 현재값을 더해서 결과값 반환

  return previousValue + currentValue;

});

// 화면에 print 출력

console.log(print);

reduceRight() 메서드의 실행순서