TIL 6. JS - 객체

문승준·2021년 8월 10일

JavaScript TIL object 객체

JavaScript

목록 보기

3/8

객체

원시 데이터 타입을 제외한 값들은 모두 객체이다.
키(key)와 값(value)으로 구성된 프로퍼티(property)들의 집합이다.

1. 객체의 개념과 생성 방법

- 프로퍼티와 메서드

프로퍼티 : 배열과 달리 순서를 보장하지 않는다
-> 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값
-> 키(key)는 식별자(identifier)이다.
-> 키에 다른 값을 지정하면 문자열이 된다.
-> 키를 중복 선언하면 나중 것이 먼저 것을 덮어쓴다.
-> 프로퍼티 값 : 모든 값
프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부른다.
객체는 데이터(프로퍼티)와 그 데이터에 관련된 동작(메서드)을 모두 포함할 수 있다.
-> 데이터와 동작을 하나의 단위로 구조화할 수 있다.

- 객체 생성 방법

객체 리터럴 방식

let emptyObj = {} // 빈 객체

let mySelf = {
 gender : 'male',
 age : 33,
 sayMyAge : function () {
   console.log('My age is ' + this.age)
 } // 프로퍼티에 함수를 넣으면 메서드로 사용할 수 있다.
}

mySelf.sayMyAge() // My age is 33

new 연산자와 Object 생성자(constructor) 함수
-> 생성자 함수를 통해 생성된 객체를 인스턴스(Instance)라 한다.

let mySelf = new Object() // 빈 객체 생성
                          // 생성자 함수의 첫글자는 대문자
mySelf.name = 'SJ Moon'
mySelf.age = 33

console.log(mySelf) // { age: 33, name: "SJ Moon" }

2. 객체 프로퍼티 접근

- 프로퍼티 키를 활용한 접근

프로퍼티 키는 문자열이므로 '' 혹은 "" 을 사용하지만, 유효한 이름인 경우 생략할 수 있다.
키에 연산자가 들어간 표현식이나 띄어쓰기가 포함되면 따옴표가 필요하다.
JS 예약어는 키로 사용하지 않는다. (ex: boolean, if, super, let 등)

- Dot Notation 과 Bracket Notation

마침표 . 와 대괄호 [ ] 표기법의 차이

let mySelf = {
 'first name' : 'SJ',
 'last name' : 'Moon',
 gender : 'male',
 age : 33,
 'like-pizza' : true,
 1204 : 'birthday'
}

console.log(mySelf.gender)       // 'male'
console.log(mySelf['gender'])    // 'male' -> [] 안에는 반드시 문자열 타입만

console.log(mySelf.like-pizza)   // NaN -> 표현식이나 띄어쓰기 사용 불가
console.log(mySelf['like-pizza'])// true

console.log(mySelf.1204)         // SyntaxError -> 숫자 사용 불가
console.log(mySelf[1204])        // 'birthday'

대괄호 표기법은 변수를 사용할 수 있다.

let mySelf = {
 gender : 'male',
 age : 33,
}

let myKey = 'gender'      // key 값을 다른 변수에 선언

console.log(mySelf.myKey) // undefined -> 마침표로 변수 사용 불가
                          // 존재하지 않는 프로퍼티는 undefined 반환

console.log(mySelf[myKey]) // 'male'

// 만약에 myKey : 'smart guy' 라는 프로퍼티가 있다면??

console.log(mySelf.myKey)  // 'smart guy'

3. 프로퍼티 값의 추가, 수정, 삭제

let mySelf = {
 gender : 'male',
 age : 33,
}

mySelf.name = 'SJ Moon' // 추가

mySelf.age = 34         // 수정

delete mySelf.gender    // 삭제
                        // 프로퍼티 키 일때만 적용된다

console.log(mySelf) // { age: 34, name: "SJ Moon" }