자바스크립트 연산자에 대해 알아보자

산술 연산자

타입스크립트는 자바스크립트와 동일한 산술 연산자를 지원한다. 산술 연산자의 종류로는 사칙연산과 나머지를 구하는 %, 그리고 지수 연산자 **가 있다. 단, 지수 연산은 ES7의 문법이기에 이전 버전으로 컴파일 하게 되면 MATH.pow() 메소드로 변환된다. 자바스크립트의 산술 연산의 특징으로는 암묵적 타입 변환을 통한 산술 연산이 있다.

1 + "people";
true + 2;
"2" + ture;
10 / "5";

 

위와 같은 서로 다른 타입 간의 산술 연산을 실행하게 되면, 자바스크립트는 암묵적으로 피연산자의 타입을 바꿔서 계산을 진행한다. 하지만, 타입스크립트에서는 허용되지 않는다. 서로 다른 피연산자들 간의 산술 연산 시에 타입스크립트가 오류를 던져 암묵적인 타입 변환을 막고 연산의 안전성을 높인다.

 

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

논리 연산자는 왼쪽부터 오른쪽으로 평가가 이루어진다. 중간에 평가 결과가 나오면 형 변환 없이 피연산자를 그대로 반환한다. 즉, 논리적으로 값이 참인지 거짓인지 판단만 하고, 연산자에 따라 값을 타입 그대로 반환한다.

console.log(true && "aaa"); // 결과 : "aaa"
console.log(false && "bbb"); // 결과 : false
console.log(true || "aaa"); // 결과 : true
console.log(false || "bbb"); // 결과 : "bbb"

&&(AND) 연산자의 경우 앞선 값이 거짓이면 바로 반환, 참이면 뒤따른 값을 반환한다. ||(OR) 연산자는 앞선 값이 참이면 바로 반환, 거짓이면 뒤따른 값을 반환한다. 그런데 여기서 boolean type 뿐만 아니라 특정 값들은 연산 과정의 추론 중 boolean 처럼 판단된다.

 

거짓 같은 값, Falsy

자바스크립트에서는 특정 상황에서 형 변환을 통해 특정 값을 boolean처럼 판단한다. falsy는 이런 상황에서 false로 평가되는 값이다. 아래 코드의 falsy 값들은 조건문 안에서 false로 판단되어 실행되지 않고, 위에서 설명한 논리 연산자에서도 마찬가지로 false처럼 평가된다.

if (false) 
if (null) 
if (undefined) 
if (0) 
if (NaN) 
if ("")

 

Falsy로 정의된 값을 제외한 모든 값들은 참 같은 값, Truthy로 평가된다.

 

nullish 병합 연산자 '??'

nullish 병합 연산자는 여러 피연산자 중에 값이 확정되어 있는 변수를 찾는다. ??는 ||과 사용 목적이 비슷하지만, 평가 방법에서 차이가 있다. ||는 falsy 값을 만나면 다음 평가를 진행하지만, ??는 null, undefined 값에만 다음 평가를 진행하게 된다.

console.log(0 || "aaa") // "aaa" 
console.log(0 ?? "aaa") // 0  
console.log("" || "aaa") // "aaa" 
console.log("" ?? "aaa") // ""  
console.log(null || undefined || "aaa") // "aaa" 
console.log(null ?? undefined ?? "aaa") // "aaa"

 

위 코드처럼 ??는 0과 빈 문자열 등 falsy에 대해서는 ||와 다른 결과를 보여준다. 따라서, 무분별하게 사용할 경우 예상치 못한 결과가 도출될 수 있으므로 사용할 때 항상 확인해야 한다.

 

단항 연산자(Unary Operator)

단항 더하기 연산자(+)는 피연산자 앞에 위치하며, 피연산자를 평가한다. 하지만, 만약에 피연산자가 숫자가 아니라면 숫자로 변환을 시도한다. 단항 연산자(+)는 한 개의 피연산자, 즉 한 개의 인수와 짝을 이루어 역할을 한다. 더하기를 의미하는 기존의 (+) 기호와는 달리, 숫자로 변환해주는 역할을 담당하는 단항 연산자 (+)는 인수의 바로 앞에 붙는다. ECMA 공식 문서에 따르면, 단항 연산자 (+)는 문자열인 인수를 숫자 형태로 빠르고 간단하게 바꾸어주는 문법이다. 간단하게 형 변환을 해준다는 장점이 있지만, 사용할 수 없는 경우도 있기 때문에 조심해서 사용하는 것이 좋다.

const x = 1;
const y = -1;

console.log(+x);
// Expected output: 1

console.log(+y);
// Expected output: -1

console.log(+'');
// Expected output: 0

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

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

 

단항 연산자가 적용될 수 없는 경우는 문자열을 숫자로 변경할 수 없을 때 NaN(Not a Number)를 리턴한다. 대표적으로 문자열 또는 빈 문자열이나 함수, 빈 객체는 숫자로 변환할 수 없기 때문에 NaN을 리턴하게 된다.

console.log(+"abc"); // NaN
console.log(+function(val) {return val}) // NaN
console.log(+'')     // NaN
console.log(+'123a') // NaN
console.log(+{})     // NaN

 

Double Exclamation Marks Operator, !!

느낌표 두개(!!) 연산자는 확실한 논리 결과를 갖기 위해 사용한다. 예를 들어 정의되지 않은 변수 undefined 값을 가진 내용의 논리 연산을 할 경우에도 확실한 true/false 값을 갖게 하는 것이 목적이다. !! 연산자의 작동 원리는 아래와 같다.

피연산자의 값을 불리언으로 변환한다. 이후에, 불리언 값이 true일 경우 true를 반환하고, false일 경우 false를 반환한다. 즉, 이 연산자는 항상 불리언 값을 반환하는 것이다.

 

const myValue = 'hello';
 
console.log(!!myValue); // true

 

위의 코드에서 !!myValue는 'hello' 값을 boolean으로 변환한 후, true를 반환한다. 그게 무엇이든 null 또는 undefined가 아니고 값이 존재한다면, true를 반환한다. 따라서  !! 연산자는 변수나 속성의 존재 여부를 확인하는 데에도 사용된다. 다음과 같이 변수가 선언되어 있지 않은 경우, !! 연산자를 사용하여 변수의 존재 여부를 확인할 수 있다.

typeof 연산자

typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환한다. typeof 연산자는 아래 코드와 같이 7개의 문자열 중 하나를 반환하며, 'null'은 반환하지 않는다.

typeof ''; // 'string'
typeof 1; // 'number'
typeof NaN; // 'number'
typeof true; // 'boolean'
typeof undefined; // 'undefined'
typeof Symbol(); // 'symbol'
typeof null; // 'object'
typeof []; // 'object'
typeof {}; // 'object'
typeof new Date(); // 'object'
typeof /test/gi; // 'object'
typeof function (){} // 'function'

 

typeof 연산자로 null 값을 연산하게 되면 'null'이 아닌 'object'가 반환되게 된다. 이는 자바스크립트의 첫번째 버전의 버그이다. 하지만, 기존 코드에 영향을 줄 수 있기 때문에 아직까지 수정되지 못하고 있다. 그러므로 값이 null 타입인지 확인하고자 할 때에는 typeof 연산자가 아닌 일치 연산자를 사용해야 한다. 

var foo = null;

typeof foo === null; // false

foo === null; //  true