[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 7회차 미션 - 26강 반복문

반복문

반복문은 특정 조건이 만족하는 동안 계속 돌리다가 조건이 만족되지 않으면 끝낸다.

for문

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

for (let i = 10; i >= 0; i-=2){
    console.log(i);
}

이런식으로 사용한다.
아래와 같이 for문은 배열과 함께 사용하면 시너지가 난다.

for문 + 배열

const names = ['멍멍이','멍뭉이','뭉뭉이'];

for (let i = 0; i < names.length; i++){
    console.log(names[i]);
}

일일이 names를 불러와주지 않아도 for문의 조건에서 length값을 가져오게 하고, 그보다 작을 경우까지 계속 i를 돌리게 하면 배열에 for문이 하나씩 접근해서 console에 결국 멍멍이, 멍뭉이, 뭉뭉이가 모두 나오는 것을 볼 수 있다.

while문

let i = 0; //반복문의 밖에서 선언
let isFun = false;
while(!isFun){
    console.log(i);
    i++; //반복문의 안에서 증가
    if (i === 30) {
        isFun = true;
    }
}

while문은 위와 같이 숫자 보다도 어떤 특정 상태를 비교할때 주로 사용한다.

for of문

주로 배열을 다룰때 쓰는 반복문이다.

const numbers = [10, 20, 30, 40, 50];
for (let number of numbers){ //number는 다른이름이 되어도 상관없음
    console.log(number);
}
//10,20,30,40,50이 찍힘

for of문은 배열안에 있는 것들을 사용해서 어떤 작업을 할때 사용한다.
이것은 그 위에 배웠던 일반 for문으로 쓰면

for (let i = 0; i < numbers.legnth; i++){
    console.log(numgers[i]);
}

이것과 같다. for문을 써도 되고 for of문을 써도 된다. 결과값은 똑같다.
그런데 이것보다도 더 쉽게 배열안에 있는 것에 접근할 수 있는 방법이 있다.

for in문

객체에 반복적으로 접근하기 위해 자주 쓰는 반복문이다.

const doggy = {
    name : '멍멍이',
    sound : '멍멍',
    age : 2
};
for (let key in doggy){
    console.log(key); //doggy안에 key만 가져옴
    console.log(`${key} : ${doggy[key]}`) //doggy안에 key와 value을 다 가져옴
}

그치만 for in문 말고 아래와 같은 방법으로도 객체에 key값이나 value값, 혹은 둘다 접근할 수 있는 방법이 있다.

const doggy = {
    name : '멍멍이',
    sound : '멍멍',
    age : 2
};
console.log(Object.entries(doggy)); //객체를 배열형태로 반환
console.log(Object.keys(doggy)); //객체의 키값을 반환
console.log(Object.values(doggy)); //객체의 밸류값을 반환

continue와 break

continue는 아래와 같다.

for (let i = 0; i < 10; i++){
    if (i === 2) continue; //if문에서 {}생략가능. i가 2일경우 그냥 건너뜀.
    console.log(i); //1,3~9까지 찍힘.
}

break은 아래와 같다.

for (let i = 0; i < 10; i++){
    if (i === 2) continue; //건너뜀.
    if (i === 5) break; //끝내버림.
    console.log(i); //1,3,4 하구 끝.
}

반복문 연습하기

모든 배열의 합을 구하는 함수를 만들어보자.

function sumOf(numbers){
  let sum = 0;
  for (let i = 0; i < numbers.length; i++){
      sum += numbers[i];
  }
  return sum;
}
const result = sumOf([1, 2, 3, 4, 5]);
console.log(result);

3보다 큰 숫자만 담기는 array만들어보기 연습!
아래와 같이 풀었다.

function biggerThanThree(number){
  let array = [];
  for(let i = 0; i < number.length; i++){
    if (number[i] > 3){
      array.push(number[i]);
    }
  }
  return array;
}

const numbers = [1,2,3,4,5,6,8];
console.log(biggerThanThree(numbers));

마치면서

실습을 하니까 확실히 이해가 더 잘되는 것 같다.
오늘은 여기까지, 수강 모습은 아래에.. 시청 영상 26강 18~22까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp