JavaScript for..in 과 for..of (iteration 문법)

2024. 10. 20. 17:44·JavaScript/이론 & 문법
목차
  1. JavaScript Iteration 문법
  2. for...in
  3. for... of
  4. 정리

JavaScript Iteration 문법

Iteration 문법이란? 반복문법을 의미합니다.

오늘은 JavaScript의 대표적인 반복문인 for..in과 for.. of의 차이점에 특징에 관해서 설명해 볼게요!


for...in

for...in은 열거 가능한 속성(key)을 순회하는 데 사용됩니다.

배열(Array)에도 순회하는데 사용이 가능합니다.

또한 객체(Object)의 속성에 접근할 때에도 사용됩니다.

 

그리고

 

for...in은 객체나 배열의 모든 열거 가능한 속성 이름을 반복합니다.

배열(Array)인 경우에는 인덱스(index)를 순회합니다. - 숫자형(key)을 순회

 

예시)

const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  console.log(key);  // "a", "b", "c"
}

실행 결과

배열로 사용했을 때의 예시)

const arr = [10, 20, 30];
for (let index in arr) {
  console.log(index);  // "0", "1", "2" (인덱스를 출력)
}

실행 결과 - 배열

for... in을 사용할 때 주의할 점

  • for... in은 배열을 순회할때 index 를 출력합니다.
  • 배열의 요소 값을 순회하려면, 해당 index를 사용하여 접근해야 합니다.
  • 배열(Array)에서는 for ... in 보다는 for ... of 가 더 적절합니다.

for... of

for... of는 배열(Array), 문자열(String), Map, Set 등 반복 가능한 객체의 요소들을 순회하는 데 사용됩니다.

배열의 값을 순회하는데 가장 최적화되어있어요.

 

for...in과는 다르게 반복 가능한 객체의 값(value)을 순회합니다!

 

예시)

const arr = [10, 20, 30];
for (let value of arr) {
  console.log(value);  // "10", "20", "30"
}

실행 결과

 

문자열(String) 예시

const str = "Hello";
for (let char of str) {
  console.log(char);  // "H", "e", "l", "l", "o"
}

실행 결과 - 문자열(String)

for... of를 사용할 때 주의할 점

  • for... of는 배열의 값에 바로 접근이 가능합니다.
  • 배열(Array)을 다룰 때 주로 사용합니다.
  • 객체는(Object)는 기본적으로 iterable(반복이 가능) 하지 않습니다.
  • 객체에는 for... of를 사용할 수 없어요!
  • 대신 배열(Array), Map, Set 같은 반복 가능한 자료 구조에서 사용됩니다.

정리

for...in

객체의 속성(key)을 순회할 때 주로 사용합니다. 배열(Array)을 사용할 경우 index를 순회합니다.

 

for... of

배열(Array), 문자열(String), Map, Set 등의 값을 순회할 때 사용합니다.

 

'JavaScript > 이론 & 문법' 카테고리의 다른 글

JavaScript 옵셔널 체이닝 / Optional chaining  (0) 2024.10.21
JavaScript 전개 구문과 구조 분해 할당  (0) 2024.10.21
JavaScript / in 연산자의 사용  (0) 2024.10.20
JavaScript 배열과 배열 생성 방법 / Array  (0) 2024.10.20
JavaScript 객체 생성 방법 / Objects  (0) 2024.10.19
  1. JavaScript Iteration 문법
  2. for...in
  3. for... of
  4. 정리
'JavaScript/이론 & 문법' 카테고리의 다른 글
  • JavaScript 전개 구문과 구조 분해 할당
  • JavaScript / in 연산자의 사용
  • JavaScript 배열과 배열 생성 방법 / Array
  • JavaScript 객체 생성 방법 / Objects
lucainr
lucainr
프로그래밍 기술 및 관심사 공유, 개발자의 성장 목적으로 블로그를 운영하고 있습니다.
  • lucainr
    Luca의 개발 Blog
    lucainr

  • 전체
    오늘
    어제
    • 분류 전체보기
      • 공통
        • Network
        • Security
      • Github
        • 환경설정
        • 이해하기
      • Java
        • Spring Boot
        • 이론 & 문법
        • MyBatis
        • 알고리즘 & 자료구조
        • 에러 노트(Error Note)
        • 웹 어플리케이션(Web Application)
      • DB
        • Oracle DB
        • MySQL & MariaDB
      • JavaScript
        • 이해하기
        • 이론 & 문법
      • HTML & CSS
      • Python
        • 이론 & 문법
        • 에러 노트(Error Note)
      • AWS
      • Linux
      • Docker
      • Side Project
      • 개발 Tip?
        • MacBook(Mac OS)
        • IntelliJ
      • 취미 생활
        • 독서
        • 인사말
        • 나의 생각
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 공지사항

  • 인기 글

  • 최근 글

  • 태그

    for
    자바스크립트
    Web
    ??
    인사말
    Python
    옵셔널체이닝
    javascript
    Array
    optionalchaining
    IN연산자
    전개구문
    null
    구조분해할당
    배열
    undefined
    파이썬
  • hELLO· Designed By정상우.v4.10.0
lucainr
JavaScript for..in 과 for..of (iteration 문법)

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.