20일차(1)[객체(2) / 자바스크립트 옵셔널]

진하의 메모장·2025년 2월 4일

공부일기

목록 보기

25/66

2025 / 02 / 04

오늘 수업시간에는 어제 배운 객체를 이어서 배웠습니다.
어제 배운 내용보다 좀 깊게 배우면서 응용 문제도 풀어보았습니다.
수업을 하는 도중 자바스크립트 옵셔널(옵셔널 체이닝)에 대한 내용도 잠깐 있었는데 뭔지 궁금하기도 해서 이번 포스팅에서 다뤄보도록 하겠습니다.
그리고 어제 했던 객체에 대한 내용을 포함하여 다시 정리해 작성해보겠습니다.

💌 객체

객체는 여러 개의 값을 하나의 단위로 묶어서 관리할 수 있는 자료형입니다.
객체는 프로퍼티(속성)와 메소드(기능)를 포함할 수 있습니다.

1. 객체 생성하기

객체는 중괄호 { }를 사용하여 생성합니다.

객체 안에는 키(key)와 값(value)으로 이루어진 프로퍼티들이 포함됩니다.

name, age, group, company는 객체의 프로퍼티 키이고, 값들이 각 프로퍼티에 저장됩니다.

let person = {
    name: "이한",
    age: 22,
    group: "Boynextdoor",
    company: ["하이브", "KOZ"]
};

2. 프로퍼티에 접근하기

① 점 표기법

console.log(person.name); // "이한"
console.log(person.age);  // 22

② 대괄호 표기법

console.log(person['name']); // "이한"
console.log(person['age']);  // 22

3. 동적 접근

객체의 키가 변수로 주어지거나 동적으로 결정될 때 대괄호 표기법을 사용해야 합니다.

let key = "name";
console.log(person[key]);  // "이한"

4. 반복문으로 출력

for...in 반복문을 사용하여 객체의 모든 키를 순차적으로 가져올 수 있습니다.

for (let key in person) {
    console.log(key);       // 키를 출력
    console.log(person[key]); // 값 출력
}

5. 값을 변수처럼 사용

자바스크립트에서 객체를 생성할 때, 변수와 객체의 프로퍼티 키가 동일하면 변수명만으로 객체의 프로퍼티를 설정할 수 있습니다.

const name = "이한";
const age = 22;

const Leehan = { name, age }; // name과 age 프로퍼티가 자동으로 포함됩니다.
console.log(Leehan); // { name: "이한", age: 22 }

💌 옵셔널 체이닝

옵셔널 체이닝은 자바스크립트에서 객체나 배열, 함수 등의 깊숙한 속성에 접근할 때 발생할 수 있는 오류를 방지하는 기능입니다.

1. 사용 예시

옵셔널 체이닝 ?.을 사용하면, 객체의 프로퍼티나 메소드가 undefined 또는 null일 경우, 에러를 발생시키지 않고 undefined를 반환합니다.

안전하게 접근할 수 있으며, 특히 동적 데이터를 다룰 때 유용합니다.

let person = {
    name: "이한",
    address: {
        city: "서울",
        zip: "123-456"
    }
};

// address 객체가 없으면 undefined를 반환
console.log(person.address?.city); // "서울"
console.log(person.address?.zipcode); // undefined

// 함수 호출 시에도 사용 가능
let person2 = {
    getName: () => "이한"
};

console.log(person2.getName?.()); // "이한"
console.log(person2.getAge?.()); // undefined

2. 필요성

① 예외 처리 감소

중첩된 객체나 배열에서 프로퍼티에 접근할 때, 경로상 undefined가 있을 수 있습니다.
옵셔널 체이닝을 사용하면 예외를 방지할 수 있습니다.

② 코드 가독성 향상

복잡한 조건문을 사용하는 대신, ?.을 이용해 간결하고 명확하게 코드를 작성할 수 있습니다.

3. null 병합 연산자

??로 표현되며, null이나 undefined 값이 아닌 다른 값을 반환하는 데 유용합니다.
옵셔널 체이닝과 함께 사용되며, 출력 값이 null 또는 undefined일 때 대체 값을 제공하는 역할을 합니다.

let x = null;
let y = "Hello, World!";

console.log(x ?? y);  // 출력: "Hello, World!"
// x가 null이기 때문에 y가 반환됩니다.

💌 궁금한점

옵셔널 체이닝을 사용해서 null 또는 undefined가 뜨는게 오류가 뜨는거랑 무엇이 다른지,어떠한 경우든 원하는 결과가 나오지 않은 상황이라 상관없지 않나요?

궁금증을 해결하기 위해 개인적으로 정리하여 작성하였습니다.

1. 오류 (Error)

오류는 자바스크립트 코드가 실행되는 중에 발생하는 예외 상황을 말합니다.

객체의 프로퍼티나 메소드에 접근하려고 할 때, 그 프로퍼티나 메소드가 존재하지 않으면 런타임오류가 발생합니다.

오류는 코드 실행 중에 예기치 않게 발생하여, 프로그램 흐름이 중단됩니다.

let person = {
    name: "이한",
};

// person.address가 없기 때문에 오류가 발생
console.log(person.address.zipcode); 
// TypeError: Cannot read properties of undefined (reading 'zipcode')

2. null & undefined

null과 undefined는 자바스크립트에서 "값이 없다"는 의미를 갖는 특별한 값들입니다.

두 값의 차이점은 있지만, 둘 다 "값이 없음"을 나타냅니다.

null

의도적으로 값이 비어 있음을 나타냅니다.

개발자가 "여기 값이 없음을 명시적으로 표시"하는 값입니다.

undefined

값이 정의되지 않았다는 의미로, 변수나 프로퍼티가 초기화되지 않았거나 존재하지 않을 때 자바스크립트가 자동으로 할당하는 값입니다.

let person = {
    name: "이한",
};

// 주소가 없는 경우, undefined
console.log(person.address); // undefined

// 주소를 명시적으로 null로 설정한 경우
person.address = null;
console.log(person.address); // null

3. 옵셔널 체이닝 유용성

객체가 null이나 undefined일 때 오류를 방지하기 위해 사용됩니다.

객체가 null이거나 undefined라면, 그 상태에서 .프로퍼티나 .메소드()에 접근하려고 하면 런타임 오류가 발생합니다.

옵셔널 체이닝을 사용하면, 그 경로에서 null이나 undefined가 발견되면 더 이상 접근하지 않고 안전하게 undefined를 반환합니다.

let person = {
    name: "이한",
    address: null
};

// address가 null이므로, `address.city`에 접근하려고 하면 오류가 발생하지만
// 옵셔널 체이닝을 사용하면 오류를 방지하고 undefined를 반환합니다.
console.log(person.address?.city); // undefined (오류 없이 안전하게 처리)

💌 총정리

객체는 다양한 데이터와 관련된 정보를 효율적으로 다루는 중요한 자료형입니다.

객체를 생성하고, 키와 값에 접근하며, 동적으로 값을 설정할 수 있습니다.

오류는 코드 실행 중에 발생하며, 프로그램이 중단되는 상황을 말합니다.

null과 undefined는 값이 없거나 정의되지 않은 상태를 나타냅니다.

옵셔널 체이닝을 사용하면 객체나 배열이 null 또는 undefined일 때 발생할 수 있는 오류를 방지하고, 대신 undefined를 반환할 수 있어 안전한 코드를 작성할 수 있습니다.

자바스크립트 코드를 더 견고하고 가독성이 좋은 형태로 작성할 수 있습니다.

20일차(1) 후기

객체에서 프로퍼티에 접근하는건 이제 쉽게 할 수 있는 것 같습니다.

접근만 쉽게하는거지 활용은 다른 문제라... 걱정도 문제도 많습니다..

오류 뜨는 것이랑 null이나 undefined가 뜨는게 어짜피 모두 원하는 값이 안나와서 그런거라 비슷하다고 생각했었는데.. 이번 기회에 혼자서 공부하며 확실히 옵셔널 체이닝을 사용하는 이유를 알 수 있었습니다. ⸝⁺✧₍ᐢ..ᐢ₎♡̷ ₌₃

근데 혼자 공부하면서 보고 똑같이 작성만 해봤지 실제로 활용을 해본적은 없어서 추후에 제대로 실습도 한번 해봐야할 것 같습니다. ✉〆(,,Ծ‸Ծ,, )