/ JAVASCRIPT

forEach, for in , for of 문법

JavaScript 관련 글입니다.




이번 글에서는 일반 for문 이외에 forEach, for in, for of 등에 대해서 정리해보겠습니다.

forEach

일단 forEach는 Array에서 사용할 수 있습니다.
Array의 각 요소를 하나씩 반복하게 됩니다.

const arr = [1,2,3];

arr.forEach((item) => {
    console.log(item);
})

forEach() 안에는 콜백함수가 들어가는데 Array의 각 요소가 반복될 때 콜백함수가 호출됩니다. 위의 ‘item’은 반복을 돌면서 각각 1,2,3이 됩니다.

for in

for in 은 Object에서 사용할 수 있습니다.

const object = {
    name : 'kim',
    age : 26,
    gender : 'M'
}

for (let key in object) {
    console.log(object[key]);
}

for in 은 위처럼 사용할 수 있는데, key는 object의 key값이 되고, 반복할 때 마다 key는 name, age, gender가 됩니다.
예시의 결과는 kim, 26, M 이 차례로 출력될 것입니다.



for in 은 enumerable한 것을 출력해줍니다. enumerable은 ‘셀 수 있는’이라는 뜻입니다.

Object를 우리가 만들 때, 입력한 값들만 저장되는 것은 아닙니다.

const obj = { name : 'kim', age : 26 };

console.log( Object.getOwnPropertyDescriptor(obj, 'name') );

Object.getOwnPropertyDescriptor 라는 것을 위처럼 콘솔에 출력해보면 아래와 같이 출력될 것입니다.

{value: "kim", writable: true, enumerable: true, configurable: true}

‘Kim’이라는 값(value) 이외에도 숨겨진 것들이 많이 있습니다. 중간에 enumberable 이라는 속성도 보입니다. 이 속성값이 true인 자료들만 for in 으로 출력됩니다.

class Person { }

Person.prototype.name = 'Kim'; // prototype에 name 추가

const person1 = new Person();

for (let key in person1) {
    console.log(person1[key]);
}

Person 이라는 클래스가 있는데, 이 클래스는 직접적으로 값을 가지고 있지 않은 클래스입니다. 이 Person 클래스의 프로토타입에 name이라는 것을 추가하였고, person1이라는 인스턴스를 생성하였습니다. person1에 대하여 for in 으로 반복문을 돌린 결과, 프로토타입에 추가한 ‘Kim’도 출력된 것을 확인할 수 있습니다.

이렇게 for in 은 프로토타입에 저장된 값도 출력해주는 특징이 있습니다.

for of

for of 는 Array, 문자, Map, Set, NodeList, arguments 등의 자료형에 적용할 수 있습니다.

const arr = [1,2,3,4];

for (let item of arr) {
    console.log(item);
}

위처럼 for of 를 사용할 수 있습니다.
item은 arr를 반복하면서 1,2,3,4 가 됩니다.

const string = 'apple';

for (let item of string) {
    console.log(item);
}

위에서 언급했듯이 문자열에도 for of를 사용할 수 있고, Map, Set, NodeList, arguments 등의 자료형에 적용할 수 있습니다.



End.