Angular 표현식 문법은 JavaScript를 기반으로 하지만 몇 가지는 다릅니다. 이 문서에서는 Angular 표현식 문법이 표준 JavaScript와 어떻게 비슷하고 다른지 알아봅시다.
리터럴 값
Angular는 JavaScript의 리터럴 값 중 일부를 지원합니다.
지원하는 리터럴 값
| 리터럴 타입 | 예시 |
|---|---|
| 문자열 | 'Hello', "World" |
| 불리언 | true, false |
| 숫자 | 123, 3.14 |
| 객체 | {name: 'Alice'} |
| 배열 | ['Onion', 'Cheese', 'Garlic'] |
| null | null |
| 정규표현식 | /\d+/ |
| 템플릿 문자열 | `Hello ${name}` |
| 태그가 지정된 템플릿 문자열 | tag`Hello ${name}` |
지원하지 않는 리터럴 값
| 리터럴 타입 | 예시 |
|---|---|
| BigInt | 1n |
전역 변수
Angular 표현식에서는 다음과 같은 전역 변수를 사용할 수 있습니다:
이 외에 Number, Boolean, NaN, Infinity, parseInt 등 표준 JavaScript에서 지원하는 전역 객체는 지원하지 않습니다.
지역 변수
표현식의 특정 컨텍스트에서 사용할 수 있는 특별한 지역 변수들이 있습니다.
이 변수들은 Angular가 자동으로 선언한 것이며, 달러 기호($)로 시작합니다.
@for 블록에서 실행 블록을 한 번씩 돌 때마다 변경되는 $index와 같은 변수가 이런 경우에 해당합니다.
어떤 연산자를 사용할 수 있나요?
지원하는 연산자
Angular 표현식에는 표준 JavaScript 연산자 중 다음과 같은 연산자를 사용할 수 있습니다.
| 연산자 | 예시 |
|---|---|
| 더하기 / 문자열 연결하기 | 1 + 2 |
| 빼기 | 52 - 3 |
| 곱하기 | 41 * 6 |
| 나누기 | 20 / 4 |
| 나머지 구하기 | 17 % 5 |
| 지수 연산 | 10 ** 3 |
| 소괄호 | 9 * (8 + 4) |
| 삼항 연산자 | a > b ? true : false |
| AND 논리 연산 | && |
| Or 논리 연산 | || |
| Not 논리 연산 | ! |
| Null 병합(Nullish Coalescing) | possiblyNullValue ?? 'default' |
| 비교 연산자 | <, <=, >, >=, ==, ===, !==, != |
| 단항 마이너스 | -x |
| 단항 플러스 | +y |
| 프로퍼티 접근 | person['name'] |
| typeof | typeof 42 |
| void | void 1 |
| in | 'model' in car |
| instanceof | car instanceof Automobile |
| 할당 | a = b |
| 더하기 할당 | a += b |
| 빼기 할당 | a -= b |
| 곱하기 할당 | a *= b |
| 나누기 할당 | a /= b |
| 나머지 구하기 할당 | a %= b |
| 지수 할당 | a **= b |
| AND 논리 연산 할당 | a &&= b |
| OR 논리 연산 할당 | a ||= b |
| Null 병합 할당 | a ??= b |
| 객체 리터럴의 객체 전개 | {...obj, foo: 'bar'} |
| 배열 리터럴의 배열 전개 | [...arr, 1, 2, 3] |
| 함수의 나머지 인자 연산자 | fn(...args) |
| 화살표 함수 | items.filter((i) => i.active) |
참고: 할당 연산자와 증가/감소 연산자는 이벤트 리스너 구문에서만 사용할 수 있습니다. 화살표 함수 내부가 아니라면 바인딩이나 문자열 바인딩에서 사용했을 때 컴파일 오류가 발생합니다.
화살표 함수의 본문은 표현식이어야 합니다. 화살표 함수 안에서 파이프를 사용할 수는 없지만, 화살표 함수를 파이프의 인자로 전달할 수는 있습니다.
그리고 표준 JavaScript 연산자 외에 다음과 같은 연산자도 지원합니다:
| 연산자 | 예시 |
|---|---|
| Pipe | {{ total | currency }} |
| 옵셔널 체이닝* | someObj.someProp?.nestedProp |
| null 보정 연산자 (TypeScript) | someObj!.someProp |
안전 탐색 마이그레이션
Angular 22 이전에는 옵셔널 체이닝 연산자(?.)의 왼쪽 값이 null이나 undefined이면 null을 반환했지만, 표준 JavaScript의 ?.는 undefined를 반환합니다.
Angular 22부터 Angular 표현식의 옵셔널 체이닝 연산자도 표준 JavaScript와 동일하게 동작합니다.
v22로 마이그레이션할 때 ng update 스키매틱은 기존의 null 반환 동작을 유지하기 위해 기존 표현식에 $safeNavigationMigration 특수 함수를 추가했습니다.
{{ $safeNavigationMigration(foo?.bar) }}$safeNavigationMigration은 임시 마이그레이션 도구입니다.
감싼 안전 탐색 표현식을 표준 JavaScript ?. 의미 대신 기존의 null 반환 의미로 컴파일하도록 컴파일러에 지시합니다.
실제 함수가 아니므로 TypeScript에서 호출할 수 없습니다.
참고: $safeNavigationMigration을 제거할 수 있도록 null과 undefined의 차이에 의존하지 않는 표현식으로 마이그레이션하는 것이 좋습니다.
이 함수는 향후 Angular 버전에서 제거될 수 있습니다.
지원하지 않는 연산자
| 연산자 | 예시 |
|---|---|
| 비트 연산자 | &, &=, ~, |=, ^= 등 |
| 객체 구조 분해 할당 | const { name } = person |
| 배열 구조 분해 할당 | const [firstItem] = items |
| 쉼표 연산자 | x = (x++, x) |
| new | new Car() |
표현식의 컨텍스트
Angular 표현식에서는 컴포넌트 클래스의 컨텍스트 외에도 템플릿 변수, 지역 변수, 전역 변수를 활용할 수 있습니다.
컴포넌트 클래스 멤버를 참조할 때는 this가 사용된 것으로 간주합니다.
하지만 템플릿에 클래스 멤버와 같은 이름으로 템플릿 변수가 선언되어 있다면 템플릿 변수의 우선순위가 높습니다.
이 경우는 this.를 명시적으로 사용해서 클래스 멤버를 참조할 수 있습니다.
@let을 사용하면 더 유용합니다.
변수 선언
일반적으로 Angular 표현식에서는 선언문을 지원하지 않습니다. 이런 경우가 모두 해당됩니다:
| 선언 | 예시 |
|---|---|
| 변수 | let label = 'abc', const item = 'apple' |
| 함수 | function myCustomFunction() { } |
| 블록 본문을 가진 화살표 함수 | () => { } |
| 클래스 | class Rectangle { } |
이벤트 리스너 실행문
이벤트 핸들러는 표현식(expressions)이 아니고 실행문(statements) 입니다. 실행문은 Angular 표현식과 거의 비슷하지만, 두 가지가 다릅니다:
- 할당 연산자를 지원합니다. (분해 할당은 지원하지 않습니다.)
- 파이프를 허용하지 않습니다.