(JavaScript) 2. 조건문과 반복문

짤 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ.. 레전드

그니까 js는 문자열 더해버리면 더하기가 되긴한는데 4가 아니라 22가 되버림 ㅋㅋㅋ

 

2.1 if-else 문

let num = 10;

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

---

2.2 switch 문

let day = 2;

switch (day) {
    case 1:
        console.log("월요일");
        break;
    case 2:
        console.log("화요일");
        break;
    default:
        console.log("기타 요일");
}

---

2.3 반복문

for문

for (let i = 0; i < 5; i++) {
    console.log(i); // 0 1 2 3 4
}

추가 예시 (for in과 for of)

• for in
  • 요소의 인덱스 값을 가져옴
  • 또한 배열 안의 undefined가 있다면 생략하고 다음 요소 인덱스 값을 담음
• for of
  • 요소의 값을 가져옴
  • 비어있다면 undefined 값을 가져감

<script>
    let arr = [1, 2, , 4, , 6]
    console.log('in')
    for (let i in arr) {
        console.log(i)
	  }
    console.log('of')
    for (let i of arr) {
        console.log(i)
    }
 </script>

 

 

또 재밌는거 가져옴

• querySelectorAll
  • let headers = document.querySelectorAll('h1'); 처럼 태그 전체를 찾아서 유사배열로 생성

  <script>
          // 이벤트를 연결합니다.
          window.onload = function () {
              // 문서 객체를선택합니다.
              let headers = document.querySelectorAll('h1');
              for (let i = 0; i < headers.length; i++) {
                  // 변수를 선언합니다.
                  let header = headers[i];
                  // 문서 객체를조작합니다.
                  header.style.color = 'orange';
                  header.style.background = 'red';
                  header.innerHTML = 'From JavaScript';
              }
              console.log(headers)
              for (a in headers) {
                  console.log(a)
              }
              for (b of headers) {
                  console.log(b)
              }
          };
      </script>
  

여기 유사 배열에 대해서 반복문 3가지가 다 다른 값을 가져오기에 예시처럼 length를 사용하는 것이 좋다고 함

 

사진처럼 제일 위에서 단순 querySelectorAll h1을 가져온 인덱스랑 length 까지 포함

in이랑 of는 각각 다른 값을 가져오는 것을 볼 수 있음

while문

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

forEach (배열 전용)

let arr = [1, 2, 3, 4, 5];

arr.forEach((num) => {
    console.log(num);
});