오늘 배운 것
Javascript 개념
객체 리터럴
- 객체란?
자바스크립트는 객체 기반의 프로그래밍 언어이다. 자바스크립트를 구성하는 거의 모든 것이 객체이다. (프리미티브 타입을 제외한 나머지 데이터 타입인 함수, 배열, 정규표현식 등은 모두 객체)
원시 타입: 원시 값은 변경 불가능한 하나의 값(immutable value)
객체 타입: 객체 타입의 값은, 다양한 타입의 값을 가지고(원시 값 또는 다른 객체들) 구성된 복합적 자료구조. 변경이 가능한 값이다.(mutable value)
-
객체
0개 이상의 프로퍼티로 구성된 집합, 프로퍼티는 키와 값으로 구성된다.
-
프로퍼티
객체의 상태를 나타내는 값.
-
메서드
프로퍼티 값이 함수일 때, 일반 함수와 비교하기 위해서 메서드라고 부른다.
프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작을 한다.
일반적으로 자바스크립트의 함수는 일급 객체이므로 값으로 취급되며 이는 프로퍼티 값이 될 수도 있다는 것이다. 따라서 이는 메서드가 된다는 것이다.
ex)
let counter = { // 객체
num: 0, // 프로퍼티
increase: function () { // 메서드
this.num++
}
}객체는 이렇게 프로퍼티를 정의하고 그것을 참조할 수 있는 메서드를 포함하고 있으므로 "상태"와 "동작"을 하나의 단위로 구조화할 수 있어 유용하다.
-> 주의할 점: 객체에서 중괄호 {}는 코드 블록을 의미하지 않는다.
- 객체 생성
클래스 기반의 객체지향 언어는 클래스를 정의하고, 그것을 new 연산자를 호출하여 인스턴스를 만드는 방식으로 객체를 생성한다.
하지만 자바스크립트는 프로토타입 기반 객체 지향 언어로, 다양한 객체 생성 방법이 있다.
1. **객체 리터럴** : 오늘 배울 것 / 나머지는 함수,메서드 개념을 이해해야하기 때문에
2. Object 생성자 함수
3. 생성자 함수
4. Object.create 메서드
5. 클래스(ES6) 1) 객체 리터럴
객체 리터럴 방식은 중괄호 내에 0개 이상의 프로퍼티를 정의하는 것.
let person = {
name: 0,
sayHello: function () {
console.log(`Hello! My name is ${this.name}`)
},
}중괄호 내에 프로퍼티나 메서드를 정의하지 않으면 빈 객체가 생성된다.
객체 리터럴 방식의 객체 생성은 자바스크립트가 얼마나 유연하고 강력한지 나타내 준다.
new 연산자를 쓰지 않아도 변수 선언하듯 객체를 생성할 수 있고,
프로퍼티를 동시에 정해줄 수 있으며 생성 이후에 프로퍼티를 동적으로도 추가할 수 있다.
- 프로퍼티
객체는 프로퍼티의 집합이며 프로퍼티는 키와 값으로 구성된다.
- 프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 혹은 심벌값 / 프로퍼티 값에 접근할 수 있는 식별자 역할
- 프로퍼티 값: 자바스크립트에서 사용할 수 있는 모든 값
- 메서드
프로퍼티 값이 함수일 때 그것을 메서드라고 한다.
모든 값을 프로퍼티 값으로 사용할 수 있기 때문에 객체인 함수 또한 프로퍼티 값으로 취급할 수 있다.
-
프로퍼티 접근
접근 연산자로 . 와 [] 를 사용한다.
대괄호를 접근 연산자로 사용할 때에는 내부에 지정하는 프로퍼티 키를 따옴표 붙여야 한다. -
프로퍼티 값 갱신
존재하는 프로퍼티에 접근해서 값을 할당해주면 값이 갱신된다.
let person = {
name: 'Lee'
}
person.name = 'Kim'
console.log(person) // {name: 'Kim'}- 프로퍼티 동적 생성
존재하지 않는 프로퍼티에 값을 할당하면 동적으로 프로퍼티가 생성되며 값도 할당된다.
let person = {
name: 'Lee'
}
person.age = 20
console.log(person) // {name: 'Lee', age: 20}- 프로퍼티 삭제
delete 연산자를 사용하여 객체의 프로퍼티를 삭제할 수 있다.
let person = {
name: 'Lee'
}
person.age = 20
delete person.age
delete person.address
console.log(person) // {name: 'Lee'}age 프로퍼티는 동적으로 생성되었기 때문에 person 객체에 있는 프로퍼티이며 따라서 delete 연산자로 프로퍼티 삭제가 가능하다.
address 프로퍼티는 없는 프로퍼티이기 때문에 delete를 사용하더라도 지울 수 없다. 다만, 이때 에러는 발생하지 않는다.
- 객체 리터럴 확장 기능 (ES6)
- 축약 표현
let x = 1,
y = 2
let obj = {
x: x,
y: y,
}
console.log(obj) // { x: 1, y: 2 }프로퍼티의 키와 값의 이름이 같다면 프로퍼티 키를 생략할 수 있다 (property shorthand)
프로퍼티 키는 변수 이름으로 자동 생성해준다.
let x = 1,
y = 2
let obj = { x, y }
console.log(obj) // { x: 1, y: 2 }- 계산된 프로퍼티 이름 (computed property name)
문자열로 평가되는 표현식을 사용해 프로퍼티 키를 동적으로 생성하는 것.
기존 ES5에서는 키를 동적으로 생성하려면 객체 리터럴 외부에 대괄호 표기법으로 생성했다.
let prefix = "prop"
let i = 0
let obj = {}
obj[prefix + "-" + ++i] = i
obj[prefix + "-" + ++i] = i
obj[prefix + "-" + ++i] = i
console.log(obj) // { 'prop-1': 1, 'prop-2': 2, 'prop-3': 3 }ES6 부터는 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 키를 동적 생성할 수 있다.
let prefix = "prop"
let i = 0
let obj = {}
obj[prefix + "-" + ++i] = i
obj[prefix + "-" + ++i] = i
obj[prefix + "-" + ++i] = i
console.log(obj) // { 'prop-1': 1, 'prop-2': 2, 'prop-3': 3 }- 메서드 축약 표현
객체 내에서 메서드를 정의할 때 function 키워드를 생략한 축약 표현을 사용할 수 있다.
다만, 축약 표현으로 정의한 메서드는 프로퍼티에 할당한 함수와 다르게 동작한다.
let obj = {
name: 'Lee',
sayHi () {
console.log('Hi!' + this.name)
}
}
obj.sayHi() // Hi! Lee