Javascript for 반복문 정리

이번 포스트에서는 Javascript for 문 정리를 다룹니다. 기본적인 for부터 for in, for of를 다룹니다. 

 

Javascript for

---

Javascript for 문 정리 

Javascript는 다양한 종류의 for 문을 지원합니다. 

for	코드 블록을 여러 번 반복하는 루프
for in	객체(object)의 프로퍼티(property)를 반복하는 루프
for of	객체(object)의 값(value)을 반복하는 루프

{ key : value}로 구성되어 있다면 for in을 사용하고, [1,2,3] 배열이라면 for of를 사용하면 되겠구나 이해하면 됩니다. 

---

Javascript for 예시 

for(표현식1 ; 표현식 2; 표현식 3){
  console.log("hi");
  코드 block;
}

for(let i = 0; i< 3;i++){
  console.log('hi');
}

표현식 1에는 코드 block이 실행되기 전에 한 번 실행되는 부분입니다. 보통 let i = 0으로 표현식 1을 시작합니다. 표현식 2에는 코드 블록이 실행되는 조건을 설정합니다. i <3이라고 설정했다면, i가 3보다 작을 때 코드 블록이 실행됩니다. 표현식 3에는 코드 블록이 실행된 이후에 실행되는 표현식을 적습니다. 표현식 3은 매번 코드 실행 후 실행됩니다. 위쪽 코드에서는 console.log('hi')가 실행되면, i++해서 i값을 올려줍니다. 

 

for 배열 활용 예시 

const fruit =['apple', 'banana', 'kiwi'];

for (let i =0, len = fruit.length; i <len;i++){
  console.log(fruit[i]);
}
//apple
//banana
//kiwi

표현식 1 부분 없이 for문을 작성할 수도 있습니다. 

const fruit =['apple', 'banana', 'kiwi'];
let i=0;
let len = fruit.length;

for (; i <len;i++){
  console.log(fruit[i]);
}
//apple
//banana
//kiwi

---

Javascript for in 예시

For in은 객체(object)의 property 프로퍼티를 반복하기 위해 사용하는 루프입니다. 

for (key in object) {
  //code block 
}

const personalInfo = {name:"Lee", age:"30", weight:"60"};
let text = "";
for (let x in personalInfo){
  text += personalInfo[x];
}
console.log(text);
//결과: lee3060

반복할 때 key를 return 해주고, 반환된 key를 바탕으로 값(value)에 접근할 수 있습니다. 만약에 key:value 조합의 객체가 아니라 단순한 배열일 경우에도 아래 코드와 같이 for in을 사용할 수 있습니다. 하지만 배열의 경우에는 for of 문을 사용하는 것이 권장됩니다. 

const personalInfo = ["Lee","30","60"];
let text = "";
for (let x in personalInfo){
  console.log(x);
  text += personalInfo[x];
}
console.log(text);
//결과: 
//0
//1
//2
//lee3060

---

Javascript for of 예시 

반복할 수 있는 객체(object)의 값을 반복하고 싶을 때 사용하는 for of입니다. 

for (variable of iterable) {
  //code block 
}

const personalInfo = ["Lee","30","60"];
let text = "";
for (let x of personalInfo){
  console.log(x);
  text += x;
}
console.log(text);
//결과: 
//Lee
//30
//60
//lee3060

문자열 for of 사용하기 

문자열에도 for of를 사용할 수 있습니다. 아래 코드와 같이 실행됩니다. 

let text = "Week-book";
let ans = "";
for (let x of text){
  ans += x;
}
console.log(ans);
//결과: Week-book