자바스크립트 연산자(Operators) 이해하기

자바스크립트에서 ==, ===, !=, !==는 서로 다른 동작 방식을 가지고 있는데요. 각 연산자의 차이점을 알아보도록 하겠습니다.

1. == (느슨한 동등 연산자)

• 역할 : 두 값이 서로 동등한지를 비교하는 연산자입니다. 비교할 때 타입 변환이 자동으로 일어나는 것이 특징입니다.
• 특징 : 값이 다르더라도, 자바스크립트는 두 값을 같은 타입으로 변환한 후 비교합니다. 
• 그래서 사실 실무에서는 자주 쓰이지 않습니다.

console.log(5 == '5'); // true, 숫자 5와 문자열 '5'를 비교할 때 문자열이 숫자로 변환됩니다.
console.log(true == 1); // true, true는 숫자 1로 변환되어 비교됩니다.
console.log(null == undefined); // true, null과 undefined는 동등하다고 간주됩니다.

2. === (엄격한 동등 연산자)

• 역할 : 두 값이 동일한지를 비교합니다. 타입변환 없이 모두 같아야 참으로 간주합니다.
• 특징 : 값과 데이터 타입이 둘 다 같을 때만 참입니다.

console.log(5 === '5'); // false, 값은 같지만 타입이 다르므로 false.
console.log(true === 1); // false, true는 boolean이고 1은 숫자이므로 타입이 다릅니다.
console.log(null === undefined); // false, 둘의 타입이 다르므로 다릅니다.

3. != (느슨한 부등 연산자)

• 역할 : 두 값이 동등하지 않은지를 비교합니다. 비교할 때 타입 변환이 일어납니다.
• 특징 : ==와 반대로 값이 같아도 타입이 다르면 참으로 간주됩니다.

console.log(5 != '5'); // false, 타입 변환 후 값이 같으므로 false.
console.log(true != 0); // true, true는 1로 변환되며 0과 같지 않습니다.

4. !== (엄격한 부등 연산자)

• 역할 : 두 값이 동일하지 않은지를 비교합니다. 타입 변환 없이 값과 타입이 모두 달아야 참입니다.
• 특징 : 값 또는 타입이 다를 때만 참입니다.

console.log(5 !== '5'); // true, 값은 같지만 타입이 다르기 때문에 true.
console.log(true !== 1); // true, true는 boolean이고 1은 숫자이므로 타입이 다릅니다.
console.log(null !== undefined); // true, 타입이 다르기 때문에 다릅니다.

 

➡️사실 1, 3번은 잘 안쓰이고 2, 4번이 주로 쓰입니다.

5. 논리 연산자 (&&, || )

• &&와 ||의 차이점은 and와 or라는 점은 다들 알고 있으실텐데요.
• 자바스크립트를 하다보면 논리 연산자 때문에 추후에 헷갈리는 점이 생길 수 있으니 아래 4가지는 꼭 암기하시는 것이 좋아요.

1. &&를 사용했을 때 좌측이 true면 우측 값 반환
2. &&를 사용했을 때 좌측이 false면 좌측 값 반환
3. ||를 사용했을 때 좌측이 true면 좌측 값 반환
4. ||를 사용했을 때 좌측이 fasle면 우측 값 반환

이렇게 보기만 하면 별로 어려워 보이지 않지만 예제를 통해 확인하면 은근 헷갈린답니다..

// 모든 조건이 true이므로 마지막 값 '123' 반환
console.log(true && true && '123'); // '123'

// 중간에 false가 있으므로, false 반환
console.log(true && false && '123'); // false

// 좌측이 false이므로 우측 평가 없이 좌측 값 반환
console.log(false && 'hello'); // false

// 첫 번째 true이므로 좌측 값 반환
console.log(true || false || '123'); // true

// 첫 번째가 false이므로 두 번째 값 반환
console.log(false || true || '123'); // true

// 모든 값이 false이므로 마지막 값 반환
console.log(false || false || '123'); // '123'

6. 기타 연산자 (??)

• ?? 연산자는 null 또는 undefined인 경우에만 오른쪽 값을 반환합니다. 일반적인 || 연산자와는 달리 fasle, 0, ''와 같은 falsy 값은 왼쪽 값으로 간주됩니다.

let name;
name = name ?? '123'; // name이 undefined이므로 '123'이 할당됨
console.log(name); // '123'

• 여기에서 name ??= '123'; 으로 줄여서 작성해도 괜찮습니다.