Javascript(ES2020)**Nullish Coalescing_(??)및 선택적 링크(?)설명하다

영응집산자(??)

이것은 논리 연산자로서 왼쪽의 조작 수가 null 또는 undefined 일 때, 오른쪽의 조작 수를 되돌려주고, 그렇지 않으면 왼쪽의 조작 수를 되돌려준다.
자주 만날 수 있는 용례를 살펴보겠습니다. 그중(?)운영자는 당신의 생활을 더욱 쉽게 할 수 있습니다:)

코드 세그먼트 — 1.1
가장 흔히 볼 수 있는 용례는javascript에서 삽입된 대상에 대한 접근 값입니다.
코드 세션-1.1에서 데이터 대상에서'name'키를 접근하려고 시도하는 것을 볼 수 있습니다. 데이터 대상은 삽입된 대상입니다. 이것은 우리에게 예상한 결과를 제공합니다.

코드 세그먼트 — 1.2
코드 세그먼트-1.2에서 현재 중첩된 데이터 대상에 "name"키가 포함되지 않은 것을 볼 수 있습니다."name"키에 접근하려고 할 때, 정의되지 않은 것을 얻었습니다.
정의되지 않은 값을 가져오는 것은 일반적으로 바람직하지 않습니다.액세스하려는 키가 정의되지 않은 경우 기본값을 설정해야 할 수도 있습니다.
다음과 같이 논리 또는 연산자(| |)를 사용하여 해결할 수 있습니다.

console.log(data.profile.name || ‘John Doe’)

데이터가 확보되면윤곽이름이 정의되지 않은 다음 "John Doe"를 표시합니다.그러나 이것은 여전히 완벽하지 않다.

코드 세그먼트-1.삼.
만약'age'의 초기 값이 0 (실제로는 유효한age) 이라면 어떻게 해야 합니까?이런 상황에서 우리는 21을 수출로 얻을 것이다.이것도 우리가 원하는 행위가 아니다.
자바스크립트의 0이 허위 값으로 여겨졌기 때문이다.
따라서 지금까지 우리가 해야 할 일은 다음과 같다.

if(data.profile.name == undefined || data.profile.name == null )

 { keep the value of name as ‘John Doe’}

 else{ keep the provided value of name}

이것은 당신의 코드를 불필요하게 길게 하고 경험이 없는 프로그래머들이 많이 있습니다 (내가 처음 시작했을 때를 포함해서!)!🤓 ) 부지불식간에 버그를 도입하다.

#Tip: Incomplete knowledge is more dangerous than no knowledge.

하지만 지금은 영응집산자(??)가 도입되면서ES2020에서는 많은 시간과 오류를 줄일 수 있습니다!

코드 세그먼트-1.사.
우리가 해야 할 일은 사용하는 것이다(?)연산자는 (| |) 의 위치에 있습니다. 이렇게 간단합니다!이것이 바로 네가 해야 할 일이다.
현재,age의 값이null이거나 정의되지 않았을 때만 21을 기록합니다.이것이 바로 우리가 바라는 것이다.

링크 연산자(?) 옵션

링크 연산자 ?. (옵션) 를 사용하면 체인의 각 참조가 유효한지 확인할 필요 없이 연결 개체 체인 깊숙한 곳에 있는 속성 값을 읽을 수 있습니다.
한 가지 예를 통해 이 점을 이해하자.

코드 세그먼트 — 2.1
이전의 경험에서 알 수 있듯이, 만약 우리가 대상에 존재하지 않는 키를 방문하려고 한다면, 우리는 정의되지 않은 키를 얻을 수 있을 것이다.(코드 세그먼트 -2.1 참조)
우리는 데이터 대상에서 나이에 접근하려고 시도했다.그래서 우리는 정의가 없다.

코드 세그먼트 — 2.2🔗 check out the codesandbox
지금, 만약 우리가 존재하지 않는 플러그인 키를 방문하려고 시도한다면, 어떻게 해야 합니까?
코드 세그먼트에서 보셨듯이 — 2.2 우리는 실수를 하나 얻게 될 것이다.
만약 우리가 두 개의 정의되지 않은 차원이 있다면, 우리는 오류를 얻을 것이다.
다음과 같이 논리 AND(&&) 연산자를 사용하여 이 문제를 해결할 수 있습니다.

console.log(data && data.profile && data.profile.age);

문자로 번역할 때, 그것의 뜻은 — 하면, 만약, 만약... — 그리고 데이터를 추출합니다.윤곽 — 및 if 데이터.프로필 존재 — 데이터를 추출합니다.윤곽나이.
지금 우리는 실수를 하지 않을 것이다.그래서 문제가 해결됐어요?그래, 잠깐만!
⚠️ 지금은 이 문제를 해결하는 좋은 방법이지만, 이것은 매우 나쁘고, 매우 빨리 변한다.만약 당신이 매우 깊이 박힌 대상이 있고, 이 대상에 매우 깊이 박힌 키를 방문하고 싶다면, 당신은 몇 번의 & & 조작부호를 사용해야 하는지 상상해 보세요!
따라서 이를 단순화하기 위해 ES2020 옵션 링크 연산자를 사용할 수 있습니다.

코드 세그먼트 — 2.3
코드 세션-2.3에서, 당신은 우리의 코드가 얼마나 간결하고 읽기 쉬운지 볼 수 있습니다. 그렇지 않으면 몇 줄의 코드가 필요할 수도 있습니다.
또 다른 관찰 결과는 우리가 얻은 출력이 정의되지 않았다는 것이다.이것은 여전히 오류보다 훨씬 낫다. 현재 우리는 합병Nullish coalescing ( ?? )과 Optional chaining ( ?. ) 연산자의 학습을 통해 이 문제를 처리할 수 있다!
다음 문제 정답!또는🐦 뭐가 문제야!
읽어주셔서 감사합니다. 만약 이 블로그를 좋아한다면 아래의 더 많은 이런 게시물을 고려해 주십시오.