-
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
+연산자나 +=연산자를 사용하면 같이 사용되는 것들은 자료형이 어떻든 문자열로 바꿔서 취급한다.
'자바스크립트' 카테고리의 다른 글
Section 2. 자바스크립트 불리언(boolean)과 관련 연산자 (0) 2023.03.22 Section 2. 자바스크립트 숫자(Number)와 관련 연산자 (0) 2023.03.22 Section 2. 자바스크립트 문자열(string) - 텍스트 데이터 (0) 2023.03.22 Section 2. 자바스크립트 자료형과 정적, 동적 타입 (0) 2023.03.21 Section 2. 자바스크립트 자료형-데이터의 종류 (0) 2023.03.21