230114 JS: 숙달을 위한 메모 - Statement(~문) 편

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

 

---

~문 이라고 끝나는 것을 Statement(구문)라고 한다

 

가령 if, else if, switch, for, for in, while 등등 여러 구문이 있다

 

---

1. if 문

예시

function isPositive(number) {
  if (number > 0) {
  //피연산자 > 피연산자
    return '양수'
  }
  //return undefined가 생략
}

console.log(isPositive(1)) // >> 함수가 호출되면 데이터가 남음 '양수'
console.log(isPositive(10)) // >>'양수'
console.log(isPositive(-2)) // >> undefined

---

2. if else

예시

function isPositivee(number) {
  if (number > 0) {
    return '양수'
  } else if(number < 0){
    return '음수'
  } else {
    return '0'
  }
}

console.log(isPositivee(1)) // >> '양수'
console.log(isPositivee(10)) // >> '양수'
console.log(isPositivee(-2)) // >> '음수'
console.log(isPositivee(0)) // >> '0'

---

3. switch - 모든 switch 문은 if문으로 바꿀 수 있음!!

적는 법과 예시

switch (조건) {
  case 값1:
    // 조건이 '값1'일 때 실행
    break // 조건이 맞으면 멈출 수 있도록 꼭 break 작성하기!!!
  case 값2:
    // 조건이 '값2'일 때 실행
    break
  default: // if문의 else같은 존재
    // 조건이 '값1'도 '값2'도 아닐 때 실행
}

function price(fruit) {
  switch (fruit) {
    case 'Apple':
    case 'Orange': //중복 조건을 넣을 수도 있음, 다만 뭐는 뭐다 라고 딱 떨어지는 상황일 때
      return 1000; //return키워드는 값을 함수밖으로 꺼내주면서 함수도 종료시켜버림
    case 'Banana':
      return 1500; // 원래는 break를 넣는건데 return이 그 역할을 해줌
    case 'Cherry':
      return 2000;
    default:
      return 0;
  }
}

console.log(price('Apple')) // >> 1000
console.log(price('Cherry')) // >> 2000
console.log(price('Hello')) // >> 0

---

4. for문! 

// for문 작성하는 방법!

for (초기화; 조건; 증감) {
  // 실행 코드
}

const ulEl = document.querySelector('ul'); // html파일에 있는 ul태그를 ulEl로 불러오렴

for (let i = 0; i < 10; i += 1) { // i는 0번째부터 시작하고 10보다 작은 수까지만, 1씩증가
  const li = document.createElement('li'); 
  // input - submit, html파일에 li태그를 만들어주렴 

  li.textContent = `list-${i + 1}`; // i +1의 이유는 초기값이 0이 아니라 0+1로 시작하기때문
  // 만들어진 li태그에 텍스트를 ``안의 내용으로 넣어주렴

  if ((i+1) % 2 === 0) { // i를 2로 나눴을 때 나머지가 0이면
	// li에 발생하는 이벤트를 듣고, 함수를 동작해주는데 그 이벤트는 'click'이야
    li.addEventListener('click', function () { 
      console.log(li.textContent);
    })
  }

  ulEl.appendChild(li); // ulEl에 자식요소로 li를 끼워 넣어주렴

 

4 - 1.  for of  '배열' /  for in '객체'  구분해서 꼭 기억하기!!

// for in 객체 : 객체의 순서는 허상이다, 배열처럼 순서를 보장하지 않음

const user = {
  name: 'sisi',
  age: 20,
  isValid: true,
  email: 'ganadara@gmail.com'
} // user라는 이름의 객체!

for (const key in user) { //user라는 객체의 요소들을 key라는 변수를 for in을 통해 꺼내기
  console.log(key, user[key])
}
// name sisi
// age 20
// isValid true
// email ganadara@gmail.com

---

5. while : 무한루프 조심!!!

// whil문을 적는법!
while (조건) {
  // 
}


let n = 0; // n은 0부터 시작

while (n < 4) {
  console.log(n); // while문을 통해 n을 출력
  n += 1; // n에다가 1씩 더하기
}
// >> 0
// >> 0 + 1 = 1
// >> 1 + 1 = 2
// >> 2 + 1 = 3