[JS] Object 변수 데이터 추가, 문자열(String)을 이용한 동적 접근 방법

🥸 JavaScript Object 객체 문자열을 이용해 동적으로 데이터 추가, 삭제하기

 

자바스크립트의 Object 객체는 key, value 형태도 데이터를 저장합니다.

🤔 프로퍼티 접근법으로 데이터 추가, 대체 하기

var object = {};

object.arr = [];	// obect에 arr가 없다면 빈 배열([])을 추가, 존재한다면 대체
console.log(object);    // { arr: [] }

object.arr.push('first');	// object 안의 arr에 문자열 'first' 추가
console.log(object.arr);    // [ 'first' ]

object.arr = [];	// 기존에 있는 arr를 빈 배열로 대체
console.log(object.arr);    // []

위 코드와 같이 '.'을 사용해서 property에 바로 접근할 수 있습니다.

 

object.key = value 형태로 데이터를 추가할 수 있습니다. 만약, 이미 key가 존재한다면 새로운 value로 대체 됩니다.

🤔 문자열 변수로 동적 접근 하기

var object = {};

object.arr = [];

var key = 'arr';
object['arr'].push('first');
object[key].push('second');
console.log(object.arr);    // [ 'first', 'second' ]

객체의 대괄호([]) 안에 key의 문자열을 직접 입력하면 데이터에 접근할 수 있습니다.

 

변수에 문자열을 담아서 위 방법으로 접근하면 동적으로 데이터에 접근하여 값을 추가, 제거, 수정 할 수 있습니다.

🤗 종합 코드 보기

// Object 접근 테스트
var object = {};

object.arr = [];
console.log(object);    // { arr: [] }

object.arr.push('first');
console.log(object.arr);    // [ 'first' ]

var key = 'arr';
object[key].push('second');
console.log(object.arr);    // [ 'first', 'second' ]