자바스크립트는 동적으로 객체의 프로퍼티를 추가할 수 있습니다. 동적 프로퍼티 추가는 객체를 보다 유연하게 다루는 데 도움이 됩니다. 하지만 동적 프로퍼티를 추가할 때 주의해야 할 몇 가지 사항이 있습니다.

1. 프로퍼티 충돌 회피

동적으로 프로퍼티를 추가할 때 이미 존재하는 프로퍼티와 이름이 충돌할 수 있습니다. 이런 경우 덮어쓰기를 방지하기 위해 해당 프로퍼티가 이미 존재하는지를 먼저 확인해야 합니다.

const obj = {
  name: 'John'
};

if (!obj.hasOwnProperty('age')) {
  obj.age = 30;
}

2. 프로토타입 체인 고려

프로토타입 체인을 따라 상위 객체에서 동적으로 프로퍼티를 추가하는 경우, 원하는 대상 객체에 프로퍼티가 추가되는 것이 아니라 상위 프로토타입 객체에 프로퍼티가 추가될 수 있습니다. 이를 원치 않는다면 hasOwnProperty 메서드를 사용해야 합니다.

function Person() {}
Person.prototype.greet = function() {
  console.log('Hello!');
};

const john = new Person();
john.name = 'John';

3. 보안 고려

사용자 입력과 같이 안전하지 않은 원본으로부터 받은 값으로 동적으로 프로퍼티를 추가하는 경우, 해당 값이 의도치 않은 동작을 유발할 수 있습니다. 이러한 경우, 안전한 방어적인 프로그래밍을 통해 보안을 고려해야 합니다.

const userInput = getUserInputFromUntrustedSource();
const sanitizedInput = sanitizeInput(userInput);
obj[sanitizedInput] = 'some value';

동적 프로퍼티 추가는 자바스크립트의 강력한 기능 중 하나이지만, 위와 같은 주의 사항을 지켜야 합니다.

이상으로 자바스크립트 동적 프로퍼티 추가시 주의 사항에 대해 살펴보았습니다.

참고 자료: MDN Web Docs