[005] 자바스크립트 (JavaScript) - 핵심요약(반복문 - for, for in, for of, forEach)

안녕하세요~ totally 개발자입니다~

 

반복문2 - for

 

오늘은 for 반복문에 대해서 살펴보겠습니다. 프로그래밍을 배울 때 반드시 알고 있어야 하는 개념 중 하나로 저번에는 while 반복문을 알아보았고 이번에는 for 반복문의 기본 사용 방법에 대해서 알아보겠습니다.

 

for (let i = 0; i < 5; i++) {
	console.log(i);
}

 

앞서 살펴본 while문에서는 조건만 명시되는 반면, for문에서는 위에 보시는 것처럼 초기화, 조건, 상태 업데이트 이 3가지의 단계를 미리 명시해주고 내용을 입력하게 됩니다. 물론 3가지를 필수적으로 입력하는 것은 아니고 for (let i = 0; ; ) 이렇게 생략해도 무방하나 세미콜론으로 그 부분에 대한 공간은 표시해주셔야 합니다. 즉 다시 정리하면 아래와 같습니다.

 

let i = 0;	i < 5;	i++
초기화(initialization)	반복문 조건	반복문 업데이트(증감식)
반복문을 위한 변수 설정	반복문을 위한 조건 설정	반복문을 위한 변수 업데이트

 

이렇게 보통 사용이 되지만 for문은 다양한 형태로 사용이 됩니다.

 

for ... in / for ... of

 

이 2가지 형태의 for in, for of도 정말 많이 사용하는 것들로, 그 차이를 잘 알고 있어야 합니다.

 

for in	주로 객체(object)를 열거할 때 많이 사용되며 enumerable(셀 수 있는)한 것들만 출력할 때 사용합니다.
for of	Iterable(반복 가능한)인 자료형에 사용되며 주로 배열, set, map 등에 사용된다고 보시면 됩니다.

 

예제를 살펴보도록 하겠습니다.

 

for in 예제입니다.

const obj = {
    1: "a",
    2: "b",
    3: "c"
};

for (elem in obj) {
    console.log(elem);
}

 

for of 예제입니다.

const arr = [1, 2, 3];

for (i in arr) {
    console.log(arr[i]);
}

 

 

forEach

 

마지막으로 foreach인데 이것도 많이 사용하기 때문에 반드시 알고 있어야 하는 것으로, 주로 array 객체 및 map과 set(ES6 이상)에서 사용 가능하며 배열의 모든 요소에 접근하여 차례로 작업을 발생시키는 역할을 합니다. 이 foreach에는 callback(콜백) 함수가 들어가며 이 콜백 함수에서 배열의 요소에 접근하여 코드를 구현할 수 있습니다. 바로 예제를 살펴보겠습니다. 먼저 주의하실 점은 자바스크립트 버전에 따라 즉 ES5, ES6 이상 버전에 따라 코드가 달라집니다.

 

먼저 ES5 기준으로 코드를 보겠습니다. ES5에서는 let, const 등의 키워드와 화살표 함수 등 지원되지 않습니다.

 

var arr = ["a", "b", "c", "d", "e"];

arr.forEach(function(element) {
    console.log(element);
});

 

반면, ES6 이상의 코드로는 아래처럼 const 활용, 화살표 함수 => 등을 활용하여 코드를 간결화할 수 있습니다.

const arr = ["a", "b", "c", "d", "e"];

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

 

여기까지 for의 기본 문법, for ... in, for ... of, forEach까지 살펴보았습니다. 이 4가지들 중에서 1가지만 선택해서 반복문을 구현하는 경우는 드물기 때문에 적절한 상황과 변수 타입에 따라 알맞는 방법으로 구현하시면 되고 또한 조건만 들어가는 while문이 훨씬 유리한 경우도 존재하기 때문에 한 가지 방법만 고수하기 보다는 여러 방법을 터득한 다음, 각 상황에 맞는 코드로 작성하시면 됩니다. 감사합니다.