자바스크립트, 프로퍼티 활용에 대해 알아보기

출퇴근길에 공부하는 자바스크립트1

프로퍼티 값 갱신

자바스크립트 객체의 프로퍼티는 언제든지 쉽게 갱신할 수 있다. 단순한 연산자인 `=`를 사용하면 된다.

const dog = { name: 'Max' };
console.log(dog.name); // 출력: Max
dog.name = 'Buddy';
console.log(dog.name); // 출력: Buddy

동적 프로퍼티 생성

동적 프로퍼티 생성은 자바스크립트 객체의 또 다른 강점이다. 객체를 선언한 후, 언제든지 새로운 프로퍼티를 추가할 수 있다.

dog.age = 3; // 새로운 프로퍼티 'age' 추가
console.log(dog.age); // 출력: 3

이러한 동적 프로퍼티 생성은 사용자 입력이나 외부 데이터 등에 기반하여 프로그램이 실행되는 중에 프로퍼티를 추가해야 할 때 유용하게 활용된다.

프로퍼티 삭제

프로퍼티 삭제는 delete 연산자를 이용하여 객체에서 특정 프로퍼티를 삭제할 수 있다. 삭제 후 해당 프로퍼티에 접근하면 undefined가 반환이 된다.

delete dog.age;
console.log(dog.age); // 출력: undefined

ES6 객체 리터럴의 확장 기능

ES6에서는 객체 리터럴을 간편하게 사용할 수 있도록 다양한 문법을 도입했다.

프로퍼티 축약

변수 이름과 프로퍼티 이름이 같을 경우, 하나로 축약하여 작성할 수 있다.

const x = 10, y = 20;
const point = { x, y };

계산된 프로퍼티 이름

변수를 통해서 동적으로 프로퍼티 이름을 생성할 수 있다.

const propName = 'score';
const user = {
[propName]: 100
};

메서드 축약

function 키워드 없이 메서드를 간단히 작성할 수 있다.

const obj = {
greet() {
console.log('Hello!');
}
};

자바스크립트의 객체 리터럴은 코드의 가독성을 높이고, 상태와 동작을 효과적으로 캡슐화할 수 있도록 많은 기능을 제공한다. 동적으로 프로퍼티를 추가하거나 삭제할 수 있으며, ES6의 새로운 문법을 활용해 코드를 더 간결하게 작성할 수 있을 것이다.