🌈 시작하며
오, 벌써 객체 리터럴이군요!
어떻게 보면 이제 객체를 다루는 것의 서막이 시작될 것 같아요 🎉
그래서인지 이 장은 굉장히 단순하게 구성되어 있군요.
너무 하나하나 힘 빼기보다는, 어차피 나중에 또 나올 개념들이 보여서, 힘을 아끼면서 이 장을 짚어보려 합니다!
그럼, 같이 시작해볼까요!
🚦 본론
객체의 중요성
우리, 자바스크립트 자체는 객체로 이루어져 있어요.
예컨대, 문자를 살펴볼까요?
밑의 코드는 프로토타입을 이용하여 해당 문자열의 조상 프로토타입을 찾아낸 코드에요!
const a = '1';
a.__proto__.__proto__.constructor() // {}특이한 게, constructor에는 {}가 있네요!
결국, String이라는 객체를 통해 '1'이라는 값을 만들어냈지만, 해당 String객체 역시 Object객체로 이루어져 있어요. 따라서 결국 모든 것은 객체로 이루어져 있다는 것이죠!
따라서 객체는 자바스크립트를 이해하는 데에 있어서 가장 중요한 파트입니다.
객체 리터럴은 단지 이러한 객체를 손쉽게 생성하고 사용하는 우리의 방식이죠!
그리고 사람은 결국 도구를 쉽게 만들기 위해서 사용합니다.
어렵지 않으니, 잘 따라와 주세요 😉
객체 리터럴이란
결국 하나의 객체를 표현식으로 만들낸 것이에요.
이러한 객체는 프로퍼티의 집합입니다.
프로퍼티는, 쉽게 말하자면 객체의 키와 값으로 구성되어 있는 것들이에요.
const person = {
name: "Jaeyoung",
age: 29
}이때 {}으로 감싸진 표현식이 바로 객체 리터럴입니다!
그리고 name: "Jaeyoung"과 age: 29는 프로퍼티구요 :)
생각보다 쉽죠?
메서드
그렇다면, 이제 메서드를 알아야하겠군요!
흔히들 말하기를, 프로퍼티는 상태, 메서드는 동작이라고 표현합니다.
메서드는 쉽게 말하자면 정적인 프로퍼티를 동적으로 변경할 수 있도록, 객체 내부의 프로퍼티 값을 핸들링하기 위한 용도라고 해석이 가능하겠군요!
const person = {
name: "Jaeyoung",
age: 29,
job: "백수 🤣",
getJob(newJob) { this.job = newJob }
}
person.getJob('개발자')
console.log(person) // {name: 'Jaeyoung', age: 29, job: '개발자', getJob: ƒ}여기서 getJob이 메서드입니다. job 프로퍼티의 값을 변경해주는 로직을 수행해주었죠!
객체 생성 방법
객체 리터럴은 손쉽게 우리가 객체를 생성하는 방법 중 하나라고 말씀드렸어요!
실제로, 객체는 위 방법 뿐만 아니라 다양한 방법으로 만들어낼 수 있어요.
new Object()new 생성자함수()Object.create()class
오! 우리가 나중에 살펴 볼 클래스도 있군요 😉
실제로 자바스크립트의 클래스도 객체의 프로토타입에 대한syntax sugar라고 보시면 돼요!
다만 위의 방법을 잘 사용하지 않는 가장 큰 이유는, 생산성 때문이에요.
실제로 프론트엔드에서 가장 유행하는 SPA 라이브러리인 React에서는 현재 함수형을 권장하고 있죠?
이는, 다양한 이유가 있지만 클래스 문법보다 함수형이 훨씬 더 생산성이 높기 때문인 것도 한 몫 합니다. 실제 코드의 양과 가독성이라던지, this의 난해함을 피할 수 있는 등 말이죠!
프로퍼티 접근
처음하실 때 굉장히 헷갈리는 것 중 하나에요.
하지만 매우 간단한데요!
- object[index]: object의 index 값에 해당하는 프로퍼티에 접근합니다!(
index가 변수라면, 변수에 할당된 값이겠죠?!) - object.index: object의
index라는 프로퍼티명을 가진 프로퍼티에 접근합니다!
대개 정말 딱 떨어지고, 잘 알고 있는 프로퍼티라면 후자를(이때, 단순 문자열이 아닌
-등이 섞인 문자라면 해당 X), 아니라면 전자를 사용하는 편이에요!
프로퍼티 생성, 수정 및 삭제
이건 그냥 코드만 봐서도 충분히 알 것 같아서, 예제 하나만 던지고 끝낼게요!
우리, 취사선택 제대로 해보자구요 😉
const person = {}
// 프로퍼티 생성
person.name = "Jaeyoung"
person.age = 29
// 프로퍼티 수정
person.name = "JY"
person.age = 28;
// 프로퍼티 삭제
delete person.name;
delete person.age;프로퍼티 잡기술(?!)
이 책에 따로 서술되어 있는 잡기술들이 몇 개 나와있군요!
이는
ES6이후로 가능한 것들인데요, 저도 이 책에 안 나온 것으로 하나 더 추가해볼게요! 🖐🏻
프로퍼티 축약 표현
만약 프로퍼티 키와 프로퍼티 값이 같으면 이를 축약할 수 있어요!
const value = 'hi';
const inputState = {
value
} // { value: 'hi' }, value 키에 value에 할당된 값이 들어가요!.프로퍼티 동적 생성
이건 저도 정~말 가끔 가다 썼던 것 같은데요!
쉽게 말해서 동적으로 프로퍼티명을 만들어서 생성한다고 보시면 됩니다!
반복문이랑 같이 많이 썼던 것 같아요.
const category = {};
for (let i = 0; i < 3; i += 1) {
category[`depth${i}`] = i;
}
console.log(category); // { depth1: 1, depth2: 2, depth3: 3 }추가 - 정수 프로퍼티를 통한 정렬
이건 제가 가끔가다 알고리즘 하다 귀찮을 때 썼어요! 특이하죠? 😅
ES6에서는 객체의 정수 프로퍼티는 자동으로 정렬된다는 사실! 알고 계셨나요?
특이하게, 문자는 들어오는 순서를 보장해요! 참고자료
이 이유는, 실제로 자바스크립트의 배열이 이러한 객체를 바탕으로 만들어진다고 합니다! 자바스크립트의 배열은 실제로 완전한 배열이 아닌, 메모리 할당에 있어 객체의 성질을 가진 희소 배열이에요 😉
따라서 이를 활용한다면 Object.keys의 내부 로직이 만약 O(N)이라면 O(N)까지도 보장할 수 있겠군요! (다만 실제로는 O(N)에 가깝고 내부적으론 정렬을 또 수행할 거라 O(N log N)일 거에요~ 🥲 참고자료)
가끔 sort가 지겨울 때 쓰기는 하는데, 좋은 코드는 아니긴 하지만, 언젠가 객체를 핸들링하는 데 있어 오류를 바로잡는데 요긴할 거에요!
const arr = {};
arr[2] = 2;
arr[1] = 1;
arr[105] = 3;
arr[3] = 4
Object.keys(arr) // [1,2,3,105]✨ 마치며
이번 것은 거의 쉬어가는 파트였던 것 같아요.그래서 글을 쓰는 데 크게 어렵지는 않았군요 😉
다만, 11~12장이 정말 어려워서, 내일은 부지런히 접근해봐야겠어요. 🥹
그럼, 제 글이 도움이 되셨기를 바라며.
다들 즐거운 코딩하시길! 이상! 🌈
.jpg)