JSON 배열은 자바스크립트에서 데이터를 저장하고 전송하기 위해 널리 사용됩니다. 이러한 JSON 배열을 순회하면서 필요한 데이터를 추출하거나 조작할 수 있습니다. 자바스크립트에서 JSON 배열을 순회하는 방법에 대해 알아보겠습니다.

1. for문을 사용한 순회

가장 간단하고 기본적인 방법은 for문을 사용하여 JSON 배열을 순회하는 것입니다. 아래는 예시 코드입니다.

const jsonArr = [
  { name: 'John', age: 25 },
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 35 }
];

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

위 코드에서는 for문을 사용하여 jsonArr 배열을 순회하고 각 요소의 name 속성을 출력합니다. 이 방법은 간단하고 직관적이지만, 배열의 길이를 다시 계산해야 하기 때문에 성능적인 측면에서는 조금 비효율적입니다.

2. forEach 메서드를 사용한 순회

ES5 버전부터 지원되는 forEach 메서드를 사용하면 더 간편하게 JSON 배열을 순회할 수 있습니다. 아래는 예시 코드입니다.

const jsonArr = [
  { name: 'John', age: 25 },
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 35 }
];

jsonArr.forEach(obj => {
  console.log(obj.name);
});

위 코드에서는 forEach 메서드를 호출하여 jsonArr 배열을 순회하고 각 요소의 name 속성을 출력합니다. 이 방법은 배열의 길이를 계산하지 않아도 되기 때문에 편리하고 성능도 더 좋습니다.

3. for…of 루프를 사용한 순회

ES6 버전부터 도입된 for...of 루프를 사용하여 JSON 배열을 순회할 수도 있습니다. 아래는 예시 코드입니다.

const jsonArr = [
  { name: 'John', age: 25 },
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 35 }
];

for (const obj of jsonArr) {
  console.log(obj.name);
}

위 코드에서는 for...of 루프를 사용하여 jsonArr 배열을 순회하고 각 요소의 name 속성을 출력합니다. 이 방법도 forEach 메서드처럼 편리하고 성능도 우수합니다.

4. map 메서드를 사용한 순회

map 메서드를 이용하면 새로운 배열을 생성하거나 기존 배열을 변형하는 작업을 할 수 있습니다. 아래는 예시 코드입니다.

const jsonArr = [
  { name: 'John', age: 25 },
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 35 }
];

const names = jsonArr.map(obj => obj.name);
console.log(names);

위 코드에서는 map 메서드를 호출하여 jsonArr 배열을 순회하고 각 요소의 name 속성을 추출하여 새로운 배열에 저장합니다. 새로운 배열 names는 [ 'John', 'Alice', 'Bob' ]와 같이 출력됩니다. 이 방법은 배열의 요소를 변형하고 싶을 때 유용하게 사용할 수 있습니다.

이렇게 자바스크립트에서 JSON 배열을 순회하는 다양한 방법을 소개했습니다. 각각의 방법은 용도와 상황에 따라 선택하여 사용하면 됩니다.