[Javascript] Object 생성시 key를 변수에 담긴 문자로 사용하는 방법

Javascript를 이용해서 데이터를 주고 받을때에는 보통 Object를 사용합니다. 통신을 위해서는 JSON Object를 많이 사용하죠. 이때 변수에 담긴 문자 또는 문자열을 Object의 key로 사용하려 할때가 있습니다.

이번 포스팅에서는 Javascript Object 생성시 변수에 담은 문자열을 key로 사용하는 방법을 알아보겠습니다.

---

Javascript Object 만들기

Javascript의 Object에 관련된 내용은 아래 포스팅에 자세하게 설명해두었습니다.

2021.05.01 - [쿤즈 Dev/HTML & CSS & Javascript] - [Javascript] Object의 생성과 사용 방법

[Javascript] Object의 생성과 사용 방법

Object를 구성하는 방법은 매우 간단합니다. 사용하던 도중에 한 가지 의문점이 발생했습니다. 만약 Object의 key를 직접 정하지 않고 입력받은 문자열을 key로 사용할수는 없을까 하고 말이죠.

 

예를들어서 어떤 데이터를 정렬하기 위해서 필드값은 username이고 역순으로 정렬하기 위한 desc 값을 넣어보겠습니다.

const order = 'desc';

const reqobject = {
	username : order
}

console.log(reqobject);

이와같이 데이터를 만들어서 보낼 수 있습니다. 그렇다면 만약 key가 되는 값도 변경이 된다면 어떨까요?

const sorter = 'username';
const order = 'desc';

const reqobject = {
	sorter : order
}

console.log(reqobject);

이 경우에는 제가 원하는 데이터가 아닙니다. 저는 아래와 같은 데이터를 원합니다.

// 원하는 데이터
reqobject = {
	username : 'desc'
}

// 실제 데이터
reqobject = {
	sorter : 'desc'
}

변수 sorter에는 username이라는 문자열이 저장되어있지만 이 값을 Javascript Object의 key로 넣을때는 다른 방법이 필요합니다.

---

문자열을 Javascript Object의 key로 사용하는 방법

이전에는 다음과 같이 사용할 수 있었습니다.

const sorter = 'username';
const order = 'desc';

let reqobject = {};
reqobject[sorter] = order;

console.log(reqobject);

빈 Object를 하나 만들고 여기에 대입해서 사용할수 있습니다. 하지만 ES6부터는 아래와 같은 방법을 이용합니다.

const sorter = 'username';
const order = 'desc';

const reqobject = {
	[sorter] : order
}

console.log(reqobject);

훨씬 간단한 방법입니다. ES6 이상부터 문법이 간결해지고 유효성 검사 또한 좋아진것 같습니다.

---

이번 포스팅에서는 Javascript Object를 생성할 때 변수에 저장된 문자열을 key로 사용해서 Object를 만드는 방법에 대해서 알아보았습니다. 도움이 되셨으면 합니다. 이상입니다.