[항해99] 온보딩 스터디 - 2일차 TIL

🦄 온보딩 스터디 2일차 TIL

2일차, 오늘의 목표는 교재 3파트 조건문에 대해 공부했다.

어제 만큼 진도 양이 많지는 않은 만큼 더 꼼꼼히 살펴보고 중요한 부분들을 정리해 보았다🙌

---

✨03/07 : 목표 : JS 기초 3파트 공부

📒강의 노트 정리

03 조건문(if, switch)

 

1. if 문

- if 문에서 반드시 확인해야 할 부분 => 조건문 순서❗코드가 복잡할경우,실수가 잦고 지적이 많은 부분이다.

1. 같은 조건을 중복으로 포함하고 있지 않은지 반드시 확인하기(위 > 아래로 흐르기 때문에 중복 조건 및 순서가 가장 중요)

2. 앞에서 비교한 조건을 다시 비교하고 있는지 확인하기 => 간략하게 정리 가능

// 같은 조건을 위 아래에서 중복 확인
 } else if (a > 3 && a < 6) {
    alert("봄 입니다.");
 } else if (a > 5 && a < 9) {
  
// 리팩토링
  } else if (a < 6) {
    alert("봄 입니다.");
  } else if (a < 9) {

 

 

2. switch 문

- switch() 괄호 안이나, case문 에서는 어떠한 표현식도 올 수 있다. 다만 각각의 case 절에 해당 표현식의 결과를 맞추어보기 때문에 case와 일치하지 않는다면 switch는 default값을 반환한다. *특히 switch문에서 자료형이 일치하지 않으면 절대 case문이 실행되지 않고, default문이 실행된다. 보통 변수나 상수를 대상으로 넣어준다.

- case에서도 비교연산자나 논리 연산자 등을 이용해 조건 사용이 가능 하다.

let a = 1;

  switch (a === 0) {
    case 0:
      console.log(0);
      break;
    case 1:
      console.log("1");
      break;
    default:
      console.log("기본값");
  }

switch( )안의 표현식과 case가 일치하지 않을 경우에도 기본값(defult)은 항상 실행된다. 

 

- if문을 switch문으로 대체하기는 어렵지만 불가능 한 것은 아니다.

 const date = new Date();
  const hour = date.getHours();

  switch (true) {
    case hour < 11: //비교 연산자 가능
      alert("아침 먹을 시간입니다.");
      break;
    case hour > 10 && hour < 17: // 논리 연산자 가능
      alert("점심 먹을 시간입니다.");
    default:
      alert("저녁 먹을 시간입니다.");
      break;
  }

 

- breack : 코드를 읽다가 break를 만나면 break를 감싸고 있는 조건문이나 반복문을 완전히 빠져 나간다.

- case문 안에 break문이 없으면 조건의 여부와 상관없이 다음 case문을 실행한다.

- break와 return의 차이 : break는 해당 if문만 종료시키지만, return은 해당 메소드가 호출된 곳까지 종료시킨다. 즉, if문을 포함한 메소드 자체를 종료시킨다.

 

 

3. 짧은 조건부 연산자 (&&, ||)

- 프로젝트에서 간단한 연산에 굉장히 많이 사용했었다.(true/false 여부에 따른 코드 실행 이라던지..)

- 논리합 연산자 : or 연산자(||) : 조건들 중 true를 만나면 반환 후 종료

- 논리곱 연산자 : and 연산자(&&) : false를 만나면 false 전 true까지만 실행 후 종료

// or 연산자(||)
true || console.log('hi') || false // true > true를 만나면 실행 후 종료
false || console.log('hi') || true // hi 후 종료

// and 연산자(&&)
false && console.log('hi') // false를 만나면 종료
true && false // true > flase 전 true 실행 후 종료

 

+ 컴퓨터는 모든 것을 숫자로 계산하므로 문자열 연산("1", "2" ...)보다 숫자 연산이 훨씬 빠르다(1,2,...). 컴퓨터의 관점에서 자료구조, 알고리즘 등으로 계산적으로 접근하는 것이 좋다(a%2===0 이라던지..).

 

 

 

🔥확인 문제 풀어보기(오답 or 중요도 높은 문제)

 

const a = Number(prompt("숫자를 입력해 주세요"));

  if (a % 2 === 0) {
    alert("입력한 숫자는 짝수 입니다.");
  } else {
    alert("입력한 숫자는 홀수 입니다.");
  }

 

리팩토링 전 

const a = Number(prompt("월을 입력해 주세요"));

  if (a > 3 && a < 6) {
    alert("봄 입니다.");
  } else if (a > 5 && a < 9) {
    alert("여름 입니다.");
  } else if (a > 8 && a < 12) {
    alert("가을 입니다.");
  } else if (a === 12 || (a > 0 && a < 4)) {
    alert("겨울 입니다.");
  } else {
    alert("월은 1 ~ 12까지만 입력할 수 있습니다.");
  }

❗리팩토링 후 => 같은 조건을 중복 확인하고 있는지 꼭 확인

const a = Number(prompt("월을 입력해 주세요"));
  if ((a > 0 && a < 4) || a === 12) {
    alert("겨울 입니다.");
  } else if (a < 6) { 
    alert("봄 입니다.");
  } else if (a < 9) {
    alert("여름 입니다.");
  } else if (a < 12) {
    alert("가을 입니다.");
  } else {
    alert("월은 1 ~ 12까지만 입력할 수 있습니다.");
  }

 

const rawInput = prompt("태어난 해를 입력해주세요.");
  const year = Number(rawInput);
  const e = year % 12;
  let result;

  switch (e) {
    case 0:
      result = "원숭이";
      break;
    case 1:
      result = "닭";
      break;
    case 2:
      result = "개";
      break;
    case 3:
      result = "돼지";
      break;
    case 4:
      result = "쥐";
      break;
    case 5:
      result = "소";
      break;
    case 6:
      result = "호랑이";
      break;
    case 6:
      result = "토끼";
      break;
    case 6:
      result = "용";
      break;
    case 6:
      result = "뱀";
      break;
    case 6:
      result = "말";
      break;
    case 6:
      result = "양";
      break;
  }
  alert(`${year}년에 태어났다면 ${result} 띠입니다.`);

위 코드를 split() 를 사용하여 간단하게 정리한 코드

 

const rawInput = prompt("태어난 해를 입력해주세요.");
  const year = Number(rawInput);
  const t = year % 12;
  const g = year % 10; //일의 자리 구하기
  // 또는 문자열에서 마지막 문자 추출하기
  const g = rawInput[rawInput.length - 1]; //length는 문자열, 배열에 사용 가능

  let gan = "경,신,임,계,갑,을,병,정,무,기,".split(",");
  let tti = "신,유,술,해,자,축,인,묘,진,사,오,미,".split(",");

  alert(`${year}년에 태어났다면 ${gan[g]}${tti[t]} 년입니다.`);

 

 

 

✅ 느낀점

오늘은 3파트 조건문에 대해 공부했다. 평소 if문은 항상 쓰던 것이라 어려운 부분은 없었지만 switch문은 if문에 비해 많이 써본 경험이 없어 조금 생소했던지라 꼼꼼하게 확인할 필요가 있었다.

먼저 if문에서 가장 중요한 부분은 1. 조건의 순서를 잘 확인해야 한다는 것이다. 혹시라도 상위 조건에서 중복되는 범위가 있을 경우, 하위 조건에서는 절대 실행되지 않기 때문에, 복잡한 로직에서는 반드시 확인해야 할 부분이다. 저번 협업 프로젝트에서 지적받은 가장 큰 부분 중 하나였다. 

2. 상위 조건에서 이미 확인하고 있는 범위를 다시 확인하고 있는지 살펴보자. 간략하게 정리할 수 있는 코드를 불필요하게 길게 나열할 필요가 없다.

switch문에서 가장 중요하고, 새롭게 알게된 부분은 1.switch 대상과 case 안에서도 어떤 표현식이든 올 수 있다는 것이었다. 비교 연산자 등으로 조건을 생성하여 검사할 수도 있었다. 지금까지 변수나 상수값만 검사할 수 있고 그 외 비교 연산자나 조건등은 사용할 수 없는 줄 알았는데 굉장히 중요한 부분을 놓치고 있었다. 물론 switch 대상과 case가 일치하여야만 case문 안의 코드가 작동하기 때문에 switch 대상은 조건문보다 비교할 수 있는 값을 대상으로 두는 경우가 많지만  case에는 조건문도 사용 가능하다는 것을 알았다. 

또 주의해야 할 것은 2.switch 대상과 case의 타입이 반드시 같아야 한다. 타입이 서로 다를 경우에는 조건의 일치 여부와 관계없이 default문이 실행된다. if문 과는 다르게 switch 대상이 분명하지 않거나, case와 일치하지 않거나 등등 모든 불일치의 경우에는 3.switch문 자체를 실행하지 않는 것이 아니라, default문이 있다면 항상 default문이 실행된다.

이 외에 평소에 굉장히 궁금했던 break를 통한 종료와 return을 통한 종료에 대해서 무슨 차이점이 있는지도 기술 매니저님께 질문 드렸다. return문을 적절히 사용해 불필요할 경우, 예상지 못한 버그가 발생할 우려가 있을 경우 함수를 빠르게 종료하는 것은 굉장히 굉장히 중요한 스킬이고 이 역시 저번 협업 프로젝트 때 지적 받았었다.

이 둘은 함수나 반복문 등을 종료시킨다는 부분에서 같지만, return문은 말그대로 반환값을 리턴하며 함수를 종료하고, break는 반환값 없이 그대로 함수를 종료한다는 것이었다. 또 추가적으로 공부해 보니 break는 해당 if문만 종료시키지만, return은 해당 메소드가 호출된 곳까지 종료시킨다. 즉, if문을 포함한 함수 자체를 종료시킨다는 중요한 사실을 알게 되었다.

조건문은 그냥 공부하기에는 간단해 보이지만 항상 프로젝트에서 예상치 못한 버그가 발생했던 부분이었다. 꼼꼼하게 더 공부해야 할 필요성을 많이 느낀다. 조금씩 깊게 공부하니 점점 새로운 개념을 많이 알게되는 것 같아 뿌듯하다! 

더 공부해서 기술매니저님 또는 스터디원들과 질문할 부분이 많아졌으면 하는 바램이다!😄

 

✖️보완할 점

더 공부할 부분 :  var, const, let 선언방식의 차이에 대해 / return문을 통해 함수를 종료해야 하는 경우

아쉬운 점 : 더 공부해서 질문하고 싶은 부분들이 더 많아졌으면 하는 바램이다!