객체 리터럴
원시 타입과 객체 타입
- JS는 객체 기반의 프로그래밍이며 원시 값을 제외한 나머지 값(배열, 함수, 정규표현식 등)은 모두 객체
- 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체의 값)을 하나의 단위로 구성한 복합적인 자료구조
- 원시 값은 변경이 불가능한 값이지만 객체는 변경 가능한 값
객체(Object)란?
var perosn = {
name : 'Jin',
age : 26
};
- 객체는 0개 이상의 프로퍼티로 구성된 집합
- 프로퍼티는 키와 값으로 구성된 쌍
- JS에서 사용할 수 있는 모든 값을 프로퍼티의 값으로 사용 가능
- 함수도 프로퍼티 값으로 사용 가능, 일반 함수와 구분하기 위하여 메서드라고 불린다.
var perosn = {
name : 'Jin',
age : 26,
Pability: 50,
program : function() {
this.Pability++;
}
};
- 객체란 프로퍼티와 메서드로 구성된 집합체!
- 프로퍼티 : 객체의 상태를 나타내는 값
- 메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작- 객체는 프로퍼티와 메서드를 포함하며, 상태와 동작을 하나의 단위로 구조화하기 용이
객체 생성
JS에서 객체 생성하는 방법
- 객체 리터럴
- Object 생성자 함수
- 생성자 함수
- Object create 메서드
- 클래스 (ES6)
이중에서 가장 일반적이고 간당한 방법은 객체 리터럴이다.
리터럴 객체 생성
var perosn = {
name : 'Jin',
age : 26,
Pability: 50,
program : function() {
this.Pability++;
}
};- 객체 리터럴은 중괄호{} 내에 0개 이상의 프로퍼티를 정의
- JS Engine은 변수에 할당되는 시점에 객체 리터럴을 해석해 객체 생성
- 중괄호 내에 프로퍼티를 정의하지 않으면 빈 객체로 생성
- 객체 리터럴은 코드 블록이 아닌 값을 평가하는 표현식이므로 닫는 중괄호 뒤에 세미콜론을 붙인다.
프로퍼티(Property)란?
- 객체는 프로퍼티의 집합이며 프로퍼티는 키와 값으로 구성된다.
- 프로퍼티 키 : 빈 문자열을 포함한 모든 문자열 또는 심벌 값
- 프로퍼티 값 : JS에서 사용할 수 있는 모든 값
var perosn = {
name : 'Jin',
age : 26,
Pability : 50,
from : 'Bucheon',
};- 프로퍼티 키로 문자열이나 심벌 이외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다.
- 예를 들어, 프로퍼티 키로 숫자 리터럴을 사용하면 따옴표는 붙지 않지만 내부적으로는 문자열로 변환된다.
var foo = {
0: 1,
1: 2,
2: 3,
};
console.log(foo); // { 0 : 1, 1 : 2, 2 : 3 }이미 생성된 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.
var foo = { name: 'Jin', name: 'Kim' }; console.log(foo); // { name: 'Kim' }
프로퍼티 동적 생성
- 문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수 있다.
이경우에는 프로퍼티 키로 사용할 표현식을 대괄호([])로 묶어야한다.
var obj = {};
var key = "hello";
obj[key] = 'world';
console.log(obj); // { hell : 'world' }
- 존재하지 않는 프로퍼티에 값을 할당
var person = {
name: 'Jin'
};
person.age = 26;
console.log(person); // {name: 'Jin', age: 26}메서드(Method)란?
- JS에서 객체는 원시 값 또는 다른 객체 값을 프로퍼티 값으로 사용 가능
- 원시 값을 제외한 나머지 값들은 다 객체에 해당되기 때문에 함수도 값으로 취급할 수 있고 프로퍼티 값으로 사용 가능
- 이렇게 함수를 프로퍼티 값으로 사용하는 경우 메서드라고 부른다.
var circle = {
radius : 5,
getDiameter : function() {
return 2 * this.radius;
}
}
console.log(circle.getDiameter()); // 10프로퍼티 접근
프로퍼티 키를 이용해 값에 접근하는 방법은 두 가지가 존재
- 마침표 표기법
- 대괄호 표기법
var perosn = {
name : 'Jin',
age : 26,
Pability : 50,
from : 'Bucheon',
};
//마침표 표기법
console.log(person.name); // Jin
//대괄호 표기법
console.log(person['age']) // 26- 대괄호 표기법에서 따옴표로 감싸지 않으면 JS Engine에서는 프로퍼티 키를 식별자로 해석
//마침표 표기법
console.log(person.name); // Jin
//대괄호 표기법
console.log(person[age]) // // ReferenceError : age is not defined- 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환 -> ReferenceError가 발생하지 않는다.
var perosn = {
name : 'Jin',
age : 26,
Pability : 50,
from : 'Bucheon',
};
console.log(person.height); // undefined프로퍼티 값 갱신
이미 존재하는 프로퍼티에 값을 할당하면 갱신 성공!
var perosn = {
name : 'Jin',
};
person.name= 'Kim';
console.log(person.name); // 'Kim'프로퍼티 삭제
- delete 연산자는 객체의 프로퍼티를 삭제
- delte 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이여야한다.
- 존재하지 않는 프로퍼티를 삭제하면 에러 없이 무시!
var perosn = {
name : 'Jin',
};
person.age= 26;
console.log(person); // {name : 'Jin', age: 26}
delete person.age; // age 프로퍼티 삭제
delete person.address; // 에러 없이 무시
console.log(person); //{name : 'Jin'}ES6에서 추가된 기능
프로퍼티의 축약 표현
- 프로퍼티 값을 변수로 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름이면 프로퍼티 키를 생략할 수 있다.
- 이 때, 프로퍼티 키는 자바스크립트 엔진에 의해 변수 이름으로 자동 생성된다.
var x = 1, y = 2;
var obj {
x,
y
};
console.log(obj) // { x : 1, y : 2}프로퍼티 키의 동적 생성
- 프로퍼티 키를 동적으로 생성하기 위해서는 대괄호 표기법을 사용해야 한다.
var person = {
name : 'Jin'
}
const school = ["계남초", "계남중", "부천고", "숭실대"];
school.forEach((school, iter) => person[`school${iter+1}`] = school);
console.log(person)
//결과
{
name : 'Jin',
school1 : "계남초",
school2 : "계남중",
school3 : "부천고",
school4 : "숭실대"
}메서드 축약 표현
- ES6부터 메서드를 정의 할 때 functin 키워드를 생략한 축약 표현 사용 가능
ES5
var circle = {
radius : 5,
getDiameter : function() {
return 2 * this.radius;
}
}
console.log(circle.getDiameter()); // 10ES6
var circle = {
radius : 5,
getDiameter() {
return 2 * this.radius;
}
}
console.log(circle.getDiameter()); // 10
Web FrontEnd Developer