Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- vue.js
- 프론트엔드
- 주니어 개발자
- vuetify
- cubic-bezier
- css
- vue #vue.js #font #web-font
- 로컬스토리지
- 장고
- NavigationDuplicated
- 예외처리
- 성능 최적화
- frontend
- 자바스크립트 #javascript #렌더링 #렌더링순서
- 세션스토리지
- VUE
- Django
- webpack
- 렌더링 최적화
- lazy loading
- Router
- 안드로이드
- vue-router
- 라우터
- virtual dom
- 뷰
- 세션
- Transition
- DOM
- jest
Archives
- Today
- Total
한준호
[Modern javascript]객체 리터럴 본문
728x90
■자바스크립트는 객체 기반 프로그래밍 언어이다.
- 원시 값을 제외한 나머지 값(함수, 배열, 정규표현식 등)은 모두 객체이다.
- 원시 값은 변경 불가능한 값이지만 객체는 변경 가능한 값이다.
- 객체는 0개 이상의 프로퍼티로 구성된 집합이며 프로퍼티는 키(key)와 값(value)으로 구성된다.
■자바스크립트는 프로토타입 기반 객체지향 언어로 클래스 기반 객체지향 언어와 달리 다양한 객체 생성 방법을 지원한다.
- 객체 지향 함수는 new연산자와 함께 생성자를 호출하여 인스턴스를 생성한다.
인스턴스: 클래스에 의해 생성되어 메모리에 올라간 것
클래스: 인스턴스를 생성하기 위한 템플릿
- 객체 리터럴, Object 생성자 함수, 생성자 함수, Object.create 메서드, 클래스 ...
- 식별자 네이밍 규칙을 따르는 프로퍼티 키를 사용할 것
var person = {
firstName: 'Ung-mo', // 식별자 네이밍 규칙을 준수하는 프로퍼티 키
'last-name': 'Lee' // 식별자 네이밍 규칙을 준수하지 않는 프로퍼티 키
};
console.log(person); // {firstName: "Ung-mo", last-name: "Lee"}
var person = {
firstName: 'Ung-mo',
last-name: 'Lee' // SyntaxError: Unexpected token -
};
■프로퍼티 접근
var person = {
name: 'Lee'
};
// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name); // Lee
// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']); // Lee
■프로퍼티 동적 생성
var person = {
name: 'Lee'
};
// person 객체에는 age 프로퍼티가 존재하지 않는다.
// 따라서 person 객체에 age 프로퍼티가 동적으로 생성되고 값이 할당된다.
person.age = 20;
console.log(person); // {name: "Lee", age: 20}
■프로퍼티 삭제
var person = {
name: 'Lee'
};
// 프로퍼티 동적 생성
person.age = 20;
// person 객체에 age 프로퍼티가 존재한다.
// 따라서 delete 연산자로 age 프로퍼티를 삭제할 수 있다.
delete person.age;
// person 객체에 address 프로퍼티가 존재하지 않는다.
// 따라서 delete 연산자로 address 프로퍼티를 삭제할 수 없다. 이때 에러가 발생하지 않는다.
delete person.address;
console.log(person); // {name: "Lee"}
728x90
'Frontend > modern javascript' 카테고리의 다른 글
[Modern javascript]함수 (0) | 2021.08.12 |
---|---|
[Modern javascript] 원시 값과 객체의 비교 (0) | 2021.08.09 |
[Modern javascript]타입 변환과 단축 평가 (0) | 2021.07.16 |
[Modern javascript] 반복문 (0) | 2021.07.15 |
[Modern javascript]연산 (0) | 2021.07.14 |
Comments