알아서 잘 딱 깔끔하고 센스있게 정리하는 JavaScript 핵심 개념알아서 잘 딱 깔끔하고 센스있게 정리하는 JavaScript 핵심 개념
알아서 잘 딱 깔끔하고 센스있게 정리하는 JavaScript 핵심 개념/
📝
3. 반복문
📝

3. 반복문

3-1. 반복문이란? 3-2. for 문3-2-1. for문의 선택적 사용3-3. while 문3-3-1. do … while 문3-4. break / continue 와 레이블3-4-1. break3-4-2. continue3-4-3. 레이블3-5. object(객체) 반복문 3-5-1. for in 반복문 3-5-2. Object 시리즈 3-6. array(배열) 반복문3-6-1. for of 반복문Reference
 

3-1. 반복문이란?

개발을 할 때는 다양한 상상력이 필요하다. 한 가지 상황을 상상해 보자.
당신에게 4명의 외국인 친구가 있다. 각국에 있는 외국인 친구는 각기 다른 날짜에 한국을 방문하고 싶어한다. 각 친구들이 한국에 방문할 때마다 맛집 리스트를 알려줘야 하는 상황이다. 물론 친구가 5명뿐이라면 그 때 그 때 필요에 따라 리스트를 작성하여 설명해주는 것은 어렵지 않은 일이다. 그렇지만 당신은 핵인싸! 1,000명, 10,000명의 외국인 친구가 있다고 생각한다면 매번 똑같은 설명(똑같은 수행 코드)을 1,000명, 10,000명에게 해야하는 것은(반복) 쉬운 일이 아닐 것이다.
이럴 때 필요한게 바로 반복문이다. 그럼 지금부터 자바스크립트에서 반복문을 사용하는 다양한 방법을 살펴보자.

3-2. for 문

for문은 변수를 선언하는 초기화식과, 결과(true or false)에 따라 실행문의 실행 여부를 판단하는 조건식, 실행문 이후 변수의 증감을 나타내는 증감식으로 구성되어 있다.
 
for(초기화식; 조건식; 증감식) {
	실행문;
}
for문의 형식
알잘딱갈센 JavaScript : for문의 구조 이해를 돕기위한 다이어그램알잘딱갈센 JavaScript : for문의 구조 이해를 돕기위한 다이어그램
알잘딱갈센 JavaScript : for문의 구조 이해를 돕기위한 다이어그램
 
const kFoods= ['김치', '비빔밥', '김밥', '떡볶이', '순두부찌개'];

let info = '꼭 먹어야 할 한국 음식: '
for(let i = 0; i < kFoods.length; i++) {
	info += kFoods[i];
	// 조건문은 뒤에 나오는 내용이지만, 깔끔한 결과물 출력을 위해 넣어둡니다.
	if(i < kFoods.length - 1) info += ', ';
}

console.log(info);
for 반복문 예시코드

3-2-1. for문의 선택적 사용

for문의 구성요소들은 모두 선택적으로 사용할 수 있다.
 
let i = 0;  // 변수 선언
for (; i < 7; i++) {
	console.log('count: ' + i)
}
 
조건식 또한 선택적으로 사용가능하지만 실행문 안에 조건문을 넣어 무한루프에 빠지지 않도록 해야한다.
 
for (let i = 0;; i++) {
	if (i > 7) { console.log(i + '살은 초등학생입니다.' )}
	if (i >= 13) break;
}
💡
위 코드의 if문 뒤에 중괄호가 없는데 단 하나의 구문이라면 중괄호가 생략 가능하다.
 
모든 구성요소를 생략할 경우 무한루프에 빠지게 된다. 이 경우 break문을 이용해 빠져나올 수 있다.
 
let i = 0;

for(;;) {
		i++;
		console.log('count: ' + i)
		if(i >= 10) break;
}
 
💡
for문 구성요소 선택적 사용시 주의사항
  • 세미콜론 ;은 생략이 불가하다.
  • 모든 구성 요소 생략시 세미콜론은 반드시 2개 모두 포함되어야 한다.

3-3. while 문

while문은 조건문이 true일 경우 코드가 실행되며, 조건문이 false가 되면 종료되는 반복문이다.
 
while(조건문) {
	실행문;
}
 
아래의 예시 코드는 while의 조건문 i < 10를 만족시켜 해당 조건이 true인 동안 실행문을 수행한다.
 
let i = 0;
let j = 2;
while (i < 10) {
		i++;
	  console.log(i * j);
}
 

3-3-1. do … while 문

 
do...while 문법은 while문과 비슷하지만 조건문 이전에 실행문이 있기 때문에 실행문의 코드가 반드시 한 번은 실행된다.
do {
		실행문;
} while(조건문);
 
아래의 예시 코드에서 do 구문의 블록문은 반드시 실행되고 while문의 조건에 따라 변수 i 가 10보다 작을 때까지 실행된 뒤에 종료된다.
 
let sum = 0;
let i = 0;

do {
		i++;
		sum += i;
} while (i < 10);

console.log(sum);
 

3-4. break / continue 와 레이블

3-4-1. break

반복문이 조건에 따라 종료되기 이전에 종료를 원하면 break 를 사용하여 반복문에서 나올 수 있다. break문으로 반복문이 종료되면 그 다음 코드가 실행된다.
 
let i = 0;

while (i < 100) {
		i++;
	if (i === 14) {
			console.log(i + '살 부터 중학생이 됩니다.');
			break;
	}
}
console.log('중학교 입학을 축하합니다');
 

3-4-2. continue

continue문은 break문과 유사하게 동작하지만, 반복문을 완전히 빠져나가는 break와 다르게 continue문은 반복문의 다음 반복으로 이동한다.
아래의 예시 코드를 보면, 변수 i 가 13보다 작다는 조건문에서 continue 가 실행되기 때문에 해당 조건의 반복을 넘어서(남은 코드 실행되지 않음) 다음 반복으로 이동한다. 따라서 if 조건문에 해당하지 않는 13 이상의 변수 값부터 console.log(i + '살은 청소년입니다.') 가 실행된다.
만약 continue가 실행되지 않았다면 0살은 청소년입니다. 부터 19살은 청소년입니다.가 모두 실행되었을 것이다.
 
for (let i = 0; i < 20; i++) {
		if (i < 13) continue;
		console.log(i + '살은 청소년입니다.');
}
 

3-4-3. 레이블

레이블은 식별자로 일종의 코드 블록의 네임태그이다. 따라서 반복문 앞에 레이블을 붙여 break나 continue구문과 함께 사용하면 반복문을 컨트롤하기에 용이하다.
아래의 예시 코드는 레이블을 붙여 x변수가 4일 때, break문을 만나 해당 반복문이 멈추도록 작업한 내용이다.
레이블을 붙이면 중첩 반복문 사용 하면 레이블을 붙인 반복문을 한 번에 종료시킬 수도 있다.
 
💡
반복문의 break은 둘러싼 반복문만 종료한다. 중첩한 반복문까지 종료하지 않는다.
timestable:
for (let x = 2; x < 10; x++) {
	for (let y = 1; y < 10; y++) {
		if (x === 4) break timestable;
		console.log(`${x} X ${y} = ${x * y}`);
	}
}
for (let x = 2; x < 10; x++) {
  test:
	for (let y = 1; y < 10; y++) {
		if (x === 4) break test;
		console.log(`${x} X ${y} = ${x * y}`);
	}
}
 
💡
레이블 사용시 주의사항
  • 레이블은 반드시 break문 또는 continue문 위에 있어야 한다.
  • break문은 모든 레이블에서 사용할 수 있다.
  • continue문은 반복문에서만 사용 가능하다.
 

3-5. object(객체) 반복문

3-5-1. for in 반복문

객체에 포함된 모든 프로퍼티에 대해 반복문을 수행한다.
 
const pocketmons = {
	피카츄 : 1,
	라이츄 : 2,
	파이리 : 3,
	꼬부기 : 4,
	버터플 : 5,
	야도란 : 6,
	피죤투 : 7,
	또가스 : 8,
	메타몽 : 9,
};

console.table(pocketmons);

// key 값 출력 
for ( let pocketmon in pocketmons) {
	console.log(pocketmon);
}

// value 값 출력
for ( let pocketmon in pocketmons) {
	console.log(`${pocketmons[pocketmon]}`);
}
 
  • 일반적인 객체 리터럴은 반복 가능한(iterable) 객체로 인식되지 않는다.
  • 반복 가능한 객체가 아니라면 for of 문을 쓸 수 없다.
  • 그 경우, 객체 리터럴에 쓸 수 있는 방법은 for .. in 문이다.
 
for in 문은 기본적으로 키 값만 출력하는 반복문이다. 따라서 value 값을 출력해서 활용하기 위해서는 예제의 마지막 방식처럼 템플릿 리터럴을 활용하여 value 값을 출력하는 방법을 쓸 수 있다. 하지만, 이런 방식은 누군가에겐 코드가 길어지고 가독성이 불편하게 느껴질 수도 있다. 이를 해소하고자 Object 메소드들이 생겼다.
 
const pocketmons = [
	'피카츄',
	'라이츄',
	'파이리',
	'꼬부기',
	'버터플',
	'야도란',
	'피죤투',
	'또가스',
	'메타몽',
]

console.table(pocketmons);

// key 값만 출력됨, key 값이 결국 index이기 때문에 index가 출력됨! 
for ( let pocketmon in pocketmons) {
	console.log(pocketmon);
}
 

3-5-2. Object 시리즈

key 값, value 값, key : value 쌍 값을 배열 형태로 반환하는 메소드들이 있다.
 
  • Object.keys
Object.keys(pocketmons);

['피카츄', '라이츄', '파이리', '꼬부기', '버터플', '야도란', '피죤투', '또가스', '메타몽']
Object.keys 는 key 값만 배열 형태로 반환해준다.
 
  • Object.values
Object.values(pocketmons);

[1, 2, 3, 4, 5, 6, 7, 8, 9]
Object.values는 value 값만 배열 형태로 반환해준다.
 
  • Object.entries
Object.entries(pocketmons)

0: (2) ['피카츄', 1]
1: (2) ['라이츄', 2]
2: (2) ['파이리', 3]
3: (2) ['꼬부기', 4]
4: (2) ['버터플', 5]
5: (2) ['야도란', 6]
6: (2) ['피죤투', 7]
7: (2) ['또가스', 8]
8: (2) ['메타몽', 9]
Object.entries는 key, value 형태의 배열들을 반환해준다.
 
💡
for of 반복문이 배열에서 사용가능하기 때문에 위 메소드들을 활용하여 for of 문을 활용할 수 있다.
 
⚠️ 주의사항
Internet Explorer는 Object.values와 Object.entries가 사용 불가하다.
Object.values와 Object.entries 호환성 [1]Object.values와 Object.entries 호환성 [1]
Object.values와 Object.entries 호환성 [1]

3-6. array(배열) 반복문

3-6-1. for of 반복문

 
const languages = [ 'Java', 'Javascript', 'Python', 'Ruby', 'C', 'C++' , 'Node.js', 'Django'];

for (let lang of languages) {
	console.log(lang)
}
lang은 변수이다. 변수 이름은 어떻게 설정해도 상관없고 for문 처럼 i를 통해 배열에 접근할 필요도 없다. 변수를 정한 후에 그 변수를 출력하면 for문에 비해 가독성 좋고, 간단하게 출력할 수 있다. 차례대로, Java 부터 순서대로 배열에 접근하여 하나씩 저장하여 순서대로 출력한다.
 
💡
배열 역시 객체이므로 for in 문을 사용해도 된다. 하지만, for in 문은 배열 요소뿐만 아니라 불필요한 프로퍼티까지 출력될 수 있다. [2]
 
for문을 써서 반복문 쓰면 되는 걸 굳이 어려운 for of문 같은 새로운 문법을 써야하는지 의문점이 들 수도 있다. 여러 측면이 있겠지만 단순하게 가독성 측면에서 봐도 아래의 경우에 for of문이 훨씬 읽기가 편하게 느껴진다.
 
const seat = [['피카츄' , '라이츄', '파이리' ],
						  ['꼬부기' , '버터플', '야도란' ],
              ['피죤투' , '또가스', '메타몽' ]];

//for 문 사용
for (let i = 0; i < seat.length; i++) {
    const row = seat[i];
    for (let j = 0; j < row.length; j++) {
        console.log(row[j]);
    }
}

//for of 문 사용
for (let row of seat) {
    for (let pocketmon of row) {
        console.log(pocketmon);
    }
}
 
보통 배열과 많이 쓰이지만, 문자열처럼 JavaScript에서 반복 가능(iterable)한 객체로 인식되는 것에도 사용 가능하다. ES6에서 추가된 map, set 등에도 사용 가능하다.
 
💡
일반적인 객체 리터럴, { key : value } 를 가진 객체는 반복 가능한 객체가 아니기 때문에 for of문을 쓰면 에러가 발생한다. 그래서 이런 경우를 위해, for in을 쓴다. 하지만 Object 메소드들을 활용해 객체로 반환해서 for of 를 쓸 수 있다.
 

Reference

  1. https://caniuse.com/
  1. https://poiemaweb.com/js-array