자바스크립트 객체(Object) 생성 & 사용 방법

객체(Object)란 ?

자바스크립트는 객체 기반 프로그래밍 언어입니다. 객체를 구성하는 요소로는 속성(Property)과 기능(Method)이 있습니다. 속성과 기능이 있다는 점에서 TV는 객체로 표현될 수 있습니다. 너비와 높이, 색상, 무게와 같은 속성이 있고, TV 켜기, 끄기, 볼륨 높이기, 줄이기와 같은 기능이 있으니 말이죠. 이렇게 자바스크립트에서 이러한 객체를 잘 표현해서 코드화하면 얻을 수 있는 장점들이 많습니다. 이번 포스팅에서는 자바스크립트의 객체에 대해서 알아보도록 하겠습니다.

 

객체를 사용하면서 얻는 장점

1. 데이터를 구조화시킬 수 있다 : 객체를 사용하면 데이터들을 보다 논리적으로 그룹화하여 구조화할 수 있습니다. 이러한 과정을 통해 코드의 가독성을 높이고 유지보수함에 유리합니다.
2. 데이터의 유연성, 동적성이 좋아진다 : 객체는 동적으로 속성을 추가, 수정, 삭제할 수 있습니다. 심지어 프로그램 실행 중에도 객체를 조작할 수 있기 때문에 유연하고 동적 프로그래밍을 하는데 유리하다고 할 수 있겠습니다.
3. 코드 재사용: 객체는 비슷한 기능을 하는 곳에서 여러 번 재사용할 수 있습니다. 이를 통해 코드의 중복을 방지하고 데이터의 일관성을 유지하는데 도움이 됩니다.
4. 객체 지향 프로그래밍(OOP): 일반적인 객체 지향 프로그래밍(OOP)의 장점인 클래스, 상속, 다형성과 같은 개념을 그대로 자바스크립트에도 적용하여 효율적인 프로그래밍을 할 수 있습니다.

객체(Object) 사용법

 

객체 생성 방법

let person = {
    name: "홍길동",
    age: 30,
    job: "Developer"
};

 

객체 속성 접근 방법

person.name = "이순신"
console.log(person.name); // "이순신"
console.log(person["age"]); // 30

 

외부에서 객체의 속성에 직접 접근하고 싶다면 객체 뒤에 점(.)이나 대괄호([]) 를 사용해서 직접 접근하여 객체의 속성값을 출력하거나 수정할 수 있습니다.

 

객체의 메서드

let person = {
    name: "홍길동",

    say: function() {
        console.log("저는 " + this.name + "입니다!");
    }
};

person.say(); // Method 호출

객체에는 속성뿐만 아니라 메서드(함수)도 포함될 수 있습니다. 객체의 메서드를 호출하려면 객체 뒤에 점(.)을 붙이고 메서드를 호출하면 됩니다. 참고로 객체의 메서드에서 내부 속성값을 사용하려면 위와 같이 this 키워드를 사용하여 지정해주어야 합니다. 

 

객체의 속성을 동적으로 제거 & 추가하기

let person = {
    name: "홍길동",
    age: 30,
    job: "Developer"
};

person.location = "서울";
delete person.job;

 

 

자바스크립트에서는 객체에 동적으로 속성을 추가하거나 제거할 수 있습니다. 추가하려면 객체뒤에 (.)점을 붙이고 새로운 속성값을 하나 명시하면 되고 기존에 있는 속성값을 없애려면 delete 키워드를 사용합니다.

 

객체의 모든 속성값을 반복문으로 출력하기

let person = {
    name: "홍길동",
    age: 30,
    job: "Developer"
};

for (let key in person) {
    console.log(key, person[key]);
}

 

객체의 모든 속성을 출력해야 하는 경우들이 종종 있을 수 있습니다. 이럴때는 위와 같이 for..in  루프를 사용하면 됩니다.

 

객체의 복제와 병합

let person = {
    name: "홍길동",
    age: 19
};

let student = {
    school: "마포고등학교",
    grade: 3
};

let copy = { ...person }; // 객체 복제
let merge = { ...person, ...student }; // 객체 병합

console.log(copy);
console.log(merge);

 

 

객체의 프로토타입과 상속

// 부모 객체
let person = {
    name: "홍길동",
    age: 19,
    sayHello: function() {
        console.log(`안녕하세요, 제 이름은 ${this.name}이고, 나이는 ${this.age}입니다.`);
    }
};

// 자식 객체
let student = Object.create(person); // 부모 객체를 프로토타입으로 갖는 자식 객체 생성
student.school = "마포고등학교";
student.grade = 3;

// 자식 객체의 메서드 호출
student.sayHello(); // "안녕하세요, 제 이름은 홍길동이고, 나이는 30입니다."

자바스크립트에서는 프로토타입을 통해 상속을 구현할 수 있습니다. 위 코드에서 Object.create(person)은 student 객체를 생성하면서 person 객체를 프로토타입으로 지정하여 상속 관계를 설정했습니다. 상속이 끝난 이후에는 student 객체에서 부모의 sayHello 메서드를 호출할 수 있습니다. 이를 통해 객체 간에 코드를 재사용할 수 있습니다.