[HTML+CSS+자바스크립트] 9장 자바스크립트 기초 문법 살펴보기 (~389p)

안녕하세요!

<코딩 자율학습 HTML+CSS+자바스크립트> 멘토를 당담하게 된 박브레드입니다.

오늘은 열두 번째 날로, 자바스크립트 공부 세 번째 날입니다!

어제에 이어서, 기초 문법에 대해서 더 자세히 알아볼 거예요. 그럼 공부 시작해 볼까요?

 

오늘 공부할 내용은 다음과 같습니다.

 

🏃 공부할 내용(366~389p)

4. 조건문 다루기

5. 반복문 다루기

 

4. 조건문 다루기

---

4.1 if, els, else if 문

if문은 조건식이 참으로 평가되면 코드를 실행하는 조건문이에요.

다음을 보시면, num이 짝수니까 console.log 짝수 코드가 실행되겠죠?

let num = 10;
if (num % 2 === 0) {
  console.log("짝수");
}

다음을 보시면, num이 홀수입니다. if 조건문이 거짓이니까 else인 홀수 코드가 실행될 거예요.

let num = 5;
if (num % 2 === 0) {
  console.log("짝수");
} else {
  console.log("홀수");
}

다음을 보시면, else if로 일일이 조건을 걸어주었어요!

num이 0이니까 else문이 출력되겠죠?

let num = 0;
if (num > 0) {
  console.log("양수");
} else if (num < 0) {
  console.log("음수");
} else {
  console.log("0");
}

 

4.2 switch 문

앞서봤던, else if문이 너무 많아지면 가독성이 안 좋기 때문에 switch문을 사용하곤 해요.

case에 따라 값이 맞다면 블록문을 실행합니다.

현재 food가 melon이기 때문에 melon을 출력하겠죠?

만약 food가 orange라면 case에 없기 때문에 default인 no fruits를 출력할 거예요.

let food = "melon";
switch (food) {
  case "melon":
    console.log("melon");
  case "banana":
    console.log("banana");
  case "apple":
    console.log("apple");
  default:
    console.log("no fruits");
    break;
}

 

4.3 if 문과 조건식

if 문은 조건식과도 함께 쓸 수 있습니다.

다음과 같이 90점 이상일 때 출력하게 할 수도 있어요.

let score = 90;
if (score >= 90) {
  console.log("A++ 학점");
}

이렇게 &&(AND 연산자)도 사용할 수 있고요!

let score = 90;
if (score >= 90 && score <= 100) {
  console.log("A++ 학점");
}

 

4.4 if 문 vs switch 문

조건문으로 if문 switch문이 있는데 차이점이 무엇일까요?

바로 조건의 형태입니다. if 문은 조건에 식을 사용하고 switch문은 조건에 값을 사용해요.

 

switch문은 조건으로 값을 받기 때문에 값이 범위일 때는 모든 값을 일일이 case 문으로 정의해야 해요.

따라서 범위를 이용한 조건을 작성할 때는 if문이 적합합니다!

 

이 차이점을 기억하셔서 적절히 사용하시면 돼요~

 

 

5. 반복문 다루기

---

5.1 while 문

이제 반복문에 대해서 살펴볼 거예요~

1~5까지 출력하는 코드를 작성해 봅시다.

while 조건문에 num이 5 이하일 때까지만 실행되도록 반복문을 만들어줍니다.

그러면 num이 1부터 1씩 증가되면서 5가 되는 시점에 while문이 끝나게 될 거예요!

let num = 1;
while (num <= 5) {
  console.log(num);
  num++;
}

 

5.2 무한 반복문

만약, 다음과 같이 num을 증가시키는 코드가 없다면 어떻게 될까요?

num이 계속 1로 유지되어 무한으로 반복될 것입니다.

1111111... 이 계속 찍히면서 끝나지 않겠죠?

let num = 1;
while (num <= 5) {
  console.log(num);
}

 

5.3 do...while 문

do while문이란 무조건 한 번은 실행하는 반복문을 말해요.

원래 같으면 조건문에 false면 실행을 한 번도 안 하는 것이 맞는데,

do 다음에 오는 블록문을 반복 실행하는 것이 do while문 특징입니다!

do {
  console.log("무조건")
  console.log("한 번은 실행")
} while(false)

 

5.4 for 문

for문은 초깃값 > 조건식 > 블록문 > 증감식 > 조건식 순서로 실행돼요.

이때 초깃값은 최초 1회만 실행됩니다.

(여기서 초깃값이란 let i =0이고, 조건식이란 i < 5, 블록문이란 {} 안에 있는 것, 증감식이란 i++을 말해요~)

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

 

5.5 for 문과 배열

다음과 같이 for문으로 배열 요소에 접근해 값을 출력할 수 있어요!

let arr = ["banana", "apple", "orange"];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

 

5.6 for...in

이는 ES6에 새로 추가된 반복문이라 익숙하지 않을 수도 있어요.

for문 소괄호 안에 in 키워드를 두고 오른쪽에는 탐색의 대상이 되는 배열 또는 객체 리터럴, 왼쪽에는 키를 놓습니다.

 

- 객체 리터럴을 반복할 경우

여기서 key는 name, age가 될 것이고, obj[key]는 철수, 20이 되겠죠?

let obj = { name: "철수", age: "20" };
for (let key in obj) {
  console.log(key + " : " + obj[key]);
}

 

- 배열을 반복할 경우

let arr = ["orange", "banana", "apple"];
for (let index in arr) {
  console.log(index + ":" + arr[index]);
}

 

5.7 break 문

이처럼 break가 있다면 무조건 반복문을 탈출하게 됩니다!

0, 1, 2, 3, 4, 5까지 출력하고 반복문을 종료하게 되겠죠?

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

 

5.8 continue 문

break문과 반대로 continue문은 반복문을 건너뛰고 실행하려는 명령입니다!

이처럼 i % 2 === 0 짝수일 때는 넘어가기 때문에 홀수만 출력되는 것을 볼 수 있어요.

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

 

🤓 1분 퀴즈/마무리/실습 문제/셀프체크

오늘은 자바스크립트 기초 문법을 마무리했어요!

385~388p까지 마무리하시고, 389p 셀프체크까지 꼭 해보세요~

 

제가 공부한 내용을 보고 궁금한 점이 있으면 댓글을 남겨 주세요.
확인하고 답변해 드리겠습니다. 
그럼 내일 다시 만나요!

✅ 정리

1. 조건문 다루기

if else, switch 

2. 반복문 다루기

while, 무한 반복문, do while, for ...in, break, continue