이 게시물은 SW마에스트로 연수생 간 진행한 Modern JavaScript DeepDive 스터디 개인 정리 내용입니다.
되도록 책의 내용을 그대로 적기보단 개인적으로 인상깊었던 부분을 구어체로 풀어쓰려 노력했습니다.
Modern JavaScript Deep Dive
Chapter _ 10 객체 리터럴
자바스크립트는 대표적인 객체 지향 언어 C++ 이나 JAVA 와는 조금(?) 다르지만 객체 지향 언어입니다.
그리고 우리가 언어를 공부할 때 가장 중요한 것은 문법보다 단어의 정확한 뜻을 숙지하는 것이 아닐까 싶습니다.
자바스크립트에서 “객체” 란 “변경 가능 한 값 이자, 0개 이상의 프로퍼티로 구성된 집합” 을 의미합니다.
여기서 다시 나온 단어 “프로퍼티” 란 Key 와 Value 로 이루어진 쌍을 말합니다.
자바스크립트에서 사용되는 모든 값은 프로퍼티 로 사용 가능하며 심지어 함수도 프로퍼티 값으로 사용 가능합니다.
이 경우 일반 함수와 구분하기 위해 함수 프로퍼티를 “메서드” 라고 부릅니다.
즉, 프로퍼티는 [ 객체의 상태를 나타내주는 값 ]
메서드는 [ 프로퍼티를 참조하고 조작할 수 있는 동작 ] 을 의미합니다.
프로퍼티
“객체는 프로퍼티의 집합이며 프로퍼티는 키와 값으로 구성된다”
모두 앞서 단어들을 정리하며 봤던 단어들이어서 이해가 조금 더 쉽지 않을까 싶습니다.
프로퍼티의 키와 값에는 조그마한 규칙이 있습니다.
- 프로퍼티 키 : 빈 문자열을 포함한 모든 문자열 또는 심벌값
- 프로퍼티 값 : 자바스크립트에서 사용하는 모든 값
특이한 부분이라면 프로퍼티의 키는 거의 모든 경우 문자열을 사용한다는 점입니다.
심볼 있잖아요!!
심볼값도 가능하긴 하지만 거의 대부분의 경우 문자열을 사용합니다!
⇒ 숫자도 가능한데요???
숫자가 가능하지만 그것은 암묵적 변환으로 인해 문자열로 변환되기 때문입니다.
타입스크립트에서도 Key값으로 number타입을 줄 순 있지만 런타임에선 문자열로 변환되는 이유가 이것입니다.
또한 식별자 네이밍 규칙을 준수한다면 문자열의 경우에도 따옴표를 생략할 수 있습니다.
→ 식별자 네이밍 규칙은 챕터 4 를 참고해주세요
1
2
3
4
var person = {
firstName:"Chansub",
'last-name':"Kim"
}
firstName 의 경우엔 식별자 네이밍 규칙을 준수했기 때문에 따옴표가 생략되어도 괜찮으나, last-name 의 경우 그렇지 않기 때문에 따옴표를 붙여준 모습입니다.
메서드
프로퍼티의 값이 함수일 경우 일반 함수와 구분하기 위해 붙여진 이름입니다.
함수는 추후 12장에서 다루기 때문에 그 때 자세히 알아보도록 하겠습니다!
프로퍼티 접근
프로퍼티에 접근하는 방법은 총 두 가지 입니다.
- 마침표 표기법
object.prop - 대괄호 표기법
object[prop]
사용 해 보면 많은 부분이 비슷하던데 과연 이 둘의 차이점은 무엇일까요?
대괄호 표기법의 경우엔 대괄호 안에 반드시 따옴표로 감싼 Key 문자열이 존재해야 한다는 점입니다. ⇒ 숫자도 가능하지만 앞서 말 한것과 같이 숫자가 문자열로 암묵적 변환이 이뤄지기 때문입니다.
따라서 식별자 네이밍을 준수하지 못하는 이름의 경우엔 대괄호 표기법으로 접근해야한다는 말이 되겠습니다.