안녕하세요😆

이번 시간에는 자바스크립트의 객체에 대해 자세하게 배워보도록 하겠습니다.

객체

이전에 자료형 챕터에서 배웠듯이, 자바스크립트는 8가지 기본 자료형이 있으며, 크게 원시타입과 비 원시타입으로 분류됩니다.

이번 시간에는 비 원시타입으로 분류되는 자바스크립트의 "객체" 에 대해 배워보겠습니다.

객체 생성

객체 는 한 번에 여러 개의 데이터 값들을 저장할 수 있는 자료형입니다.

그렇다면, 먼저 자바스크립트에서 객체를 생성하는 방법을 알아보도록 하겠습니다.

1. 객체 생성자

첫 번째 방법은, 객체 생성자를 사용해 만드는 방법입니다.

const person = new Object();

자바스크립트에서는 위의 코드와 같이 new Object() 를 통해 객체를 생성할 수 있습니다.

2. 객체 리터럴

객체를 생성하는 두 번째 방법은 아래와 같습니다.

const person = {};

객체 리터럴 방식은 {} 를 이용해 객체를 생성하며, 가독성도 좋고 가장 많이 사용되는 방식입니다.

객체 프로퍼티

객체를 생성하는 방법을 배웠으니, 이제 객체의 프로퍼티(속성)에 대해 알아보겠습니다.

객체의 프로퍼티는 아래와 같이, key와 value 쌍으로 이루어져있습니다.

const person = {
    name: "홍길동",
    age: 20,
};

객체에는 프로퍼티를 몇 개를 넣어도, value값으로 어떠한 자료형을 넣어도 상관 없지만, 객체의 값을 찾을 때에는 key 값을 통해 찾기 때문에, key 값은 고유해야합니다.

객체 프로퍼티의 value 값에 여러가지의 값들을 넣어보겠습니다.

const person = {
    name: "홍길동",
    phone: undefined,
    age: 25,
    etc: function () {
        console.log("hello world");
    },
};

위와 같이 문자열, 숫자, 함수 혹은 객체 등 다양한 값들을 객체 프로퍼티의 value 값으로 사용할 수 있습니다.

객체 프로퍼티 값 사용

이번에는 key와 value 쌍으로 이루어진 객체의 프로퍼티를 꺼내서 사용해보겠습니다.

const person = {
    name: "홍길동",
    age: 20,
    pet: "cat",
};

위의 코드에 작성된 person 객체의 값을 꺼내 사용하는 방식에는 2가지가 존재합니다.

점 표기법과 괄호 표기법이 있는데요, 먼저 점 표기법을 이용해 객체 프로퍼티 값을 꺼내보겠습니다.

1. 점 표기법

점 표기법은 말 그대로 점(.) 을 이용해 객체의 값을 꺼내는 방법입니다.

const person = {
    name: "홍길동",
    age: 20,
    pet: "cat",
};

console.log(person.name); //홍길동
console.log(person.age); //20
console.log(person.pet); //cat

위의 코드처럼, 객체의 이름 뒤에 점을 찍고 객체 프로퍼티의 key값을 작성하면, key값에 해당하는 value 값을 가져오게됩니다.

2. 괄호 표기법

객체 프로퍼티의 값을 꺼내는 두 번째 방법은 괄호 표기법 입니다.

괄호 표기법을 이용해 person 객체의 값을 꺼내 출력해보겠습니다.

const person = {
    name: "홍길동",
    age: 20,
    pet: "cat",
};

console.log(person["name"]); //홍길동
console.log(person["age"]); //20
console.log(person["pet"]); //cat

괄호 표기법은, 위의 코드처럼 객체의 이름 뒤에 대괄호를 열어 key 값을 명시해주면 됩니다.

보통 접근하려고 하는 객체 프로퍼티가 고정적인 경우 점 표기법을 활용하게되며,
그렇지 않고 파라미터가 결정한다거나, 계속 바뀌는 동적인 경우에는 괄호 표기법을 활용하게 됩니다.

프로퍼티 추가

객체를 생성하고, 객체의 프로퍼티에 접근하는 방법까지 다뤄보았습니다.

이번에는 객체 생성 이후, 프로퍼티를 추가하고 수정하고 삭제하는 방법을 다뤄보도록 하겠습니다.

const person = {
    name: "홍길동",
    age: 20,
    pet: "cat",
};

person.phone = "010-1234-5678";
person["height"] = 180;
console.log(person);

key가 "phone", value는 "010-1234-5678"인 프로퍼티와 key가 "height"이고 value가 180인 프로퍼티를 각각 점 표기법, 괄호 표기법을 이용해 주가했습니다.

객체 생성시에 없던 프로퍼티를 추가하려면 위의 코드와 같이 작성하면 됩니다.

프로퍼티 수정

객체 프로퍼티의 value 값은는 수정할 수 있습니다.

let person = {
    name: "홍길동",
    age: 20,
    pet: "cat",
};

person.age = 25;
person["pet"] = "dog";
console.log(person);

프로퍼티를 추가할 때와 동일하게, 점 표기법과 괄호 표기법을 이용하여 수정할 수 있습니다.

객체 프로퍼티를 수정할 때에는, 상수로 선언된 객체의 프로퍼티 값도 변경할 수 있습니다.

상수로 선언된 객체 프로퍼티의 값을 변경허눈 코드를 작성해보겠습니다.

const person = {
    name: "홍길동",
    age: 20,
    pet: "cat",
};

person.age = 25;
person["pet"] = "dog";
console.log(person);

상수로 선언된 변수는 값을 변경할 수 없지만, 이렇게 상수로 선언된 객체 프로퍼티의 값은 변경 가능합니다.

프로퍼티 값을 수정하는것이 person 상수 자체를 수정하는 행위는 아니기 때문입니다.

프로퍼티 삭제

마지막으로 객체의 프로퍼티를 삭제해보겠습니다.

const person = {
    name: "홍길동",
    age: 20,
    pet: "cat",
};

delete person.pet;
delete person["age"];

console.log(person);

위의 코드처럼, delete키워드와 함께 삭제할 객체의 프로퍼티를 명시합니다.
이렇게 점 표기법과 괄호 표기법으로 각각 객체의 프로퍼티를 삭제할 수 있습니다.

객체의 함수 프로퍼티

지금까지 객체 프로퍼티를 추가, 수정, 삭제하는 방법에 대해 배워보았습니다.

우리는 이전에 객체 프로퍼티의 value에는 어떤 자료형을 넣어도 상관없다고 배웠습니다.

이번엔 객체 프로퍼티의 값이 함수 일 때에 대해 자세하게 살펴보겠습니다.

const person = {
    name: "홍길동",
    age: 25,
    etc: function () {
        console.log(`hello world`);
    },
};

위의 코드에서는 person 객체에 etc 라는 key 값의 value가 함수로 되어있습니다.

해당 함수를 호출하기위해서는 일반 함수를 호출하는 방식과 동일하게

person.etc(); // 점 표기법
person["etc"](); // 괄호 표기법

점 표기법과 괄호 표기법 모두 가능하며, 객체이름 뒤에 함수값이 할당되어있는 key 값을 적고 호출해주면 됩니다.

이렇게 객체 프로퍼티 값이 함수일 경우, 이를 메서드 라고 부릅니다.

메서드는 객체 내부의 프로퍼티에 접근할 수 있는 특별한 기능이 있습니다.

그럼 이 person 객체의 메서드에서, person 객체 프로퍼티 값을 출력하는 코드를 작성해보겠습니다.

const person = {
    name: "홍길동",
    age: 25,
    etc: function () {
        console.log(`제 이름은 ${this.name} 입니다.`);
    },
};

person.etc(); // 제 이름은 홍길동 입니다.

위의 코드처럼, 메서드는 this 를 통해 자신이 속해있는 객체를 가리킬 수 있습니다.

메서드를 생성할 때 주의하실 점은 화살표형 함수가 아닌 function을 통해 메서드를 선언해야된다는 것인데요, 아래의 코드를 실행시켜보겠습니다.

const person = {
    name: "홍길동",
    age: 25,
    etc: () => {
        console.log(`제 이름은 ${this.name} 입니다.`);
    },
};

person.etc(); // ERROR

코드 실행 결과, 에러가 발생하게 됩니다.

그 이유는 function으로 선언한 메서드는 this 가 제대로 자신이 속한 객체를 가르키지만, 화살표형 함수는 자신이 속한 객체를 가리키지 못하기 때문입니다.

정리해보면, 메서드를 선언할 때에는 function 으로 선언해야하며 this 를 통해 값을 꺼내올 수 있습니다.

객체 구조분해

우리는 객체의 값을 꺼내 올 때마다 person. 또는 preson[]을 작성하고 뒤 또는 괄호 안에 key 값을 적어주었습니다.

조금 더 간결하게 객체의 값을 꺼내오기 위해서는, 객체의 구조분해 이라는 문법을 사용하면 됩니다.

const person = {
    name: "홍길동",
    age: 25,
    etc: () => {
        console.log(`hello world`);
    },
};

const { name, age, etc } = person; //구조분해

console.log(`안녕하세요 저는 ${name}이고, 나이는 ${age}입니다.`);
etc();

위의 코드를 살펴보겠습니다.

person 이라는 객체를 선언하고, 그 아래

const { name, age, etc } = person;

이러한 코드를 작성했습니다.

이 코드는 객체에서 값들을 추출해서 새로운 상수로 선언해 주는 것 입니다.

따라서 console.log 에서는 간단하게 person 객체의 key 값으로만 값을 가져올 수 있는 것을 볼 수 있습니다.

---

next

이번 시간에는 자바스크립트의 객체에 대한 내용을 다뤄보았습니다.

객체의 개념과 함께 객체의 생성법과, 객체 프로퍼티의 추가, 수정, 삭제 에 대한 방법과 메서드에 대한 개념을 배워보았습니다.

다음 시간에는 자바스크립트의 배열 에 대해 자세하게 배워보겠습니다.

감사합니다😀

---

🙏참고 & 출처

https://simplejs.gitbook.io/olaf/chap-06
https://ko.javascript.info/object