Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- 성능최적화
- express
- 회고
- 포트포워딩
- sequelize
- CDN
- 정규표현식
- AWS
- npx
- component
- Modal
- cicd
- scrapping
- Recoil
- react
- styled-component
- graphql
- 웹팩
- docker
- go
- socket.io
- typescript
- route
- javascript animation
- 반응형웹
- Redux
- 웹크롤링
Archives
- Today
- Total
프로그래밍 공부하기
?. 연산자(Optional Chaining) 본문
객체의 속성이나 메소드에 접근할 때 해당 항목이 없다면 오류가 발생된다. 이러한 상황에서 오류발생 대신 undefined를 리턴하는 것이 ?. 연산자이다. 단, Internet Explorer 브라우저는 이를 지원하지 않는다.
1. 속성/배열
let obj = {};
obj.prop1 //undefined
obj.prop1.prop2 //Uncaught TypeError: Cannot read property 'prop2' of undefined
obj.prop1?.prop2 //undefined
obj.prop1?.prop2?.prop3 //undefined
let arr = [];
arr[10] //undefined
arr[10][1] //Uncaught TypeError: Cannot read property '1' of undefined
arr[10]?.[1] //undefined
객체에서 존재하지 않는 속성에 접근하면 undefined 값이 반환된다. undefined 값이 반환된 속성의 안에 있는 존재하지 않는 속성에 접근하면 위와 같이 TypeError가 발생한다. undefined에는 속성이 없기 때문이다. 이러한 오류 상황에서 ?. 연산자를 사용하면 에러를 발생시키는 대신 위와 같이 undefined가 리턴된다. 배열의 경우에도 마찬가지이다. 즉, 어떤 요소가 존재하지 않을 때(값이 undefined) 이 값의 내부 요소를 오류 없이 탐색하고 싶으면 ?.를 사용하는 것이다.
2. 메소드
let obj = {};
obj.isihl(); // Uncaught TypeError: obj?.isihl is not a function
obj.isihl?.(); //undefined
window.isihl?.(); //undefined
존재하지 않는 메소드를 호출하면 위와 같이 TypeError가 발생한다. 이러한 오류 상황에서 위와 같이 ?.연산자를 사용하여 메소드를 호출하면 에러를 발생시키는 대신 undefined가 리턴된다.
'Web > [JS] Common' 카테고리의 다른 글
불변성과 가변성 1 - JS의 자료형 (0) | 2021.01.07 |
---|---|
재귀함수와 꼬리재귀함수 (0) | 2021.01.05 |
??(null 병합 연산자) (0) | 2021.01.01 |
JS 엔진 최적화를 위한 지식1 - Hidden Class (0) | 2021.01.01 |
논리연산자 AND, OR의 결과값 (0) | 2020.12.31 |
Comments