배열을 순회하면서 각 요소에 접근하는 일은 자바스크립트에서 흔한 작업입니다. 이때, 배열 요소의 인덱스를 활용하면 더욱 편리한 코드를 작성할 수 있습니다. 이번 포스트에서는 자바스크립트에서 배열을 순회하며 인덱스를 활용하는 방법을 알아보겠습니다.

for문을 이용한 인덱스 활용

가장 기본적인 방법은 for문을 사용하여 배열의 인덱스에 접근하는 방법입니다. 아래 예제 코드를 살펴봅시다.

const array = [10, 20, 30, 40, 50];

for (let i = 0; i < array.length; i++) {
  console.log(`Index: ${i}, Value: ${array[i]}`);
}

위 코드의 출력 결과는 아래와 같습니다.

Index: 0, Value: 10
Index: 1, Value: 20
Index: 2, Value: 30
Index: 3, Value: 40
Index: 4, Value: 50

for문을 이용하여 배열의 인덱스에 접근하여 값을 가져올 수 있습니다. 이를 활용하여 다양한 작업을 수행할 수 있습니다.

forEach 메소드를 이용한 인덱스 활용

ES6 이후부터는 forEach 메소드를 활용하여 배열을 순회하는 방법이 자주 사용됩니다. forEach 메소드에는 배열 요소와 함께 콜백 함수를 전달하면서 인덱스 파라미터를 활용할 수 있습니다. 아래 예제 코드를 살펴봅시다.

const array = [10, 20, 30, 40, 50];

array.forEach((value, index) => {
  console.log(`Index: ${index}, Value: ${value}`);
});

위 코드의 출력 결과는 아래와 같습니다.

Index: 0, Value: 10
Index: 1, Value: 20
Index: 2, Value: 30
Index: 3, Value: 40
Index: 4, Value: 50

forEach 메소드를 이용하면 for문과 비교하여 코드가 간결해지는 장점이 있습니다.

map 메소드를 이용한 인덱스 활용

map 메소드는 배열을 순회하면서 각 요소에 대해 지정된 함수를 실행하고, 그 결과로 새로운 배열을 생성합니다. 이때, 콜백 함수에는 배열 요소와 함께 인덱스를 전달받을 수 있습니다. 아래 예제 코드를 살펴봅시다.

const array = [10, 20, 30, 40, 50];

const newArray = array.map((value, index) => {
  return `${value} at index ${index}`;
});

console.log(newArray);

위 코드의 출력 결과는 아래와 같습니다.

[ '10 at index 0', '20 at index 1', '30 at index 2', '40 at index 3', '50 at index 4' ]

map 메소드를 이용하면 각 요소의 인덱스를 활용하여 원하는 형태의 새로운 배열을 생성할 수 있습니다.

정리

이번 포스트에서는 자바스크립트에서 배열을 순회하면서 인덱스를 활용하는 방법을 알아보았습니다. for문, forEach 메소드, map 메소드를 이용하여 각각의 방식으로 인덱스를 활용할 수 있습니다. 이를 통해 자바스크립트에서 배열을 다룰 때 편리하게 인덱스를 활용할 수 있으며, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.

더 자세한 내용은 MDN 문서를 참고해주세요.