선택적 링크란 무엇이며, 왜 사용해야 합니까?

안녕하십니까, 제 프로그래머들. 이 블로그에서 선택할 수 있는 링크가 무엇인지, 그리고 왜 사용해야 하는지 토론할 것입니다.
MDN에서 선택적 링크의 정의는 다음과 같습니다.
선택적 링크 연산자(?)연결 대상 체인의 깊은 곳에 있는 속성의 값을 읽을 수 있도록 해 줍니다. 체인의 모든 인용이 유효한지 검사할 필요가 없습니다."
그래서 이것은 단지 선택할 수 있는 체인 조작부호를 사용하는 것을 의미할 뿐이다. 보기에 '?'우리는 실제로 대상의 속성 값을 보고 그것이 null 인지 undefined 인지 확인할 수 있다.
만약 이 값이 null 또는 undefined가 아니라면, 이 값을 되돌려주거나 체인에서 더 이동할 것입니다. 그렇지 않으면, 오류를 던지는 것이 아니라 더 많은 계산을 멈추고 undefined 되돌려줍니다.
내 설명이 그것을 더욱 혼란스럽게 한다면 예를 들어 보자.

let person ={
name:"Rahul",
surname: "Dhiman",
address : {
state: "Maharashtra",
city: "Mumbai",
pinCode: 100000
},
getCity : function(){ return `${this.address.city}`},
likes:["JavaScript","React","React Native"]
}

선택할 수 있는 링크가 이 person 대상과 어떻게 작동하는지 알아보겠습니다.
여기서, 만약 우리가 방문하고 싶다면, 우리는 person.address.city (점) 조작부호를 사용할 것이다.

console.log(person.address.city)
//expected output: Mumbai

그러나 . 대상에 address 속성이 없다면 무슨 일이 일어날까.
콘솔에서 코드를 실행하고 출력을 검사합시다

이것은 마치 내가 컨트롤러를 사용하지 않은 상태에서 코드를 디버깅하고 싶다는 것과 같다.일지.
그냥 웃고 싶었어요.너 웃었어?
엔진 뚜껑 아래에서 아마 이렇게 일할 것이다.

따라서 JS 엔진 계산person을 할 때 아무것도 찾지 못하고 person.address로 계산됩니다. 이것은 사실상 정의되지 않은 것이기 때문입니다. undefined 대상에서 정의되지 않은 것이기 때문입니다.
그리고 JS 엔진 검사person의 city 속성은 미친 듯이 변합니다. 정의되지 않은 데이터 형식은 그 안에 속성을 저장하지 않기 때문에 점 연산자를 사용하여 속성에 접근하는 것은 의외입니다. 컴파일러가 오류를 던집니다.
현재 우리는 어떻게 선택할 수 있는 링크 조작부호를 사용하여 그것을 복구합니까?
답안은 문제의 범위 안에 있다.
선택할 수 있는 링크를 사용하여 같은 코드를 실행해서 우리가 무엇을 얻었는지 봅시다.

여기에서, 이것은 undefined null 또는undefined인지 확인합니다. 이것은 정의되지 않았기 때문에, 더 이상의 계산을 멈추고undefined로 돌아갑니다.그래서 우리는 실제로address 부분조차 집행하지 않았다.옵션 링크 조작자는 person.address.city 또는 null 이전 키만 검사합니다
탁자를 다시 한 번 검사합시다.

여기서 우리는 그 사람을 볼 수 있다.주소?시티 부분은 영원히 실행되지 않기 때문에 오류를 던지고 정의되지 않은 결과를 되돌려주지 않습니다.
우리가 특정한 수조나 대상을 운행할 때 선택할 수 있는 체인식 조작부호도 매우 유용하다.

const testObj = {name:"Rahul",surname:"Dhiman"};

testObj.forEach(elememt => console.log(elememt));
//throws error: "obj.forEach is not a function" 😩
testObj.forEach?.(element => console.log(element));
// No errors 😎

위의 예시에서 선택할 수 있는 링크 조작부호가 undefined 의 계산 결과를 검사하고 있습니다. 이것은 정의되지 않았기 때문에 회로를 터치하고 더 이상의 실행을 멈추며 오류를 얻지 않습니다.
이것이 바로 우리가 수조나 대상 방법을 사용할 때 선택할 수 있는 링크 조작부호를 어떻게 사용하는가이다.
중요한 점은 다음과 같습니다.

옵션 링크 조작원은 forEach 또는 null 유형만 검사한다undefined.

연산자 뒤의 속성, 예를 들어person과 같은 연산자 앞의 속성을 평가할 수 있는 링크 연산자를 선택할 수 있다.주소?도시.

person.address?.city

이 곳에서 선택할 수 있는 링크 조작부호가address 속성을 검사하고 있습니다. 호출 체인에서 선택할 수 있는 링크 조작부호와person 대상이 검사되기 전에 나타나기 때문입니다.

값을 구한 후, 값이null이거나 정의되지 않으면 선택할 수 있는 링크 연산자는 정의되지 않은 것으로 되돌아와 실행을 중지합니다.

선택할 수 있는 링크 연산자는 다음과 같은 구조에 사용할 수 있다.

falsy – obj?.prop가 있는 경우 obj.prop로 돌아가고 그렇지 않으면 obj로 돌아갑니다.

undefined – obj?.[prop]가 있는 경우 obj[prop]로 돌아가고 그렇지 않으면 obj로 돌아갑니다.

undefined – obj.method?.()가 존재하면 호출obj.method(), 그렇지 않으면 반환obj.method

결론: 선택할 수 있는 링크 조작부호는 훌륭한 자바스크립트 특성으로 우리의 생활을 더욱 수월하고 코드를 더욱 깨끗하게 할 수 있다.