세모이
개발 계발
세모이
전체 방문자
오늘
어제
  • 분류 전체보기 (83)
    • 알고리즘 (1)
    • 자바스크립트 (29)
    • 리액트 (10)
    • HTML&CSS (2)
    • TIL (26)
    • 파이썬 (8)
    • Dev (1)
    • 데일리 (3)
      • 2023 (3)
      • 2025 (0)
    • 에러일기 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 리액트 key
  • 자바스크립트 생성자 함수에 의한 객체 생성
  • 자바스크립트
  • 자바스크립트 프로퍼티 어트리뷰트
  • html 신기한 태그
  • 옵셔널 체이닝
  • 개발자 도구 Network
  • 자바스크립트 전역 변수의 문제점
  • 시멘틱 태그
  • 모던 자바스크립트 deep dive
  • 모던 자바스크립트 deep deive
  • &&연산자
  • 모던 자바스크립트
  • 자바스크립트 빌트인 객체
  • 자바스크립트 함수와 일급 객체
  • 함수
  • const let 키워드와 블록레벨 스코프
  • 자바스크립트 프로토타입
  • 자바스크립트 깊은 복사 얕은 복사
  • 자바스크립트 strict mode

최근 댓글

최근 글

티스토리

반응형
hELLO · Designed By 정상우.
세모이
자바스크립트

[자바스크립트] 옵셔널 체이닝

[자바스크립트] 옵셔널 체이닝
자바스크립트

[자바스크립트] 옵셔널 체이닝

2022. 3. 28. 15:48
반응형

✅ 옵셔널 체이닝 연산자(?.)

- ES11에 도입되었으며 좌항의 연산자가 null 또는 undefined인 경우 undefined를 반환하고, 아닌 경우 우항의 프로퍼티를 참조!

- 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용

let ob = null;

let cob = ob?.name;

// 좌항의 연산자가 null 이기 때문에 undefined를 반환
console.log(cob) 

ob = {age:12};

cob = ob?.name;

// 좌항의 연산자가 undefined 또는 null이 아니지만 객체 안에 name 프토퍼티가 없기 때문에 undefined 반환
console.log(cob) //  undefined

cob=ob?.age;
console.log(cob) //  12

✅ 논리 연산자 &&와 옵셔널 체이닝 연산자의 차이점

- 논리 연산자 &&는 좌항 피연산자가 Falsy한 값이면 좌항 피연산자를 그대로 반환

- 옵셔널 체이닝 연산자 ?.는 Falsy한 값이라도 null, undefined가 아니면 우항의 프로퍼티를 참조

let ob = null;

let aob = ob && ob.name;
let oob = ob?.name;

// && 연산자는 좌항 피연산자가 Falsy한 값이기 때문에 좌항 연산자를 그대로 반환했고 ?.는 좌항의 연산자가 null이라 undefined를 반환
console.log(aob); // null
console.log(oob); // undefined

ob='';

aob = ob && ob.name;
oob = ob?.name;

// && 연산자는 좌항 피연산자가 Falsy한 값이기 때문에 좌항 연산자를 그대로 반환했고(빈 문자열) ?.는 좌항 연산자가 null 또는 undefined가 아니지만 name의 프로퍼티가 정의되지 않았기 때문에 undefined를 반환
console.log(aob); // 
console.log(oob); // undefined

ob=0;

aob = ob && ob.name;
oob = ob?.name;

console.log(aob); // 0
console.log(oob); // undefined


참조 - 객체를 예로 들었을 때 변수에 객체 값을 저장하면 변수에 할당된 값은 객체 값이 아니라 객체의 주소 값이 저장되고 그 주소 값을 통해 실제 객체에 접근

var person = {
    name : 'Lee'
};

//참조 값을 복사(얕은 복사)
var copy = person;
copy === pserson // true

copy.name = 'Kim';
person.adress = 'Seoul';

copy // {name: 'Kim', adress: 'Seoul'}
person //{name: 'Kim', adress: 'Seoul'}
// ->copy와 person은 동일한 객체를 가리킨다.
// && 논리 연산자
true && true // true
true && false // false
false && false // false
false && true // false
반응형

'자바스크립트' 카테고리의 다른 글

[자바스크립트] 프로토타입 쉽게 이해하기  (0) 2022.04.23
자바스크립트 동작 원리  (0) 2022.04.20
[자바스크립트] Promise  (0) 2022.02.06
[자바스크립트] this  (0) 2021.12.14
[자바스크립트] 빌트인 객체  (0) 2021.12.13
  • ✅ 옵셔널 체이닝 연산자(?.)
  • - ES11에 도입되었으며 좌항의 연산자가 null 또는 undefined인 경우 undefined를 반환하고, 아닌 경우 우항의 프로퍼티를 참조!
  • - 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용
  • ✅ 논리 연산자 &&와 옵셔널 체이닝 연산자의 차이점
  • - 논리 연산자 &&는 좌항 피연산자가 Falsy한 값이면 좌항 피연산자를 그대로 반환
  • - 옵셔널 체이닝 연산자 ?.는 Falsy한 값이라도 null, undefined가 아니면 우항의 프로퍼티를 참조
'자바스크립트' 카테고리의 다른 글
  • [자바스크립트] 프로토타입 쉽게 이해하기
  • 자바스크립트 동작 원리
  • [자바스크립트] Promise
  • [자바스크립트] this
세모이
세모이
개발 공부!
개발 계발개발 공부!

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.