자바스크립트에서 객체란 { }를 사용하며 key와 value로 구성된 프로퍼티가 들어간다. 각각의 프로퍼티는 쉼표로 구분하는데 객체를 만들어 접근하고 추가하고 삭제하는 것 모두 가능하다.
객체 만들기
객체는 아래와 같이 키와 밸류 값으로 작성하는데 중괄호를 이용해 만들면 된다. 아래 teacher이라는 객체를 만들었다.
// 객체의 생성
const teacher = {
name: 'Emaily', // key : name , value : Emaily
age: 35, // key : age , value : 35
}
// 함수로 생성하기
function makeObject(name, age) {
return {
name,
age,
hobby: 'exercising'
};
}
const teacher = makeObject('Emaily', 35)
console.log(teacher) // name : Emaily, age : 35, hobby : exercising객체 사용하기
만든 teacher 객체에 접근하기 위해서는 .이나 []를 사용하면 되는데 아래와 같이 접근할 수 있다.
const teacher = {
name: 'Emaily', // key : name , value : Emaily
age: 35, // key : age , value : 35
}
// 객체에 접근하기
console.log(teacher.name) // Emaily
console.log(teacher['age']) // 35객체에 프로퍼티 추가하기
teacher 객체 안에는 이름과 나이 값만 들어있는데 여기에 성별을 추가하고 싶다면 아래와 같이 추가하면 된다. 접근방식과 동일하게 . 또는 []를 사용하여 추가할 수 있다.
const teacher = {
name: 'Emaily', // key : name , value : Emaily
age: 35, // key : age , value : 35
}
// 프로퍼티 추가하기
teacher.gender = 'female'
teacher['hobby'] = 'exercising'
console.log(teacher.name) // Emaily
console.log(teacher['age']) // 35
console.log(teacher['gender']) // female
console.log(teacher['hobby']) // exercising객체 프로퍼티 삭제하기
객체 안에 있는 프로퍼티를 삭제하고 싶을 때는 delete 키워드를 사용해주면 된다. teacher 객체 안에 있는 hobby를 삭제해주었다.
const teacher = {
name: 'Emaily', // key : name , value : Emaily
age: 35, // key : age , value : 35
}
teacher.gender = 'female'
teacher['hobby'] = 'exercising'
console.log(teacher.name) // Emaily
console.log(teacher['age']) // 35
console.log(teacher['gender']) // female
console.log(teacher['hobby']) // exercising
// hobby 삭제하기
delete teacher.hobby
console.log(teacher.hobby) // undefined단축 프로퍼티
객체를 만들 때 키값과 밸류값이 같다면 name = name 등으로 표현하지 않고 그냥 name으로 써주면 된다.
const name = 'Emaily'
const age = 35
const teacher = {
name, // key : name , value : Emaily
age, // key : age , value : 35
gender: 'female', // key : gender , value : female
}
console.log(teacher) // name : 'Emaily', age : 35, gender: 'female'프로퍼티의 존재 여부 확인
만약 존재하지 않는 프로퍼티에 접근하게 되면 앞서 확인했던 것처럼 undefined가 나타난다. 그래서 프로퍼티가 있는지를 먼저 확인해줄 수 있는 방법이 존재하는데 in을 사용해주면 된다. 만약 있는 프로퍼티라면 true, 없는 프로퍼티라면 false를 반환한다.
const name = 'Emaily'
const age = 35
const teacher = {
name, // key : name , value : Emaily
age, // key : age , value : 35
gender: 'female', // key : gender , value : female
}
console.log('name' in teacher) // true
console.log('age' in teacher) // true
console.log('hobby' in teacher) // falsemethod(객체 프로퍼티로 할당된 함수)
아래와 같이 객제 안 프로퍼티에 함수를 넣어준 후 teacher.hello()를 실행시키면 콘솔에 메세지가 찍힌다.
const teacher = {
name : 'Emaily',
age : 35,
hello : function() {
console.log('안녕하세요!')
}
}
teacher.hello(); // 안녕하세요!
// method를 줄여서 작성하기
const teacher = {
name : 'Emaily',
age : 35,
hello() {
console.log('안녕하세요!')
}
}
teacher.hello(); // 안녕하세요!객체 method와 this
객체 메서드 hello 안에서의 this는 객체를 가리키기 때문에 객체의 메서드를 각각 호출하면 각각의 원하는 결과를 얻을 수 있다.
const boy = {
name : 'Mike',
age : 32,
hello : function(){
console.log(`Hello, I'm ${this.name}`)
}
}
const girl = {
name : 'Emaily',
age : 35,
hello : function(){
console.log(`Hello, I'm ${this.name}`)
}
}
boy.hello() // Hello, I'm Mike
girl.hello() // Hello, I'm Emaily위와 같이 선언한 함수에서는 상관 없지만 만약 hello 함수를 화살표 함수로 선언한다면 동작이 완전 달라진다.
화살표함수는 일반 함수와 달리 자신만의 this를 가지지 않기 때문에 this가 객체를 가르키지 않는다. 화살표 함수 안에서의 this는 전역 객체를 가리키며, 브라우저 환경은 window, Node js는 global를 가르킨다.
그래서 객체 내에서 method를 선언할 때는 선언문을 사용하는 것이 좋다.
회고
자바스크립트에서 객체를 생성하고 객체 안에 있는 프로퍼티를 가져와 프론트 단에서 다양하게 활용할 수 있다는 것을 안다. 하지만 객체 안의 프로퍼티의 존재를 확인하는 in 에 대해서 처음 알게 되었고, 값의 존재 여부에 따라 if문 동작을 다르게 설정할 수 있는 예제도 함께 알아봤다. 이렇게 한가지 한가지를 공부할 때마다 새롭게 알게 되는 것이 등장해 신기하기도 하고, 새롭게 알게 된 것을 잊지 않고 예제를 통해 적용해보는 것이 중요하다는 생각이 들었다.
this와 같은 경우에도 실제로 직접 사용해본 적은 없어 이번 예제를 통해 처음 사용하게 되었는데 자바스크립트 내에서 this의 역할이 크다고 한다. 객체 안에서의 this와 또 다른 this의 사용에 대해서 정확하게 이해하지는 못했지만 this에 대해 좀 더 깊게 공부해보고 싶다는 생각이 든다.
이제 입사 3개월차 프론트엔드 개발자이기에 자바스크립트의 기초를 탄탄하게 잡고 갈 필요가 있는 것 같고, 더 단단한 개발자가 되기 위해 기초부터 탄탄하게 만들고 넘어가야할 것 같다.
