10 객체 리터럴

이재철·2021년 8월 29일

javaScript

목록 보기

2/19

객체

var counter = {
  cnt: 0, // 프로퍼티
  increase: function() {
  	this.cnt++;
  } //메서드
}

프로퍼티: 객체의 상태를 나타내는 값을 뜻함(data)
메서드: 프로퍼티를 참조하고 조작할 수 있는 동작을 뜻함(function)

객체 리터럴의 객체 생성

객체의 리터럴 사용

중괄호({...}) 내에 0개 이상의 프로퍼티를 정의함

var person = {
  name : 'CHU',
  item : function () {
  	console.log(`Hello! ${this.name}`);
  }
};

console.log(typeof person); // object
console.log(person); // {name: 'CHU', item: f}

프로퍼티

객체는 프로퍼티의 집합, 프로퍼티는 키와 값으로 구성됨

ver person = {
  name: 'CHU', // 프로퍼티 key: name, 값: 'CHU'
  age: 40,
  last-name: 'KING' // SyntaxError: Unexpected token - 네이밍 규칙을 따라야함
}

프로퍼티 키: 빈 문자열을 포함하는 모든 문자열, 심벌값
프로퍼티 값: 자바스크립트에서 사용할 수 있는 모든 값

프로퍼티 동적생성

let obj = {};
const key = 'hello';
obj[key] = 'world'
// var obj ={ [key]: 'world' } => {hello: "world"}

const test ={'': ''}; //빈 문자열도 프로퍼티 키로 사용가능
console.log(test); // {"": ""}

예약어는 프로퍼티 키(var, function 등등)로 사용해도 에러가 발생하지 않지만 권장하지 않음

const test = {
  name: 'LEE',
  name: 'KIM'
}
console.log(test); // {name: 'KIM'} 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.

메서드

자바스크립트에서 사용할 수 있는 모든 값
프로퍼티 값이 함수일 경우 일반함수와 구분하기 위해 메서드(method)라고 칭함 즉, 메서드는 객체에 묶여있는 함수

const circle = {
	item : 5, // 프로퍼티
  	getDiameter: function() { // 메서드
    	return 2 * this.item; // this는 item을 가리킴
    }
}

프로퍼티 접근

마침표 표기법 : 마침표 프로퍼티 접근 연산자(.)를 사용
대괄호 표기법 : 대괄호 프로퍼티 접근연산자([...])를 사용

대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 함

const person = {
  name: 'KIM'
};

console.log(person.name); // KIM 마침표 표기법
console.log(person['name']); // KIM 대괄호 표기법
console.log(person[name]); // ReferenceError: name is not defined
console.log(person.age); // undefined

프로퍼티 값 갱신 / 생성 / 삭제

프로퍼티 값 갱신

let person = {
	name: 'KIM' 
};
person.name = 'LEE';
console.log(person); // {name: 'LEE'} 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신

프로퍼티 동적 생성

let person = {
  name: 'KIM'
};

person.age = 20; // age 프로퍼티가 동적 생성되고 값이 할당됨 person['age'] = 20;
console.log(person); // {name: 'KIM', age:20}

프로퍼티 삭제

let person = {
	name: 'KIM'
};
person.age = 20;

delete person.age; // age 프로퍼티 동적 생성
delete person.phone; // 프로퍼티가 존재하지 않는다면 삭제가 불가능, 에러발생x

console.log(person); // {name: 'KIM'}

ES6 객체 리터럴의 확장

프로퍼티 축약 표현

ES6에는 프로퍼티 값이 변수인 경우 변수 이름과 프로퍼티 키가 동일한 경우 생략 가능
프로퍼티 키는 변수 이름으로 자동생성

let x = 1, y = 2;
const obj = { x, y };
console.log(obj); // {x: 1, y: 2}

계산된 프로퍼티 이름

계산된 프로퍼티 이름 : 프로퍼티 키를 동적 생성 가능, 표현식을 대괄호([...])로 묶어야함
객체 리터럴 외부에서 대괄호([...]) 표기법 사용

ver pre = 'pre';
var i = 0;

obj[pre+'-'+ ++i] = i;
obj[pre+'-'+ ++i] = i;

console.log(obj); // {pre-1: 1, pre-2: 2}

const obj2 = {
  [`${pre}-${++i}] : i
};

console.log(obj2); // {pre-1: 1}

메서드 축약

const obj = {
	name: 'KIM',
  	sayHi() {
    	console.log('Hi!' + this.name);
    }
  	//sayHi: function() {
		// console.log('Hi!' + this.name);
  	//}
};

obj.sayHi(); // Hi! KIM