문자열에 사용되는 연산자

1. 비교 연산자

연산자	의미 - ⭐️ 반환하는 여부	비고
x == y	값이 같다.
x === y	자료형도 값도 같다.	권장
x != y	값이 다르다.
x !== y	자료형 또는 값이 다르다.	권장
x < y	사전순상 x가 먼저 온다.
x <= y	사전순상 x가 먼저 오거나 같다.
x > y	사전순상 y 먼저 온다.
x >= y	사전순상 y 먼저 오거나 같다.

 

(1) 표기방식을 구분하지 않음

console.log(
  '안녕하세요~' === "안녕하세요~",
  '안녕하세요~' === `안녕하세요~`,
  "안녕하세요~" === `안녕하세요~`,
); // true true true

 

(2) 대소문자는 구분함

'Hello!' === 'hello!' // false

 

(3) ==, != 의 경우, 자료형을 구분하지 않음(암묵적 타입 변환)

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

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

 

(4) ===, !== 의 경우, 자료형을 구분함

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

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

 

(5) <, <=, >, >= 의 경우, 문자열을 사전순으로 비교하고 숫자는 그 자체로 비교함

console.log(
  'ABC' < 'abc', // 알파벳에서는 대문자가 소문자보더 앞에 위치함
  'apple' <= 'banana', // 알파벳에서 a 가 b 보다 앞 순서이기 때문에 더 작은 것으로 여김
  '가나다' > '라마바', // 한글에서도 '가' 가 '라' 보다 앞 순서이므로 더 작은 것으로 여김
  '안녕' >= '안녕'
); // true true false true

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

---

2. 연결 연산자

연산자	의미	부수효과
x + y	x와 y를 이어붙인 값을 반환	없음
x += y	x에 y를 이어붙이고 그 결과를 반환	✅있음

부수효과 : 값을 반환하는 메서드나 함수가 외부 상태를 변경하는 경우

 

 

(1) + 연산자(이항연산자) -> 부수효과 없음

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

- str1 과 str2 를 더한 값을 str3 에 할당해도 str1 과 str2 의 값은 바뀌지 않음

// 값 반환
console.log(str3 + '!!!' + ' ' + '😀'); // Hello World!!! 😀

// 부수효과 없음
console.log(str3); // Hello World

 - str3 에 다른 문자열들을 더해서 출력해도 str3 의 값은 바뀌지 않음

 

(2) += 연산자(할당연산자) -> 부수효과 있음

let str1 = '헬로';
str1 += ' 월드'; // str1 = str1 + ' 월드'

// 부수효과
console.log(str1); // 헬로 월드'

- str1 에 다른 값을 할당했기 때문에 str1 의 값이 변함

// 값 반환
let str2 = str1 += '~~~'; // str1 = str1 + '~~~' -> str2 = str1 + '~~~'

console.log(str2); // 헬로 월드~~~

// 부수효과
console.log(str1); // 헬로 월드~~~

- += 연산자를 사용하여 str1 의 값이 또 변경됨

// ⚠️ 오류. 왼쪽 값은 부수효과의 대상(변수)이어야 함
let str = '헬로' += '월드';
// '헬로' = '헬로' + '월드' 이므로 성립하지 않음

// ⚠️ 오류. 왼쪽 값은 부수효과의 대상(변수)이어야 함
const STR = '안녕~'; // const 로 선언한 상수는 값을 변경할 수 없음
STR += ' 반가워요!';

 

(3) 다수의 문자열 이어붙이기

const lyric1 = '노는 게 제일 좋아'
+ '\n친구들 모여라'
+ '\n언제나 즐거워'
+ '\n개구쟁이 뽀로로';

console.log(lyric1);
/* 노는 게 제일 좋아
   친구들 모여라
   언제나 즐거워
   개구쟁이 뽀로로 */

let lyric2 = '눈 덮인 숲 속 마을';
lyric2 += '\n꼬마펭귄 나가신다'; // lyric2 = lyric2 + '\n꼬마펭귄 나가신다'
lyric2 += '\n언제나 즐거워'; // lyric2 = lyric2 + '\n언제나 즐거워'
lyric2 += '\n뽀롱뽀롱뽀롱뽀롱 뽀로로'; //  lyric2 = 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

 

 

정리참조

https://www.yalco.kr/@javascript/2-4/

문자열에 사용되는 연산자