[JavaScript] 객체(Object) 개념 및 사용법

- 지난 시간

안녕하세요. 지난 시간에는 JavaScript 함수 표현식&선언식, 화살표 함수(arrow function)에 대해 알아봤습니다.

혹시 놓치고 오신 분들은 아래 링크를 통해 학습하고 오시는 걸 추천드리겠습니다.

[JavaScript] 함수 표현식&선언식, 화살표 함수(arrow function)

[JavaScript] 함수 표현식&선언식, 화살표 함수(arrow function)

 

- 개요

이번 시간에는 JavaScript 객체에 대해 알아보겠습니다. 언어마다 사용법은 조금씩 다르지만 의미는 같습니다.

 

객체란 무엇일까요? 객체는 실체화된 "실제의 물체"라는 뜻입니다.

 

우리 눈에 보이는 사물들은 모두 객체입니다. (Ex. 엄마, 아빠, 할머니, 할아버지, 자전거, 자동차 등등)

 

우리는 하나만 알고 있으면 됩니다. 객체는 실체화된 물체! 잊지 마세요. :)

 

- 사용법

JavaScript에서 객체를 선언해서 사용하는 방법은 3가지 방법이 있습니다.

 

1. 객체 리터럴(Object Literal) 방식
2. 객체 생성자(Object Constructor) 방식
3. 함수 생성자(Function Constructor) 방식

 

객체 리터럴(Object Literal) 방식

//리터럴(literal) 방식
const Person = {
  name: "라이언",
  age: 25,
}

/**
 * - 실행 결과 -
 * { name: '라이언', age: 25 }
 */

리터럴 방식은 {}(중괄호)를 선언하면 됩니다. 안에 name과 age는 속성(Property)입니다.

 

Person이라는 객체는 초기 생성 시 name과 age라는 속성을 가지는 객체입니다.

 

객체 생성자(Object Constructor) 방식

//Object 생성자(constructor) 방식
const Person = new Object()
Person.name = "어피치"
Person["age"] = 28

console.log(Person)
/**
 * - 실행 결과 -
 * { name: '어피치', age: 28 }
 */

리터럴 방식과는 다르게 new Object()를 먼저 선언하고 속성을 나중에 정의합니다.

 

함수 생성자(Function Construcotr) 방식

//함수 생성자(constructor) 방식
function Person(name, age) {
  this.name = name
  this.age = age
}

const person = new Person("뉴코", 30)

console.log(person)
/**
 * - 실행 결과 -
 * Person { name: '뉴코', age: 30 }
 */

함수 생성자 방식에서 특이한 부분은 this 키워드입니다.

 

this 키워드는 자기 자신을 나타낼 때 사용합니다. 즉, Person 함수에서 this는 Person 자시 자신을 나타냅니다.

 

처음 프로그래밍을 하시는 분들은 무슨 말인지... 이해하기 어려우실 겁니다.

 

처음에는 어렵지만 막상 자주 사용하고 흐름을 이해하면 나중에는 익숙해서 잘 사용할 수 있습니다.(실습이 중요해요. :>)

 

객체 속성(Property) 조회, 추가, 수정, 삭제

우리가 객체를 선언해서 사용할 때 해당 객체 속성을 많이 사용하게 됩니다.

 

객체를 접근하는 방식은 아주 간단합니다. 예시를 통해 설명드리겠습니다.

/**
 * 객체 속성 조회, 추가, 수정, 삭제
 */

const Person = {
  name: "라이언",
  age: 25,
}

//조회
console.log(Person.name) // 라이언
console.log(Person.age) // 25

//추가
Person.job = "개발자"
console.log(Person) // { name: '라이언', age: 25, job: '개발자' }

//수정
Person.name = "어피치"
Person["age"] = 28

console.log(Person.name) // 어피치 -> 값이 수정됨
console.log(Person.age) // 28 -> 갑이 수정됨

//삭제
delete Person.age

console.log(Person.age) // undefined -> 값이 삭제 됨

객체에 속성을 조회할 때는 Person객체에.(점)을 선언하고 해당 속성에 접근하면 됩니다.

 

또한 수정할 때는 해당 속성에 새로운 값을 할당하면 됩니다.

 

삭제를 할 때는 delete 키워드를 앞에 선언해서 특정 속성을 제거할 수 있습니다.

 

객체 속성 단축 정의

/**
 * 객체 속성 단축 정의
 *
 * 객체를 생성할 때 기본적으로 키/벨류 한 쌍의 묶음으로 속성을 정의합니다.
 */
const job = "풀스택 개발자"
const career = 3

const Developer = {
  job,
  career,
}

console.log(Developer)

/**
 * - 실행 결과 -
 * { job: '풀스택 개발자', career: 3 }
 */

객체를 속성(Property)을 정의할 때 기본적으로 key(키)/value(값) 형태로 한쌍의 묶음으로 정의합니다.

 

job과 career 변수를 미리 선언하고 Developer라는 객체를 생성할 때 두 변수 값을 속성으로 정의했습니다.

 

실행 결과 위에서 선언했던 객체와 동일합니다. 이런 식으로 객체를 생성할 때 축약해서 생성할 수 있습니다.

 

객체 속성 존재 여부 체크

객체 속성 존재 여부를 체크하는 방식은 in 키워드를 사용하면 됩니다. 예시를 통해 바로 보여 드리겠습니다.

 

/**
 * 객체 존재 여부 체크
 * in 사용
 */
const job = "풀스택 개발자"
const career = 3

const Developer = {
  job,
  career,
}

console.log("속성 존재 O :", "job" in Developer) // 속성이 존재 하기 때문에 true
console.log("속성 존재 X :", "name" in Developer) // 속성이 존재하지 않기 때문에 false

 

속성이 존재하면 true를 반환합니다. 그렇지 않다면 false를 반환합니다.

 

객체 반복문(for ...in)

예전 시간에 JavaScript에 반복문에 대해 알아봤습니다.

 

JavaScript에는 기본적인 반복문이 아닌 다른 반복 메서드를 지원합니다. 객체에 대한 반복문은 for in을 사용합니다.

 

/**
 * 객체 반복문 -> for in
 */
const job = "풀스택 개발자"
const career = 3

const Developer = {
  job,
  career,
}

for (const key in Developer) {
  console.log("key : ", key)
  console.log("value : ", Developer[key])
}

/**
 * - 실행 결과 -
 * key :  job
 * value :  풀스택 개발자
 * key :  career
 * value :  3
 */

key는 객체에 key를 나타냅니다. value에 접근할 때는 Object[key]로 접근할 수 있습니다.

 

for in은 유용하기 때문에 꼭 기억하세요. :)

 

객체 메서드(method) 선언

메서드란 무엇일까요? 많은 분들이 함수와 메서드를 헷깔려합니다. 

 

함수는 독립적으로 선언이 가능하지만, 메서드는 객체 내부에서 선언이 가능합니다.

 

JavaScript에 함수는 독립적으로 생성할 수 있었습니다. 하지만, 메서드는 그렇지 않습니다. 아래 예시를 통해 설명 하겠습니다.

/**
 * 객체 메소드 정의
 */
const job = "풀스택 개발자"
const career = 3

const Developer = {
  job,
  career,
  //메소드 선언
  getJob: function () {
    return this.job
  },
  //메소드 축약 선언
  getCareer() {
    return this.career
  },
}

//새로운 속성으로 메소드 선언
Developer.woring = function () {
  console.log("앞으로 간다.")
}

const getJob = Developer.getJob()
const getCareer = Developer.getCareer()

Developer.woring()
console.log("직업은 : ", getJob)
console.log("경력은 : ", getCareer + "년")

/**
 * - 실행 결과 -
 * 앞으로 간다.
 * 직업은 :  풀스택 개발자
 * 경력은 :  3년
 */

 

해당 글을 차근차근 읽으셨다면 위 예시 코드가 어렵게 느껴지지 않으실꺼라고 생각합니다. 따로 설명은 하지 않겠습니다.

 

이번 시간에는 JavaScript에 객체에 대해 알아봤습니다. 꼭 실습을 통해 학습하시는 걸 추천 드리겠습니다.