[JavaScript] for, for in, for of

전우석·2024년 3월 25일

JavaScript / jQuery

목록 보기
3/8

for, for in, for of

for

가장 일반적인 루프 방식으로, 조건이 true인 동안 코드 블록을 반복 실행한다.

  • 반복 횟수가 명확할 때 주로 사용된다.
  • 초기화, 조건 검사, 반복 후 작업(보통 인덱스 증가)을 한 구문에 정의한다.
  • 예시:
for (let i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4
}

for ... in

객체의 모든 열거 가능한 속성에 대해 반복한다.

  • 객체의 속성 이름(키)을 순회한다.
  • 배열에 사용할 경우 인덱스를 반환하지만, 순서를 보장하지 않으며 모든 배열의 메서드나 속성을 순회할 수 있다는 점에서 비효율적일 수 있다.
    • 배열의 주소에 접근하기 때문에, for...in 구문 내에서 값이 변경되면 배열의 값도 바뀐다.
  • 예시:
const person = { firstName: "John", lastName: "Doe" };
for (let key in person) {
    console.log(key, person[key]); // "firstName John", "lastName Doe"
}

for ... of

반복 가능한 객체(Array, Map, Set, String 등)를 순회하며 그 값에 대해 실행한다.

  • ES6에서 도입되어, 배열과 같은 컬렉션 전용의 반복 구문이다.
  • for...in과 달리 배열의 값에 직접 접근하여 순서대로 순회한다.
    • 배열의 주소에 접근하지 않기 때문에, 값을 수정해도 수정사항이 배열에 적용되지 않는다.
  • 예시:
const array = [10, 20, 30, 40, 50];
for (let value of array) {
    console.log(value); // 10, 20, 30, 40, 50
}

+Spread Operator (...)

ES6에서 도입된 Spread Operator는 배열이나 객체의 속성을 확장할 수 있게 해주는 연산자이다.

  • 사용 예시:
const nums1 = [1, 2, 3];
const nums2 = [...nums1, 4, 5]; // [1, 2, 3, 4, 5]

0개의 댓글