02. 객체 리터럴, 프로퍼티 접근과 갱신, ES6 활용 방법

객체 리터럴

객체 리터럴에 의한 객체 생성

리터럴(literal)이란 단순하게 우리가 특정 데이터의 모양을 직접 구현해 만든 데이터를 뜻합니다.

자바스크립트는 literal 또는 initializer 표기법으로 객체를 생성할 수 있습니다. 중괄호 안에 프로퍼티를 갖는 객체를 빠르게 생성할 수 있습니다. 중괄호{} 안에 넣고 콤마로 구분해 key: value의 목록을 작성하면 됩니다. 객체 리터럴은 특정한 지표 없이 우리가 직접 만들어낸 객체를 뜻합니다.

객체 리터럴은 자바스크립트 개발자들에게 상당히 편리한 개발을 할 수 있게 도와줍니다. 클래스 기반의 언어인 경우(C++, Java) 객체를 활용하기 위해서 해당 객체가 어떤 모양일지 사전에 필수로 설명서를 작성해야 합니다. 객체를 생성하기 위한 클래스를 제작하고, new키워드를 통해 인스턴스(클래스를 활용해 생성한 객체를 뜻함)를 만들어 주어야 합니다.

자바스크립트 역시 클래스 생성이 가능합니다만, 굳이 클래스를 활용해 객체 인스턴스의 모양을 사전에 설정해줄 필요가 없습니다. 객체 리터럴로 직접 구현해 생성할 수 있기 때문이죠.

const cat = {
	name: 'cookie',
	age: 2, 
	position: [x, y],
	sayHello: function() {
		console.log('야옹');
	},
	walk: function(update_x, update_y) {
		this.position: [update_x, update_y]
	},
};

객체 리터럴은 중괄호 {} 안에 0개 이상의 프로퍼티를 정의함으로써 활용이 가능합니다.

객체 리터럴은 변수가 할당되는 시점에 자바스크립트가 해석하여 생성합니다. 프로퍼티가 0개일 경우 빈 객체를 생성하게 됩니다.

함수의 중괄호 {}는 특정 동작을 설명해주는 코드블록으로 끝나는 부분에 ;을 붙여주지 않습니다. 객체 리터럴은 데이터 값을 가진 표현식으로 끝나느 부분에 ;를 붙여주게 됩니다.

 

 

 

 

---

 

객체의 프로퍼티 접근/추가/수정/삭제하는 방법

프로퍼티 접근

객체 프로퍼티에 접근하는 방법은 두가지가 있습니다.

• 점 표기법(dot notation)
  • 객체명 우측에 콤마.를 두고 객체 속성으로 정의된 키 이름을 작성합니다.
  • 이때 네이밍규칙에 권장되지 않던 문자열(예. 123num , he+llo 등) 키 이름의 경우 에러를 발생하게 됩니다.
  • dot notation을 활용하는 경우, 프로퍼티의 키값은 알파 누메릭으로 이루어져야만 합니다. (a~z, A~Z, 0~9, _, $를 제외한 다른 키를 사용할 수 없으며 숫자가 제일 앞에 위치한 것도 불가능합니다.
• 괄호 표기법(bracket notation)
  • 객체명 우측에 대괄호[] 안에 키 값을 문자열로 작성합니다.
  • 문자열로 작성되기 때문에 네이밍규칙에 권장되지 않던 문자열도 사용 가능합니다.
  • 키 값을 동적이게 활용이 가능합니다

 

 

bracket notation의 활용

let menu = prompt('짜장면과 짬뽕 중 선택해주세요');

let obj = {
  '짜장면': 7000,
  '짬뽕': 8000,
};

if (menu === '짜장면' || menu === '짬뽕') {
  let price = obj[menu]; 
  console.log(`${menu}는 ${price}원입니다.`);
} else {
  console.log(`${menu}은 없습니다.`);
}

• bracket notation는 변수를 활용해 동적이게 객체에 접근이 가능합니다.
• dot notation의 경우 객체명.변수로 접근할 경우 변수와 동일한 키값을 찾기 때문에 각각의 값마다 해당하는 키값을 찾아 매칭시켜 구현해주어야하는 번거로움이 발생합니다. 
• dot notation은 직관적이고 쉽게 사용할 수 있다는 장점이 있고, 변수를 활용해 객체에 접근하는 등의 다이나믹한 활용에는 bracket notation을 사용해 객체에 접근할 수 있습니다.

 

 

 

프로퍼티 값 갱신

생성된 객체 리터럴에는 언제든지 프로퍼티 값을 추가,수정,삭제할 수 있습니다.

객체명.키값 = {데이터};
객체명['키값'] = {데이터};

• 존재하지 않는 키값에 값을 할당하면 객체에 새로운 프로퍼티가 추가됩니다.
• 키값이 이미 객체명에 있는 경우 기존 키값과 매칭된 값이 대치됩니다.

 

 

프로퍼티 삭제

`delete`연산자를 사용해 객체에 존재하는 프로퍼티를 제거할 수 있습니다.

delete 객체명.삭제할키값;
delete 객체명['삭제할키값'];

• 이때 delete 연산자가 접근할 객체에 해당 프로퍼티가 존재하지 않아도 특별한 에러가 발생하지 않고 코드실행을 종료시킵니다.

 

 

---

ES6

프로퍼티 축약 표현 (ES6)

ES6부터 추가된 단축 속성명으로 객체를 더 쉽게 정의할 수 있습니다.

let name = '좋아요요정';

const obj = { name: name }; // { name: '좋아요요정' }
const obj2 = { name };  //  { name: '좋아요요정' } 동일

• 변수가 미리 준비되어 있는 경우 활용이 가능합니다.
• 변수명으로 프로퍼티의 키와 값을 축약해 한번에 정의를 가능합니다.

 

 

메서드 축약 표현 (ES6)

ES6 에서는 메서드를 축약표현으로 선언이 가능합니다. 기존 프로퍼티의 키: 값 형태로 메서드명 : function() {} 을 작성해주어야 했다면, 이젠 메서드명() {} 으로 축약해 선언 가능합니다.

//기존 코드 
const cat = {
	name: 'cookie',
	sayHello: function() {
		console.log('야옹');
	},
};

//메서드 축약 표현
const cat2 = {
	name: 'latte',
	sayHello() {
		console.log('야아옹');
	},
};

 

 

 

계산된 프로퍼티 이름 (ES6)

ES6부터 추가된 계산된 프로퍼티 이름으로 객체 속성을 추가하는 방법입니다.

• 대괄호[]안에 식을 넣거나 변수를 대입하여 동적으로 객체 속성들을 생성할 수 있습니다.
• bracket notation []안에 자바스크립트 내장함수, 메서드, 계산식, 변수를 이용할 수 있고 순서가 붙는 속성 이름을 여러개 사용하는 객체를 생성할 때 유용합니다.(ex. obj[key + i] , [profile.split(':')[0]] )

사용 예시

// 계산된 속성명 미사용, 기존코드
function makeObject1(key,value) {
    const obj = {};   
    obj[key] = value;
    return obj
}
// 계산된 속성명 사용
function makeObject2(key,value) {
    return {[key]:value}        // 계산된 속성명 [key]
}

const cat = makeObject2('name', 'cookie');
// console.log(cat)  { name: 'cookie' }

const users = [
  {
    name: '오렌지꿀주먹',
    email: 'abc@abc.com',
  },
  {
    name: '웃는도넛',
    email: 'ice@abc.com',
  },
];

const messageSubject = '$name님을 위한 특별한 선물!';
const messageBody = '저희 게임을 이용해주셔서 감사합니다. $name이 2022년에도 잘 부탁드려요.';

const obj = {};

for (let i = 0; i < user.length; i++) {
	obj[receiver_+i] = users[i].email;
	obj[subject_+i] = messageSubject.replace('$name', users[i].name);
	obj[message_+i] = messageBody.replace('$name', users[i].name);

console.log(obj);

//{
//	message_0: "저희 게임을 이용해주셔서 감사합니다. 오렌지꿀주먹이 2022년에도 잘 부탁드려요.",
//	message_1: "저희 게임을 이용해주셔서 감사합니다. 웃는도넛이 2022년에도 잘 부탁드려요.",
//	receiver_0: "abc@abc.com",
//	receiver_1: "ice@abc.com",
//	subject_0: "오렌지꿀주먹님을 위한 특별한 선물!",
//	subject_1: "웃는도넛님을 위한 특별한 선물!"
//}

 

---

 

 

저는 C++이나 클래스기반의 언어에서  객체를 사용하는 것에 대해서 알지 못했는데,  Java언어로 작성된 예제로 객체를 생성하는 것을 보니 정말 새로웠습니다.ㅎㅎ (자바스크립트.. 다시 보니 선녀같다!) 프로퍼티에 접근하는 방법 2가지 모두 혼용해 사용하고 있었지만, 에러를 확인하고 다른 방법으로 진행하는 정도였는데 이렇게 정의를 내리니 언제 어떤 방식을 사용해야겠다! 감이 옵니다. 좋습니다.

ES6에 추가된  축약, 계산된 프로퍼티를 사용하는 것은 아예 잊고있었네요.. 리팩토링한 부분을 찾아봐야겠습니다.

행복한 크리스마스되세요. 감사합니다.

 

 

JavaScript 스터디 팀 러버덕과 함께 합니다.