📌 이 포스팅에서는 JavaScript의 반복문에 대해서 알아보겠습니다.
🌈 반복문은 언제 사용할까?
🔥 반복문은 언제 사용할까?
🔥 while문과 for문의 구조
🔥 for ... of & for ... in
1. 반복문은 언제 사용할까?
🤔 JavaScript에게 인사를 10번 해봅시다:)
✔️ 반복문이 없어도 'Hello JavaScript!'를 10번, 100번 출력할 수 있습니다. console.log()를 통해 아래와 같이 작성하면 되죠. 하지만, 12983419번을 찍어본다고 하면, 지금 몇번까지 왔는지 수를 세다 까먹어 처음부터 다시 해야할 수 도 있겠죠.
✔️ 이처럼 아무리 간단한 작업이라도 여러번 반복하면 어렵습니다. 또한 반복은 인간보다 컴퓨터가 정확합니다.
console.log('Hello JavaScript!') console.log('Hello JavaScript!') console.log('Hello JavaScript!') console.log('Hello JavaScript!') console.log('Hello JavaScript!') console.log('Hello JavaScript!') console.log('Hello JavaScript!') console.log('Hello JavaScript!') console.log('Hello JavaScript!') console.log('Hello JavaScript!')
🤔 중복이 보일 땐 불편감을 느껴야합니다.
✔️ 중복이 있을 땐 반복문을 가장 먼저 떠올려야합니다. 반복문은 제어문 중 하나로 반복적인 코드를 줄여주기 때문에 효율적으로 코드를 관리할 수 있습니다.
function sayHello(name, count){ for(let i=0; i<count; i++){ console.log(`Hello ${name}!`) } } sayHello('JavaScript', 10) sayHello('Python', 10) sayHello('Go', 10) sayHello('CSS', 10)
2. while문과 for문의 구조
🤔 while문의 구조
✔️ while문은 while 옆의 ()안에서 if문의 ()처럼 평가를 통해 body를 반복하여 실행할지 결정합니다. 또한 이 평가를 위해 while 위에는 시작 조건에 대한 기준이 있어야하고, body안에는 반복에 따라 시작 값을 어떻게 변화시킬지 step을 통해 정해줍니다.
✔️ 즉, 시작조건과 증감하는 단계를 지정하는 이유는 while()안의 조건 평가가 언제나 true일 때, 발생하는 무한 반복을 예방하기 위한 조치입니다.
i = 0 // 👈 begin while (i<=10) { // 👈 condition // 코드 : '반복문 본문(body)'이라 불림 i++; // 👈 step }
✔️ 1부터 10까지 출력
let i = 1 // 👈 i의 초기값이 1입니다. while (i<=10) { // 👈 i가 10보다 작거나 같을 때만 body를 작동시킵니다. console.log(i) i++; // 👈 body가 실행될 때마다 i값을 1씩 증가시켜줍니다. }
✔️ 배열 내 원소를 순회하여 출력
data = ["A", "B", "C", "D", "E", "F", "G"] let i = 0 // 👈 i의 초기값이 0입니다. while (i<data.length) { // 👈 배열(data)의 길이보다 작을 때까지 body를 실행시킵니다. console.log(data[i]) i++; // 👈 body가 실행될 때마다 i값을 1씩 증가시켜줍니다. }
🤔 for문의 구조
✔️ 기본 for문은 while문의 begin, condition, step이 모두 ()안에 존재합니다. ()안의 평가를 통해 condition이 true이면 반복을 계속 진행합니다.
for (begin; condition; step) { // 코드 : '반복문 본문(body)'이라 불림 }
✔️ 1부터 10까지 출력
for(let i=1; i<=10; i++){ console.log(i) }
✔️ 배열 내 원소를 순회하여 출력
data = ["A", "B", "C", "D", "E", "F", "G"] for (let i=0; i<data.length; i++) { console.log(data[i]) }
3. for ... of & for ... in
🤔 for of 문
✔️ for of문은 iterable 데이터 타입의 요소를 순차적으로 탐색합니다.
let arr = [1,2,3,4,5] for (let i of arr){ console.log(i) // 1,2,3,4,5 }
let arr = "JavaScript" for (let i of arr){ console.log(i) // J, a, v, a, S, c, r, i, p, t }
🤔 for in 문
✔️ for in문은 iterable 데이터 타입의 index를 순차적으로 탐색합니다.
let arr = [1,2,3,4,5] for (let i in arr){ console.log(i) // 0, 1, 2, 3, 4 }
let arr = "JavaScript" for (let i in arr){ console.log(i) // 0,1,2,3,4,5,6,7,8,9 }
🤔 배열에서 for of와 for in 비교
✔️ for of는 배열에서 요소의 값, for in는 요소의 index번호를 순회하는 것을 볼 수 있습니다.
let iterable = [3, "hello", 5, 'javascript', [20, 8], {name:'Jaewon'}]; console.log(iterable) // [ 3, 'hello', 5, 'javascript', [ 20, 8 ], { name: 'Jaewon' } ] for (let i of iterable) { console.log(i); // 3, hello, 5, javascript, [ 20, 8 ], { name: 'Jaewon' } } for (let i in iterable) { console.log(i); // 0, 1, 2, 4, 5 }
🤔 객체에서 for of와 for in 비교
✔️ 객체에는 어떤 양상을 보이는지 확인해보겠습니다.
✔️ for of의 경우에는 TypeError이 발생합니다. for of는 객체를 순환할 수 없습니다.
let obj = { name : "Jaewon", age : 33, city : "Seoul", favorite : { food : "kimchi", coffee : "ice" }, score : [80, 90, 30, 40] } for (let i of obj) { console.log(i); } // TypeError: obj is not iterable
✔️ for in의 경우에는 key값을 순회하는 것을 볼 수 있습니다.
let obj = { name : "Jaewon", age : 33, city : "Seoul", favorite : { food : "kimchi", coffee : "ice" }, score : [80, 90, 30, 40] } for (let i in obj) { console.log(i); // name, age, city, favorite, score }
✔️ 객체에서는 for in으로 순회가 가능하지만, for of는 객체를 순회가 불가능합니다.
✔️ 이에 배열을 순회할 때는 for of를 사용하고, 객체를 순회할 때는 for in을 사용하는 편이 좋을 것 같습니다.
