✔모던 자바스크립트 7장

참고 - https://poiemaweb.com/

연산자

1. 표현식과 연산자

표현식 : 값을 생성할 수 있는 다양한 방식으로 리터럴, 식별자, 연산자, 함수 호출 등의 조합.

결국 하나의 값이 되므로 표현식은 값처럼 사용할 수 있다.

10 // 리터럴 표현식

sum // 식별자 표현식

10 + 20 // 연산자 표현식

square() // 함수 및 메소드 호출 표현식
 
var x = 10;

x + 30; // 값과 동치이다 -> 표현식을 숫자 값 대신 사용 가능하다

2. 문과 표현식

문 : JS 엔진에게 내리는 명령으로 리터럴, 연산자, 표현식, 키워드 등으로 조합.

세미콜론으로 끝나야한다. (반드시 붙일 필요는 없지만 붙이는 걸 권장!)

var x; // 변수 선언문

x = 5; // 할당문

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

if ( x > 5 ){...} // 조건문
 
for( var i = 0; i < 10; i++ ){...} // 반복문

표현식 : 값을 만드는 것으로 그침

문 : 변수나 함수 생성 및 제어문 등으로 흐름 제어도 가능

💡 표현식 ⊂ 문 (문은 표현식인 문과 표현식이 아닌 문으로 구분 가능)

 // 표현식인 문들

var x = 5 * 10; //선언문 -> 표현식을 포함

x = 100; // 할당문 -> 자체로 표현식

// 표현식이 아닌 문

var foo = var x = 5 * 10;

3. 연산자

연산자 : 하나 이상의 표현식을 대상으로 값을 생성

5 * 4 // 산술 연산자

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

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

3 > 5 // 비교 연산자 

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

typeof 'Hi' // 타입 연산자

💡 피연산자 → 값 ( 명사 ) / 연산자 → 값을 만든다 ( 동사 )

4. 산술 연산자

산술 연산자 : 새로운 숫자 값을 만드며 이항 산술 연산자와 단항 산술 연산자로 구분한다.

4-1. 이항 산술 연산자

두 개의 값이 필요

4-2. 단항 산술 연산자

하나의 값만 필요

var x = 5, result;

// 전위 증가/감소

result = ++x;
console.log(result, x) // 6, 6

result = --x;
console.log(result, x) // 5, 5

// 후위 증가/감소

result = x++;
console.log(result, x) // 5, 6

result = x--;
console.log(result, x) // 6, 5

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

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

4-3. 문자열 연결 연산자

'1' + '2' // '12' , typeof -> string
'1' + 2 // '12', typeof -> string

5. 할당 연산자

할당 연산자 : 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다. 할당 연산 표현식을 다른 변수에 할당할 수 있다.

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

// 산술 연산자 -> 타입변환
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)

6. 비교 연산자

비교 연산자 : 좌항과 우항의 피연산자를 비교하여 불리언 값을 반환

6-1. 동등 / 일치 비교 연산자

동등 vs 일치

동등은 같은 값을 갖지만, 일치는 같은 타입인지 까지도 비교하기 때문에 일치 비교 연산자 추천!

5 === 5 // true
5 === '5' // false

isNaN(숫자) // 숫자가 NaN인지 검사하려면 isNaN을 사용
0 === -0 // true

6-2. 대소 관계 비교 연산자

피연산자의 크기 비교를 하여 불리언 값을 반환한다.

7. 삼항 조건 연산자

var x = 2;

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

var result = x % 2 ? '홀수' : '짝수';

console.log(result); // 짝수

💡 삼항 조건 연산자 vs if else...

if else...는 표현식이 아닌 문이기 때문에 값으로 평가할 수 없지만 삼항 조건 연산자는 값으로 평가할 수 있기 때문에 다른 표현식의 일부가 될 수 있다.

8. 논리 연산자

논리 연산자 : 우항과 좌항의 피연산자를 논리 연산한다.

// 논리합(||) 연산자
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

// 암묵적 타입 변환
!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 연산자는 자신의 뒤에 위치한 피연산자의 데이터 타입을 문자열로 반환한다.

typeof null  // "null"로 안 뜨고 "object"를 반환한다.

var foo = null; // 따라서 null의 type을 보고싶다면 일치연산자를 사용하도록 하자.
console.log(typeof foo === null); // false
console.log(foo === null);        // true

typeof undeclared  // 선언하지 않은 변수를 체크하면 "undefined"가 뜬다.