[JS]230106 TIL: Chap15 #5~8

강의 | Chap 15 JS 시작하기

#5. 삼항 연산자

if else 문이 단순할 경우, 삼항 연산자 사용이 가능하다.
예)

const a = 1 < 2

if (a) {
  console.log('참')
} else {
  console.log('거짓')
}

a = 1 < 2 가 'true'일 경우 참, false일 경우 '거짓'이 출력된다.
이것은 아래 삼항 연산자로 표현 가능하다.

const a = 1 < 2

console.log(a ? '참' : '거짓')

true일 경우 콜론 앞 부분 '참'이 실행되며,
false일 경우 콜론 뒷 부분 '거짓'이 실행된다.

#6. 조건문 if else

0) if 조건문 설정하기

// getRandom.js
export default function random() {
  return Math.floor(Math.random() * 10)
}

default : export와 같이 사용 시 함수를 다른 문서에서도 사용 가능토록 한다.
Math.floor() 소숫점 이하 버림.
Math.random() 0~1 이내의 랜덤한 숫자를 출력한다.

1) if / else if / else 활용하기

// main.js
import random from './getRandom' 
// random이라는 이름은 우리가 abc라고 정해도 작동한다. 
// 다만 직관적이지 않기 때문에 'random'이라고 표시한 것.
console.log(random())

const a = random()

if (a === 0) { // 1번째로 확인
  console.log('a is 0')
} else if (a === 2) { // 2번째로 확인
  console.log('a is 2')
} else if (a === 4) { // 3번째로 확인
  console.log('a is 4')
} else { // 4번째로 확인
  console.log('rest...') // 위 조건들에 부합하지 않을 경우에만 실행
} 

#7. 조건문 switch

// 위와 같은 내용을 switch문으로 작성하기.
import random from './getRandom'
console.log(random())

const a = random()

switch (a) {
  case 0:
    console.log('a is 0')
    break // 하나의 case가 끝났다는 표시.
    //주의: break를 쓰지 않으면 아래 내용도 다 실행될 수 있음.
  case 2:
    console.log('a is 2')
    break
  case 4:
    console.log('a is 4')
    break
  default: 
    console.log('rest...')
    // 위에서 a와 일치하는 특정 값이 없고, 나머지일 경우 일괄 같은 메세지를 출력하려면 default: 입력함. 
    // else와 같은 용도. 위치는 항상 마지막. (하여 break 필요 없음.)
}

위와 같이 switch 문은 if문보다 좀 더 많은 줄을 차지할 수 도 있음.
그렇지만 하나의 특정한 데이터(a)가 특정 값(0, 2, 4 ...)으로 딱 떨어질 때는,
switch문으로 작성하는 것이 효율적 + 직관적일 수 있음.

#8. 반복문 for

for (시작조건(앞); 종료조건(중간); 변화조건(마지막)){}의 형태

const ulEl = document.querySelector('ul')
console.log(ulEl)

for (let i=0; i < 10; i+= 1){ // 종료조건: false가 되는 순간 종료한다는 뜻.
  const li = document.createElement('li') // HTML에 li 적용됨(메모리 상 존재함)
  li.textContent = `list-${i+1}` // i 가 0부터 시작하는데, 우리가 보게 될 list-n은 1부터 만들고 싶음.
  if ((i + 1) % 2 === 0) { // i + 1이 먼저 계산되도록 (1을 더하지 않을 경우 홀수에게 감. 이유는 위에서는 i +1 를 했기 때문)
   li.addEventListener('click', function (){
    console.log(li.textContent) // 클릭 시 list 이름`list-${i+1}`이 뜨도록.
   })
  }
  ulEl.appendChild() // 메모리 상의 li 태그를 보이도록 만들어줌
}