기존 블로그에 작성한 내용을 velog로 이전한 글입니다
다양한 자료를 하나로 집합시킨 자료구조이다. 원시값과 달리 변경 가능한 값을 사용한다.
객체는 객체 리터럴, Object 생성자 함수, 생성자 함수, Object.create 메소드, 클래스를 활용하여 만들 수 있다.
// 객체 리터럴
var person = {
number: 1234456,
name: "Yu",
address: "Seoul",
};
객체는 프로퍼티의 집합이다.
프로퍼티는 키와 값으로 이뤄져있다.
// 객체 리터럴
var person = {
number: 1234456, // number는 키, 1234456은 값이다.
name: "Yu",
address: "Seoul",
};
키값에 네이밍 규칙을 준수하지 않을 것이라면 반드시 ''로 감싸야한다.
자바스크립트에서는 함수도 값이므로 프로퍼티로 쓸 수 있다.
프로퍼티로 쓰인 함수를 메소드라고 부른다.
프로퍼티에는 마침표 표기법과 대괄호 표기법으로 접근할 수 있다.
var person = {
name: "Yu",
};
console.log(person.name);
console.log(person["name"]);
대괄호 표기법을 사용할 때 숫자가 아닌 문자열 키이름의 경우 반드시
''
로 감싸서 사용해야 한다.
이미 존재하는 프로퍼티에 값을 새로 할당하면 프로퍼티 값은 갱신 된다.
프로퍼티 동적 생성
존재하지 않는 프로퍼티에 값을 할당하면 새로운 프로퍼티가 생성된다.
프로퍼티 삭제
delete 연산자를 활용해 객체의 프로퍼티를 삭제할 수 있다.
var person = {
name: "Yu",
};
delete person.name; // person은 빈 객체가 된다.
프로퍼티 값으로 변수를 사용하는 경우, 키와 값이 자동으로 생성된다.
var x = 100,
y = 200;
var obj = { x, y };
프로퍼티 키를 동적으로 할당 할 수 있다.
// ES5 -> 객체 밖에서 대괄호 표기법을 사용해야 함
var prefix = "wow";
var i = 0;
var obj = {};
// 프로퍼티 키 동적 생성
obj[prefix + "-" + ++i] = i;
obj[prefix + "-" + ++i] = i;
/// ES6 -> 객체 리터럴 안에서도 ``활용해 사용 가능
var obj = {
[`${prefix}-${++i}`]: i,
[`${prefix}-${++i}`]: i,
};
ES5에서 function을 써야했지만 ES6에선 function 키워드를 생략할 수 있다.
// ES5
var obj = {
name: 'yu'
fucPrint : function() {
console.log(this.name);
}
};
// ES6
var obj = {
name: 'yu'
fucPrint() {
console.log(this.name);
}
};