[JavaScript] 객체 접근연산자와 동적 바인딩

 소스타임

• 코드가 작성되는 시점

 

실행타임(런타임)

• 코드가 동작하는 시점

 

런타임에서, 작성된 객체 안에 새로운 값을 넣어줄 때, 접근연산자를 사용한다.

 

객체 접근연산자 종류

• .(dot)
• [ ] braket

const obj = {
	id: 'clara',
};

obj.name = 'hyejin'; //name이라는 key를 생성 후, 'hyejin'이라는 값을 할당

console.log(obj); //{ id: 'clara', name: 'hyejin' }

 

자바스크립트 객체의 동적바인딩(문법)

• 동적으로 실행시간에 새로운 키에 새로운 값을 연결시킨다.

 

객체의 속성에 접근하는 접근연산자 2가지의 차이점

console.log(obj['name'])
// 'name'는 문자열
// 값(데이터)이다.
// 실행시간(런타임)에 값을 바꿀 수 있다.

console.log(obj.name)
// name은 식별자
// 식별자 명명규칙(네이밍규칙)이 적용됨
// 식별자는 코드이다.
// 코드는 실행시간(런타임)에 값을 바꿀 수 없다.

 

[ ]를 사용하여 객체 속성에 접근하는 방식은, 

• 외부로 부터 입력되는 데이터를 코드와 분리할 수 있다
• 분리한다는 것은 소스타임 코드안에 에 그 데이터가 없을 수 있다
• [ ] 안의 값을 밖으로 빼낼 수 있다

const attr = 'name';

console.log(obj[attr]);

 

• 사용자로부터 데이터를 입력받는다면, 동적으로 값을 할당 받는다.

const yourname = prompt("what's your name?"); // 사용자의 이름을 입력받음(외부에서 데이터 입력)

console.log(obj[yourname]);

 

• 키값 안에 공백이 가능하다 하지만 나는 난잡해서 안씀

obj['age number'] = 40;
console.log(obj); //{ id: 'clara', name: 'hyejin', 'age number': 40 }

위의 개념을 확장하면, 소스타임에서 코드를 작성할 때도 사용 가능

 

const myObj = {
	['age number']: 30,
}

myObj.name = 'person';

console.log(myObj);