JavaScript - ForEach, For in 그리고 For of

updated 2021/05/04

신입사원 두달 차, 전통적인 For문을 사용하다 옛날 방식이라는 소리를 들었다. 그래 ! 이참에 for문 세계에 깊숙히 입문해봐야겠다.

처음엔 전통적인 for문도 감지덕지였지만ㅠㅠ, 이제는 for문 세계의 자매품 같은.. 느낌의 메소드들을 만나보자

간장, 국간장, 진간장느낌이랄까 

 

한마디로 for문하고 용도는 똑같지만 타자를 적게친다 이말이다. 

 

forEach 문

얘는 Array 배열에서만! 사용가능한 반복문이다. 원소를 나열하여 검사하는 기능이 있다.

화살표 함수를 사용하여 각 원소들을 element라는 변수에 담아 forEach문을 돌면서 실행한다. 

 

기본적인 사용 방법이다.

 

전통적인 for문 대신 인덱스# 가 들어간 수식을 사용하고 싶을 때 사용한다.

 

전통적인 for 문을 사용해봤다.

뭔가 더 길다

 

for in 문

객체나 배열의 원소를 하나하나 검사할 때, for문 대신 간편하게 for in 문을 사용한다. (향상된 for문이라고도 한다.)

 

객체의 for in 문 사용법이다.

콘솔에 각 키의 value를 출력할 때 school[student]처럼 for in 문에 선언된 변수를 인덱스처럼 사용한다는 것이다.  

let school = { name: "John", age: 17, class: A }
for (let student in school) { 
    console.log(student, school[student]); // name John, age 17, class A 
}

 

배열의 for in 문 사용법이다.

for(let i=0; i <students.length; i++) 로 매번 표현을 하는 것보다는 for (let i in school)로 간편하게 표현할 수 있다.

let school = ["서울초등학교", "경기초등학교", "강원초등학교"];
for(let i in school) {
    console.log(school[i]) // 서울초등학교 경기초등학교 강원초등학교
}

 

for of 문 

얘도 for in 문과 마찬가지로 객체나 배열, 문자열 등의 원소를 변수에 담아 하나하나 검사한다. 

다만 for in문과의 차이는 반복문을 돌릴 때, 배열이나 객체같이 원소를 나열할 수 있는 형태가 아닌 애(prototype chain에 의한 Iterable)들은 제외된다. 따라서 순수한 배열 등의 원소만 출력된다. 즉, prototype 속성 안에 들어있는 원소들은 제외된다는 말이다. ex) 일반 함수 등 

 

(내피셜) 처음에 인풋으로 넣는 애들은 for in 보다 < for of 가 더 많다. 하지만 리턴되는 값의 범위는 for in 보다 > for of 가 더 좁은 것 같다.

const array1 = ['a', 'b', 'c'];
 
for (const element of array1) {
  console.log(element);
}