[PoiemaWeb] 연산자

표현식과 연산자

표현식(expression)

리터럴, 식별자, 연산자, 함수 호출 등의 조합
표현식은 하나의 값으로 평가될 수 있는 문(statement)이다.

표현식의 종류

• 리터럴 표현식
  10
• 식별자 표현식 (선언이 존재한다고 가정)
  sum
  person.name
  arr[1]
• 연산자 표현식
  10 + 20
• 함수/메소드 호출 표현식
  squre()

표현식은 값처럼 사용할 수 있다.
즉, 값이 위치할 수 있는 자리에는 표현식도 위치할 수 있다.

const x = 50;

// 연산자 표현식
x + 30; // 식별자 표현식과 숫자 리터럴과 연산자의 조합

문과 표현식

문(statement)

자바스크립트 엔진에게 내리는 명령
ex)
변수 선언문 실행 => 변수 선언
할당문 실행 => 할당

// 변수 선언문 (리터럴)
const x; 

// 할당문
x = 10;

// 함수 선언문
function hi() {
}

// 조건문
if(x > 5) {
	...
}

// 반복문
for(const i=0; i<100; i++) {
	...
}

문은 리터럴, 연산자, 표현식, 키워드 등으로 구성되며 세미콜론( ; )으로 끝나야 한다.
(코드 블록 { … }은 제외)

자바스크립트의 모든 코드는 문 또는 표현식으로 이루어져 있다.
그렇기 때문에 표현식은 문을 구성하는 요소임과 동시에 하나의 문이 될 수도 있다.

표현식과 문의 차이점

표현식 : 평가되어 값을 만든다.
문 : var, let, const, function, class와 같은 선언 키워드를 사용하여 변수나 함수를 생성하기도 하고 if, for, while문과 같은 제어문을 생성하여 프로그램의 흐름을 제어하기도 한다.

// 선언문(Declaration statement)
const x = 5 * 10; // 표현식 x = 5 * 10을 포함하는 문이다.

// 할당문(Assignment statement)
x = 100; // 이 자체가 표현식이지만 완전한 문이기도 하다.

선언문은 표현식이 아닌 문이다. 값이 아니다. 그렇기 때문에 선언문은 값처럼 사용할 수 없다.

const hi = const x = 5 * 10;

할당문은 그 자체가 표현식이다. 할당문은 표현식인 문이다. 할당문은 표현식인 문이기 때문에 값처럼 사용할 수 있다.

연산자(Operator)

연산자(Operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자(Operand)라 한다.

// 산술 연산자
5 * 4 // 20

// 문자열 연결 연산자
'My name is ' + 'Jeong' // "My name is Jeong"

// 할당 연산자
var color = 'green'; // "green"

// 비교 연산자
3 > 5 // false

// 논리 연산자
(5 > 3) && (2 < 4)  // true

// 타입 연산자
typeof 'Hi' // "string"

피연산자는 연산의 대상이 되어야 하므로 값으로 평가할 수 있어야 한다.
연산자는 값으로 평가된 피연산자를 연산해 새로운 값을 만든다.

산술 연산자(Arithmetic Operator)

산술 연산자(Arithmetic Operator)는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다.
산술 연산을 할 수 없는 경우에는 NaN을 반환한다.

4.1 이항 산술 연산자

이항 산술 연산자는 2개의 피연산자를 대상으로 연산하여 숫자 타입의 값을 만든다.
어떤 산술 연산을 해도 피연산자의 값이 바뀌는 경우는 없고 단지 새로운 값을 만들 뿐이다.

이항 산술 연산자	의미
+	덧셈
-	뺄셈
*	곱셈
/	나눗셈
%	나머지

5 + 2  // 7
5 - 2  // 3
5 * 2  // 10
5 / 2  // 2.5
5 % 2  // 1

4.2 단항 산술 연산자

단항 산술 연산자는 1개의 피연산자를 대상으로 연산한다.
증가/감소 연산을 하면 피연산자의 값이 바뀐다.

피연산자 앞에 위치한 전위 증가/감소 연산자(Prefix increment/decrement operator)는 먼저 피연산자의 값을 증가/감소시킨 후, 다른 연산을 수행한다.

const x = 5, result;

// 선증가 후대입 (Prefix increment operator)
result = ++x;
console.log(result, x); // 7 7

// 선감소 후대입 (Prefix decrement operator)
result = --x;
console.log(result, x); // 5 5

피연산자 뒤에 위치한 후위 증가/감소 연산자(Postfix increment/decrement operator)는 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소시킨다.

const x = 5, result;

// 선대입 후증가 (Postfix increment operator)
result = x++;
console.log(result, x); // 5 6

// 선대입 후감소 (Postfix decrement operator)
result = x--;
console.log(result, x); // 7 6

+ 단항 연산자는 피연산자에 어떠한 효과도 없다.
그런데 숫자 타입이 아닌 피연산자에 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다.

+10 // 10
+'10' // 10
+true // 1
+false // 0

– 단항 연산자는 피연산자의 부호를 반전한 값을 반환한다.
+ 단항 연산자와 마찬가지로 숫자 타입이 아닌 피연산자에 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다.

-10 // -10
-'10' // -10
-true // -1
-false // -0

4.3 문자열 연결 연산자

+ 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.

// 문자열 연결 연산자
'1' + '2'      // '12'
'1' + 2       // '12'

// 산술 연산자
1 + 2          // 3
1 + true       // 2 (true → 1)
1 + false      // 1 (false → 0)
true + false    // 1 (true → 1 / false → 0)
1 + null       // 1 (null → 0)
1 + undefined // NaN (undefined → NaN)

자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다.
true는 1로 변환되고 false는 0으로 변환된다.
이를 암묵적 타입 변환 or 타입 강제 변환이라고 한다.

할당 연산자

우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.

할당 연산자	사례	동일표현
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

let x;

x = 10;   // 10
x += 5;   // 15 
x -= 5;   // 10 
x *= 5;   // 50 
x /= 5;   // 10 
x %= 5;   // 0 

let str = 'My name is ';
str += 'Jeong'; // My name is Jeong

개인적으로 헷갈리는 /= 연산자와 -= 연산자에 대해 자세히 알아보자.

나누기 할당 연산자(/=)는 오른쪽 피연산자의 값으로 변수를 나눈 결과를 다시 변수에 할당한다.

let a = 3;

a /= 2;
console.log(a); // 3/2
// expected output: 1.5

빼기 할당 연산자(-=)는 오른쪽 피연산자의 값을 변수에서 뺀 결과를 다시 변수에 할당합니다.

let a = 2;

console.log(a -= 3); // 2-3
// expected output: -1

const x;
console.log(x = 10); // 10

할당 연산은 하나의 값으로 평가되는 표현식이다. 할당 표현식은 할당된 값으로 평가된다.
위 예제의 경우 x에 할당된 숫자 값 10으로 평가된다.
따라서 아래와 같이 할당 연산 표현식을 다른 변수에 할당할 수도 있다.

const x, y;
y = x = 10; // 연쇄 할당(Chained assignment)
console.log(x, y); // 10 10

비교연산자

비교 연산자(Comparison Operator)는 좌항과 우항의 피연산자를 비교하여 불리언 값을 반환한다.
if 문이나 for 문과 같은 제어문의 조건식에서 주로 사용한다.

비교 연산자	의미	사례	설명
==	동등비교	x==y	x와 y의 값이 같음
===	일치비교	x===y	x와 y의 값과 타입이 같음
!=	부등비교	x!=y	x와 y의 값이 다름
!==	불일치 비교	x!==y	x와 y의 값과 타입이 다름

암묵적 타입변환

개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환

동등 비교(==) 연산자는 좌항과 우항의 피연산자를 비교할 때 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값을 갖는지 비교한다.
따라서 동등 비교 연산자는 좌항과 우항의 피연산자가 타입은 다르더라도 암묵적 타입 변환 후에 같은 값을 수 있으면 true를 반환한다.

// 동등 비교
5 == 5    // true
// 타입은 다르지만 암묵적 타입 변환을 통해 타입을 일치시키면 같은 값을 같는다.
5 == '5'   //true
5 == 8    // false

동등비교 연산자는 편리한경우도 있지만 이와같은 부작용이 생긴다.

'' == '0'           // false
0 == ''             // true
0 == '0'            // true

false == 'false'    // false
false == '0'        // true

false == undefined  // false
false == null       // false
null == undefined   // true

하지만 일치 비교(===) 연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환한다.

// 일치 비교
5 === 5   // true
5 === '5' // false

예외인 경우가 있는데 NaN과 0이다.
NaN은 자신과 일치하지 않는 유일한 값이다.
따라서 숫자가 NaN인지 조사하려면 빌트인 함수 isNaN을 사용한다.

NaN === NaN // false

isNaN(NaN) // true

0 === -0     // true

부동등 비교 연산자(!=)와 불일치 비교 연산자(!==)는 동등 비교(==) 연산자와 일치 비교(===) 연산자의 반대 개념이다.

// 부동등 비교
5 != 8    // true
5 != 5    // false
5 != '5'  // false

// 불일치 비교
5 !== 8   // true
5 !== 5   // false
5 !== '5' // true

삼항 조건 연산자

조건식 ? 조건식이 ture일때 반환할 값 : 조건식이 false일때 반환할 값

물음표(?) 앞의 첫번째 피연산자가 불리언 타입의 값으로 평가될 표현식이다.
이때 조건식이 참이면 콜론(:) 앞의 두번째 피연산자가 평가되어 반환되고, 거짓이면 콜론(:) 뒤의 세번째 피연산자가 평가되어 반환된다.

let x = 2;

// x가 짝수이면 '짝수'를 홀수이면 '홀수'를 반환한다.
// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다.
let result = x % 2 ? '홀수' : '짝수';

console.log(result); // 짝수

삼항 조건 연산자는 if…else 문을 사용해도 동일한 처리를 할 수 있다.

let x = 2, result;

// x가 짝수이면 '짝수'를 홀수이면 '홀수'를 반환한다.
// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다.
if (x % 2) result = '홀수';
else       result = '짝수';

console.log(result); // 짝수

논리연산자

논리 연산자	의미
||	논리합(OR)
&&	논리곱(AND)
!	부정(NOT)

// 논리합(||) 연산자
true || true   // true
true || false  // true
false || true  // true
false || false // false

// 논리곱(&&) 연산자
true && true   // true
true && false  // false
false && true  // false
false && false // false

// 논리 부정(!) 연산자
!true  // false
!false // true

쉼표연산자

쉼표(,) 연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.

let x, y, z;
x = 1, y = 2, z = 3; // 3

typeof 연산자

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  // "object"

typeof 연산자로 null 값을 연산해 보면 null이 아닌 “object”를 반환한다는 것이다.
그렇기 때문에 null 타입을 확인할 때는 typeof 연산자를 사용하지 말고 일치 연산자(===)를 사용해야 한다.

let foo = null;
console.log(typeof foo === null); // false
console.log(foo === null);        // true

선언하지 않은 식별자를 typeof 연산자로 연산해 보면 ReferenceError가 발생하지 않고 “undefined”를 반환한다.

typeof undeclared  // "undefined"