TIL02. JavaScript : About Six Operator

📌 이 포스팅에서는 JavaScript의 6가지 연산자와 연산자 비교 시, 예외사항에 대해 알아보도록 하겠습니다.

🌈 About Six Operator

🔥 6개의 연산자 이해하기

🔥 0, null, undefined 비교

1. About Six Operator

JavaScript에서 연산자는 사칙연산자, 증감연산자, 할당연산자, 비교연산자, 논리연산자, 동등연사자로 구분할 수 있습니다.

🤔 사칙연산자란?

사칙연산자는 수학 시간에 배운 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/), 나머지(%) 등을 의미합니다.
덧셈에는 데이터 타입에 따른 규칙이 있습니다. 1) plus : 숫자끼리는 더합니다. 2) concat : 2중 1개라도 항이 string이면 붙입니다.

console.log(1 + 1) // 👈 2
console.log('Hello' + 999) // 👈 Hello999
console.log(999 + 'Hello') // 👈 999Hello
console.log('6' + 3); // 👈 63
console.log(6 + '3'); // 👈 63
console.log(2 + 4 + '3'); // 👈 63

뺄셈, 곱셈, 나눗셈, 나머지 연산자 등에서는 두개의 항이 모두 string이라도 우선 숫자로 변환하여 계산을 시도합니다.
숫자로 변환되지 않은 진짜 문자열이 하나라도 있다면 Nan(Not a Number)를 반환합니다. 숫자가 아니라는 의미입니다.

console.log(10 - 2) // 👈 8
console.log(5 * 2) // 👈 10
console.log(8 / 2) // 👈 4
console.log(7 % 2) // 👈 1
console.log(6 - '2'); // 👈 4
console.log('3' * 2); // 👈 6
console.log('6' / '2'); // 👈 3
console.log('9' % '2'); // 👈 1
console.log('Hello' - 999) // 👈 Nan
console.log(999 * 'Hello') // 👈 Nan

JavaScript에서 몫은 어떻게 구할까요? Python에서는 나누기(/), 몫(//), 나머지(%) 입니다. 하지만, JavaScript에서는 //는 주석을 의미하죠. 몫을 손쉽게 구해주는 연산자가 없나봅니다. 이에 parseInt 함수를 사용해서 몫을 구합니다.

console.log(parseInt(5/2)) // 2
console.log(parseInt(33/2)) // 16
console.log(parseInt(32/8)) // 4

🤔 증감연산자란?

숫자를 순차적으로 증가(++)시키거나 감소(--)시키는 것이 증감연산자이며, 반복문에서 주로 사용합니다.
즉, ++는 counter = count + 1를 축약하여 표현한 식이고, --는 counter = count - 1를 축약한 것과 같습니다.

let counter = 100;
counter++;  // 101 👈 counter = count + 1
counter++;  // 102 👈 counter = count + 1
counter++;  // 103 👈 counter = count + 1
console.log(counter); // 103
counter--; // 102 👈 counter = count - 1   
counter--; // 101 👈 counter = count - 1          
counter--; // 100 👈 counter = count - 1        
console.log(counter); // 100

증감연산자는 변수와 연사자의 위치에 따라서 전위형, 후위형으로 나뉩니다.
위에 counter 변수의 예시는 전위형 입니다. 전위형은 증감연사자(++ 또는 --)가 변수 앞에 붙어있습니다.

• 전위형(++변수 또는 --변수)은 자신의 값을 증가 또는 감소 시킨 뒤 값을 변수에 할당
• 후위형(변수++ 또는 변수--)은 변수에 먼저 할당시킨 뒤, 자신을 증가 또는 감소 시킴

말이 어렵습니다. 아래 예시를 살펴보겠습니다.

// 증감연산자 전위형
// counter를 먼저 증가시킨 뒤, 증가된 값을 반환하여 할당함
let counter = 10;
let a = ++counter; // 👈 let a = (counter = counter + 1)
console.log(`counter: ${counter}, a: ${a}`) // 👈 counter: 11, a: 11
// 증감연사자 후위형
let counter = 10;
let a = counter++;  // 👈 let a = counter, counter = counter + 1
console.log(`counter: ${counter}, a: ${a}`) // 👈 counter: 11, a: 10

증감연사자에서 주로 보는 형태는 전위형입니다. 전위형은 자신을 먼저 계산 한다음에 값을 할당시킵니다. 따라서 후위형은 그 반대로 생각하면 됩니다.

// 전위형 vs 후위형 예제
let counter = 2; // 초기 counter 2로 선언
const preIncrement = ++counter;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`); // preIncrement: 3, counter: 3
const postIncrement = counter++;
console.log(`postIncrement: ${postIncrement}, counter: ${counter}`); // postIncrement: 3, counter: 4
const preDecrement = --counter;
console<.log(`preDecrement: ${preDecrement}, counter: ${counter}`); // preDecrement: 3, counter: 3
const postDecrement = counter--;
console.log(`postDecrement: ${postDecrement}, counter: ${counter}`); // postDecrement: 3, counter: 2

🤔 할당연산자란?

할당연사자는 그동안 계속 사용한 "=" 입니다. 할당할 때 쓰이는 연산자의 일종이죠. 축약형에 대해 아래 정리해보았어요.
"="을 기준으로 왼쪽에 있는 표현식에서 먼저 계산이 먼저 이뤄지고, 그 결과를 "="을 기준으로 오른쪽에 있는 변수에 할당시킵니다.

let x = 3;
let y = 6;
x += y; // 👈 x = x + y
console.log(x,y) // x=9, y=6
x -= y; //  👈  x = x - y
console.log(x,y) // x=3, y=6
x *= y; // 👈  x = x * y
console.log(x,y) // x=18, y=6
x /= y; //  👈  x = x / y
console.log(x,y) // x=3, y=6

연산자의 우선순위는 비교적 낮은 편입니다.

let n = 2;
n *= 3 + 5; // 👈 할당연산자가 우선순위 낮아 오른쪽 연산(3+5)부터 연산됩니다. 이후 할당연산자가 작동합니다.
console.log(n); // 16

🤔 비교연산자란?

• 크고 작은 관계를 비교하는 연산자를 비교연산자라하고, 연산 결과를 Boolean 형태로 반환합니다.

console.log(10 < 6); // false
console.log(10 <= 6); // false
console.log(10 > 6); // true
console.log(10 >= 6); // ture

🤔 논리연산자란?

논리연산자는 Truthy 또는 Falsty한 값 또는 Boolean 값을 비교하는데 사용하고, 연산 결과를 Boolean 형태로 반환합니다.
논리연사자의 종류는 OR연산자(||), AND연산자(&&), NOT연산자(!)가 있습니다.

OR연산자(||)는 왼쪽부터 true값을 찾아나가고, true가 없으면 false를 반환합니다.

console.log(true || true); // 👈 true
console.log(true || false); // 👈 true
console.log(false || true); // 👈 true
console.log(false || false); // 👈 false
console.log(false || "" || 700 || 300); // 👈 700

AND연산자(&&)는 왼쪽부터 false값을 찾고, false가 없으면 true를 반환합니다.

console.log(true && true); // 👈 true
console.log(true && false); // 👈 false
console.log(false && true); // 👈 false
console.log(false && false); // 👈 false
console.log(true && "jaewon" && 0 && 300 && -1); // 👈 0

🤔 동등연산자란?

동등한지 아닌지를 비교하는 것을 동등연사자라 하는데, 동등하면 true, 동등하지 않으면 false를 반환합니다.
또한 JavaScript에서는 비교하려는 피연산자가 다른 타입일 때는 형변환하여 비교합니다.
이에 동등연산자('==', equality operator)를 사용하여 0과 false를 비교하면 true의 값을 반환합니다.
이를 더 정확하고 엄격하게 구분하기 위해서는 일치연산자('===', strict equality operator)를 사용합니다.
일치연산자는 동등연산자와 같은 비교 기능에 더해 데이터 타입까지 같은지 확인하여 true, false를 반환합니다.
데이터 타입까지 비교한다는 것은 형변환을하지 않고 그 자체로 갑과 데이터 타입을 비교한다는 의미입니다.
동등연산자와 일치연산자의 반대로 비동등연산자('!==')와 비일치연산자('!===')라는 것도 존재합니다.

console.log(10 == '10'); // 👈 ture
console.log(10 === '10'); // 👈 false
console.log(10 === 10); // 👈 ture
console.log(0 == false); // 👈 true
console.log('' == false); // 👈 true
console.log( 0 === false ); // 👈 false

2. 0, null, undefined 비교

'null'과 'undefined'는 모두 '값이 없음'의 의미 가지고, 'null'은 Null 타입의 유일한 값이고, 'undefined' 역시 Undefined 타입의 유일한 값입니다.
단, 'null'은 의도적으로 값이 없음을 나타낼 때 사용하지만, 'undefined'은 변수값이 할당 자체가 되지 않았다는것을 의미합니다.

let testNull = null
console.log(testNull) // 👈 null
let testUndefined;
console.log(testUndefined) // 👈 undefined
console.log(typeof null) // object 👈 object라 나오지만 Null 타입입니다.
console.log(typeof undefined) // 👈 undefined

동등연산자에서 'null'이 헷갈리는 이유는 동등연산자에서 'null'을 만나면 비교할 때, 형변환이 이뤄지지 않기 때문입니다. 그렇기 때문에 'null'을 만나면 대부분 false가 나올 수 밖에 없겠죠.
다만, 예외적으로 동등연산자 비교 시, "null"이 "undefined"을 만났을 때는 서로를 특별한 커플로 취급하기 때문에 true를 반환해줍니다.
단, 일치연산자로 비교될 때는 역시 데이터 타입이 다르기 때문에 flase를 반환합니다.

// null vs undefined
console.log( null == undefined ); // 👈 true 
console.log( null === undefined ); // 👈 false

비교연산자에서는 'null'도 숫자로 형 변환을 시켜줍니다. 'null'이 0보다 큰지 비교하면 false를 반환하겠죠.
단, 동등연산자에 'null'이 존재하면 역시 형변환이 이뤄지지 않기 때문에 false입니다.

// null vs 0
console.log( null > 0 );  // 👈 false -> null이 숫자형 0으로 반환되기 때문에 크지 않음
console.log( null == 0 ); // 👈 false -> 동등연산자에서 null을 만나때는 형변환 안이뤄짐(예외)
console.log( null >= 0 ); // 👈 true -> 비교연산자에서는 null이 숫자형 0으로 반환된기 때문에 true

'undefined'는 비교연산자로 비교할 경우, Nan으로 형변환이 되어 비교가 됩니다. 숫자와 비교하면 Nan은 숫자가 아니기 때문에 false를 반환합니다.

// undefined vs 0
alert( undefined > 0 ); // 👈 false -> undefined 숫자형으로 형변환되면 NaN이기 때문
alert( undefined < 0 ); // 👈 false -> undefined 숫자형으로 형변환되면 NaN이기 때문
alert( undefined == 0 ); // 👈 false  -> 형변환 되지 않음. 즉, undefined는 null 또는 undefined랑만 같음