JavaScript - Operator

1. 표현식과 연산자

• 표현식 (Expression)
  • 리터럴, 식별자, 연산자, 함수 호출 등의 조합
  • 평가(evaluation, 표현식을 실행하여 하나의 값을 만드는 과정)되어 하나의 값을 만듬
  • 하나의 값으로 평가될 수 있는 문 (statement)

// 리터럴 표현식
10

// 식별자 표현식
sum

// 연산자 표현식
10 + 20

// 함수/메소드 호출 표현식
square()

• 표현식은 값처럼 사용할 수 있음 -> 값이 위치할 수 있는 자리에 표현식도 위치할 수 있음

var x = 10;

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

• 표현식은 다른 표현식의 일부가 되어 새로운 값을 만들어낼 수 있음
• 연산자 표현식 : 식을 결합해 새로운 값을 만들어내는 가장 일반적인 표현식

2. 문과 표현식

• 문 (statement) : 자바스크립트 엔진에 내리는 명령

// 변수 선언문
var x;

// 할당문
x = 5;

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

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

// 반복문
for (var i = 0; i < 10, i++) {...}

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

• 문의 끝에 붙이는 세미콜론은 붙이지 않아도 됨

  • 자바스크립트 엔진에서 스크립트를 해석할 때, 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능 (ASI, automatic semicolon insertion)이 있기 때문임
  • 세미콜론 자동 삽입 기능의 예측과 개발자의 예측이 다른 경우가 존재함

• 표현식의 역할 : 값을 생성하는 것
• 문의 역할 : 표현식으로 생성된 값을 사용해 컴퓨터에게 명령을 내리는 것

// 선언문 (Declaration statement)
var x = 5 * 10 // 표현식 x = 5 * 10을 포함하는 문

// 할당문 (Assignment statement)
x = 100; // 표현문이기도 하지만 완전한 문이기도 함

• 선언문 : 표현식이 아닌 문, 값처럼 사용 X
• 할당문 : 표현식인 문, 값처럼 사용 가능
  • 크롬 DevTools에서 표현식이 아닌 문은 언제나 undefined를 반환하고, 표현식인 문은 값을 반환

var foo = x = 100;

• 위 예제에서는 할당문을 값처럼 변수에 할당함
  • 할당문은 할당한 값으로 평가됨
  • x = 100은 변수 x에 할당한 값 100으로 평가됨
  • 따라서 변수 foo에는 100이 할당됨

3. 연산자

• 연산자 (Operator) : 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을 수행해 하나의 값을 만듬
• 피연산자 (Operand) : 연산의 대상, 표현식
• 피연산자를 연산자와 결합한 연산자 표현식도 표현식임

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

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

// 할당 연산자
var color = "red" // red

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

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

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

4. 산술 연산자

• 산술 연산자 (Arithmatic Operator)
  • 피연산자를 대상으로 산술 계산을 수행해 새로운 숫자 값을 만듬
  • 산술 연산을 할 수 없는 경우 NaN을 반환
  • 이항 산술 연산자와 단항 산술 연산자로 구분

4.1 이항 산술 연산자

• 이항 산술 연산자
  - 2개의 피연산자를 대상으로 연산하여 새로운 숫자 값을 만듬
  • 2개의 피연산자를 대상으로 연산하여 새로운 숫자 값을 만듬
  • 어떤 산술 연산을 해도 피연산자의 값이 바뀌지 않고 새로운 값을 만듬

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

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

4.2 단항 산술 연산자

• 단항 산술 연산자
  • 1개의 피연산자를 대상으로 연산함
  • 증가/감소 연산을 하면 피연산자의 값이 바뀜

단항 산술 연산자	의미
++	증가
--	감소
+	어떠한 효과도 없음
-	양수를 음수로 / 음수를 양수로 반전한 값을 반환

• 전위 증가/감소 연산자 (Prefix increment/decrement operator) : 먼저 피연산자의 값을 증가/감소시킨 후, 다른 연산을 수행
• 후위 증가/감소 연산자 (Postfix increment/decrement operator) : 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소시킴

var x = 5; result;

// 후위 증가 연산자 -> 선대입 후증가
result = x++;
console.log(result, x); // 5 6

// 전위 증가 연산자 -> 선증가 후대입
result = ++x;
console.log(result, x); // 7 7

// 후위 감소 연산자 -> 선대입 후감소
result = x--;
console.log(result, x); // 7 6

// 전위 감소 연산자 -> 선감소 후대입
result = --x;
console.log(result, x); // 5 5

• '+' 단항 연산자
  • 피연산자에 어떠한 효과도 주지 않음
  • 음수를 양수로 반전하지 않음
  • 숫자 타입이 아닌 피연산자에 사용하면, 피연산자를 숫자 타입으로 변환한 값을 생성하여 반환함

+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 // 0 (false : 0)
true + false // 1
1 + null // 1 (null : 0)
1 + undefined // NaN (undefined : NaN)

5. 할당 연산자

• 할당 연산자 (Assignment Operator)
  • 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당
  • 좌항의 변수에 값을 할당하므로 부수 효과가 있음

var x;

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

var str = 'My name is ';
str += 'Lee'; // My name is Lee

• 할당 표현식은 할당된 값으로 평가됨

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

• 할당 표현식을 다른 변수에 할당 가능함

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

6. 비교 연산자

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

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

• 동등 (==) 비교 연산자
  • 좌항과 우항의 피연산자를 비교할 때 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값을 갖는지 비교함

// 동등 비교
5 == 5 // true

// 타입이 다른 경우 암묵적 타입 변환을 거쳐 비교함
5 == '5' // true
5 == '8' // false

• 동등 비교 연산자는 수많은 부작용을 일으키므로 사용하지 않는 편이 좋음

• 동등 비교 연산자 대신 일치 비교 연산자를 사용할 것

• 일치 비교 (===) 연산자는 좌항과 우항의 피연산자가 타입과 값이 모두 같을 때 true를 반환함

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

• 일치 비교 연산자를 사용할 때, NaN을 주의할 것
• NaN은 자신과 일치하지 않는 유일한 값

NaN === NaN // false

• 일치 비교 연산자를 사용할 때, 0도 주의할 것

0 === -0 // true

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

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

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

6.2 대소 관계 비교 연산자

• 대소 관계 비교 연산자는 피연산자의 크기를 비교하여 boolean 값을 반환함

대소 관계 비교 연산자	예제	설명
>	x > y	x가 y보다 크다
<	x < y	x가 y보다 작다
>=	x >= y	x가 y보다 크거나 같다
<=	x <= y	x가 y보다 작거나 같다

5 > 0 // true
5 > 5 // false
5 > 8 // false

5 < 0 // false
5 < 5 // false
5 < 8 // true

5 >= 0 // true
5 >= 5 // true
5 >= 8 // false

5 <= 0 // false
5 <= 5 // true
5 <= 8 // true

7. 삼항 조건 연산자

• 삼항 조건 연산자 (ternary operator)
  - 조건식의 평가 결과에 따라 반환할 값을 결정
  • 조건식의 평가 결과에 따라 반환할 값을 결정
  • JavaScript의 유일한 삼항 연산자

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

• ? 앞의 첫번째 피연산자

  • 조건식, boolean 타입의 값으로 평가될 표현식
  • 조건식의 평가 결과가 boolean 타입이 아닌 경우, boolean 타입으로 암묵적 타입 변환됨

• : 앞의 두번째 피연산자 : 조건식이 참일 때 평가되어 반환될 값

• : 뒤의 세번째 피연산자 : 조건식이 거짓일 때 쳥가되어 반환될 값

var x = 2;

// x가 홀수일 때 '홀수', 짝수일 때 '짝수'를 출력
// 2 % 2는 0이고 0은 false로 암묵적 타입변환함
var result = x % 2 ? '홀수': '짝수';

console.log(result);

• if...else 문을 사용하여 삼항 조건 연산자와 동일한 처리 가능
• if...else문은 표현식이 아닌 문이라 값으로 평가할 수 없음
• 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식이므로 다른 표현식의 일부가 될 수 있음

var x = 2; result;

if (x % 2) result = '홀수';
else result = '짝수';

console.log(result);

8. 논리 연산자

• 논리 연산자 (Logical Operator)

  • 논리합(OP) : ||
  • 논리곱(AND) : &&
  • 부정( NOT) : !

• 논리합 (||) 연산자와 논리곱 (&&) 연산자

  • 피연간자가 boolean 값일 경우, boolean 값 반환
  • 피연간자가 boolean 값이 아닐 경우, 피연산자 중 어느 한쪽 값을 반환

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

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

• 논리 부정(!) 연산자
  • 항상 boolean값을 반환
  • 피연산자가 boolean 값이 아닐 경우, boolean으로 암묵적 타입 변환됨

!true;  // false
!false;  // true
!0  // true

9. 쉼표 연산자

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

var x, y, z;

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

10. 그룹 연산자

• 그룹 ((...)) 연산자는 그룹 내의 표현식을 최우선으로 평가함

10 * 2 + 3   // 23
10 * (2 + 3) // 50

11. typeof 연산자

• typeof 연산자
  • 자신의 뒤에 위치한 피연산자의 타입을 문자열로 반환
  • 7가지 문자열 "string", "number", "boolean", "undefined", "symbol", "object", "function" 중 하나를 반환
  • 함수의 경우 "function"을 반환

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"

• null값을 typeof 연산자로 연산하면, null이 아닌 "object"를 반환
• 따라서 null 타입을 확인할 때는 typeof 연산자 대신 일치 (===) 연산자를 사용

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

• 선언하지 않은 식별자를 typeof 연산자로 연산하면, ReferenceError가 발생하지 않고 "undefined"가 반환

typeof undeclared // "undefined"