[자바스크립트] javascript forEach() 사용하기

[자바스크립트] javascript Array forEach() 사용하기

 

 

 

 

 

 

 

 

 

 

배열의 모든 요소를 순회하는 메소드!

배열을 순회하는 기능만을 가진 메소드라 반환값은 없다! (undefined 로 표시)

 

 

 

 

 

 

 

 

 

[사용법]

 

//화살표 함수 표기법
array.forEach((element, index, array) => { ... });


//콜백함수로 호출하는 법
array.forEach(callbackFn, thisArg);


//익명함수로 표기법
array.forEach(function(element, index, array) {

}, thisArg);

 

 

 

 

 

 

 

 

 

[간단설명]

 

array.forEach() 는 배열을 순환하면서, 모든 요소 각각에 콜백함수를 한 번씩 실행한다.

 

 

 

 

 

 

 

 

 

 

 

[특징]

 

• 값이 존재하지 않거나, delete 된 요소는 콜백함수를 실행하지 않는다.
• forEach() 자체는 원본배열을 변형시키지 않는다. (콜백함수에서 변형시킬 수는 있어도)
• forEach() 의 적용범위는 콜백함수의 첫 호출 직전에 정해진다.
• 만약 앞 순번의 콜백함수가 뒷 순번 요소의 값을 변형시킨다면, 해당 요소의 값은 변경된 채로 콜백함수가 진행된다.

 

 

 

 

 

 

 

 

 

 

 

[주의]

 

• 결과값을 리턴하지 않으므로 결과값은 항상 undefined 이다.
• 앞 순번의 배열 요소가 (shift() 등에 의해서) 사라진다면, 바로 뒤의 요소는 콜백함수의 실행없이 건너뛴다.

 

 

 

 

 

 

 

 

 

 

파라미터(parameter) : 

 

 

callback함수 :
배열의 모든 요소에 실행되어질 함수

 

 

element : 
(순환 중) 현재 처리중인 요소 그 자체

 

index (optional) : 
(순환 중) 현재 처리중인 요소의 index

 

array (optional) : 
forEach() 가 실행되고 있는 원본배열

 

thisArg (optional) : 
callback 함수가 실행중일 때 this로 사용될 값

 

 

 

 

 

 

 

 

 

---

[예제]

 

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


order.forEach((el) => {
    console.log(el);  // [1, 2, 4, 5]
    if(el == 2) order.shift();  // order 의 요소 중, 1 이 지워짐
});


console.log(order)  // [2, 3, 4, 5] 


//order[1]의 순번일 때, order[0] 순번인 1이 shift()로 인해 사라졌으므로,
//[2, 3, 4, 5] 로 변경되어
//3이 새롭게 order[1] 의 순번을 차지하게 됨
//결과적으로 3은 건너뛰어지면서 console.log(el) 에 찍히지 않음

 

---

 

 

 

 

 

 

 

 

 

Keep it going!