객체
객체(Object)는 자바스크립트의 원시값을 제외한 함수 배열 정규 표현식등을 구성한다.
객체는 0개 이상의 프로퍼티로 구성된 집합이며 키와 값으로 구성된다.
- 프로퍼티 : 객체의 상태를 나타내는 값
- 메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작(밑에 밑에 예시에 this로 a키값에 참조하는 모습)
let obj = {
a : 1, // 프로퍼티
b : 2 // 프로퍼티
// 키 : 값
}자바스크립트의 함수는 일급 객체이므로 값으로 취급 가능하다.(객체 안에 키 : 값이 있고 값에 함수를 넣은것) 단. 일반 함수와 구분하기 위하여 메서드라 부르게 된다.
let obj = {
a : 1, // 프로퍼티
count: function () { //메서드
this.a++
}
}
obj.count() // 메서드 불러오기
obj.a // 2객체 리터럴에 의한 객체 생성
클래스 기반 객체지향 언어는 클래스를 정의하고 필요한 시점에 new 연산자와 함께 생성자를 호출하여 인스턴스를 생성하는 방식으로 객체를 생성한다.
인스턴스???
클래스에 의해 생성되어 메모리에 저장된 실체를 말한다. 간단하게 클래스를 정의하고 new 연산자로 생성자를 호출면 인스턴스(객체)가 생성된다고 생각하면 된다.function bread(water, flour) { this.water = water this.flour = flour this.fun = function() { console.log(`water ${this.water} flour ${this.flour} make bread`) } } let goldBread = new bread(2, 4) // bread {water: 2, flour: 4, fun: ƒ} let blackBread = new bread(0, 5) // bread {water: 0, flour: 5, fun: ƒ} goldBread.fun() // water 2 flour 4 make bread blackBread.fun() // water 0 flour 5 make bread 배합만 다르게 빵을 찍어낼 수 있다
자바스크립트는 프로토타입 객체지향 언어로
- 객체 리터럴
- Object 생성자 함수
- 생성자 함수
- Object.create 메서드
- 클래스
등의 객체 생성 방법을 지원한다.
프로퍼티
객체는 프로퍼티의 집합이고 키와 값으로 구성된다.
키는 웬만한 문자열등으로 사용 가능하고 값은 말그래도 값으로 쓸 수 있는 모든값으로 쓸 수 있다.
프로퍼티 키는 값에 접근할 수 있는 식별자 역활을 하는데 '식별자 네이밍 규칙'을 준수한다면 따옴표를 사용하지 않아도 된다.
let obj = {
abc : 123,
'a-bc' : 123 // 대충 이런 느낌이다
}프로퍼티 동적 생성
프로퍼티를 객체를 생성할때만 만들 수 있는건 아니다. 동적으로 추가가 가능하다.
let obj = {}
obj['a'] = 1 // obj = {a: 1}프로퍼티 키를 숫자로도 가능하나 문자열로 변환된다.
let obj = {
1 : 123, // '1' : 123
2 : 123 // '2' : 123
}프로퍼티 값 갱신
프로퍼티의 키를 참조한 값을 변화시킬 수 있다.
let obj = {
a : 123
}
obj.a = 'hi'프로퍼티 접근
- 마침표를 사용하는 마침표 표기법
- 대괄호를 사용하는 대괄호 표기법
let obj = {
a : 1
}
console.log(obj.a)
console.log(obj['a']) // 따옴표로 감싸지 않으면 식별자로 인식한다프로퍼티 삭제
delete연산자를 사용해 객체의 프로퍼티를 삭제한다.
let obj = {
a : 1,
b : 2
}
delete obj.a // a를 키로가진 프로퍼티가 삭제됨프로퍼티 축약 표현
식별자 표현식을 프로퍼티의 값으로 사용 가능하다.
let x = 1
let y = 2
let obj = {
x : x, // 키는 변수와 같아도 'x'로 따로 저장된다
y : y
}
console.log(obj) // {x: 1, y: 2}변수 이름과 프로퍼티 키가 동일할 시 프로퍼티 키를 생략가능하다.
let x = 1
let y = 2
let obj = {
x,
y
}
console.log(obj) // {x: 1, y: 2}계산된 프로퍼티 키
프로퍼티 키를 평가된 결과 값으로 생성 할 수 있다.
let obj = {}
let i = 0
let name = 'Number'
obj[name + ' ' + i++] = i
obj[i++ + ' ' + name] = i
console.log(obj) // {Number 0: 1, 1 Number: 2} // i증감식을 넣어도 증가된 상태로 값이 만들어 지진 않는다.메서드
프로퍼티의 값은 자바스크립트에서 사용 하는 모든 값을 쓸 수 있다. 함수를 값으로 사용 시 일반 함수와 구분하기 위해 메서드라 명한다.
let increase = {
count : 0,
button: function(){
return this.count++ // this키워드는 객체 자신을 가리키는 참조변수
}
}
increase.button() // count : 1메서드 축약
메서드를 정의할때 function키워드를 생략 가능하다.
let increase = {
count : 0,
button(){ // 위에서 function 키워드를 생략한 것을 알 수 있다.
return this.count++
}
}
increase.button() // count : 1