객체 리터럴
자바스크립트는 객체 기반형 프로그래밍 언어이다.
객체
는 0개 이상의 프로퍼티와 메서드로 구성된 집합 이며
프로퍼티
는 객체의 상태를 나타내는 값 이라 하고 키와 값으로 구성된다.
객체 리터럴에 의한 객체 생성
c++이나 자바 같은 클래스 기반 객체 지향 언어
는 클래스를 사전에 정의하고 new 연산자와 함께 생성자를 호출해서 인스턴스를 생성하는 방식으로 객체를 생성하지만,
자바스크립트는 프로토타입 기반 객체지향 언어
이기때문에 다양한 객체 생성 방법을 지원한다.
객체 리터럴
자바스크립트에서는 일반적으로는 객체 리터럴을 사용해서 객체를 생성하게된다.
객체 리터럴은 중괄호({...}) 사용해 객체 생성을 한다.
// 객체 리터럴을 사용해서 객체 생성 let person = { name: 'jaehyun', sayHello : function() { console.log(`hello my name is ${this.name}.`); } }; // 중괄호 안에 프로퍼티를 정의하지않으면 빈객체가 생성된다.
이러한 방식은 객체 리터럴에 프로퍼티를 포함시켜 객체를 생성함과 동시에 프로퍼티를 만들수있다
또 생성한 이후에 프로퍼티를 동적으로 추가도 할수있다.
ES6 이후 추가된 객체 리터럴 확장기능 추가
프로퍼티 값은 변수에 할당된 값을 넣을수있다.
프로퍼티 값에 변수를 사용하는경우 키와 이름이 동일하다면 프로퍼티 키를 생략할수있다. 이때 키이름은 변수 이름으로 자동 생성된다.
계산된 프로퍼티 이름
문자열, 문자열로 타입변환할수있는 값으로 평가되는 표현식을 사용해 키를 동적으로 생성할수있다.
const prefix = "prop" ; let i =0; // 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 키를 동적으로 생성 const obj ={ [`${prefix}-${++i}`] : i , [`${prefix}-${++i}`] : i , [`${prefix}-${++i}`] : i , };
- object 생성자 함수
- 생성자 함수
- object.create 메서드
- 클래스 (ES6)
프로퍼티
프로퍼티 키
: 빈 문자열을 포함한 모든 문자열 , 심벌 값- 프로퍼티 값에 접근할수있는 식별자 역할
- 식별자 네이밍 규칙에 준수하다면 따옴표를 생략 가능하다
- 식별자 네이밍 규칙에 따르지않는 이름에는 반드시 따옴표 를 사용해야한다.
- 이미존재하는 프로퍼티 키를 중복선언하면 나중에 선언된 값이 덮어쓰게된다.
프로퍼티 값
: 자바스크립트에서 사용할수있는 모든 값이미 존재하는 프로퍼티에 값을 할당하면 값이 갱신된다.
존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되고 추가된다.
let person = { name : "jaehyun", }; person.age = 20; console.log(person); // {name:"jaehyun", age:20}
프로퍼티 접근
프로퍼티에 접근하는 방법은 2가지가 있다.
프로퍼티 키가 식별자 네이밍 규칙을 준수하는 이름이라면 2가지 다 사용가능하다.
그게아니라면 반드시 대괄호 표기법을 사용해야한다.
마침표 표기법
대괄호 표기법
- 프로퍼티 키 는 따옴표로 감싼 문자열 이여야 한다.
- 아니면 레퍼랜스 에러가 발생한다.
let person = {
name : "jaehyun",
};
console.log(person.name);
//마침표 표기법
console.log(person["name"]);
//대괄호 표기법
console.log(person.age);
//존재하지 않은 프로퍼티에 접근하면 undefined 을 반환한다.
프로퍼티 삭제
- 존재하는 프로퍼티를 delete 연산자 사용해서 객체의 프로퍼티를 삭제 할수있다.
delete 객체.프로퍼티키 ;
메서드
프로퍼티 값이 함수일경우 일반함수와 구별하기위해 메서드 라 부른다.
즉 메서드는 객체에 묶여있는 함수를 의미한다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
[Deepdive] 14장 전역변수의 문제점 (0) | 2022.04.01 |
---|---|
[Deepdive] 13장 스코프 (0) | 2022.03.31 |
[Deepdive] 12- 2 함수 (0) | 2022.03.30 |
[Deepdive] 12-1 함수 (0) | 2022.03.29 |
[Deepdive] 11장 원시값과 객체의 비교 (0) | 2022.03.28 |