forEach(), for of, for in, map()을 알아보자

새롭게 배운 배열 데이터 불러오기

• 배열은 인덱스를 가지는 복수의 자료를 저장할 수 있는 자료구조 입니다.
• 데이터는 순차적으로 저장되며 중복이 가능합니다.
• 저장된 데이터에는 인덱스를 이용하여 접근이 가능합니다.

 

자바스크립트에서 배열의 사용법을 알아보겠습다.

 

---

01. 배열 : 데이터 불러오기 : forEach()

forEach문을 사용해 배열값을 실행하는 방법입니다.

 

{
    const num =[100,200,300,400,500];

    num.forEach(function(element){
        document.write(element);
    });
}


// 결과 : 100 200 300 400 500

forEach

forEach 메서드도 배열을 순회하기 위해 사용되지만,

기본적인 for 반복문과는 다른 방식으로 함수를 사용합니다.

 

forEach 메서드는 다음 매개변수(parameter)와 함께 배열의 각 요소에 적용하게 될 콜백 함수(callback function)를 전달합니다.

 

• Current Value (명명된 매개변수) - 처리할 현재 요소
• Index (선택적 매개변수) - 처리할 현재 요소의 인덱스
• Array (선택적 매개변수) - forEach 메서드를 호출한 배열

 

forEach : 화살표 함수

num.forEach((el) => {
	document.write(el);
});


// 결과 : 100 200 300 400 500

 

forEach : 화살표 함수 : 괄호 생략

num.forEach(el => {
	document.write(el);
});


// 결과 : 100 200 300 400 500

 

forEach : 화살표 함수 :  중괄호 생략

num.forEach(el => document.write(el));


// 결과 : 100 200 300 400 500

 

forEach (값, 인덱스, 배열)

num.forEach(function(element, index, array){
	document.write(element);
	document.write(index);
	document.write(array);
})


// 결과 : 100 0 100,200,300,400,500
// 	    200 1 100,200,300,400,500
//	    300 2 100,200,300,400,500
//	    400 3 100,200,300,400,500
//	    500 4 100,200,300,400,500

 

---

02. 배열 : 데이터 불러오기 : for of

for of문은 요소값을 불러오는 방법입니다.

 

for...of 명령문은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다.

{
    const arr = [100,200,300,400,500];

    for(let i of arr){
        document.write(i);
    }
}


// 결과 : 100 200 300 400 500

 

---

03. 배열 : 데이터 불러오기 : for in

for in문은 index값을 불러오는 방법입니다.

 

for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (Symbol로 키가 지정된 속성은 무시합니다.)

 

{
    const arr = [100,200,300,400,500];

    for(let i in arr){
        document.write(i);
    }
}


// 결과 : 01234

 

---

04. 배열 : 데이터 불러오기 : map()

map을 사용해 데이터를 불러오는 방법입니다.

 

Map 객체는 키-값 쌍과 키의 원래 삽입 순서를 기억합니다.

모든 값(객체 및 원시 값 모두)은 키 또는 값으로 사용될 수 있습니다.

{
    const num = [100,200,300,400,500];

    num.map(function(el, i, a){
        console.log(el);
        console.log(i);
        console.log(a);
    });
}


// 결과 : 100 0 100,200,300,400,500
// 	    200 1 100,200,300,400,500
//	    300 2 100,200,300,400,500
//	    400 3 100,200,300,400,500
//	    500 4 100,200,300,400,500

map()

• map 객체는 키-값 쌍인 집합이다.
• 한 map에서의 키는 오직 단 하나만 존재 합니다. 이는 map 집합의 유일성이다.
• map 객체는 키-값 쌍으로 반복됩니다.
• for...of 루프는 각 반복에 대해 [key, value]로 이루어진 멤버가 2개인 배열을 반환합니다. 반복은 삽입한 순서대로 발생합니다. 즉, set() 메서드로 맵에 처음 삽입한 각각의 키-값 쌍 순서와 대응됩니다.

forEach와 map()의 차이점

forEach()가 배열 요소마다 한 번씩 주어진 함수(콜백)를 실행하는 것과 달리,
map()은 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과를 모아 새로운 배열을 반환한다는 특징을 가지고 있다.