[TIL-40] 노마드코더 크롬앱(JS) 클론코딩 #2.11~#2.16

#2 JS 기초 이론

Return

• console.log 없이 function의 코드 안에서 결과값 얻고 싶음.
  • console창 말고 화면에서 출력하거나 데이터를 받아서 이용할 수 있게. console이나 alert 사용하면 브라우저에 띄워지는 사건이 일어나고 그게 끝임.
  • 즉, function의 계산 결과를 받고 싶음! 보통은 어떤 값을 얻기 위해 function 사용.
• { } 안 코드 앞에 return을 씀.
  • const age = 96;
    function calculateKrAge(ageOfForeigner) {
       return ageOfForeigner + 2;
    }
    const krAge = calculateKrAge(age);
  • function을 실행하면 그 결과로 calculateKrAge(age)를 대체함.
  • 반환값이 있는 function을 호출하는 코드(예. calcultator.plus(2, 3);)를 쓰면, 그 자리에 반환값(5)을 받을 수 있음.
• return을 써야 하는 이유
  • 예) const calculator = {
           add: function (a, b) {
           console.log(a + b);
         }
         const plusResult = calculator.add(2, 3);
  • plusResult 변수에 함수를 할당하면 이 변수는 해당 함수의 결과 타입을 가질 것. 근데 add 함수는 반환값 없음. 계산 결과를 console.log할 뿐.
  • 따라서 plusResult = undefined. 함수의 값을 콘솔 외부에서 얻기에 적합하지 않음.
• 한번 return하면 function은 작동을 멈추고 끝남.
  • 그 뒤에 console.log든 뭐든 써도 그 코드는 작동하지 않음.
  • function은 실행되고 나면 결과를 남기고 사라짐.

 

Conditionals(조건문)

• 조건문 : true/false를 확인해줌.
  • 예) 사용자가 로그인되어 있다면, 뭔가를 보여주기
• [예시] 음주 가능 나이 판별 계산기
  • prompt 함수 : 2개의 argument를 받아서 사용자가 창을 띄울 수 있게 해줌.
    • 메시지(string)와 디폴트. 지금은 메시지만 씀.
    • 사용자에게 메시지를 보여주고 값을 넣으라고 함.
    • 문제
      • 값을 받을 때까지 JS를 멈춰둠. 그 다음 코드가 작동되지 않음.
      • 그리고 prompt 창에 CSS 적용할 수 없음.
      • 브라우저에서 팝업 차단당하기도 함.
      • 그래서 잘 사용하지 않음. 아주 오래된 기능.
  • typeof 변수 : 변수의 유형을 확인할 수 있음.
  • parseInt 함수 : 문자열 -> 숫자. 데이터 타입 변경하기.
    • 사용자가 무슨 데이터를 입력하든 간에 숫자 타입으로 바꾸는 방법.
      • 예) "15" => 15 저는 왜 안되죠?
    • 숫자가 아닌 걸 입력하면 NaN(not a number)라고 알려줌.
    • 입력 받은 age가 NaN이 아니면 메시지 띄움.
  • isNaN 함수 : 인자가 숫자인지 아닌지 불리언으로 알려줌.
• 조건문 만드는 법
  • if(condition) {
       condition === true
    } else {
       condition === false
    }
  • 컨디션 위치의 코드는 불리언으로 판별가능해야 함. true와 false 뿐.
  • 컨디션이 true면 if {} 안 코드가 실행되고 false면 else {} 안 코드가 실행됨.
• 조건이 여러 개일 때
  • if(condition1) {
       condition1 === true
    } else if(condition2) {
       condition2 === true
    } else {
       condition2 === false
    }
  • 꼭 else로 끝내지 않아도 됨.
• 동시에 여러 조건을 물을 때
  • and 연산자, && : 이어진 두 개의 조건을 동시에 만족해야 함. 하나라도 false면 false.
    • 예 : (age >= 18 && age <=50)
  • or 연산자, || : 둘 중 하나만 true라도 true.
    • 예 : 음수를 입력했을 때, (isNaN(age) || age < 0)
  • === : 값이 아예 같은 경우.
    • 앞에 나온 범위에 그 값이 포함될 수도 있음. 그럼 앞에서 코드가 실행되어버리므로 === 일 때 원하는 코드로 작동하지 않음. === 값이 포함되는 범위가 나오기 전에 if === 먼저 쓰기!
    • 예 : if (age > 80) {
               console.log("you can drink");
            } else if (age === 100) {
               console.log("you are wise");
            }
      • 이렇게 하면 100일 때 앞에서 80이상에 포함되어 you can drink로 실행되기 때문에 (age === 100)을 먼저 써야 함.
  • !== : 값이 같지 않은 경우.