JavaScript의 연산자도 우선순위나 기능에 있어서 다른 언어와 큰 차이점은 없지만, 다르게 동작하는 연산자가 존재한다.

이번 포스팅에서는 모든 연산자를 다루지는 않고, 다르게 동작하는 연산자에 대해서만 알아보려고 한다. 그럼 출발~!😆

나누기 연산자

JavaScript는 정수와 실수를 별도의 타입으로 분리하지 않고 Number 타입으로 통일해놓았다.

그래서 정수처럼 보이는 값들도 모두 Double 타입으로 되어있고, 정수끼리 나누어도 결과는 실수 형태로 나오게 된다.

다음 코드를 보도록 하자!

let value1 = 3;
let value2 = 2;

console.log(value1 / value2); // 1.5

정수끼리 나누기 연산을 통해 몫을 구하려 했지만, 결과를 보면 설명한 대로 실수가 나오게 되었다.😨

그래서 JavaScript에서 몫을 얻으려면 다음과 같이 parseInt() 메서드를 이용하거나, Math.floor() 메서드를 이용해야 한다!

let value1 = 3;
let value2 = 2;

console.log(parseInt(value1 / value2)); // 1
// console.log(Math.floor(value1 / value2)); // 1

'오 그러면 parseInt() 메서드를 이용해서 value를 정수로 명시해두고 연산하면 되지 않을까?' 같은 생각에 대한 답은 아래에 있다.

let value1 = parseInt(3);
let value2 = parseInt(2);

console.log(value1 / value2); // 1.5

어림도 없었다..😥

이처럼 parseInt() 메서드의 매개 변수로 Number 타입을 넘겨주게 되면 정수부만 남기고 소수점 아래의 수는 버리기만 할 뿐이고, JavaScript의 Number는 Double 타입으로 되어있다는 것을 명심하도록 하자!

논리 연산자

사실 이제부터 설명할 논리 연산자 때문에 포스팅했다고 해도 무방하다...😅

이를 이용한 디자인 패턴도 있을 정도로 중요하니 꼭! 알아두고 넘어가자!!

참 과 거짓

대부분의 언어에서는 참 이라고 하면 true 혹은 0이 아닌 값, 거짓 이라고 하면 false 혹은 0을 가리킨다.

하지만 JavaScript에서는 거짓의 범위가 꽤 넓은데, 어떤 값들이 거짓에 속하는지 알아보자!

• false
• 0
• null
• NaN
• undefined
• "" <- 빈 문자열

false와 0을 제외하고도 여러 가지 값이 존재하는 것을 볼 수 있다.

위에 있는 거짓이 되는 값을 제외한 모든 값은 참이라고 이해하면 편하다.

그럼 왜 `논리 연산자를 설명하기 전에 참과 거짓에 관해 설명하냐?' 고 한다면, JavaScript의 논리 연산자는 boolean 타입이 아닌 값에 대해서도 연산이 가능하고, 심지어 그 값을 반환하는 것도 가능하기 때문이다!😲

논리 연산자의 기본적인 진리표는 이해하고 있다고 생각하고, 바로 단축 평가로 넘어가도록 하겠다!

단축 평가

단축 평가는 피연산자의 논리 연산에서 앞의 연산에서 이미 결과가 정해져 있다면, 그 뒤의 연산은 진행하지 않는 것을 말한다.

백문불여일견! 코드를 통해 어떤 의미인지 알아보도록 하자!

let x = 0;
let logic = false && x++;

console.log(logic); // false
console.log(x); // 0

logic = true || x++;

console.log(logic); // true
console.log(x); // 0

보시다시피 우항에 피연산자로 증가식을 넣어놨음에도 불구하고 x의 값은 미동도 없는 것을 볼 수 있다.

AND(&&) 연산은 좌항이false 면 우항에 상관없이 결과는 false 이고, OR(||) 연산은 좌항이 true 면 우항에 상관없이 결과는 true 이기 때문에 우항에 있는 연산을 진행하지 않은 것이다.

이렇게 논리 연산자는 단축 평가를 한다는 사실을 통해, 피연산자가 boolean 타입이 아닐 때 반환값을 이해하기 쉬워진다. 바로 다음으로 넘어가보자!

피연산자가 boolean이 아닐때

피연산자가 boolean 타입이 아닐 때도 논리 연산이 가능한 JavaScript의 특성상, 이 부분을 모르고 다른 코드들을 읽다 보면 흐름을 제대로 파악하지 못하는 경우가 발생한다...😥 (경험담)

하지만 단축 평가를 제대로 이해했다면 전혀 어렵지 않으니, 어떤 값이 반환되는지 꼭! 이해하고 넘어가자.

피연산자가 boolean이 아닐 때의 연산 결과를 코드를 통해 확인해보자!

const print = num => console.log(num); // Function
let num = 0; // Number 

let logic = num && print; // num === false, logic = num
console.log(logic); // 0

num++; // x += 1
logic = print || --num; // function print(num) === true, logic = function print(num){console.log(num)}

console.log(logic); // [Function : print]
logic(num); // 1

피연산자가 boolean이 아닌 경우, 반환값은 위와 같이 논리 연산의 결과를 결정한 값이 된다.

이러한 특성을 이용해서 아래와 같이 거짓인 값을 객체로 만들어주는 것도 가능하다!😮

let obj = {name : 'Old'};

let result = obj || {name : 'New'};
console.log(result); // { name : 'Old'}

obj = null;

result = obj || {name : 'New'};
console.log(result); // { name : 'New'}

obj가 이미 객체라면 그대로 해당 객체를 가리키고, obj가 거짓인 값(null, undefined .....)인 경우, 새로운 객체를 생성해서 반환한다.

위의 result = obj || {name : 'New'} 같은 패턴은 굉장히 자주 사용한다고 하기도 하니 알아두면 좋을 것 같다!

이 외에도 논리 연산자를 이용해 if .. else 문을 대체할 수도 있고, 피연산자가 boolean이 아닐 때의 동작을 이해하지 못한다면 다른 사람의 코드를 이해할 때 많은 어려움이 생길 수 있으니 꼭 이해하고 넘어가도록 하자!😊