[JavaScript] 자바스크립트 for of, for in 문법이 새로 나온 이유

Study/JavaScript

[JavaScript] 자바스크립트 for of, for in 문법이 새로 나온 이유

김만두_ 2022. 11. 28. 09:52

JavaScript의 forEach, for of, for in의 차이

자바스크립트의 반복문에는 네가지 형태가 있다.

let array = ['가', '나', '다', '라']

// 기본 for 문
for( let i = 0 ; i < array.length ; i++ ){
	console.log(array[i])
}
// 가 나 다 라 출력.

// forEach
array.forEach(function(j){
	console.log(array[j])
})
// undefined 네개 출력

// for of
for( let k of array ){
	console.log(array[k])
}
// undefined 네개 출력

// for in
for( let z in array ){
	console.log(array[z])
}
// 가 나 다 라 출력

그 형태가 언듯 보기에 비슷해 보여 값도 같을 것 같지만, 실제로 출력 된 값은 다르다.

기존 for 문과 for in은 반복변수에 index를 리턴하지만, forEach와 for of 는 해당 값을 리턴한다.

forEach와 for of는 배열의 반복에 사용 된다.

하지만 기존의 forEach는 callback 함수가 필요하기 때문에 이 수고를 줄이기 위해 등장한 같은 기능이 for of 이다.

for

어떤 특정한 조건이 거짓(false)가 될 때까지 반복문을 수행

//형태
for ( 초기문 , 조건문 , 증감문 ) { 수행할 것 }

// 초기문 : 보통 0이나 반복문 카운터로 초기 설정
// 조건문 : 조건문이 true일 경우 계속 실행, false일 경우 종료
// 증감문 : 초기문에서 작성한 카운터가 for문이 반복될 때마다 증감

장점 1. 가장 빠르다.

장점 2. 모든 자료형에 대해 사용이 가능하다.

장점 3. 반복문 건너뛰기 (continue), 종료 (break) 가 가능하다.

장점 4. 변수 활용이 가능하다.

forEach

ES5 문법

주어진 함수를 배열 요소 각각에 대해 실행하게 된다.

건너뛰기(continue), 종료(break)가 불가능하다.

// 형태

array.forEach(callback(currentValue[, index[, array]])[,thisArg])

// callback : 각 요소에 대해 시행할 함수. 다음 세가지 매개변수를 받음.
// currentValue : 처리할 현재 요소
// index : 처리할 현재 요소의 인덱스
// array : forEach()를 호출한 배열
// thisArg : callback을 실행할 때 this로 사용할 값

// 반환값 : undefined

장점 1. 코드가 한눈에 보기 쉽고 간결하다.

장점 2. 성능 준수

장점 3. 여러 기본 매개변수를 통해 활용도가 높다.

for in

객체의 열거 속성을 통해 지정된 변수를 반복하기 때문에 객체에 접근해서 객체의 값들을 활용할 수 있다.

객체에 접근해야 하는 만큼 for 반복문들 중 가장 속도가 느리다.

또한 임의의 순서로 반복하기 때문에 인덱스 순서가 중요한 객체에는 사용 할 수 없다.

// 형태

for (let variable in object){ 수행할 것들 }

// variable : 변수
// object : 객체

장점 1. 간결하게 작성

장점 2. 객체에 쉽게 접근하여 반복문을 수행

장점 3. 건너뛰기 (continue), 종료 (break) 가 가능하다.

장점 4. 디버깅을 위해 사용 될 수 있음

질문. 열거가 가능하지 않은 속성이란 말이 무엇인 지 이해가 어려움

for...in문은 열거 가능한 non-Symbol 속성에 대해서만 반복합니다.
Array나 Object 등 내장 constructor를 통해 만들어진 객체는 String의 indexOf(), Object의 toString()와 같이 Object.prototype, String.prototype 로부터 열거가 가능하지 않은 속성들을 상속해왔습니다. for...in문은 객체 자체의 모든 열거 가능한 속성들과 프로토타입 체인으로부터 상속받은 속성들에 대해 반복할 것입니다. (더 가까운 프로토타입의 속성들이 프로토타입 체인 객체로부터 더 멀리 떨어진 프로토 타입의 속성보다 더 우선합니다.)

for in

ES6에 추가된 새로운 반복문

반복 가능한 모든 객체에 수행 가능해 문자열을 입력하여도 하나하나 꺼내서 수행 할 수 있다.

// 형태

for( let variable of iterable ) { 실행할 것 }

// variable : 변수
// interable : 열거가능한 속성이 있는 객체

장점 1. 반복 가능한 객체에 대해 간결하게 코드 작성 가능

장점 2. 건너뛰기 (continue), 종료 (break) 가 가능하다.