표현식과 연산자

• 표현식 : 어떤 값으로 평가 되는 구절
• 복잡한 표현식 : 더 단순한 표현식의 조합

ex) 상수, 변수이름

• 연산자의 목적 : 단순한 표현식을 조합해 복잡한 표현식으로 만들 때

4.1 기본 표현식

• JS의 기본 표현식 : 변수 참조, 일부 키워드, 리터럴 값

1. 변수 참조
   • 변수, 상수, 전역 객체의 프로퍼티에 대한 참조 형태
   • 그런 이름의 변수가 존재하지 않으면 ReferenceError 발생

i          // 변수 i
sum        // 변수 sum
undefined  // 전역 객체의 "undefined" 프로퍼티 값

1. 일부 키워드

   this : 다른 키워드와 달리 일정한 값이 아니며 프로그램에서 사용한 위치에 따라 다른 값으로 평가 됨, OOP(객체 지향 프로그래밍)에서 사용

   true
   false
   null
   this // '현재' 객체로 평가
   

2. 리터럴 값

   • 문자 그대로 쓰는 값

   1.23      // 숫자 리터럴
   "hello"   // 문자열 리터럴
   /partern/ // 정규 표현식
   

4.2 객체와 객체 초기화 표현식

• 객체 초기화 표현식 : 대괄호 안 콤마로 구분된 리스트를 쓰는 형태

[]
[1+2,3+4]

** 배열 초기화 표현식 내 요소 표현식 → 중첩된 배열을 반환

let matrix = [[1,2,3],[4,5,6],[7,8,9]];

** 배열 초기화 표현식에서 ,와, 사이 값이 없다면 undefined

let sparseArray = [1,,,,5]; // 총 3개의 undefined 존재

• 객체 초기화 표현식 : 배열과 유사하지만 중괄호를 쓰고 하위 표현식은 프로퍼티 이름, :(콜론)으로 구성

let p = {x : 2, y: 3};
let rectangle = {
									upperleft : { x: 2, y : 3},
									lowerleft : { x: 4, y : 5}
								};

** ES6 이후로 객체 리터럴은 중첩이 가능하다!

4.3 함수 정의 표현식

• 함수 정의 표현식 : 함수를 정의하고 그 값이 함수인 것 (함수 리터럴)

let square = function(x){return x * x;};
let arrowFct = (x) => {return x + x }; // ES6 부터 화살표 함수 가능(간결한 표현)

<함수 정의 표현식>

1. function 키워드로 시작
2. 괄호 안 0개 이상의 식별자(매개변수) 작성
3. 중괄호 안 JS 코드 작성

4.4 프로퍼티 접근 표현식

• 프로퍼티 접근 표현식 : 객체 프로퍼티나 배열 요소의 값으로 평가됨
• JS에는 두 가지 프로퍼티 접근 문법이 존재

expression.identifier     // 표현식 뒤에 마침표 쓰고 그 뒤에 식별자 쓰는 형태 
expression[expression]    // 표현식 뒤에 대괄호를 쓰고 그 안에 다른 표현식을 쓰는 형태

let o = {x : 1, y: {z :3}};
o.x.    // 1
o.y.z.  // 3
o["x"]  // 1

• 어떤 스타일의 프로퍼티 접근 표현식을 쓰든 .이나 [ 앞에 있는 표현식을 가장 먼저 평가

  (그 값이 null or undefined이면 표현식은 TypeError)

• 객체 표현식 다음 점과 식별자가 있으면 그 식별자가 이름인 프로퍼티 찾고 그 프로퍼티 값이 표현식의 전체적인 값이 됨

• 객체 표현식 다음 대괄호가 있고 그 안에 다른 표현식이 있으면 두 번째 표현식을 평가 후 문자열로 변환

** .식별자 문법이 더 간결하지만 접근하고자 하는 이름이 유효한 식별자 or 그 이름을 알고 있을 경우 모두 만족 시켜야함.

4.4.1 조건부 프로퍼티 접근

• ES2020에서 추가된 2가지 새로운 프로퍼티 접근 표현식 ( ?. )

expression?.identifier
expression?.[expression]

• ?.과 ?.[]를 통해 왼쪽에 있는 표현식이 null 이나 undefined일 경우 TypeError의 발생 방지

  (옵션 체인이라고도 함)

let a = {b:null};
a.b?.c.d   // => undefined
(a.b?.c).d // => typeerror

• []대신 ?[] 사용

let a;
let index = 0;
try {
	a[index++];
} catch(e) {
	index
}

a?.[index++]   // undefined
index          // => 1 (?.[]는 단축 평가이므로 index가 증가하진 x
a[index++]     // TypeError a가 존재하지 않기 때문에 에러 발생

4.5 호출 표현식

• 호출 표현식 : 함수, 메서드를 호출하는 문법

<과정>

1. 함수 표현식으로 시작
2. 함수 표현식 다음에 여는 괄호를 쓰고 콤마로 구분된 0개 이상의 함수 인자 표현식 리스트를 쓰고 닫는 괄호 사용

f(0)      // f는 함수 표현식 0은 인자 표현식
a.sort()

<호출 표현식 평가>

1. 함수 표현식 평가
2. 인자 표현식 평가 후 인자 값 리스트 생성
3. 매개변수에 순서대로 할당 후 함수 바디 실행
4. 함수가 return 문 사용 시 그 값이 호출 표현식의 값

** 메서드 호출 : 호출 표현식 맨 앞 표현식이 프로퍼티 접근 표현식

4.5.1 조건부 호출

• ES2020 : ()대신 ?()로 함수 호출하여 typeerror를 방지 (조건부 프로퍼티 접근과 유사)

function square(x, log) {
	log?.(x);
	return x * x;
}

• ?.()를 사용하는 조건부 호출 표현식은 메서드에서도 함수와 똑같이 동작 (반드시 프로퍼티 접근이 수반됨)

o.m()    // 일반적인 프로퍼티 접근, 일반적 호출
o?.m()   // 조건부 프로퍼티 접근, 일반적 호출
o.m?.()  // 일반적인 프로퍼티 접근, 조건부 호출

4.6 객체 생성 표현식

• 객체 생성 표현식 : 객체 생성 및 함수 호출 통해 객체 프로퍼티를 초기화