[JavaScript] 배열의 요소 접근 방법 4가지 정리: for...[of | in], forEach(), map(), filter()

배열(Array)의 요소 접근 방법

자바스크립트에서 배열의 요소에 접근하는 다양한 방법이 있습니다. for of, forEach, map 그리고 filter가 있습니다.

 

for...of 배열의 요소에 순차적으로 접근합니다.

for...of는 배열의 요소에 순차적으로 접근하는 방법입니다.

for...in은 배열의 index 값을 가지니 for...of와 헷갈리지 않도록 조심하셔야 합니다.

var dog = ['말티즈', '콜리', '진돗개'];

for (var i in dog) {
    console.log(i);
}

var dog = ['말티즈', '콜리', '진돗개'];
for (var i of dog) {
    console.log(i);
}

 

 

forEach() 배열의 요소에 순차적으로 접근합니다.

forEach는 배열의 요소에 순차적으로 접근합니다.

파라미터로 value, index, array를 사용할 수 있습니다.

value는 배열의 값을 의미합니다.

index는 배열의 인덱스 값(0부터 시작되는 배열의 인덱스)을 의미합니다.

array는 배열 자기 자신을 의미합니다.

var dog = ['말티즈', '콜리', '진돗개'];
dog.forEach(function(value) {
    console.log("배열에 있는 강아지는 " + value + "입니다");
});

/*
출력:
배열에 있는 강아지는 말티즈입니다
배열에 있는 강아지는 콜리입니다
배열에 있는 강아지는 진돗개입니다
*/

 

map() 기존의 배열을 이용하여 새로운 배열을 생성합니다.

jquery와 ajax에서 map()이 사용됩니다.

파라미터로 value, index, array를 사용할 수 있습니다.

value는 배열의 값을 의미합니다.

index는 배열의 인덱스 값(0부터 시작되는 배열의 인덱스)을 의미합니다.

array는 배열 자기 자신을 의미합니다.

var mapArray = [1, 2, 3];
var mapMulti = mapArray.map(function(value) {
    return value * 10;
});
console.log(mapMulti.toString()); //출력값 10,20,30

filter() 조건에 맞는 배열 요소들만 새로운 배열로 생성합니다.

파라미터로 value, index, array를 사용할 수 있습니다.

value는 배열의 값을 의미합니다.

index는 배열의 인덱스 값(0부터 시작되는 배열의 인덱스)을 의미합니다.

array는 배열 자기 자신을 의미합니다.

var filterArray = [1, 'two', 3, 'four'];

var filterMulti = filterArray.filter(function(value) {
    return typeof value === 'number';
});

console.log(filterMulti.toString()); // 출력: 1, 3