객체

안녕하세요😆

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

객체

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

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

객체 생성

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

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

코드샌드박스로 넘어와 코드를 직접 작성해보면서 배워보겠습니다.

1. 객체 생성자

객체를 생성하는 방법에는 2가지 방법이 있습니다.

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

person이라는 이름의 객체를 객체 생성자를 통해 생성해보겠습니다.

let person = new Object();

자바스크립트에서는 new 라는 키워드를 통해 객체를 생성할 수 있습니다.

2. 객체 리터럴

객체를 생성하는 또 다른 방법은 중괄호를 이용한 객체 리터럴 방식입니다.

동일한 person 객체를 객체 리터럴 방식으로 생성해보도록하겠습니다.

let person = {};

객체 리터럴 방식은 이렇게 중괄호를 이용해 객체를 생성하며, 가장 많이 사용되는 방식입니다.

객체 프로퍼티

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

객체의 프로퍼티는 객체의 중괄호 내부에 들어갈 데이터로, key와 value쌍으로 이루어져있는 데이터입니다.

person이라는 이름의 객체 안에, 프로퍼티들을 작성해보겠습니다.

객체의 프로퍼티는 :(콜론)을 기준으로 왼쪽에는 key값을, 오른쪽에는 value를 작성합니다.

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

이렇게 작성된 name: 홍길동, age: 20을 우리는 객체의 프로퍼티 혹은 속성이라고 부릅니다.

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

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

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

이렇게 객체 프로퍼티의 value는 문자열, undefined, 숫자형, 함수 등 어떠한 자료형을 넣어도 상관없습니다.

하지만, 객체 프로퍼티의 key 값은 항상 고유해야한다는 것을 주의해야합니다.

객체 프로퍼티 값 사용

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

person 이라는 객체에 이름, 나이, 애완동물의 정보를 담는 프로퍼티들을 할당해보겠습니다.

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

작성된 person 객체의 값을 꺼내 사용하는 방식에는 점 표기법과 괄호 표기법 이렇게 두 가지의 방식이 있습니다.

먼저 점 표기법을 이용해 객체 프로퍼티 값을 꺼내보겠습니다.

1. 점 표기법

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

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

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

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

점 표기법을 이용해 객체 프로퍼티의 값을 출력해보겠습니다.

객체의 이름인 person을 작성하고 그 다음 . 을 찍고, key값을 작성하게 되면, key값에 해당하는 value의 값이 오른쪽 콘솔탭에 출력되는 것을 볼 수 있습니다.

2. 괄호 표기법

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

괄호 표기법은, 객체의 이름 뒤에 대괄호를 열어 대괄호 안에 key 값을 작성해주는 방식입니다.

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

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

이번에는 괄호 표기법을 이용해 객체 프로퍼티의 값을 출력해보겠습니다.

괄호 표기법을 사용할 때 주의하실 점은, 이렇게 대괄호 안에 큰따옴표를 이용해 문자열임을 명시해주어야합니다.

코드 실행 결과 대괄호 안의 key값에 해당하는 value값들이 알맞게 출력되는 것을 볼 수 있습니다.

보통 객체 프로퍼티의 값을 꺼낼 때에는 점표기법을 많이 사용하지만,

객체의 key 값이 고정적이지 않고, key 값을 특정 함수의 매개변수가 결정한다거나, 값이 계속 바뀌는, 동적인 경우에는 괄호 표기법을 활용하게 됩니다.

객체의 key 값을 매개변수가 결정하는 코드를 작성해보도록하겠습니다.

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

const getValue = (key) => {
  console.log(person[key]);
};

getValue("name");

person 객체 아래에 getValue라는 함수를, 함수 표현식인 화살표형 함수로 선언해보겠습니다.

함수의 이름을 작성할 때에도 여러 단어로 이루어져있을 경우 이렇게 카멜표기법으로 작성해줍니다.

그 다음 getValue 함수를, 매개변수로 key값을 받아, 해당 key 값에 해당하는 person 객체 프로퍼티의 value 값을 출력하는 함수로 만들어보겠습니다.

이렇게 객체와 함수를 생성하고, 호이스팅이 일어나는 상황을 막기 위해, getValue함수의 호출문을 가장 아래쪽에 작성했습니다.

다음과 같이 getValue 함수의 인수로 person 객체 프로퍼티의 key값인 "name" 을 넘겨주게 되면, 출력 결과 name에 해당하는 value 값인 "홍길동" 이 출력됩니다.

괄호 표기법은 이렇게 객체의 key 값을 특정 함수의 매개변수가 결정하는 상황, 혹은 key 값이 계속 변화하는 상황에서 쓰이는 표기법입니다.

프로퍼티 추가

지금까지 객체를 생성하고, 객체 프로퍼티의 값을 사용하는 방법까지 알아보았습니다.

이번에는 객체 프로퍼티를 추가하고 수정하고 삭제하는 방법에 대해 배워보도록하겠습니다.

동일한 person 객체에 전화번호, 키에 대한 정보가 담긴 프로퍼티를 추가해보겠습니다.

객의 프로퍼티를 추가할 때에도 객체 프로퍼티의 값을 사용하는 방법과 마찬가지로 점 표기법, 괄호 표기법 2가지가 있습니다.

전화번호는 점 표기법으로, 키는 괄호 표기법으로 생성해보겠습니다.

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

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

코드 실행 결과, person 객체에 새로운 프로퍼티들이 추가된 것을 확인할 수 있습니다.

프로퍼티 수정

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

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

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

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

age의 값을 25로, pet의 값을 dog로 변경해보았습니다.

코드 실행 결과 값이 알맞게 변경된 것을 볼 수 있습니다.

작성된 코드에서는 person 객체를 let을 이용해 생성했습니다.

우리는 앞에서 const로 선언되어있는 상수는 중간에 값을 변경할 수 없고, let으로 선언된 변수는 중간에 값을 변경 할 수 있다고 배웠었지만,

객체의 프로퍼티 값을 수정할 때에는 상수로 선언된 객체의 프로퍼티 값도 변경 가능합니다.

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

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

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

코드 실행 결과, const로 선언된 객체의 프로퍼티 값 또한 잘 변경된 것을 볼 수 있습니다.

분명히 상수의 값은 변경될 수 없다고 배웠었는데, 왜 const로 선언된 객체 프로퍼티의 값 변경은 가능한 것일까요?

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

객체는 생성될 때에 고유한 id 를 갖게 되는데, person 객체의 프로퍼티를 변경하는 것은 이 객체의 고유 id를 변경하는 것이 아니기 때문에, const로 선언하더라도 프로퍼티의 값 변경이 가능한 것입니다.

그럼 객체의 고유한 id까지 변경하는 경우는 어떤 경우가 있는지 코드로 작성해보겠습니다.

const 로 선언된 person 객체의 아래에, key값은 pet, value값은 dog 인 프로퍼티가 저장된 person 객체를 작성해보겠습니다.

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

person = {
    pet:"dog";
}

이렇게 person 이라는 객체 자체에 새로운 프로퍼티를 저장하려한다면, 이것은 객체의 고유한 id를 변경하는 것이 되므로, 에러가 발생하게 됩니다.

그렇기 때문에 객체 프로퍼티의 값을 변경하는 경우에는, 객체를 const로 선언하더라도 에러 없이 값이 변경될 수 있게됩니다.

프로퍼티 삭제

이번에는 객체 프로퍼티의 값을 삭제하는 방법을 배워보겠습니다.

프로퍼티를 삭제할 때에는 delete 키워드를 사용합니다.

삭제하려는 프로퍼티의 값을 점표기법과 괄호표기법으로 작성한 다음, 맨 앞에 delete 키워드를 작성해주면 됩니다.

한 번 실제로 작성해보겠습니다.

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

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

console.log(person);

코드 실행 결과, person 객체에는 name:"홍길동" 이라는 프로퍼티만 남고, 나머지 프로퍼티들은 삭제가 된 것을 확인할 수 있습니다.

객체의 함수 프로퍼티

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

우리는 앞에서 객체 프로퍼티의 value에는 숫자형, 문자형, 함수 등 어떤 자료형을 넣어도 상관없다고 배웠습니다.

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

우리가 계속 사용하고 있는 person 객체 안에 key 값이 print 이고, value 값이 "hello world" 를 출력하는 함수인 프로퍼티를 추가로 작성해보겠습니다.

const person = {
    name: "홍길동",
    age: 20, 
    pet: "cat",
    print: function () {
        console.log("hello world");
    },
};

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

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

print의 value값으로 저장된 함수를 호출해보겠습니다.

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

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

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

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

person 객체의 print 메서드에서 key값이 name 인 프로퍼티의 value 값을 출력해보는 코드를 작성해봅시다.

객체의 메서드에서는 this를 이용해 자신이 속해있는 객체를 가리킬 수 있습니다.

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

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

이렇게 print 메서드의 console.log를 '제 이름은 this.name 입니다.' 로 변경해보았습니다.

출력 결과 this.name 의 값이 person 객체의 name 에 해당하는 값이 출력된 것을 확인할 수 있습니다.

메서드를 생성할 때 주의하실 점은 화살표형 함수가 아닌 function을 통해 메서드를 선언해야된다는 것인데요,

print 메서드를 화살표형 함수로 변경해보겠습니다.

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

person.print(); // ERROR

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

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

이렇게 자바스크립트의 비원시 타입 자료형, 객체에 대해 알아보았습니다.

다음시간에는 또 다른 자바스크립트의 비원시 타입 자료형인 배열에 대해 배워보겠습니다.

감사합니다.