map, forEach, for of, ArrowFunction

var arr = [10, 20, 30];

var arr2 = [100, 400, 900];

1. for

for 반복문으로 위 arr2를 출력하는 것인데, arr의 제곱을 출력하는 것이다.

여기서 전체적으로 var를 사용할 것인데, 그 이유는 전첵적으로 같은 변수가 많기 때문에 사용 한 것이다.

var arr2 = [];
for (let i = 0; i < arr.length; i++) {
  arr2.push(arr[i] * arr[i]);
};

 

2. for of ( ES 6 )

for of는 ES6에 나온 문법으로, arr라는 배열을 순회하면서 item에 요소를 할당해주는 것이다. 그래서 arr2라는 빈 배열을 만들고, push를 통해 arr2 배열에 item * item 한 값을 넣어주는 것이다.

var arr2 = [];
for (let item of arr) {
  arr2.push(item * item);
};

 

3. Array.prototype.forEach(), ES5

forEach는 ES5에 나온 배열 메서드로 배열의 각 요소를 순회하면서 콜백 함수를 실행한다. forEach()의 콜백함수는 세 가지 인수를 받을 수 있는데, item은 현재 순회하는 배열의 요소, index는 현재 요소의 인덱스 값, array는 forEach가 호촐된 배열 자체이다.(이는 자주 사용하지 않음)

var arr2 = [];
// index 안쓰면 생략 가능
arr.forEach(function (item, index) {
  arr2.push(item * item);
});

 

4. map, ES6

map은 ES6에 나온 배열 메서드로  각 요소를 순회하면서 콜백함수를 적용한 결과를 새로운 배열로 반환한다. 이는 원본 배열은 변경되지 않으며, 항상 새로운 배열을 반환한다. 그래서 forEach와 달리 push 없이도 바로 결과를 받을 수 있다. React에서 이를 많이 사용할 것이다.

var arr2 = arr.map(function (item) {
  return (item * item);
});

 

5. Arrow function

arrow function은 ES6에서 도입된 함수 표현식의 새로운 형태로, 기존의 함수 선언 방식과 달리 좀 더 간결하고 직관적으로 작성이 가능하다. 특히 콜백 함수나 간단한 연산에 사용하기에 좋다.

아래는 forEach와 map에 대한 arrow function 사용한 예시이다.

// Arrow function, ES6
var arr2 = [];
arr.forEach((item, index) => arr2.push(item * item));

// map
var arr2 = arr.map(item => (item * item));