HwangSee

221101 TIL

  • 2022년 11월 01일

오늘 한 일

  • 자바스크립트 완벽 가이드 ~77p까지 정리
    • 자바스크립트 표현식의 종류와 예제

자바스크립트에서 표현식이란?

어떤 값으로 평가(evalute)되는 구절

  • 표현식 예
    • 변수 이름 : 변수에 할당된 값으로 평가
    • 복잡한 표현식 : 배열로 평가되는 표현식 다음에 여는 대괄호가 있고, 정수로 평가되는 표현식이 있고, 닫는 대괄호가 있음 ex ) const arr = [1, 2, 3, 4, 5]

단순한 표현식을 이용해 복잡한 표현식을 만들 때 연산자 사용.

표현식의 종류

기본 표현식

1. 리터럴

1.23 // 숫자 리터럴
"hello" // 문자열 리터럴
/pattern/ // 정규 표현식 리터럴
2. 예약어
true // 불 true로 평가
false // 불 false로 평가
null // null로 평가
this // '현재' 객체로 평가

3. 변수, 상수, 전역 객체 프로퍼티에 대한 참조 형태

i // 변수 i값으로 평가
sum // 변수 sum값으로 평가
undefined // 전역 객체의 "undefined"로 평가
  • 존재하지 않는 변수를 평가하려고 한다면 ReferenceError가 일어난다.

객체와 배열 초기화 표현식

1. 배열 초기화 표현식

[] 
[1+2, 3+4]
let matrix = [[1,2,3], [4,5,6], [7,8,9]];
let sparseArray = [1,,,,5]; // 인덱스 1,2,3은 undefined로 평가

2. 객체 초기화 표현식

let p = { x : 2.3, y: -1.2 };
let q = {};
q.x = 2.3; q.y = -1.2; // 이 객체(q)는 위의 객체와 같다.

함수 정의 표현식

프로퍼티 접근 표현식

let o = {x: 1, y: {z: 3}};
let a = [o, 4, [5, 6]]; // 배열 안에 객체가 들어갈 수 있다.
o.x // => 1
o.y.z // => 3
a[1] // => 4
a[2]["1"] // => 6
a[0].x // => 1
  • 프로퍼티 이름에 스페이스나 구두점이 들어있거나, 숫자인 경우에는 대괄호 표기법 사용.
    • 프로퍼티 이름이 계산 결과일 때도 마찬가지이다.

조건부 프로퍼티 접근

  • ES2020 문법
expression?.identifier
expression?.[expression]
  • ?. 과 ?.[] 문법 사용 시 왼쪽 표현식이 null 혹은 undefined일 경우 TypeError가 일어나지 않음.
  • expression이 null이거나 undefined일 경우 undefined로 평가

이런 접근 표현식을 옵션 체인이라고도 한다.

호출 표현식

  • 함수나 메서드를 호출(실행)하는 문법
f(0)
Math.max(x,y,z)
a.sort()

호출 표현식 평가 시

  1. 함수 표현식 평가

    → 함수가 아니라면? TypeError

  2. 함수 인자 표현식을 평가해 인자 값 리스트 생성
  3. 인자 값을 매개변수에 순서대로 할당

  4. 함수 바디 실행

    → return 문이 있다면 리턴 값이 호출 표현식의 값

  • 프로퍼티 접근 표현식으로 함수 호출시 ex) abc.max() ← 이 호출은 메서드 호출이다.
  • 메서드 호출에서 프로퍼티 접근 대상인 객체 또는 배열은 함수 바디가 실행되는 동안 this 키워드의 값이 된다.

조건부 호출

  • 조건부 프로퍼티 호출처럼 ES2020 문법
function square(x, log) { // 두번째 인자는 선택사항인 함수
	log?.(x);
	return x * x;
}
  • ?.() 문법을 사용하여 두번째 인자가 있을 경우에만 함수를 호출할 수 있다.

객체 생성 표현식

  • 생성자 함수를 호출해 객체 프로퍼티를 초기화 한다.
new Object()
new Point(2,3)
검색