By aPOST in 자바스크립트 — 2023년 12월 23일

javascript 객체의 property 속성과 객체의 단축 속성, 단축 메서드, 계산된 속성

ES6부터 새롭게 지원하는 객체의 새로운 표기법 3가지 있습니다.

객체의 접근 및 제어를 단순화해주는 표기법으로 코드 작성량을 줄이는데 도움이 되는 기능입니다.

다만 웹브라우저 호환성 문제가 있을 수 있기 때문에 주의해야하며, 브라우저간 호환성이 필요한 경우 사용을 피해야 합니다.

주의할 점
이 표기법들은 크롬과 파이어폭스에서만 제대로 지원됩니다.

일부 데스크탑용 브라우저와 대부분의 모바일 브라우저에서는 지원되지 않습니다.

사용의 편의성으로 인해 꼭 사용해야 하는 경우 호환성을 확인한 후 사용해야 합니다.

지원되지 않는 브라우저에서는 자바스크립트 문법 에러로 처리됩니다.

단축 속성명

"키:밸류" 방식의 객체 속성 표시 방법을 대신해 미리 선언한 변수들을 나열함으로써 객체를 생성할 수 있습니다.

미리 생성되어있는 데이터나, 파라메터로 전달 받은 데이터들을 재사용할 수 있기 때문에 추가의 객체 리터럴 코드를 작성하지 않아도 되는 장점이 있습니다.

let name = '라이언';let age = 5;let getName = function(){  return this.name;}
let friends = {name, age, getName};console.log(friends.getName());

객체에 메서드를 포함할 경우, "function" 표시를 생략할 수 있습니다.

속성이름: function(){} => 속성이름(){} 으로 줄여서 표시할 수 있습니다.

let calc = {    add(a, b){return a+b;},     multiply(a, b){return a*b;},     subtract(a, b){return a-b;}}console.log(calc.add(1,2));

꺽쇠괄호( [] ) 로 속성 이름을 감싸면 속성 이름을 동적으로 만들 수 있습니다.

꺽쇠괄호 안에는 자바스크립트 내장 함수, 메서드, 계산식, 변수를 넣을 수 있습니다.

순서 번호가 붙는 속성 이름을 여러개 사용하는 객체를 생성하는 경우 사용할 수 있습니다.

let idx = 0;let obj = {["name" + ++idx]: idx, ["name" + ++idx]: idx, ["name" + ++idx]: idx};console.log(obj);