[자바스크립트 스터디]반복문, 반복문과 배열, while, for ~ of, for ~ in, continue&break, 연습문제

moonsemi1230·2020년 3월 25일
0
post-thumbnail

반복문

for문은 가장 기본적인 반복문입니다. 특정 값에 변화를 주어가면서 우리가 정한 조건이 만족된다면 계속 반복합니다.

for(let i = 0; i < 10; i++){
    console.log(i);
    // 찍히는 값 = 0 ~ 9
}

for (초기 구문; 조건 구문; 변화 구문;) {
  코드
}

반복문 + 배열

const names = ['멍멍이', '야옹이', '멍뭉이']

for(let i = 0; i < names.length; i++){
    console.log(names[i]);
    // 찍히는 값 = 멍멍이 야옹이 멍뭉이
}

while

while문은 특정 조건이 참이라면 계속해서 반복하는 반복문입니다. for 문은 특정 숫자를 가지고 숫자의 값을 비교하고, 증감해주면서 반복을 한다면, while문은 조건을 확인만 하면서 반복을 합니다. 때문에, 조건문 내부에서 변화를 직접 주어야 합니다.

let i = 0;

while(i < 10){
    console.log(i);
    // 찍히는 값 = 0 ~ 9
    i++;
}

let i = 0;
let isFun = false;

while(!isFun){
    console.log(i);
    i++;
    if(i == 30){
        isFun = true;
    }
}
console.log(isFun);
찍히는 값 = 0 ~ 29, true

while 문을 사용 할 때에는 조건문이 언젠간 false 가 되도록 신경쓰셔야 합니다. 만약에 언젠간 false 로 전환이 되지 않는다면 반복문이 끝나지 않고 영원히 반복됩니다.

for ~ of

for...of문은 배열에 관한 반복문을 돌리기 위해서 만들어진 반복문입니다.
사실 이 구문은 배워놔도 사용 할 일이 별로 없습니다. 보통 배열을 반복할때에는 배열의 내장함수를 많이 사용합니다. 그래도 알아는 둡시다.

const numbers = [10, 20, 30, 40, 50]

for(let num of numbers){
    console.log(num);
    // 찍히는 값 = 10 20 30 40 50
}

// 배열 내장함수를 사용하면 이렇게
numbers.forEach(n => {
  console.log(n);
})

for ~ in

객체의 정보를 받아오는 방법 [알아두면 유용!]

  • Object.entries: [[키, 값], [키, 값]] 형태의 배열로 변환
  • Object.keys: [키, 키, 키] 형태의 배열로 변환
  • Object.values: [값, 값, 값] 형태의 배열로 변환
const doggy = {
    name : '멍멍이',
    sound : '멍멍',
    age : '2'
};

console.log(Object.entries(doggy));
// 찍히는 값 = [Array[2], Array[2], Array[2]]...
console.log(Object.keys(doggy));
// 찍히는 값 = ['name', 'sound', 'age']
console.log(Object.values(doggy));
// 찍히는 값 = ['멍멍이', '멍멍', '2']

for(let key in doggy){
    console.log(`${key} : ${doggy[key]}`);
    // 찍히는 값 = name : 멍멍이  sound : 멍멍  age : 2 
}

continue, break

반복문 안에서는 break 와 continue 를 통하여 반복문에서 벗어나거나, 그 다음 루프를 돌게끔 할 수 있습니다.
continue : 그 다음 거
break는 끝내는 거

for (let i = 0; i < 10; i++){
    if(i === 2) continue;
    console.log(i);
    // 찍히는 값 = 0, 1, 3, 4, 5, 6, 7, 8, 9
    if(i === 6) break;
     // 찍히는 값 = 0, 1, 3, 4, 5, 6
}

반복문 - 연습

1 ~ 5까지 더해보기

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);
// 찍히는 값 = 15

1 ~ 7까지의 숫자 중 3보다 큰 숫자를 배열에 넣어보기

function biggerThanThree(numbers){
    const array = [];
    for(let i = 0; i < numbers.length; i++){
      if(numbers[i] > 3){
        array.push(numbers[i]);
      }
    }
    return array;
}
  
const numbers = [1, 2, 3, 4, 5, 6, 7];
console.log(biggerThanThree(numbers)); 
// 찍히는 값 = [4, 5, 6, 7]

study by. 벨로퍼트와 함께하는 모던 자바스크립트

profile
백엔드와 프론트엔드를 사랑하는 현 마크업개발자(퍼블리셔)입니다 :) 자바스크립트, React, Python을 공부하고 있습니다.

0개의 댓글