[자바스크립트] 반복문 - For in / For of

https://codingralro.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B0%98%EB%B3%B5%EB%AC%B8-forwhile

[자바스크립트] 반복문 - for/while

 

 

자바스크립트의 반복문

자바스크립트에서 기본적인 반복문으로 for, while, do while이 있다.( 위의 링크 참고!!) 이 중에서도 배열과 객체를 순회하면서 특정 코드를 작성할 때에는 for문을 가장 많이 사용을 한다.

 

하지만 해당 for문 배열, 객체 순회 코드를 작성할 때, 불편한 느낌을 받는 경우가 종종 있다. 예를 들어, 배열을 순회하면서 여러 배열의 요소의 접근하기 위해서는 대괄호 표기법과 인덱스를 통해 접근해야 하는 번거로움이 있다.

 

이러한 불편함을 해소해주고자 자바스크립트에서 등장한 문법이 for in, for of 반복문이다. 

// simple example
const arr = [2, 3, 1, 4, 5];

// for문을 이용하여 제일 큰 수 찾기
let max = -Infinity;
for(let idx = 0; idx < arr.length; idx++) {
    if(arr[idx] > max) {
        max = arr[idx];
    }
}
console.log(max); //5


// for of문 사용
max = -Infinity;
for(val of arr) {
    if(val > max) {
        max = val;
    }
}
console.log(max); //5

 

코드가 훨씬 간결해지면서도 가독성 또한 좋아지는 것을 볼 수 있다. 구체적으로 어떻게 사용하는지 알아보자.

 

 

 

for in

for in 반복문은 객체 자료형에 자료들을 하나씩 꺼내고 싶을 때 사용한다. 기본 구문은 아래와 같다.

for( [할당받을 변수명]   of  [순회할 객체]  ) {   }

 

이 때에 변수명에 들어가는 값은 순회할 객체의 key 값이다. for of문을 통해 객체를 순회하면서 객체가 가지고 있는 키값을 변수명에 계속 할당하는 것이다. 이를 이용하여 간단하게 객체 순환 코드를 작성하면 아래와 같다.

// for in
// 객체에 주로 사용
const person = {
    name : 'kim',
    age : 26,
    city : 'Seoul'
}

for(key in person) {
    console.log(`key : ${key}  value : ${person[key]}`);
}

//결과
//key : name  value : kim
//key : age  value : 26
//key : city  value : Seoul

 

이 때 주의할 점으로는 할당 받은 key 값을 통해 해당 객체의 value 값에 접근을 할 때에는 객체의 접근법 중 대괄호 표기법을 통해서만 가능하다. 왜냐하면 key값을 문자열 타입으로 할당 받기 때문에 점표기법은 사용할 수 가 없다.

 

 

 

for in 특징

enumerable한 프로퍼티만 순회

for in 반복문은 객체의 프로퍼티 중 enumerable 속성이 true인 프로퍼티만 순회한다. enumerable 속성은 객체 자료형을 만들 때 부여되는 숨겨진 속성 중 하나로 열거 가능하게 하는 속성이다. 해당 속성을 확인해보면 true인 것을 확인할 수 있다.

// enumerable
// 객체 프로퍼티의 숨겨진 속성 중 하나
// 열거가능하게 하는 속성 => for in 순회 가능
// Object.getOwnPropertyDescriptor(obj, propertyName).enumerable 을 통해 확인 가능
const person = {
    name : 'kim',
    age : 26,
    city : 'Seoul'
}

for(key in person) {
    console.log(Object.getOwnPropertyDescriptor(person, key).enumerable);
}

// true
// true
// true

 

그렇기 때문에, 해당 속성을 false로 변경하면 순회하지 않는다.(defineProperty 이용)

// enumerable false로 변경해보기
const person = {
    name : 'kim',
    age : 26,
    city : 'Seoul'
}

Object.defineProperty(person, 'name', {enumerable: false});

for(key in person) {
    console.log(`key : ${key}  value : ${person[key]}`);
}

//결과
//key : age  value : 26
//key : city  value : Seoul

 

 

prototype도 출력

객체의 prototype도 출력이 된다.

// prototype도 출력
function Person (name, age, city) {
    this.name = name;
    this.age = age;
    this.city = city;
}

//prototype의 프로퍼티 생성
Person.prototype.height = 180;

const person = new Person('kim', 26, 'Seoul');

for(key in person) {
    console.log(`key : ${key}  value : ${person[key]}`);
}

//결과
//key : name  value : kim
//key : age  value : 26
//key : city  value : Seoul
//key : height  value : 180  <= prototype의 프로퍼티도 출력

 

이를 해결하기 위해서는 hasOwnProperty를 이용하면 해당 문제를 해결 할 수 있다. 해당 메소드를 사용하면 해당 오브젝트가 이 키값을 가지고 있냐 없냐를 판단해주기 때문이다.

// hasOwnProperty()
for(key in person) {
    person.hasOwnProperty(key) && console.log(`key : ${key}  value : ${person[key]}`);
}

//결과
//key : name  value : kim
//key : age  value : 26
//key : city  value : Seoul

 

 

 

for of

for of 반복문은 배열에 주로 사용한다. 기본 구문은 다음과 같다.

for( [할당받을 변수명]  of  [배열]  )  {  }

 

이 때 변수에 들어가는 값은 배열의 요소 값이다.  for in문을 통해 배열을 순회하면서 배열이 가지고 있는 요소를 변수에 할당하여 사용할 수 있다. 이를 이용하여 간단하게 배열 순환 코드를 작성하면 아래와 같다.

// for of
// 배열에 주로 사용
const arr = [1, 2, 3]

for(el of arr) {
    console.log(el);
}

//결과
//1
//2
//3

 

 

for of 특징

iterable

for of는 iterable한 자료형에는 모두 사용가능하다. iterable한 자료형이란 Symbol.iterator라는 메소드를 지니고 있는 자료형으로 String, Array, TypedArray, Map, Set 등이 있다.

 

위의 자료형 이외에도 iterable protocol을 구현하기만 하면 어떤 객체든 iterable이 될 수 있다. 이를 위해서는 generator 함수를 사용하여야 하는데 해당 내용은 iterable 포스팅에서 다루겠다.

 

이번 포스팅에서는, 배열은 iterable한 객체이기 때문에 for of를 사용하여 순회를 할 수 있는 것 정도만 언급하고 포스팅을 마치겠다.