JavaScript의 새로운 기능: 선택적 연결
10526 단어 codenewbietypescriptnewsjavascript
Originally published on inspiredwebdev.com
이 기사를 작성한 날짜(2019년 10월 24일)를 기준으로 옵셔널 체이닝은 TC39 프로세스의 3단계에 있으므로 아직 브라우저에서 기본적으로 사용할 수 없습니다.
TC39 프로세스here의 단계에 대한 자세한 내용을 읽을 수 있습니다.
옵셔널 체이닝이란?
사용자를 나타내는 단순
Object
을 살펴보겠습니다.const user1 = {
name: 'Alberto',
age: 27,
work: {
title: 'software developer',
location: 'Vietnam'
}
}
const user2 = {
name: 'Tom',
age: 27
}
사용자의 직위를 표시하고 싶다고 가정해 보겠습니다.
보시다시피
work
는 Object
의 선택적 속성이므로 다음과 같이 작성해야 합니다.let jobTitle;
if (user.work){
jobTitle = user.work.title
}
또는 삼항 연산자 사용:
const jobTitle = user.work ? user.work.title : ''
title
의 속성 work
에 액세스하기 전에 사용자가 실제로 work
를 가지고 있는지 확인해야 합니다.우리가 간단한 객체를 다룰 때는 그렇게 큰 문제가 아니지만 액세스하려는 데이터가 깊이 중첩되어 있으면 문제가 될 수 있습니다.
여기서 선택적 연결
?.
연산자가 구출됩니다. 다음은 이 새 연산자로 코드를 다시 작성하는 방법입니다.const jobTitle = user.work?.title
완료! 더 간결하고 읽기 쉽습니다.
위의 코드는
does the user have a work property? if yes, access the title property inside of it
로 읽을 수 있습니다.const user1JobTitle = user1.work?.title;
// software developer
const user2JobTtile = user2.work?.title;
// undefined
Object
에서 사용할 수 없는 속성에 도달하는 즉시 연산자는 undefined
를 반환합니다.이 두 사용자 및 학교 기록과 같은 선택적 속성이 있는 깊게 중첩된 개체를 처리한다고 상상해 보십시오.
const elon = {
name: 'Elon Musk',
education: {
primary_school: { /* primary school stuff */ },
middle_school: { /* middle school stuff */ },
high_school: {/* high school stuff here */},
university: {
name: 'University of Pennsylvania',
graduation: {
year: 1995
}
}
}
}
const mark = {
name: 'Mark Zuckerberg',
education: {
primary_school: { /* primary school stuff */ },
middle_school: { /* middle school stuff */ },
high_school: {/* high school stuff here */},
university: {
name: 'Harvard University',
}
}
}
모든 사용자가 대학에서 공부한 것은 아니므로 재산은 선택 사항이 될 것이며 일부는 중퇴하고 학업을 마치지 않았기 때문에 졸업도 마찬가지입니다.
이제 두 사용자의 졸업 연도에 액세스하고 싶다고 상상해 보십시오.
let graduationYear;
if(
user.education.university && user.education.university.graduation && user.education.university.graduation.year){
graduationYear = user.education.university.graduation.year;
}
옵셔널 체이닝 연산자를 사용하면:
const elonGraduationYear = elon.education.university?.graduation?.year;
// 1992
const markGraduationYear = mark.education.university?.graduation?.year;
// undefined
이것이 이 새로운 연산자를 사용하여 선택적 속성에 액세스하는 방법입니다. 사용을 시작하려면 학습을 권장하는 TypeScript 3.7의 일부가 될 것입니다! TypeScript 3.7here에 대한 자세한 내용을 읽을 수 있습니다.
또는 Babel을 사용하여 이 연산자를 사용할 수 있습니다.
읽어주셔서 대단히 감사합니다. 자세한 내용은 내 블로그InspiredWebDev에서 나를 따르십시오.
Amazon 및 Leanpub에서 내 전자책 받기
Reference
이 문제에 관하여(JavaScript의 새로운 기능: 선택적 연결), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/albertomontalesi/what-s-new-in-javascript-optional-chaining-31i4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)