FRONTEND/JavaScript

for...in 과 for...of

MarkLEE 2021. 4. 19. 18:07

<for...in> ~ 주로 객체에서 사용.

1) 문법 

let object = {firstName: 'Mark', lastName: 'LEE'};

 

for (variable in object){

...

};

 

여기에서 variable 은 객체의 key(즉, firstName, lastName).

object 는 해당 객체자체를 의미하다. 

 

 

예를 들어,

for(let Name in object){

    console.log(Name);

 

    console.log(object[Name]);

    console.log(object);

 

}

을 할 경우,

첫번째 콘솔(Name)에서 firstName, lastName이 나오고,

두번째 콘솔(object[Name])에서 Mark, Lee의 값이 반복적으로 나오게 된다. 

세번째 콘솔(object)에서는 {firstName: "Mark", lastName: "LEE"}가 나오게 된다. 

 

 

 

 

 

<for...of> ~ 주로 string, array, 유사배열에서 사용

1) 문법 

let array = [1, 3, 5, 'apple'];

 

for (variable in iterable){

...

};

 

여기에서 variable은 array의 값(e.g. 1, 3, 5, 'apple')을 의미한다.

iterable은 반복되는 열거가능한 속성이 있는 객체로. 주로 string, array, 유사배열에 사용가능하며, 객체에는 사용이 불가능하다. 

 

예를 들어,

for(let value in array){

    console.log(value);

    console.log(array);

}

 

을 할 경우,

첫번째 콘솔(value)에서 1, 3, 5, apple이 나오고,

두번째 콘솔(array)에서는 [1, 3, 5, 'apple'] 나오게 된다.