ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Section 2. 자바스크립트 문자열에 사용되는 연산자
    자바스크립트 2023. 3. 22. 16:54

    비교연산자

    비교연산자는 True 아니면 False를 반환한다.

    표를 보면 사전순상 이라고 되어 있는데 조금 이해하기가 힘들다.

    이 의미는 문자열을 비교할 때를 설명한 것인데 간단히 말하면 a, b가 있다고 생각해보자.

    a는 b보다 먼저 온다 (사전에서 a 다음 b가 오고 c 가 그 다음에 오듯이). 따라서 a가 b보다 그 값이 더 작다~ 가 되는것이다.

    예제를 보면서 더 잘 이해해보자.

    console.log(
      '안녕하세요~' === "안녕하세요~",
      '안녕하세요~' === `안녕하세요~`,
      "안녕하세요~" === `안녕하세요~`,
    ); //자바스크립트에서는 표기방식을 구분하지 않는다

    주석에 쓰여 있듯이 자바스크립트에서는 표기방식을 구분하지 않기 때문에 값은 모두 true 이다. 

    하지만 대소문자는 구분한다.

    'Hello!' === 'hello!' //false를 반환한다

    자바스크립트에서는 특이하게도 ==, != 하면 암묵적으로 타입 변환이 일어난다. 즉, 자료형을 구분하지 않는다.

    console.log(
      '1' == '1', //true
      '1' == 1, //true
      '1' == 2 //false
    );
    
    console.log(
      '1' != '1', //false
      '1' != 1, //false
      '1' != 2 //true
    );

    각 출력문에서 2번째를 주의깊게 보면 문자열 1과 숫자 1을 비교했을때 true와 false가 반환된 것을 볼 수 있다.

    그 이유는 자바스크립트에서 비교할때 자료형이 다르면 타입을 변환을 해서 비교를 하기 때문이다. 

    이 코드에서는 문자열 쪽을 숫자로 변환해서 비교를 하게 된다. 암묵적으로 타입 변환이 일어났다.

     

    그렇다면 ===, !== 으로 비교를 해보면 다음과 같다.

    console.log(
      '1' === '1', //true
      '1' === 1, //false
      '1' === 2 //false
    );
    
    console.log(
      '1' !== '1', //false
      '1' !== 1, //true
      '1' !== 2 //true
    );

    ==, != 을 썼을때와 확연한 차이가 보인다. 자료형은 굉장히 중요해서 되도록이면 암묵적 형변환이 일어나지 않게 코드를 작성하는 것을 추천한다.

     

    사전순 비교

    console.log(
      'ABC' < 'abc', //true
      'apple' <= 'banana', //true
      '가나다' > '라마바', //false
      '안녕' >= '안녕' //true
    );

    여기서 알 수 있는 것은 컴퓨터 상에서는 대문자가 소문자보다 사전적으로 앞에 온다는 것이다. 즉 , 대문자가 소문자보다 그 값이 더 작다라고 이해하면 되겠다.

    3번째를 보면 이렇게 말로 풀어낼 수 있다. '가나다' 는 '라마바' 보다 나중에 오는가? 당연히 '가나다'가 '라마바' 보다 먼저오니까 false가 된다.

     

    그렇다면 숫자와 문자열 비교를 다시 해보자.

    // ⚠️ 숫자 문자열 관련 주의!
    console.log(
      100 > 12, // 숫자는 그 자체로 비교. true
      '100' > '12', // 문자는 사전순으로 비교. false
      '100' > 12, // 문자와 숫자를 비교하면 문자를 숫자로 변환 //true
    );

    두번째를 주의깊게 보면 문자열이 아라비아 문자 그대로 바뀌어서 비교를 한다고 생각하면 된다. 

    100에서 1다음 0이 왔는데 12에서는 1에서 2가 왔다. 즉, 12가 100보다 사전적으로는 나중에 온다는 것이다. 나중에 오니까 그 값이 100보다 더 크다고 생각할 수 있다. 

     

    연결 연산자

     

    +연산자 부터 보자. 이항연산자 라고도 한다.

    let str1 = 'Hello';
    
    // 값 반환
    let str2 = ' ' + 'World';
    
    console.log(str1); //Hello
    console.log(str2); // World
    
    let str3 = str1 + str2; 
    
    console.log(str3); //Hello World
    
    // 부수효과 없음
    console.log(str1); //Hello
    console.log(str2); // World

    +연산자는 문자열을 이어준다. 그리고 부수효과가 없다. 부수효과는 할당연산자에서 알아보자.

     

    += 연산자. 할당연산자 라고도 한다.

    let str1 = '헬로';
    str1 += ' 월드';
    
    // 부수효과
    console.log(str1); //헬로 월드
    
    // 값 반환
    let str2 = str1 += '~~~';
    
    console.log(str2); //헬로 월드~~~
    
    // 부수효과
    console.log(str1); //헬로 월드~~~

    str2를 보면 '헬로 월드' 라는 값을 가지고 있는 str1에 ~~~를 할당연산자를 사용해서 뒤에 붙여서 값을 담았다.

    그리고 다시 str1을 출력해 봤더니 str1의 값이 str2와 동일해진 것을 볼 수 있다. 이것을 부수효과 라고 한다.

     

    주의해야 할 점은 다음과 같다.

    // ⚠️ 오류. 왼쪽 값은 부수효과의 대상(변수)이어야 함
    let str = '헬로' += '월드';
    
    // ⚠️ 오류. 왼쪽 값은 부수효과의 대상(변수)이어야 함
    const STR = '안녕~';
    STR += ' 반가워요!';

     

    다수의 문자열 이어붙이기

    const lyric1 = '노는 게 제일 좋아'
    + '\n친구들 모여라'
    + '\n언제나 즐거워'
    + '\n개구쟁이 뽀로로';
    
    console.log(lyric1);
    
    let lyric2 = '눈 덮인 숲 속 마을';
    lyric2 += '\n꼬마펭귄 나가신다';
    lyric2 += '\n언제나 즐거워';
    lyric2 += '\n뽀롱뽀롱뽀롱뽀롱 뽀로로';
    
    console.log(lyric2);

    딱히 설명이 필요하지 않다.

     

    다른 자료형과 더하면 문자열 반환

    let result = '안녕' + 1 + true;
    
    console.log(result); //안녕1true
    console.log(typeof result); //string
    
    result += null; 
    result += undefined;
    
    console.log(result); //안녕1truenullundefined
    console.log(typeof result); //string

    +연산자나 +=연산자를 사용하면 같이 사용되는 것들은 자료형이 어떻든 문자열로 바꿔서 취급한다.

Designed by Tistory.