JavaScript 연산자의 종류와 사용법

사칙 연산자

1. 더하기(+)

더하기 연산자(+)는 숫자 피연산자의 합을 구하거나, 문자열을 서로 연결합니다.

console.log(2 + '2') // 22
console.log('hello' + 'everyone') // "hello everyone"

첫 번째 예제처럼 숫자와 문자열을 더할 경우, 숫자가 문자열로 변환된 후 연결됩니다.

const obj = {
    valueOf() {
        return 42; 
    },
    toString() {
        return "Hello";
    },
};

console.log("Result: " + obj); // "Result: 42"
console.log("Result: ".concat(obj)); // "Result: Hello"

그렇다고 문자열을 연결할 때 concat()과 동일하지는 않습니다. 더하기 연산자는 valueOf()를 통해 표현식을 원시 타입으로 먼저 변환하는 반면 concat()은 toString()을 먼저 호출합니다.

2. 빼기(-)

빼기 연산자(-)는 두 연산자의 차이를 구합니다.

console.log(5 - 3);
// Expected output: 2

console.log(5 - '3');
// Expected output: 2

console.log(5 - 'hello');
// Expected output: NaN

console.log(5 - true);
// Expected output: 4

숫자와 문자열의 연산에서는 문자열이 숫자로 변환된 후 계산됩니다.

변환이 불가능한 문자열과 연산하면 결과는 NaN입니다.

**3. 곱하기(*)**

곱하기 연산자(*)는 두 연산자의 곱을 구합니다.

console.log(3 * 4);
// Expected output: 12

console.log(-3 * 4);
// Expected output: -12

console.log('3' * 2);
// Expected output: 6

console.log('foo' * 2);
// Expected output: NaN

숫자와 문자열의 연산에서는 문자열이 숫자로 변환된 후 계산됩니다.

변환이 불가능한 문자열과 연산하면 결과는 NaN입니다.

4. 나누기(/)

나누기 연산자(/)는 왼쪽 피연산자를 피제수, 오른쪽 피연산자를 제수로 하여 몫을 구합니다.

console.log(12 / 2);
// Expected output: 6

console.log(3 / 2);
// Expected output: 1.5

console.log(6 / '3');
// Expected output: 2

console.log(2 / 'foo');
// Expected output: NaN

숫자와 문자열의 연산에서는 문자열이 숫자로 변환된 후 계산됩니다.

변환이 불가능한 문자열과 연산하면 결과는 NaN입니다.

비교연산자

1. 동등 연산자 (==)

동등 연산자(==)는 두 개의 피연산자가 동일한지 확인하며, 불리언 결과를 반환합니다.

다른 타입의 피연산자들끼리의 비교를 시도합니다.

console.log(1 == 1);
// Expected output: true

console.log('hello' == 'hello');
// Expected output: true

console.log('1' == 1);
// Expected output: true

console.log(0 == false);
// Expected output: true

console.log(null == undefined); 
// Expected output: true

null과 undefined는 서로 동등하다고 간주합니다.

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

엄격한 동등 연산자(===)는 두 피연산자가 값과 타입이 모두 동일한지 비교하여 불리언 결과를 반환합니다. 동등 연산자(==)와 달리, 엄격한 동등 연산자는 타입 변환을 하지 않습니다. 따라서 서로 다른 타입의 피연산자는 값이 같아 보일지라도 다르다고 간주합니다.

console.log(1 === 1);
// Expected output: true

console.log('hello' === 'hello');
// Expected output: true

console.log('1' === 1);
// Expected output: false

console.log(0 === false);
// Expected output: false

3. 부등 연산자 (!=)

부등 연산자(!=)는 두 피연산자가 같지 않은지 확인하여 불리언 결과를 반환합니다.

동등 연산자의 반대입니다.

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

엄격한 부등 연산자(!==)는 두 피연산자의 값이 같지 않거나, 타입이 다르면 true를 반환하고, 값과 타입이 모두 동일하면 false를 반환합니다.

일치 연산자의 반대입니다.

논리 연산자

1. 논리적 AND 연산자(&&)

논리적 AND (&&) (논리적 연결) 연산자는 모든 불리언 피연산자가 true가 되었을 때 해당 피연산자의 집합은 true가 됩니다.

const a = 3;
const b = -2;
console.log(a > 0 && b > 0);
// Expected output: false

왼쪽 값이 참이면 오른쪽 값을 반환하고, 왼쪽 값이 거짓이면 왼쪽 값을 반환합니다.

result = "" && "foo"; // result 에 ""(빈 문자열)이 할당됩니다
result = 2 && 0; // result 에 0 이 할당됩니다
result = "foo" && 4; // result 에 4 가 할당됩니다.

2. 논리적 OR (||) (논리적 분리) 연산자

논리적 OR (||) (논리적 분리) 연산자는 피연산자 중 하나 이상이 참인 경우에만 참입니다. 일반적으로 불리언(논리적) 값과 함께 사용되며, 이 경우에는 불리언 값을 반환합니다. 그러나 || 연산자는 실제로 지정된 피연산자 중 하나의 값을 반환하므로, 이 연산자를 불리언이 아닌 값과 함께 사용하면 불리언이 아닌 값이 반환됩니다.

const a = 3;
const b = -2;
console.log(a > 0 || b > 0); 
// Expected output: true

하나라도 참이면 true로 평가됩니다. 왼쪽 값이 참이면 오른쪽 값을 평가하지 않고 왼쪽 값을 반환합니다.

모든 값이 거짓일 경우 마지막 값을 반환합니다.

result = "" || "foo"; // result 에 "foo"가 할당됩니다
result = 2 || 0;       // result 에 2가 할당됩니다
result = "foo" || 4;   // result 에 "foo"가 할당됩니다

3. 논리적 NOT (!)

논리적 NOT (!) (논리적 보수, 부정) 연산자는 참을 거짓으로 만들고, 반대로 거짓을 참으로 만듭니다.

FrontEnd-Dev