자바스크립트 연산자 Optional Chaining 과 typeof 공부하기

안녕하세요 오늘은 자바스크립트의 연산자에 대해서 알아보도록 할거에요. 우선 자바스크립트에서는 다양한 연산자를 제공하여 변수 및 값을 다양한 방식으로 다룰 수 있습니다. 오늘은 여러 연산자 중 여러분들이 생소할 만한 연산자에 대해서 다뤄보도록 할 예정입니다.바로 optional chaining 연산자와 typeof 연산자에 대해 알아보겠습니다. 각각의 특징과 사용법을 예제 코드와 함께 살펴보도록 하겠습니다.

Optional Chaining 연산자

Optional chaining 연산자는 객체의 속성을 안전하게 접근하는 방법을 제공합니다. 만약 중첩된 객체에서 속성을 찾을 수 없는 경우, 에러를 발생시키지 않고 undefined를 반환합니다. 예제와 함께 살펴볼까요 ?

예제 코드

const user = {
  name: 'John',
  address: {
    city: 'New York',
    postalCode: '10001'
  }
};

const postalCode = user?.address?.postalCode;
console.log(postalCode); // '10001'

위 예제에서 ?.를 사용하여 중첩된 객체의 속성을 안전하게 참조할 수 있습니다. 이를 통해 중첩된 객체의 속성에 안전하게 접근할 수 있습니다.

typeof 연산자

typeof 연산자는 특정 변수 또는 값의 데이터 타입을 반환합니다. 이를 통해 변수의 타입을 동적으로 확인할 수 있으며, 적절한 처리를 수행할 수 있습니다. 그렇기 때문에 변수 또는 값의 데이터 타입 확인할 때에 용이합니다.

예제 코드

const name = 'John';
const age = 25;
const isStudent = false;

console.log(typeof name); // 'string'
console.log(typeof age); // 'number'
console.log(typeof isStudent); // 'boolean'

다음과 같이 변수 name, age, isStudent의 데이터 타입을 typeof 연산자를 통해 확인합니다. 이를 통해 각 변수의 데이터 타입을 동적으로 알 수 있습니다.

실전 활용편 - Optional Chaining과 typeof 연산자의 활용

Optional chaining과 typeof 연산자를 조합하여 안전한 타입 체크를 수행할 수 있습니다. 특히 객체의 속성이 존재하는지 확인하고, 그 속성의 타입을 동적으로 파악하는 데 유용합니다.

예제 코드

const user = {
  name: 'John',
  address: {
    city: 'New York',
    postalCode: '10001'
  }
};

if (typeof user?.address === 'object' && typeof user?.address?.postalCode === 'string') {
  console.log(`Postal Code: ${user.address.postalCode}`);
} else {
  console.log('Invalid user or address information');
}

위 코드를 살펴보면 user 객체의 address 속성이 존재하고, 그 속성이 객체이며 postalCode 속성이 문자열인 경우에만 안전하게 출력을 수행합니다.

 

제 생각에는 Optional chaining 연산자와 typeof 연산자는 각각 안전한 속성 접근과 동적인 타입 체크를 가능케 하는 중요한 도구입니다. 이러한 연산자를 적절히 조합하여 코드를 작성하면, 예측 가능하고 안정적인 자바스크립트 코드를 개발할 수 있습니다. 여러분들도 코드의 가독성과 유지보수성을 높이기 위해 이러한 연산자를 적극적으로 활용하는 것이 좋을 것 같습니다! 도움이 되셨기를 바라며 이번 글은 이만 마치도록 하겠습니다. 감사합니다.
다른글은 여기서 더 확인하실 수 있습니다.