10.1 객체란?
: 다양한 타입의 값을 한 단위로 구성한 자료구조이다.
** 원시 타입의 값은 변경 불가능한 값이지만 객체 타입의 값,
즉 객체는 변경 가능한 값이다.
let person = {
name: "Jeong",
age: 21
};- 프로퍼티는
키(key)와값(value)으로 구성되며 함수도
프로퍼티 값으로 사용할 수 있다.
프로퍼티 값이 함수인 경우는메서드(method)라 부른다.
let count = {
number : 0,
increase : function () { //메서드
this.number+=2;
}
};
10.2. 객체 리터럴
: 리터럴(literal)은 사람이 이해할 수 있는 문자나 약속된 기호를 사용해 값을 생성하는 표기법이다. 따라서 객체 리터럴은 객체를 생성하기 위한 표기법이다.
-
객체 리터럴은 클래스를 먼저 정의하고 new 연산자와 함께 생성자를 호출할 필요가 없다.
-
프로퍼티를 포함시켜 객체를 생성과 동시에 프로퍼티를 만들 수 있으며, 객체 생성 이후에 프로퍼티를 동적으로 추가할 수도 있다.
10.3 프로퍼티
- 객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성.
- 프로퍼티를 나열할 때는 쉼표(,)로 구분한다.
- 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값(원시값)
- 값 : js에서 사용할 수 있는 모든 값
let person = {
firstName : 'Jimin', //식별자 네이밍 규칙 준수한 키
'last-name' : 'Jeong' //식별자 네이밍 규칙 준수 x
};key는 프로퍼티 값에 접근할 수 있는 이름으로 식별자 역할을 한다. 식별자 네이밍 규칙을 준수하는 이름은 따옴표를 생략 가능하다. 따라서 식별자 네이밍 규칙을 따르지 않으면 반드시 따옴표를 사용한다.value는 일반적으로 문자열을 사용한다.
<프로퍼티 키를 동적으로 생성하는 방식>
let obj = {};
obj["hello"] = "bye";
console.log(obj); // {hello: "bye"}- 프로퍼티 키에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다. 숫자 리터럴을 사용하면 따옴표는 붙지 않아도 내부적으로는 문자열로 변환된다.
let num = {
0 : 1,
1 : 2
};
console.log(num[0]) //1
console.log(num["0"]) //1-
var,function과 같은 예약어를 프로퍼티 키로 사용하면 에러가 발생할 여지가 있어 권장하지 않는다.
-
이미 존재하는 프로퍼티 키를 중복 선언할 경우,
나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.
let obj = {
lastName : "Jeong",
lastName : "Lee"
};
console.log(obj); // {lastName : "Lee"}10.4 메서드
자바스크립트의 함수는 객체로 값으로 취급할 수 있기 때문에
프로퍼티 값으로 사용할 수 있다.
let count = {
num : 0,
increase : function() { //메서드
this.num += 2
return this.num;
}
};
console.log(count.increase()); // 2- 메서드 내부에 사용한 this는 객체 자신
count를 가리키는 참조 변수이다.
10.5 프로퍼티 접근
- 마침표(.)를 사용하는 마침표 표기법
let person = {
name : "Stella"
};
console.log(person.name); // Stella- 대괄호([...])를 사용하는 대괄호 표기법
console.log(person['name']) // Stella
cosnole.log(person[name]) // undeinfed-
객체를 정의할 때, 프로퍼티 키
name은 식별자 네이밍 규칙을 준수하므로 따옴표를 쓸 필요가 없다.
❗그러나 대괄호 표기법에 의한 프로퍼티 접근할 경우, 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다. -
객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환함.
✨ 단, 프로퍼티 키가 숫자로 된 문자열인 경우 따옴표를
생략할 수 있다. 그 외의 경우 대괄호 내에 들어가는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다!
10.6 프로퍼티 값 갱신과 동적 생성
- 이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.
- 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.
10.7 프로퍼티 삭제
- delete 연산자는 객체의 프로퍼티를 삭제한다. delete 연산자의 피 연산자는 프로퍼티 값에 접근할 수 있어야 한다.
let person = {
name : "Jimin",
age : 20
};
person.hobby = "singing" // 프로퍼티 동적 생성
conosle.log(person) // {name: 'Jimin', age: 20, hobby: 'singing'}
delete person.age // age 프로퍼티 삭제
console.log(person); // {name: 'Jimin', hobby: 'singing'}- 객체에 존재하지 않는 프로퍼티를 delete 연산을 할 경우, 아무런 변화가 없다.
10.8 ES6에서 추가된 객체 리터럴의 확장 기능
- 프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 생랼할 수 있다. 이때 프로퍼티 키는 변수이름으로 자동 생성된다.
let x = 1, y = 2;
let obj = {x,y}; //프로퍼티 축약 표현
console.log(obj); // {x: 1, y: 2}- 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성하려면 대괄호 표기법을 사용한다. 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있다.
let increase = "up";
let num = 0;
let count = {
[`${increase}-${++num}`] : num,
[`${increase}-${++num}`] : num
};
console.log(count); // {up-1: 1, up-2: 2}- 메서드를 정의할 때 function 키워드를 생략할 수 있다.
let person = {
name : "Jimin",
hello() {
console.log("Hello,I'm "+ this.name);
}
};
person.hello(); //Hello,I'm Jimin
