조건문

getRandom

루트 경로에 getRandom.js 파일 생성

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

main.js 상단에 import 코드 작성
```
import random from './getRandom'
```
새로고침 할 때마다 새로운 값이 나옴
```
console.log(random())
```

If statement

맞는 조건을 찾아 아래로 착착 내려감

if, else

  const a = random()

  if (a === 0) {
    console.log('a is zero')
  } else {
    console.log('rest...')
  }

if, else if, else

  const a = random()

  if (a === 0) {
    console.log('a is zero')
  } else if (a === 2) { //추가적인 조건
    console.log('a is two')
  } else {
    console.log('rest...')
  }

if, else if, else if, else

  const a = random()

  if (a === 0) {
    console.log('a is zero')
  } else if (a === 2) { 
    console.log('a is two')
  } else if (a === 4) { // 또다른 조건 추가
    console.log('a is four')
  } else {
    console.log('rest...')
  }

Switch statement

if문이 훨씬 많이 사용되지만, 상황에 따라 switch문이 더 직관적일 때도 있다
딱 떨어지는 조건(???)이라면 그때는 if문보다는 switch문이 적합

const a = random()

switch (a) {
  case 0:
    console.log('a is zero')
    break
  case 2:
    console.log('a is two')
    break
  case 4:
    console.log('a is four')
    break
  default:
    console.log('rest...')
}

변수 a가 상황에 따라 어떤 값인지 case라는 키워드를 통해 명시할 수 있음
하나의 케이스가 끝나면 다음 케이스가 오기 전에 break를 써서 마무리 해주기
default는 if문에서 else 같은 녀석. 나머지를 표시함
특정하게 일치하는 값이 없으니 뒤에 값 안 적어도 되고, 브레이크 키워드도 패스

반복문

for ( ; ; ) { }
for(시작조건; 종료조건; 변화조건) { }
변화조건 뒤에는 세미 콜론 안 붙음

예시 1.

보통 반복문 작성할 때 변수 이름이 i

for (let i = 0; i < 3; i += 1) {
  console.log(i)
}
  /*출력값
  0
  1
  2
  */

예시 2.

createElement랑 appendChild 사용
html 구조에는 실제로 존재하진 않지만, JS로 요소를 생성해서 그것을 실제 html 내용에 삽입

const ulEl = document.querySelector('ul')

for (let i = 0; i < 3; i += 1) {
  const li = document.createElement('li')
  li.textContent = `list-${i + 1}`
  ulEl.appendChild(li)
}

  /*출력값
  list-1
  list-2
  list-3
  */

예시 3.

  const ulEl = document.querySelector('ul')

  for (let i = 0; i < 10; i += 1) {
    const li = document.createElement('li')
    li.textContent = `list-${i + 1}`
    li.addEventListener('click', function (){
      console.log(li.textContent)
    })
    ulEl.appendChild(li)
  }

  list-1
  list-2
  list-3
  list-4
  list-5
  list-6
  list-7
  list-8
  list-9
  list-10

예시 4.
```
  const ulEl = document.querySelector('ul')

  for (let i = 0; i < 10; i += 1) {
    const li = document.createElement('li')
    li.textContent = `list-${i + 1}`
    if ((i + 1) % 2 === 0 ) {
      li.addEventListener('click', function (){
        console.log(li.textContent)
      })
    }
    ulEl.appendChild(li)
  }
```
- 짝수인 경우 클릭했을 때 펑션이 실행되도록 만들어 봄
- if의 조건에 ( i + 1 ) 해준 이유
  - li.textContent = list-${i + 1} 여기에 i + 1 라고 명시함. 즉, 제로베이스가 아님
  - if의 조건에 i + 1이 아니라 i를 넣으면 짝수가 아닌 홀수를 클릭했을 때 내용이 출력 됨

https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online