일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 시간
- 프로그래밍
- 한글 입력 시 이벤트 두 번 발생
- 낙관적 업데이트
- 9610
- 파이썬
- prototype 프로퍼티
- Tanstack Query
- 백준 9610번 파이썬 문제 풀이
- dp
- python
- 함수 객체의 프로퍼티
- css
- 동적 계획법
- javascript
- __proto__ 접근자 프로퍼티
- 동기
- 알고리즘
- 자바스크립트
- C++
- 백준
- 2522
- 메타버스
- float: right
- 백트래킹
- backtracking
- 최소공배수
- 유클리드 호제법
- 한글이 두 번 입력됨
- 비동기
- Today
- Total
염딩코
Optional Chaining(옵셔널 체이닝)이란? 본문
const name = person && person.name;
![](https://t1.daumcdn.net/keditor/emoticon/friends1/large/009.gif)
JavaScript에서 optional chaining은 프로퍼티나 메소드를 참조할 때 발생할 수 있는 에러를 방지하기 위한 문법입니다. 이전에는 다음과 같은 방식으로 프로퍼티를 참조했습니다.
const name = person && person.name;
위와 같은 코드는 person이 null이나 undefined일 경우, name 변수는 undefined가 되어 프로그램이 중단될 수 있습니다. 이 문제를 해결하기 위해 optional chaining 연산자(?.)가 등장하였습니다.
optional chaining을 사용하면 다음과 같은 코드로 에러를 방지할 수 있습니다.
const name = person?.name;
위 코드에서 person이 null이나 undefined인 경우, name 변수는 undefined가 되지만 프로그램이 중단되지 않습니다.
optional chaining은 객체뿐만 아니라 배열과 함수 호출에서도 사용할 수 있습니다.
const arr = [1, 2, 3];
const third = arr?.[2]; // 3
const func = obj?.method;
위 코드에서 arr?.[2]는 arr이 null이나 undefined인 경우 undefined를 반환합니다. obj?.method는 obj가 null이나 undefined인 경우 method 함수를 호출하지 않고 undefined를 반환합니다.
optional chaining은 코드의 가독성을 향상시키고, 예외 처리 코드를 줄일 수 있습니다.
하지만 optional chaining을 남용하면 코드의 가독성을 해치고 버그를 유발할 수 있으므로, 적절한 사용이 필요합니다.
예를 들어 다음과 같은 코드에서는 optional chaining을 사용하지 않는 것이 좋습니다.
const result = a?.b?.c?.();
위 코드에서 a, b, c 중 하나라도 null이나 undefined일 경우, result는 undefined가 됩니다.
이 때문에 버그를 찾기 어려워지므로, 다음과 같은 방식으로 optional chaining을 사용하지 않고 예외 처리 코드를 작성하는 것이 좋습니다.
let result;
if (a && a.b && a.b.c && typeof a.b.c === 'function') {
result = a.b.c();
}
위 코드는 optional chaining을 사용하지 않지만, a, b, c가 null이나 undefined인 경우 예외 처리 코드가 실행되어 에러를 방지할 수 있습니다.
'Front-End > Javascript' 카테고리의 다른 글
[JS] Prototype (0) | 2023.07.31 |
---|---|
[JS]let, const 키워드와 블록 레벨 스코프 (0) | 2023.07.29 |
[JS]전역 변수의 문제점 (0) | 2023.07.29 |
[JS] 블로킹과 논블로킹 / 동기와 비동기 (0) | 2023.07.27 |
콜백 함수란? (Callback function) (0) | 2023.02.24 |