JavaScript와 객체
Javascript는 객체 기반 스크립트 언어이며, Javascript를 이루는 원시 값(String, Boolean, Number 등)을 제외한 데이터 구조는 객체 기반으로 만들어진다. 앞서 살펴본 Array 또한 push, pop 등이 있는 객체이며, 기본적인 객체와 조금 다르게 동작하는 특별한 객체이다.
이번 글에서는 이러한 객체를 생성하고 조작하고 속성에 접근하고 삭제하는 방법들에 대해 다루려고 한다. 이번 글은 Javascript를 사용하려면 필수적이고 매우 중요한 내용들이다. 꼭 코드를 쳐보면서 익히도록 하자.
객체 생성하기
빈 객체 생성 후 직접 속성 추가하기
JavaScript 객체를 생성하기 위해서는 {}를 사용하면 된다. {}만으로 객체가 선언되며, 객체 내부에 Key-Value 쌍으로 객체에 속성값을 설정할 수 있다.
만약 name에 Dev World를 쓰고 age에 2를 쓴다면 아래와 같이 객체를 만들 수 있다.
const blog = {};
blog.name = "Dev World";
blog.age = 2;
console.log(blog) // { name: 'Dev World', age: 2 }
ES6 이전에는 new Object()를 사용하기도 했지만 이제는 더 이상 이 방법은 사용되지 않는다. 만약 사용하면 Object instantiation can be simplified 라는 경고가 뜨고 Replace with object literal을 누르면 {}로 변경된다.
생성 시 객체 속성 지정하기
생성 시 객체 속성을 함께 초기화시킬 수 있다. {} 사이에 [Key]: [Value] 쌍을 쓰면 되고 속성 값마다 뒤에 ,를 붙여주면 추가적인 속성을 지정할 수 있다.
const blog = {
name: "Dev World",
age: 2
}
console.log(blog) // { name: 'Dev World', age: 2 }
이렇게 지정된 객체 또한 내부에 Key-Value 쌍을 추가하는 것이 가능하다. dailyVisit이라는 Key에 3000을 아래와 같이 세팅하면 해당 값이 추가된다.
const blog = {
name: "Dev World",
age: 2
}
blog.dailyVisit = 3000
console.log(blog // { name: 'Dev World', age: 2, dailyVisit: 3000 }
객체를 클래스로 만들고 생성하기
ES6 이후에는 객체 지향을 더욱 강화해서 객체를 Class로 만든 후 생성하는 방법 또한 제공된다. 예를 들어 아래와 같은 Blog Class를 만들어보도록 하자.
class Blog {
constructor(name, age, dailyVisit) {
this.name = name;
this.age = age;
this.dailyVisit = dailyVisit;
}
introduce() {
return `Blog name is ${this.name} and age is ${this.age} and ${this.dailyVisit} visitors are visiting every day`
}
}이 블로그 객체는 name, age, dailyVisit을 생성자에서 받아서 내부 속성값을 세팅해 준다. 이후 introduce() 메서드를 호출하면 설정된 속성으로 만든 소개가 반환된다.
이를 인스턴스화 할 때는 new [Class명] 을 쓰면 된다. 따라서 아래와 같이 인스턴스화해서 메모리에 올린 후 객체 내부를 살펴보거나 객체의 메서드를 실행할 수 있다.
const blog = new Blog("Dev World", 2, 3000)
console.log(blog) // Blog { name: 'Dev World', age: 2, dailyVisit: 3000 }
console.log(blog.introduce()) // Blog name is Dev World and age is 2 and 3000 visitors are visiting every day
객체 속성값 접근하기
'.' 을 사용해 접근하기
객체 속성값에 접근하려면 [객체].[Key값] 을 사용하면 된다. 예를 들어 아래 blog에서 name 속성값에 접근하려면 blog.name을 사용해 접근할 수 있다.
const blog = {
name: "Dev World",
age: 2
}
console.log(blog.name) // Dev World
'[ ]' 을 사용해 접근하기
객체 속성값에 접근하는 다른 방법으로는 [ ] 을 사용하는 방법이 있다. 객체[Key값]을 사용하면 객체의 프로퍼티 값에 접근할 수 있다.
const blog = {
name: "Dev World",
age: 2
}
console.log(blog["name"]) // Dev World객체의 Key값은 무조건 String 타입이므로 name에 String을 표현하는 ',",`가 붙어있지 않더라도 "프로퍼티명" 으로 써야 접근이 가능하다.
만약 아래와 같이 쓴다면 오류가 발생하는 것을 볼 수 있다.
const blog = {
name: "Dev World",
age: 2
}
console.log(blog[name])
객체 속성값 삭제하기
만들어진 속성값은 delete를 사용해 삭제할 수 있다. 예를 들어 이름과 나이를 설정한 후 나이를 삭제하려면 아래와 같이 코드를 만들 수 있다.
const blog = {
name: "Dev World",
age: 2
}
delete blog.age
console.log(blog) // { name: 'Dev World' }
정리
이번 시간에는 JavaScript 객체를 만드는 방법에 대해 살펴보았다. JavaScript에서는 객체를 생성하는 다양한 방법을 제공하고, ES6에서 제공이 시작된 Class라는 개념은 객체지향 프로그래밍을 편리하게 한 매우 중요한 변화였다.
객체의 프로퍼티 접근과 추가, 삭제 등 또한 매우 중요한 주제들이니 꼭 제대로 알고 넘어가도록 하자.
