23/10/13 TIL _ 단축속성명 (property shorthand)

 

 

👀 obj의 자료를 이런식으로도 만들어 낼 수 있다.

1. 변수에 값을 담는다. 
2. 새로운 변수에  obj을 만들고, 그 안에 전에 만들어둔 변수 이름을 넣어준다.
3. 새로만든 obj.변수이름 을 출력하면 마치 객체처럼 해당 값이 출력된다. 

let p = "pop";
let j = "jaze";
let music = { p, j };
console.log(music.p); //pop

이런 방식을 우리는  단축속성명 이라고 부른다. 

 

 

 

🚗 단축속성명 (property shorthand)

 

• 단축속성명은 변수가 미리 준비된 경우, 이를 활용하여 객체의 키와 값을 한번에 정의할 수 있다. 
• 문자열, 함수, 객체 등 자료형에 상관 없이 적용이 가능하다.

 

 

아래 예시를 살펴보자. 

let country = "korea";
let member = {};

let addFamily = function (age, name, rel) {
  this.member[rel] = { age, name }; //key value 선언 및 할당
  console.log(this);
  //{
  //   country: 'korea',
  //   member: { friend: { age: 30, name: 'chaeWon' } },
  //   addFamily: [Function: addFamily],
  // }
};

let family = { country, member, addFamily };

family.addFamily(30, "chaeWon", "friend");

 

조금 복잡한 예시긴 하지만 한번 뜯어보자.

 

일단 단축속성명( property Shorthand ) 이 한눈에 보이는 부분 먼저 살펴보자.

변수 country를 선언하고, family라는 obj에 변수를 넣어줌으로 key&value가 들어갔다.

 

👌

 

 

다음으로 addFamily를 살펴보자.

• addFamily 함수는 family 라는 오브젝트 내부에 있는 함수이다. 
• 오브잭트 내의 함수 안에서 this의 의미는 그 함수를 가지고 있는 오브젝트를 뜻한다.  (console.log(this)로 검증)
• 함수가 실행되면, family.member 키의 값으로 또다른 obj를 넣어준다. 
• 키 이름은 rel,  값은 name, age 인 obj가 생겨난다. 
• 만든 다음 this를 출력했음으로, family라는 obj는  저렇게 값이 들어가 져 있는 상황이 된다. 

 

 

 

 

 

참고한 블로그

https://itstart-190126.tistory.com/entry/ES6%EC%9D%98-%ED%96%A5%EC%83%81%EB%90%9C-%EA%B0%9D%EC%B2%B4-%EB%AC%B8%EB%B2%95-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-%EB%8B%A8%EC%B6%95-%EC%86%8D%EC%84%B1%EB%AA%85

ES6의 향상된 객체 문법 알아보기 - 단축 속성명, 속성 계산명, 비구조화 할당

 

 

 

es6에는 정말 많은 기능들이 들어있는데, 아직 낮설어서 정말 많이 봐야겟다..