[Javascript] 객체

객체란?

---

관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부릅니다)의 집합 - JavaScript 객체 기본 [MDN]

객체는 실제로 존재하는 사물로 이해할 수 있다. 

예를 들어 강아지를 객체라고 한다면

프로퍼티는 이름, 나이, 무게 등이 들어 갈 수 있다.

메소드는 앉아, 일어서, 기다려 등 강아지에게 시킬 수 있는 행동들이 들어갈 수 있다.

const siba = {
  name: "siba",
  age: 1,
  weight: "5kg",
  alive: true,

  sitDown: function () {},
  standUp: function () {},
  wait: function () {},
};

위와 같이 객체 안에는 어떤 데이터 타입이든 들어갈 수 있다. 

그렇다면 속성과 메소드는 정확히 무엇일까?

속성(Property)

---

Object = { Property_Name : Property_Value }

속성 이름(Property Name)과 속성 값(Property Value) 형식으로 구성되는 데이터이다.

속성 이름을 작성할 때 나름의 규칙이 있다.

1. 첫 번째 글자는 반드시 문자, 밑줄(_), 달러 기호($) 중 하나로 시작해야 한다.
2. 띄어쓰기는 지양한다.
3. 하이픈(-)도 지양한다. 

위 사항을 어기고 싶으면 속성 이름을 따옴표로 감싸 주면 된다.

const user = {
	name: "cloudcoke",
    bornYear: 1997,
    "content type": "text/javascript",
    other: {
    	hello: "world!",
    }
}

 

객체의 속성 값을 사용하고 싶다면 두 가지 방법이 있다.

점 표기법

Object.Property_Name

console.log(user.name)

console.log(user.bornYear)

console.log(user.other.hello)

점 표기법으로 속성 값 출력

점 표기법으로는 속성 이름 작성 규칙을 어긴 속성은 사용하지 못한다.

console.log(user.content type)

console.log(user."content type")

속성 이름 작성 규칙을 어긴 속성을 점 표기법으로 출력해 보려고 했을때

그렇다면 이런 속성들은 어떻게 사용할 수 있을까?

대괄호 표기법

Object['Property_Name']

console.log(user['name'])

console.log(user['bornYear'])

console.log(user['content type'])

console.log(user['other']['hello'])

대괄호 표기법으로 속성 값 출력

대괄호 표기법을 사용하면 속성 이름 작성 규칙을 어긴 속성들도 사용할 수 있다.

[번외] 존재하지 않는 속성에 접근

만약 존재하지 않는 속성에 접근하면 어떻게 될까?

console.log(user.hi)

console.log(user['hi'])

존재하지 않는 속성에 접근한 결과

위와 같이 undefined가 출력되는 걸 볼 수 있다.

메소드(Method)

---

객체 안에 들어가 있는 함수를 말한다.

객체 안에는 어떠한 값이라도 들어갈 수 있는데 함수도 들어갈 수 있다.

예를 들어 우리가 자주 사용하는 console.log도 메소드이다.

console.log("Hello")

console이라는 객체 안에 log라는 함수에 인자로 "Hello"를 전달해 주면 콘솔에 "Hello"라는 문자열을 출력해 주는 것이다. (실제 동작은 다를 수 있음)

그렇다면 실제로 메소드를 한 번 만들어 보자!

const greeting = {
  methodName: "greeting",
  working: true,
  sayHello: function (name) {
    console.log(`Hello ${name}`);
  },
  sayBye: function (name) {
    console.log(`Bye ${name}`);
  },
};

인사를 하는 메소드를 작성해 보았다.

한번 메소드를 사용해 보자!

greeting.sayHello("cloudcoke")

greeting.sayBye("cloudcoke")

점 표기법으로 메소드 실행

greeting["sayHello"]("cloudcoke")

greeting["sayBye"]("cloudcoke")

대괄호 표기법으로 메소드 실행

두 방법 모두 잘 작동한다.

객체 생성

---

객체를 생성하는 3가지 방법을 알아보자!

1. 객체 생성자 함수 사용하기

첫 번째 방법은 new 키워드를 사용해 객체를 생성하는 방법이다.

const user = new Object();

console.log(user)

객체 생성자 함수를 사용해 빈 객체 생성하기

2. 객체 리터럴 방식 사용하기

두 번째 방법은 { }를 사용해 객체를 생성하는 방법이다.

const user = {}

console.log(user)

객체 리터럴 방식을 사용해 빈 객체 생성하기

이 방식이 제일 간편하고 안전하기 때문에 많이 사용한다고 한다!

3. 생성자 함수 사용하기

객체를 찍어내는 함수다.

사용자가 함수 안에 속성을 미리 정의해 놓고 그 함수를 new 키워드를 사용해 객체로 생성한다.

function User() {}

const user = new User()

console.log(User)

생성자 함수를 사용해 빈 객체 생성하기

객체 속성 다루기

---

this

객체 내부에는 this라는 특수한 키워드가 존재한다.

this 키워드는 지금 동작하고 있는 코드를 가진 객체를 가리킨다.

const person = {
  firstName: "cloud",
  lastName: "coke",
  greeting: function () {
    console.log(`Hi I'm ${this.firstName}${this.lastName}`);
  },
};

person.greeting()

person 객체의 greeting 메소드를 실행한 결과

위 코드에서 this는 person을 가리키고 있는 것이다.

그리고 this 키워드는 객체가 각각 다른 이름으로 인스턴스화 되어도 언제나 정확한 값을 사용하게 해준다고 한다.

const person1 = {
  name: "cloud",
  greeting: function () {
    console.log(`Hi I'm ${this.name}`);
  },
};

const person2 = {
  name: "coke",
  greeting: function () {
    console.log(`Hi I'm ${this.name}`);
  },
};

person1.greeting()

person2.greeting()

인스턴스화 된 객체의 greeting 메소드를 실행한 결과

두 객체의 메소드는 동일하지만 this가 가리키는 객체는 다른걸 알 수 있다. person1의 greeting 메소드는 person1의 name 속성 값인 cloud를 출력하고 person2의 greeting 메소드는 person2의 name 속성 값인 coke를 출력하고 있다.

객체 속성 추가

이번에는 객체에 속성을 추가해 보자!

일단 빈 객체를 생성하겠다.

const foo = {}

빈 객체 생성

빈 객체에 name 속성과 bornYear 속성을 추가하고 값 넣어보자!

foo.name = "cloudcoke"

foo['bornYear'] = 1997

foo 객체에 name 속성과 bornYear 속성을 추가한 결과

잘 들어간 걸  확인할 수 있다.

그럼 이번에는 속성 값을 수정해보자!

객체 속성 수정

foo 객체의 name 속성 값을 "구름맛콜라"로 수정해주고 bornYear 속성을 2022로 수정해주겠다.

foo.name = "구름맛콜라"

foo['bornYear'] = 2022

foo 객체의 name 속성 값과 bornYear 속성 값을 수정한 결과

객체 속성 존재 여부 확인

in 연산자를 이용해 객체 속성이 존재하는지 확인해보자!

"name" in foo

"bornYear" in foo

"age" in foo

in 키워드를 이용해 객체안에 속성이 존재하는지 확인한 결과

객체 속성 제거

이번에는 delete 키워드를 이용하여 객체의 속성 제거해서 빈 객체를 만들어 보자!

delete foo.name

delete foo['bornYear']

delete 키워드를 이용해 객체 속성을 제거한 결과

깨끗하게 지워졌다.

마무리

---

객체를 배우기 전까지는 자바스크립트는 객체로 이루어져 있다는 말이 와닿지 않았는데 이제 왜 그런지 알 것 같다.

참조

• JavaScript 객체 기본 - MDN
• 속성 접근자 - MDN
• 객체의 개념 - TCPSCHOOL.com