반복문 1) for, for ..in, for ..of

🤔 반복문이란?

말 그대로 한 동작을 여러 번 반복할 수 있게 해주는 것이 반복문이다. 다양한 반복문 메커니즘은 여러 방법으로 반복문의 시작점과 끝나는 점을 정할 수 있다. 대표적인 Javascript 반복문은 for 문,for ..of 문, for ..in 문, while 문, do.. while 문 등이 있다.

for 문

for 반복문은 어떤 특정한 조건이 거짓으로 판별될 때까지 반복한다. 자체적으로 초기식, 표현식, 증감식을 모두 포함하고 있다.

Syntax
for (초기식; 표현식; 증감식) {
표현식의 결과가 참인 동안 반복적으로 실행하고자 하는 실행문;
}

실행 방식:

• 초기화 구문인 초기문이 존재한다면 초기문이 실행.
• 조건문은 조건을 검사. 만약 조건문이 참이라면, 반복문은 실행. 만약 조건문이 거짓이라면, for 문은 종결.
• 문장이 실행.
• 갱신 구문인 증감문이 존재한다면 실행되고 2번째 단계로 돌아감.

for ..in 문

해당 객체의 모든 열거할 수 있는 프로퍼티(enumerable properties)를 순회할 수 있도록 해준다.

syntax
for (variable in object) {
객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
}

매번 반복마다 다른 속성이름(Value name)이 variable로 지정되고, object에는 반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체가 들어간다.

//ex1) 배열의 요소에 접근하는 예제
let arr = [3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    console.log(i + " "); //0, 1, 2
}

// 위와 같은 동작을 하는 for / in 문
for (let i in arr) { 
    console.log(i + " "); //0, 1, 2
}

//ex2) 객체의 프로퍼티에 접근하는 예제
let obj = {
	name : "이순신",
	age : 20
};
for (let i in obj) {
    console.log(i); //name, age
}

for / in 문은 해당 객체가 가진 모든 프로퍼티를 반환하는 것이 아닌, 오직 열거할 수 있는 프로퍼티만을 반환한다.

for ..of 문

반복할 수 있는 객체(iterable objects)를 통해 반복문을 만든다. (Array, Map, Set, arguments 객체 등)

syntax
for (variable of iterable) {
객체의 모든 열거할 수 있는 프로퍼티의 개수만큼 반복적으로 실행하고자 하는 실행문;
}

variable에는 각 반복에 서로 다른 속성값이 할당되고, iterable에는 반복되는 열거가능(enumerable)한 속성이 있는 객체가 들어간다.

//ex1) 배열의 요소에 접근하는 예제
let arr = [3, 4, 5];
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i] + " "); // 3, 4, 5
}

// 위와 같은 동작을 하는 for / of 문
for (var value of arr) { 
    console.log(value + " "); // 3, 4, 5
}

//ex2) Set 객체의 프로퍼티에 접근하는 예제
var arr = new Set([1, 1, 2, 2, 3, 3]);
for (var value of arr) {
    console.log(value + " "); // 1, 2, 3
}