데이터 불러오기 부문forEach(), for of, for in, map()

 

01. forEach()

배열 객체의 메서드 중 하나입니다. 이 메서드를 사용하면 배열의 각 요소에 대해 콜백 함수를 실행할 수 있습니다.

array.forEach(function(element, index, array) {
  // 콜백 함수에서 수행할 코드
});

 

element: 현재 처리 중인 배열 요소의 값

index: 현재 처리 중인 배열 요소의 인덱스 값

array: forEach() 메소드를 호출한 배열 자체

 

예를 들어 다음과 같이 사용할 수 있습니다.

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

    str.forEach((element, index, array) =>l {
        document.write(element);
        document.write(index);
        document.write(array);
    });
}

이렇게 되면 str에 지정된 배열 값을 저장된 만큼 반복 실행하여 다음과 같은 값을 만들 수 있습니다.

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

ES6에서 도입된 반복문으로, 배열이나 이터러블 객체의 요소를 순회하는 데 사용되며, 

간결하고 직관적인 코드 작성을 가능하게 합니다.

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

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

for...of 루프는 배열을 다룰 때 매우 편리한데, for...in 반복문과는 달리 인덱스 값 대신 배열의 각 요소를 직접 접근할 수 있기 때문입니다.

 

위의 결괏값 입니다.

100200300400500

 

 

 

03. for in

객체의 속성을 반복하는 유용한 방법입니다 배열에 사용하기보다는 객체에 더 적합합니다.

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

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

결괏값

100200300400500

 

객체의 프로퍼티를 열거할 때 for...in 반복문을 사용하는 경우, 객체의 프로토타입 체인 상에 존재하는 모든 프로퍼티도 함께 열거됩니다.

프로토타입 체인이란, 객체에서 프로퍼티를 찾을 때 해당 객체에 해당 프로퍼티가 없는 경우, 상위 객체(부모 객체)에서 프로퍼티를 찾아 나가는 과정을 의미합니다.

이러한 경우 객체의 메서드가 아닌 상위 객체의 메서드가 중복되어 나타날 수 있습니다. 이를 방지하기 위해서는 hasOwnProperty() 메서드를 사용하여 해당 객체의 프로퍼티인지 확인한 후 열거하는 것이 좋습니다. hasOwnProperty() 메서드는 객체가 특정 프로퍼티를 직접 가지고 있는지 여부를 확인해줍니다.

 

 

 

04. map()

배열 안에 있는 데이터를 다시 배열로 불러오는  중요한 방법이다.

const num = [100, 200, 300, 400, 500];
    
num.forEach(function(el, i, a){
    console.log(el)
    console.log(i)
    console.log(a)
});
num.map(function(el, i, a){
    console.log(el)
    console.log(i)
    console.log(a)
});

 

'map()' 함수는 인자로 콜백 함수를 받습니다. 콜백 함수는 배열 요소 하나씩을 인자로 받고, 이를 변환하여 새로운 배열을 만듭니다. 콜백 함수는 배열 요소의 값을 변환하여 반환하면 됩니다.

예를 들어, 다음과 같은 배열이 있다고 가정해 봅시다.

const newNumbers = numbers.map(number => number + 1);
console.log(newNumbers); // [2, 3, 4, 5, 6]

위의 예제에서 'map()' 함수는 'numbers' 배열의 각 요소에 대해 콜백 함수를 호출하고, 각 요소에 1을 더한 값을 반환하여 'newNumbers' 배열을 만듭니다.

'map()' 함수는 반드시 새로운 배열을 반환하므로, 원본 배열을 변경하지 않습니다. 따라서, 원본 배열을 유지하면서 요소를 변환하고 싶을 때 사용할 수 있습니다.