자바스크립트 배열(Array) 순회

 

"배열의 각 요소에 접근하고 작업을 수행하는 것은 프로그래밍에서 흔한 작업입니다.

자바스크립트에서 배열을 효과적으로 순회하는 방법을 알아봅니다."

 

for문을 사용한 배열 순회

가장 전통적이고 기본적인 방법인 for문 입니다.

const arr = ['a', 'b', 'c', 'd', 'e'];

for(let i = 0; i < arr.length; i++) 
{
  console.log(arr[i]);
}

 

forEach 메서드를 사용한 배열 순회

forEach 메서드는 콜백 함수를 인자로 받아서 배열의 각 요소에 대해 콜백 함수를 실행합니다.

순회 중인 요소값, 인덱스, 원본 배열을 쉽게 활용 할 수 있습니다

const arr = ['a', 'b', 'c', 'd', 'e'];

// 값 출력
arr.forEach((value)=>{
  console.log(value) // 'a', 'b', 'c', 'd', 'e'
})

// 인덱스 출력
arr.forEach((value, index)=>{
  console.log(index) // 0, 1, 2, 3, 4
})

// 배열 원본 출력
arr.forEach((value, index, array)=>{
  console.log(array) // ['a', 'b', 'c', 'd', 'e']
})

 

for of 문을 사용한 배열 순회

ES6부터 도입된 for of문은 전통적인 for문 보다 간결하게 작성할 수 있습니다.

인덱스가 필요한 경우에는 사용을 고려해야 합니다.

const arr = ['a', 'b', 'c', 'd', 'e'];

for (let value of arr) {
  console.log(value); //'a', 'b', 'c', 'd', 'e'
}

 

map 메서드를 사용한 배열 순회

map 메서드는 배열을 순회하면서 새로운 배열을 생성할 때 주로 사용됩니다

아래 코드는 arr 배열에 있는 소문자 요소들을 대문자로 바꿔서 uppercaseArr로 리턴하는 코드 입니다.

const arr = ['a', 'b', 'c', 'd', 'e'];
const uppercasedArr = arr.map((arr)=> {
  return arr.toUpperCase();
});

console.log(uppercasedArr); // ['A', 'B', 'C', 'D', 'E']

 

마무리

개인적으로는 전통적인 for문을 가장 선호합니다.

배열의 요소를 다루는 과정에 변경이 생겨도 쉽게 대응이 가능하기 때문입니다.

그리고 무엇보다 성능이 가장 우수하다고 알려져 있습니다.

그렇다고 성능 차가 크게 나는 것은 아니기에 코드의 간결성이나 편의성에 따라서 적절한 방법을 사용하면 됩니다.