옵셔널 체이닝 심층 가이드: 자바스크립트, 배열, 타입스크립트에서 능숙하게 활용하는 방법

2024-04-02

자바스크립트, 배열, 타입스크립트에서 옵셔널 체이닝을 배열 및 함수와 함께 사용하는 방법

배열과 함께 옵셔널 체이닝을 사용하면 다음과 같은 작업을 수행할 수 있습니다.

  • 존재하지 않는 요소에 접근하려고 할 때 발생하는 오류를 방지합니다.
  • 코드를 간결하게 만들 수 있습니다.

예시:

const users = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
];

// 사용자 이름 가져오기
const johnName = users[0]?.name; // "John"
const janeName = users[1]?.name; // "Jane"

// 존재하지 않는 사용자의 이름 가져오기 (undefined 반환)
const nonExistentUserName = users[2]?.name; // undefined

// 사용자 나이 가져오기
const johnAge = users[0]?.age; // 30
const janeAge = users[1]?.age; // 25

// 존재하지 않는 사용자의 나이 가져오기 (undefined 반환)
const nonExistentUserAge = users[2]?.age; // undefined
  • 함수가 존재하는지 확인하고 존재하는 경우에만 함수를 호출합니다.
const users = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
];

// 사용자 이름 출력
users[0]?.sayHello?.(); // "Hello, my name is John."
users[1]?.sayHello?.(); // "Hello, my name is Jane."

// 존재하지 않는 사용자의 이름 출력 (아무것도 출력하지 않음)
users[2]?.sayHello?.();

// 사용자 나이 출력
users[0]?.getAge?.(); // 30
users[1]?.getAge?.(); // 25

// 존재하지 않는 사용자의 나이 출력 (undefined 반환)
users[2]?.getAge?.(); // undefined
  • 컴파일 타임 오류를 통해 존재하지 않는 프로퍼티 또는 요소에 접근하려는 것을 방지합니다.
  • 코드의 타입 안전성을 향상시킵니다.
interface User {
  name: string;
  age: number;
  sayHello(): void;
  getAge(): number;
}

const users: User[] = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
];

// 사용자 이름 가져오기
const johnName: string | undefined = users[0]?.name; // 타입: string | undefined
const janeName: string | undefined = users[1]?.name; // 타입: string | undefined

// 존재하지 않는 사용자의 이름 가져오기 (undefined 반환)
const nonExistentUserName: string | undefined = users[2]?.name; // 타입: string | undefined

// 사용자 나이 가져오기
const johnAge: number | undefined = users[0]?.age; // 타입: number | undefined
const janeAge: number | undefined = users[1]?.age; // 타입: number | undefined

// 존재하지 않는 사용자의 나이 가져오기 (undefined 반환)
const nonExistentUserAge: number | undefined = users[2]?.age; // 타입: number | undefined

// 사용자 이름 출력
users[0]?.sayHello?.(); // 타입: void
users[1]?.sayHello?.(); // 타입: void

// 존재하지 않는 사용자의 이름 출력 (아무것도 출력하지 않음)
users[2]?.sayHello?.();

// 사용자 나이 출력
users[0]?.getAge?.(); // 타입: number
users



예시 코드

객체 프로퍼티 접근

const person = {
  name: "John Doe",
  age: 30,
  address: {
    city: "New York",
    state: "NY",
  },
};

// 기존 방식
const city = person.address.city; // "New York"

// 옵셔널 체이닝 사용
const city = person?.address?.city; // "New York"

// 'address' 프로퍼티가 없거나 'city' 프로퍼티가 없는 경우 undefined 반환
const nonExistentCity = person?.address?.zip; // undefined

배열 요소 접근

const numbers = [1, 2, 3, 4, 5];

// 기존 방식
const thirdNumber = numbers[2]; // 3

// 옵셔널 체이닝 사용
const thirdNumber = numbers?.[2]; // 3

// 인덱스가 범위를 벗어나는 경우 undefined 반환
const outOfBoundsNumber = numbers?.[10]; // undefined

함수 호출

function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

// 기존 방식
sayHello("John Doe"); // "Hello, John Doe!"

// 옵셔널 체이닝 사용
const person = {
  name: "John Doe",
};

person?.sayHello?.(); // "Hello, John Doe!"

// 'sayHello' 프로퍼티가 없는 경우 아무것도 출력하지 않음
const nonExistentFunction = person?.sayGoodbye?.();

null 또는 undefined 값 처리

const maybeNull = null;

// 기존 방식
const value = maybeNull && maybeNull.value; // undefined

// 옵셔널 체이닝 사용
const value = maybeNull?.value; // undefined

// null 또는 undefined 값인 경우 undefined 반환

타입스크립트에서 옵셔널 체이닝 사용

interface Person {
  name: string;
  age: number;
}

const person: Person | null = null;

// 기존 방식
const name: string | undefined = person && person.name;

// 옵셔널 체이닝 사용
const name: string | undefined = person?.name;

// 'person' 변수가 null인 경우 undefined 반환

옵셔널 체이닝과 엘비스 연산자 결합 사용

const person = {
  name: "John Doe",
};

// 옵셔널 체이닝으로 프로퍼티 값 가져오기
const name = person?.name;

// 엘비스 연산자로 기본값 설정
const greeting = `Hello, ${name ?? "Guest"}!`; // "Hello, John Doe!"

// 'name' 프로퍼티가 없는 경우 기본값 사용
const nonExistentName = person?.age;
const greeting = `Hello, ${nonExistentName ?? "Guest"}!`; // "Hello, Guest!"
interface Person {
  name: string;
  age?: number; // 'age' 프로퍼티는 선택 사항
}

const person: Person = {
  name: "John Doe",
};

// 옵셔널 체이닝으로 프로퍼티 값 가져오기
const age = person?.age;

// 콜레슨 연산자로 기본값 설정
const ageOrDefault = age ?? 0; // 0

// 'age' 프로퍼티가 없는 경우 기본값 사용
const person = {
  name: "John Doe",
  age: 30,
};

// 옵셔널 체이닝으로 프로퍼티 값 가져오기
const isAdult = person?.age >= 18;

// 삼항 연산자로 결과 출력
const message = isAdult ? "성인입니다." : "미성년자입니다."; // "성인입니다."

// 'age' 프로퍼티가 없는 경우 기본값 사용

**9. 옵셔널 체이닝




옵셔널 체이닝 대체 방법

const person = {
  name: "John Doe",
  age: 30,
};

// 기존 방식
const city = person.address && person.address.city; // "New York"

// 옵셔널 체이닝 대체 방법
const city = person.address ? person.address.city : undefined; // "New York"

// 'address' 프로퍼티가 없거나 'city' 프로퍼티가 없는 경우 undefined 반환
const nonExistentCity = person.address ? person.address.zip : undefined; // undefined

삼항 연산자

const person = {
  name: "John Doe",
  age: 30,
};

// 기존 방식
const greeting = person.name ? `Hello, ${person.name}!` : "Hello, stranger!"; // "Hello, John Doe!"

// 옵셔널 체이닝 대체 방법
const greeting = `Hello, ${person.name ?? "Guest"}!`; // "Hello, John Doe!"

// 'name' 프로퍼티가 없는 경우 기본값 사용

함수

function getPropertyValue(obj, prop) {
  return obj && obj[prop];
}

const person = {
  name: "John Doe",
  age: 30,
};

// 기존 방식
const city = getPropertyValue(person, "address.city"); // "New York"

// 옵셔널 체이닝 대체 방법
const city = person.address && person.address.city; // "New York"

// 'address' 프로퍼티가 없거나 'city' 프로퍼티가 없는 경우 undefined 반환
const nonExistentCity = getPropertyValue(person, "address.zip"); // undefined

Lodash 라이브러리

const _ = require("lodash");

const person = {
  name: "John Doe",
  age: 30,
};

// 기존 방식
const city = _.get(person, "address.city"); // "New York"

// 옵셔널 체이닝 대체 방법
const city = person.address && person.address.city; // "New York"

// 'address' 프로퍼티가 없거나 'city' 프로퍼티가 없는 경우 undefined 반환
const nonExistentCity = _.get(person, "address.zip"); // undefined

Ramda 라이브러리

const R = require("ramda");

const person = {
  name: "John Doe",
  age: 30,
};

// 기존 방식
const city = R.path(["address", "city"], person); // "New York"

// 옵셔널 체이닝 대체 방법
const city = person.address && person.address.city; // "New York"

// 'address' 프로퍼티가 없거나 'city' 프로퍼티가 없는 경우 undefined 반환
const nonExistentCity = R.path(["address", "zip"], person); // undefined

주의 사항

옵셔널 체이닝은 간결하고 명확한 코드를 작성할 수 있지만, 몇 가지 주의해야 할 사항이 있습니다.

  • 옵셔널 체이닝 연산자는 왼쪽 피연산자가 null 또는 undefined인 경우 undefined를 반환합니다. 따라서 옵셔널 체이닝 연산자를 사용하기 전에 왼쪽 피연산자가 null 또는 undefined인지 확인하는 것이 좋습니다.
  • 옵셔널 체이닝 연산자는 접근하려는 프로퍼티 또는 요소가 존재하지 않는 경우 오류를 발생시키지 않습니다. 따라서 옵셔널 체이닝 연산자를 사용한 후 결과 값을 확인하는 것이 좋습니다.
  • 옵셔널 체이닝 연산자는 코드를 간결하게 만들 수 있지만, 과도하게 사용하면 코드를 읽기 어렵게 만들 수 있습니다. 따라서 적절하게 사용하는 것이 중요합니다.

옵셔널 체이닝은 ES2020에서 도입된


javascript arrays typescript


Node.js란 무엇일까요?

Node. js는 다음과 같은 특징을 가지고 있습니다.비동기 I/O: Node. js는 비동기 I/O 모델을 사용하여 동시에 여러 요청을 처리할 수 있습니다. 이는 Node. js를 네트워킹 및 실시간 애플리케이션에 적합하게 만듭니다...


"Why does Google prepend while(1); to their JSON responses?"에 대한 심층 분석: 자바스크립트, JSON, Ajax의 관점에서

Google은 JSON 응답에 while(1); 코드를 삽입하는 것으로 알려져 있습니다. 이는 익숙하지 않은 행동으로 보일 수 있지만, 실제로는 몇 가지 중요한 목적을 달성하기 위한 것입니다.JSONP 공격 방지:JSONP (JSON Padding)은 클라이언트 측 스크립팅을 통해 서버로부터 JSON 데이터를 가져오는 기술입니다...


비제어 입력이란 무엇일까요?

장점:코드가 간단하고 직관적입니다.컴포넌트 state를 관리할 필요가 없어 성능 향상에 도움이 될 수 있습니다.컴포넌트 state와 입력 값이 동기화되지 않아 버그 발생 가능성이 높아집니다.값 변경 시 컴포넌트 업데이트를 직접 처리해야 합니다...


Angular 애플리케이션을 외부 네트워크에서 접근하는 방법

다음은 Angular, TypeScript, ng-build와 관련된 "How to allow access outside localhost" 프로그래밍에 대한 해설입니다.ng-build 명령어는 Angular 애플리케이션을 프로덕션 환경에 배포하기 위해 사용됩니다...


create-react-app에서 src 디렉토리 외부의 모듈 가져오기 제한: 심층 분석 및 대체 방법

하지만 create-react-app은 src 디렉토리 외부의 모듈 가져오기에 대한 제한을 가지고 있습니다. 이는 다음과 같은 이유 때문입니다.모듈 번들링 문제: create-react-app은 Webpack을 사용하여 모든 JavaScript 모듈을 하나의 번들 파일로 결합합니다...


javascript arrays typescript