[DEEP DIVE] 10. 객체 리터럴

 1. 객체란?

JS 는 객체 기반의 프로그래밍 언어이며, JS 를 구성하는 거의 모든 것이 "객체" 이다!
원시타입(Number, String, Boolean ...)의 데이터를 제외한 나머지는 모두 객체로 취급된다고 생각하면 편하다

!! 원시 타입의 데이터들은 변경 불가능 한 값이다 !!

var x = 10
x = 20
console.log(x) // 20

 

이것은, x의 값이 변경된 것 처럼 보이지만 실제로는 10이 저장된 메모리 주소에 접근해서 10을 20으로 변경하는 것이 아니라, 새로운 메모리 주소에 값 20을 넣고 x가 그것을 가르키도록 하는것이다.

값을 변경하는 것이 아니라 x가 가르키는 메모리 주소가 변경된다.

10이 저장된 메모리 주소는 이제 아무런 변수도 가르키고 있지 않기 때문에 자동으로 메모리 해제된다.

 

이와 다르게 객체 타입의 데이터들은 변경이 가능하다.

 

객체는 0개 이상의 프로퍼티로 구성된 집합이고, key + value로 구성된다.

var counter = {
	num : 0,
    	increase : function() {
    	this.num += 1;
    }
}

객체의 프로퍼티 값에는 모든 값이 사용될 수 있고, 만약 함수가 프로퍼티로 사용된다면 메서드 라고 부른다.

JS 에서 함수, 객체는 굉장히 밀접한 관계를 가진다.
함수를 통해서 객체를 생성하고, 함수 자체가 JS 에서는 일급 객체로 취급된다.

 

일급 객체 조건

 

1. 변수 or 자료구조 안에 담을 수 있어야 한다
2. 파라미터로 넘길수 있어야 한다.
3. 반환값으로 사용할 수 있어야 한다 (클로저 개념)

2. 객체 리터럴에 의한 객체 생성

자바스크립트는 프로토타입 기반 OOP 언어로 다양한 객체 생성 방법을 지원해준다

• 객체 리터럴
• 객체 생성 함수
• 생성자 함수
• Object.create 메서드
• 클래스

 

📌 리터럴로 객체 생성하기

var person = { 
    nickname : "woong",
    age : 24,
    sayHi : function(){
        console.log(`Hello ! ${this.nickname}`)
    }
};

console.log(typeof person)// object
person.sayHi(); // Hello ! woong

객체 리터럴 또한 런타임 전 js 엔진에 의한 코드 평가에서 값으로 평가되는 표현식 이라는 것을 기억하자!

리터럴은 클래스를 먼저 정의하고 new 연산자를 통해 인스턴스를 생성하는 과정을 생략할 수 있는 장점과,

객체를 생성한 후 프로퍼티를 동적으로 제어할 수 있다는 장점이 있다

 

3. 프로퍼티

객체에서 프로퍼티는 key + value 로 구성된다.
key : 문자열 or 심볼값이 아닌 데이터 타입으로 키를 선언하면 문자열로 암묵적 타입 변환 된다.
value : js 에서 사용할 수 있는 모든 값
key 는 value에 접근할 수 있는 식별자 역할을 한다. 

 

📌 식별자 네이밍 규칙

var person = {
	firstName : "hyun-woong", // 식별자 네이밍 규칙 준수
    	'last-name' : "choi" // 규칙 준수 X
}

 

식별자 네이밍 규칙을 준수하는 경우, 프로퍼티 키 값에 따옴표를 생략해서 사용할 수 있다.

'last-name' 의 경우 현재 네이밍 규칙을 준수하지 않았는데, 만약 규칙을 준수해서

last-name 으로 키를 설정 한다면, - 가 연산자로 인식돼어 SyntaxError 이 발생하니, 주의해서 사용해야 한다.

 

📌 프로퍼티 동적 관리

 

이미 생성된 객체에 접근해서 프로퍼티 값 갱신하고 프로퍼티 키 생성, 삭제 해보기

var person = { 
    nickname : "woong",
    age : 24,
    sayHi : function(){
        console.log(`Hello ! ${this.nickname}`)
    }
};

//갱신
person.nickname = "kim"
consolelog(person.nickname) // 'kim'

// 생성
var new_key = "isAdult";
person[new_key] = true;
console.log(person)
// 존재하지 않는 키에 값을 할당하면 동적으로 생성되고 값이 할당된다
person.address = "busan";
console.log(person)

// 삭제
// 24에 접근할 수 있는 프로퍼티 키 age 삭제하기
delete person.age;
// 존재하지 않는 키를 삭제하려고 하면 아무런 에러 없이 무시됨
delete person.weight

• 빈 문자열을 키로 사용해도 에러는 발생하지 않지만, 의미가 없다
• var, function 와 같은 예약어를 사용해도 에러는 발생하지 않지만, 사용하지 말자
• 이미 존재하는 키를 객체에서 또 사용하면 나중에 선언한 키로 값에 접근한다.

 

📌 값에 접근하는 2가지 방법 : 마침표(.) 대괄호([])

 

console.log(person.nickname);
// 대괄호를 사용하면 문자열로 접근해줘야 한다.
console.log(person['nickname']);

for(key in person){
	console.log(person[`${key}`]);
}

4. 객체 리터럴 확장 기능

📌 축약 표현

미리 선언과 할당이 되어있는 변수와 키 이름이 같은 경우 생략 가능

function 키워드를 생략하고 메서드 생성 가능

var x = 1, y= 2;

var es5_obj = {
    x : x,
    y : y,
    add : function(){
        console.log(this.x + this.y);
    }
}

var es6_obj = {
    x, 
    y,
    add(){
        console.log(this.x + this.y);
    }
};

 

📌 프로퍼티 이름 계산

외부에서만 계산을 통해 키를 동적 생성할 수 있었는데, 내부에서도 가능

var keyword = 'prob'
var i = 0;

var es5_obj = {};

es5_obj[keyword + '-' + ++i] = i;
es5_obj[keyword + '-' + ++i] = i;
es5_obj[keyword + '-' + ++i] = i;

var es6_obj = {
    [`${keyword}-${++i}`] : i,
    [`${keyword}-${++i}`] : i,
    [`${keyword}-${++i}`] : i
};