본문 바로가기

Javascript/Javascript초급

객체의 단축 속성명, 단축 메서드명, 계산된 속성명

반응형

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

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

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



!주의할 점


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

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

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

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



단축 속성명


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

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


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

let friends = {nameagegetName};
console.log(friends.getName());





단축 메서드명


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


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


let calc = {
    add(ab){return a+b;}, 
    multiply(ab){return a*b;}, 
    subtract(ab){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);



반응형

닫기