오늘날 JavaScript는 웹 기술을 다루는 모든 개발자에게 필수입니다. 백엔드에 중점을 둔 사람들조차도 클라이언트 측을 한 번 또는 몇 번 터치해야하며 아마도 당신이 Node 개발자이므로 기본적으로 JS를 호흡 할 수 있습니다.

요점은, 당신의 위치가 중요하지 않다는 것입니다. 당신은 아마도 못생긴 코드에 직면했을 것이고 "정말, 내가 이것을 어떻게 써야 합니까?"라고 생각했을 것입니다.

글쎄요, 사람들은 그것을 더 좋게 만들기 위해 노력하고 있고 아마도 우리는 지금까지 최고의 위치에 있을 것입니다. 또한 TypeScript도 훌륭하고 우리가 놀라운 일을 할 수 있도록 해주지만 우리의 오랜 친구인 JavaScript가 우리에게 제공하는 몇 가지 멋진 것들을 봅시다.

** 다음 기능 중 어느 것도 IE와 호환되지 않습니다. 하지만 누가 신경을 쓰나요? ¯\_(ツ)_/¯

무효 합체

일반적으로 변수를 정의해야 하지만 값이 null 또는 undefined일 수 없는 경우 대안은 기본값을 제공하려는 경우 삼항에 의존하는 것입니다.

const person = { name: 'Richard', age: 21 };
const age = person.age ? person.age : 'Age not determined';
console.log(age); // Output: 21

이제 어떻게 작동하는지 봅시다!

const person = { name: 'Richard', age: 21 };
const age = person.age ?? 'Age not determined';
console.log(age); // Output: 21

무효 병합 연산자(??)는 null 또는 undefined 값을 모두 처리하는 논리 연산자이며, 왼쪽 피연산자가 null 또는 undefined 일 때 오른쪽 피연산자를 반환합니다.
false 또는 null 뿐만 아니라 undefined 값도 고려해야 하는 상황이 있으면 OR 연산자(||)를 시도할 수 있습니다. 이전 예에 따라 name가 반드시 존재해야 하고 비워 둘 수 없음('') 및 age가 0일 수 없음을 보장해야 한다고 가정해 보겠습니다. 예... =P). 그런 다음 우리는 다음을 수행합니다.

const person = { name: '', age: 0 };
const name = person.name || 'This person has no name';
const age = person.age || 'Age not determined';
console.log(name); // Output: 'This person has no name'
console.log(age); // Output: 'Age not determined'

논리적 무효 할당

속성에 값을 할당해야 하지만 이 속성이 null 또는 undefined인 경우에만 다음과 같이 지정해야 한다고 상상해 보세요.

const person = { name: 'Richard', age: 21 };
const person2 = { name: 'Michael', lastname: 'Glass', age: 21 };

person.lastname ??= 'Banks';
console.log(person.lastname); // Output: Banks

person2.lastname ??= 'Kimber';
console.log(person2.lastname); // Output: Glass

선택적 체인

나는 이와 같은 상황에서 악몽을 꿨습니다. 때로는 깊은 객체로 작업하고 일부 속성에 액세스해야 하지만 필요한 속성은 undefined 일 수 있을 뿐만 아니라 부모 노드도 있으므로 다음을 수행해야 합니다. 다음과 같이 아름다운if:

const sector = { 
    role: {
        manager: {
            name: 'Alex'
        }
    }
};

const manager = sector.role && 
                sector.role.manager &&
                sector.role.manager.name ? 
                sector.role.manager.name : '';

얼마나 고통스럽습니까? 바라건대, 우리는 지금 다른 것을 할 수 있습니다.

const sector = { 
    role: {
        manager: {
            name: 'Alex'
        }
    }
};

const manager = sector.role?.manager?.name ?? '';

정확히는 각 속성 앞에 연산자?를 추가하기만 하면 체인의 각 참조를 명시적으로 검증할 필요가 없습니다. 참조가 null인 경우 undefined가 반환됩니다. 다음과 같은 기능에서도 작동합니다.

let result = someInterface.nonExistingMethod?.();
console.log(result); // Output: undefined

결론

그게 다가 아닙니다. 공식 docs을 확인하는 것이 좋습니다. JavaScript는 매일 향상되고 있으며 변경 사항이 빠르게 제공되고 있으므로 항상 최신 상태인지 확인하십시오!

이상입니다. 다음 포스팅에서 뵙겠습니다.