[TIL] JS - 조건문, 문자열, 쉼표 연산자

페어와 코플릿 문제를 풀다가 오류가 생겼다.

function printDaysInMonth(month) {
  if (month === 2) {
    console.log('이번 달에는 28일이 있습니다.');
  } else if (month === 4, 6, 9, 11) {
    console.log('이번 달에는 30일이 있습니다.');
  } else {
    console.log('이번 달에는 31일이 있습니다.');
  }
}

여기서 else if의 조건식으로 들어가 있는 month === 4, 6, 9, 11은 논리적으로 맞지 않다. 이게 틀렸다는 것은 알겠는데 왜 틀렸는지를 설명하기 어려워 구글링 해 보았다. 덕분에 쉼표 연산자(Comma Operator)라는 것을 새로 알게 되었다. 아마 예전에 본 것도 같은데 에러 케이스랑 같이 보니 이해가 더 잘 되었다. 쉼표 연산자는 쉼표로 구분된 각각의 피연산자를 왼쪽에서부터 평가하고, 오직 마지막 피연산자(가장 오른쪽에 있는 피연산자)만 반환한다. month === 4는 주어진 month값에 따라 평가 되어 true 또는 false가 되고 6, 9, 11은 truthy한 값이기 때문에 각각 true가 될 것이다. 하지만 반환은 마지막 피연산자, 즉 11만 하기 때문에 이 조건식 month === 4, 6, 9, 11은 month값에 상관 없이 언제나 true가 될 것이다. 그래서 month에 무슨 수를 넣어도 else까지 넘어가지 않았던 것이다. 그 위의 else if의 조건이 항상 참이어서.

Checkpoint Solution 시간에 문제 풀이를 자원해서 했다. 그리 어려운 문제는 아니었지만 100명이 넘는 사람들이 보는 가운데 내가 아는 것을 설명하려니 긴장되어 목이 탔다. 앞으로 계속 개발자를 하려면, 아니 꼭 개발자가 아닌 다른 일을 하더라도 남들 앞에서 조리 있게 정보/의견을 전달하는 것은 꼭 필요한 일이기에 연습한다고 생각하고 자원했다. 나 말고도 풀이를 하고자 자원하는 사람이 많았다. 다들 적극적으로 참여하는 분위기여서 참 좋다.

Today I Learned

조건문 (Conditional Statement)

if (condition1) {
  // condition1이 true일 때 실행
} else if (condition2) {
  // condition1이 false이고 condition2가 false일 때 실행
} else {
  // condition1과 condition2 모두 false일 때 실행
}

• 조건문의 조건에는 Boolean 즉 true 또는 false으로 결과가 나오는 표현식이 들어가며, 그 결과가 true일때 코드 블록이 실행된다.

• 조건문은 MECE(Mutually Exclusive + Collectively Exhaustive)하게 만들는 것이 좋다.

• 비교 연산자 (Comparison Operator)

  • A > B : A가 B보다 크면 true
  • A < B : A가 B보다 작으면 true
  • A >= B : A가 B보다 크거나 같으면 true
  • A <= B : A가 B보다 작거나 같으면 true
  • A == B : A와 B가 같으면 true
  • A != B : A와 B가 다르면 true
  • A === B : A와 B의 값이 같고, 타입도 같으면 true
  • A !== B : A와 B의 값이 다르거나 타입이 다르면 true

• Falsy : Boolean형으로 변환 시 false값을 가지는 값

  • false
  • 0, -0, 0n
  • '', ""
  • null
  • undefined
  • NaN

• 논리 연산자 (Logical Operator)

  • && : Logical AND : 피연산자가 모두 true일 때 true 반환
  • || : Logical OR : 피연산자 중 하나라도 true이면 true 반환
  • ! : Logical NOT : true를 false로, false를 true로 변환하여 반환

문자열 (String)

• Syntax : 'string', "string"

• 모든 string method는 원본을 변형시키지 않는다.

• 문자열 합치기

  • let word1 = 'hello';
    let word2 = 'world';
    
    let addition = word1 + ' ' + word2; // 'hello world'
    let concatenated = word1.concat(' ', word2); // 'hello world'
    let templateLiteral = `${word1} ${word2}`; // 'hello world'
    
    // String 타입과 다른 타입 사이에 '+' 연산자를 쓰면 String 타입을 반환한다
    'love you ' + 2; // 'love you 2'

• 문자열의 길이 구하기

  • str.length

• Index로 각각의 문자에 접근하기

  • let str = 'abcdef';
    str[0]; // "a"
    str[0] = 'A';
    str[0]; // "a"
    // Index로 각각의 문자에 접근은 가능하지만 수정은 할 수 없다

• 문자열에서 원하는 만큼 자르기

  • slice(startIndex, endIndex)

  • substring(startIndex, endIndex)

  • // startIndex가 endIndex보다 클 때 : 
    let str = 'abcdef';
    slice(4, 2); // ""
    // slice의 startIndex가 endIndex보다 크면 항상 빈 문자열 반환
    substring(4, 2); // "cd"
    // substring의 startIndex가 endIndex보다 크면 startIndex가 endIndex가 되고 endIndex가 startIndex가 된다
    
    // startIndex나 endIndex가 음수일 때 :
    slice(-3, -1); // "de"
    // slice의 startIndex/endIndex가 음수일 경우 (문자열의 길이 + startIndex/endIndex)로 취급
    substring(-3, -1); // ""
    substring의 startIndex/endIndex가 음수일 경우 0으로 취급

• 대/소문자 변환

  • str.toUpperCase()/str.toLowerCase()

• 문자열 중 원하는 문자의 index 찾기

  • let str = 'banana';
    str.indexOf('a'); // 1
    str.indexOf('A'); // -1
    str.lastIndexOf('a'); // 5
    str.indexOf('na'); // 2
    str.lastIndexOf('na'); // 4

• 문자열 중 원하는 문자가 포함되어있는지 찾기

  • let str = 'banana';
    str.includes('a'); // true
    str.includes('A'); // false

• 문자열을 잘라 배열로 만들기

  • String의 split() method는 CSV(Comma-Separated Values) 형식을 처리할 때 유용하다.

  • let coursesCSV = `CS50,HavardX,Computer Science,English
    Fundamentals of Statistics,MITx,Data Analysis,English
    Principles of Biochemistry,HavardX,Medicine,English`
    
    let firstCourseInfo = coursesCSV.split('\n')[0].split(',');
    // ["CS50", "HavardX", "Computer Science", "English"]

• 배열을 합쳐 문자열로 만들기

  • Array의 join() method를 사용하여 배열을 하나의 문자열로 합칠 수 있다.

  • let arr = ["Lion", "Witch", "Wardrobe"]
    let str = arr.join(",");
    // "Lion,Witch,Wardrobe";

• 문자열 앞 뒤의 공백 없애기

  • String의 trim() method를 이용하면 문자열 앞 뒤의 공백을 없앨 수 있다. 문자열 앞의 공백만 없애고 싶다면 trimStart(), 뒤의 공백만 없애고 싶다면 trimEnd()를 이용하면 된다.

• 정규표현식과 replace() method로 문자열 사이의 공백 없애기

  • let str = 'casa blanca';
    str.replace(/\s/g, ''); // 'casablanca'
    

쉼표 연산자 (Comma Operator)

• 쉼표 연산자는 쉼표로 구분된 각각의 피연산자를 왼쪽에서 오른쪽 순으로 평가(evaluate)하고, 마지막 연산자의 값만 반환(return)한다.

• let x, y, z;
  x = (y = 0, z = 1);
  // x = 1
  // y = 0
  // z = 1

• for 반복문에 다수의 매개변수를 제공할 때 흔히 사용된다.

  • let str = 'tacocat';
    function isPalindrome(str) {
      for (let i = 0, j = str.length - 1; i <= j; i++, j--) {
        if (str[i] !== str[j]) {
          return false;
        }
      }
      return true;
    };
    isPalindrome(str);