✅ 출처 : 다시 처음부터 자바스크립트 게시글은 이웅모(님) '모던 자바스크립트 Deep Dive' 를 기록합니다
🧐 자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 "모든 것"이 객체다. 원시값을 제외한 나머지 값 (함수, 배열, 정규표현식 등)은 모두 객체다.
• 객체란?
객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키 , 값 으로 구성된다.
원시타입의 값, 즉 원시 값은 변경 불가능한 값 이지만
객체타입의 값, 즉 객체는 변경 가능한 값이다.
var person = {
name : 'Lee', //프로퍼티
age : 20, //프로퍼티
};
// name, age 는 프로퍼티 key
// 'Lee' , 20 은 프로퍼티 값!자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다.
함수도 프로퍼티 값으로 사용할 수 있다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해
메서드 라 부른다.
var counter = { num : 0, // 프로퍼티 increase : function() { // 메서드 this.num++; } };
- 프로퍼티 : 객체의 상태를 나타내는 값(data)
- 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작
• 프로퍼티
객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.
프로퍼티 키는 프로퍼티 값에 접근할 수 있는 이름으로서 식별자 역할을 한다.
일반적으로 프로퍼티 키로 문자열을 사용한다 . 하지만! 식별자 네이밍 규칙을 준수하지 않는 이름은 따옴표로 포로퍼티 키값 가능!
var person ={
firstName : 'kyuchan',
'last-name' : "moon",
}
console.log(person) // {firstName : 'kyuchan' , 'last-name : 'moon'}⭐️ 계산된 속성명
문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키를 동적! 으로 생성할 수도 있다. 이 경우는 프로퍼티 키로 사용할 표현식을 대괄호 ([...])로 묶어야 한다.
var obj={};
var key = "hello";
obj[key] = "world" ---> var obj={ [key] : 'world'};
console.log(obj); // {hello : "world"} 프로퍼티 접근
프로퍼티에 접근하는 방법은 두가지다.
- 마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법
- 대괄호 프로퍼티 접근 연산자 ( [...] ) 를 사용하는 대괄호 표기법
var person = {
name: 'lee'
};
//마침표 표기법에 의한 프로퍼티 접근
console.log(person.name) // lee
//대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']) // lee대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다!!
• ES6에서 추가된 객체 리터럴의 확장 기능
프로퍼티 축약 표현
프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름!일 때 프로퍼티 키를 생략 할 수 있다. 이때 프로퍼티 키는 변수 이름으로 자동 생성된다.
var x=1, y=2;
var obj={
x:x,
y:y
}
console.log(obj) // {x:1 , y:2}
//위의 결과와 같다
const obj={x,y};
console.log(obj); // {x:1 , y:2}메서드 축약 표현
메서드를 정의할 때 function 키워드를 생략한 축약 표현을 사용할 수 있다.
var obj = {
name: 'lee',
sayHi : function(){
console.log('Hi' + this.name );
}
};
obj.sayHi(); // Hi lee
----------------메서드 축약 표현
const obj ={
name: 'lee',
sayHi(){
console.log('Hi' + this.name);
}
};
obj.sayHi(); // Hi lee메서드 축약 표현으로 정의한 메서드는 프로퍼티에 할당한 함수와 다르게 동작합니다. 이에 대해서는 '메서드' 에서 자세히 살펴봅시다~ (궁금하네...)
