FE/JavaScript

📖 [JS] 객체

serin99 2024. 7. 18. 23:01
728x90

 

 

자바스크립트에서 객체는 데이터와 기능을 함께 저장할 수 있는 구조적인 단위입니다.

객체는 키와 값으로 구성된 속성(Property)들의 모임입니다.

 

키는 문자열 또는 심벌이고, 값은 어떠한 데이터 타입이든 될 수 있습니다.

자바스크립트에서 객체는 여러 관련 정보를 하나의 단위로 묶는 데 유용합니다.

 

 

 

// 객체 리터럴 사용

let person = {
    name:"john",
    age: 30,
    greet: function() {
    	console.log('Hello, ' + this.name);
    }
};

// name, age와 같은 객체의 정보값들을 객체 property 또는 객체 속성이라고 부릅니다.

 

 

여기서 `person` 객체는 `name`, `age`라는 두 개의 속성(property)과 `greet`라는 메서드를 가지고 있습니다.

 

 

// new Object() 사용

let person = new Object();
person.name = 'John';
person.age = 30;
person.greet = function() {
    console.log('Hello, ' + this.name);
};

 

 

// 생성자 함수 사용

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.greet = function() {
        console.log('Hello, ' + this.name);
    };
}

let person1 = new Person('John', 30);
let person2 = new Person('Jane', 25);

 

 

 

📘 객체 Property(속성)을 다루는 방법

 

 

객체의 속성에 접근하거나 변경하는 방법은 두 가지가 있습니다.

 

 

 

점 표기법

// 객체 이름 뒤에 점을 찍고, 그 다음에 접근하고자 하는 property의 키를 적어주면 됨

console.log(person.name);  // John
person.age = 31;

 

 

 

대괄호 표기법

// []안에 프로퍼티의 키를 명시하는 방법
// "" 함께 문자열로 작성해야한다.

let age = person["age"]
console.log(person['name']);  // John
person['age'] = 31;

 



괄호표 기법에서는 변수에 접근하고자 하는 key 값을 담아서
property를 꺼내오도록 설정할 수 있기 때문에,

동적으로 property를 변화시키면서 사용해야 하는 경우에는 괄호표기법을 사용하는 것이 좋습니다.

그런 상황이 아닌 경우에는 점 표기법이 간결하여 이용하는 것이 좋습니다.

 

 

새로운 프로퍼티를 추가하는 방법

person.job = "doctor"
person["food"] = "bulgogi"

 

 

프로퍼티를 수정하는 방법

person.job = "teacher"
person["food"] = "apple"

 

 

프로퍼티를 삭제하는 방법

// Delete 연산자 사용

delete person.job;
delete person["food"];

 

 

프로퍼티 존재 유무를 확인하는 방법

 

// in 연산자를 사용하면된다.

let result1 ="name" in person

// result1이라는 변수의 문자열로 name이라는 key가 person 안에 있는지 확인하는 연산자

 

 

 

메서드와 `this`

 

객체의 메서드는 객체의 속성에 접근할 수 있으며, 이때 `this` 키워드를 사용합니다.

`this`는 메서드가 속해 있는 객체를 참조합니다.

 

let person = {
    name: 'John',
    age: 30,
    greet: function() {
        console.log('Hello, ' + this.name);
    }
};

person.greet();  // Hello, John

 

 

 

📗 상수 객체

 

 

// 상수 객체
const animal = {
	type: "고양이",
    name: "나비",
    color: "black"
};

animal.age = 2; // 추가
animal.name = "검은색" // 수정
delete animal.color; // 삭제

animal = 123;

console.log(animal);

 

상수에서 저장된 객체도 property를 추가하거나 수정하거나 삭제하는 게 가능하다.

상수라는 것은 새로운 값을 할당하지 못하는 그런 변수를 말하는 것이다.

 

animal = 123;처럼 이런 식으로 새로운 값을 할당해 버리는 것은 문제가 있는 반면

animal 내부에 저장되어 있는 객체 값의 property를 수정하는 건 아무런 문제가 되지 않는다.

 

따라서 상수에다가 객체를 보관한다고 하더라도 property를 추가하거나 수정하거나 삭제하는

조작은 얼마든지 가능하다.

 

 

📙 메서드

 

 

메서드는 객체 property 중에 값이 함수인 property를 말한다.

const person = {
	name: "kim",
    sayHi: function () {
    	console.log("안녕");
    },
};

person.sayHi();

=========================
const person = {
	name: "kim",
	// 화살표 함수 적용
    sayHi: () => {
    	console.log("안녕");
    },
};

person.sayHi();
======================
const person = {
	name: "kim",
    //메서드 선언
    sayHi() {
    	console.log("안녕");
    },
};

person.sayHi();
person["sayHi"]();
// method들도 점 표기법과 괄호표기법을 이용해서 호출할 수 있다.

 

메서드는 보통 객체의 동작을 정의하는 데 사용한다

함수가 아닌  property들이 객체의 정보를 갖고 있다면

함수  property들은 method로서 객체의 동작을 정의한다.

 

 

 

 

 

✅ 결론

 

자바스크립트의 객체는 다양한 데이터와 기능을 하나의 구조 안에 모아서 관리할 수 있도록 해주는

매우 유용한 개념입니다. 객체를 통해 더 구조적이고 관리하기 쉬운 코드를 작성할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90