19일차(1)[객체 / 프로퍼티 / 메소드]

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

공부일기

목록 보기

23/66

2025 / 02 / 03

오늘 수업 시간에는 객체의 생성 방법과 프로퍼티 접근 방법에 대해 배웠습니다.
프로퍼티에 대한 수업도 하고 중간에 메소드에 대해 알아보는 시간도 가졌습니다.
조건문이나 반복문과 다르게 객체는 많이 사용해본 것이 아니라 조금 헷갈렸습니다.

💌 객체

객체는 속성과 메소드를 포함하는 데이터 구조입니다.
객체는 여러 값을 묶어서 하나의 단위로 처리할 수 있게 해줍니다.
객체는 키(key)와 값(value)의 쌍으로 이루어져 있습니다.
이것을 프로퍼티라고 합니다. -> { key : value }

1) 객체 생성 방법

객체는 리터럴 표기법을 사용하여 생성할 수 있습니다.
객체 리터럴은 { }(중괄호)로 객체를 정의합니다.

let person = {
    name: "이한",
    age: 22,
    company: ["하이브", "KOZ"],
    song: function() {
        return "이한이 노래를 부른다.";
    }
};

2) 객체의 특징

속성 및 메소드를 가질 수 있습니다.
객체는 동적이므로, 새로운 프로퍼티를 추가하거나 삭제할 수 없습니다.
객체를 const로 선언하더라도 객체의 속성값은 수정이 가능합니다.

const person = {
    name: "이한",
    age: 23
};

person.age = 22;  // 변경 가능
person.name = "삼한이";  // 변경 가능

💌 프로퍼티

프로퍼티는 객체의 속성을 나타냅니다.
객체 내에서 데이터를 저장하는 역할을 합니다.
객체의 프로퍼티는 키(key)와 값(value) 쌍으로 구성됩니다.
예를 들어, name: "이한"에서 name은 키, "이한"은 값입니다.

1) 프로퍼티 접근법

객체의 프로퍼티에 접근하는 방법

점 표기법 : 객체.프로퍼티
대괄호 표기법 : 객체["프로퍼티"]

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

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

2) 동적 생성 및 수정

객체에 존재하지 않는 프로퍼티에 값을 할당하면 동적으로 생성됩니다.
이미 존재하는 프로퍼티의 값을 재할당하여 수정할 수 있습니다.

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

// 새로운 프로퍼티 생성
person.city = "서울";

// 기존 프로퍼티 값 수정
person.age = 22;

console.log(person.city);  // "서울"
console.log(person.age);  // 22

3) 프로퍼티 삭제

객체에서 특정 프로퍼티를 삭제하려면 delete 키워드를 사용합니다.

delete person.city;
console.log(person.city);  // undefined

💌 메소드

메소드는 객체가 할 수 있는 동작을 정의한 함수입니다.
프로퍼티처럼 객체의 속성으로 정의되며, 해당 객체의 데이터를 처리하거나 반환합니다.
객체 내에서 함수는 메소드라고 불립니다.

1) 사용 방법

객체에서 메소드를 정의하고, 이를 호출하려면 객체.메소드( ) 형태로 접근합니다.

let person = {
    name: "이한",
    age: 22,
    song: function() {
        return `${this.name}이 노래를 부른다.`;
    }
};

console.log(person.song());  // "이한이 노래를 부른다."

2) this 키워드

this는 메소드 내에서 현재 객체를 가리킵니다.
this를 사용하여 객체의 다른 프로퍼티에 접근할 수 있습니다.

let person = {
    name: "이한",
    age: 22,
    song: function() {
        return `${this.name}이 노래를 부른다.`;  // this.name은 "이한"
    }
};

3) 기타 메소드

① 모든 프로퍼티의 키 가져오기

Object.keys( )를 사용하면 객체의 모든 프로퍼티의 키를 배열로 가져올 수 있습니다.

console.log(Object.keys(person));  // ["name", "age", "song"]

② 모든 프로퍼티의 값 가져오기

Object.values( )를 사용하면 객체의 모든 프로퍼티의 값을 배열로 가져올 수 있습니다.

console.log(Object.values(person));  // ["이한", 22, function]

💌 객체의 변수 동적 생성

변수를 사용하여 객체의 속성명 동적으로 지정

객체의 속성명은 변수로 지정할 수도 있습니다.

이를 동적 속성명이라고 합니다.
const key = "city";
const value = "서울";

let person = {
    [key]: value  // key라는 변수 값을 속성명으로 사용
};

console.log(person.city);  // "서울"

💌 정리

객체 (Object)

여러 프로퍼티와 메소드를 포함할 수 있는 데이터 구조를 의미합니다.

프로퍼티 (Property)

객체의 속성으로, key : value 형태로 값을 저장합니다.

메소드 (Method)

객체에서 할 수 있는 동작을 정의한 함수를 의미합니다.

19일차(1) 후기

java로 객체를 사용해봤지만 자바스크립트로는 처음이라 걱정을 좀 했습니다.

하지만 형식도 그렇고 사용 방법도 비슷해서 다행히 잘 이해할 수 있었습니다.

객체와 프로퍼티 / 메소드는 자주 사용할 수 있으니 반복 학습이 필요할 것 같습니다.

다행히 어려운 부분은 없었어서 활용하면서 익숙해지면 좋을 것 같습니다. ( ｡ •̀ ⤙ •́ ｡ )