Javascript ES6+ 객체의 향상된 기능들

 

 

객체의 향상된 기능들

 

 

 

 

shorthand property

 

var x = 10
var y = 20
var obj = {
  x: x,
  y: y
  
  
const x = 10
const y = 20
const obj = {
  x,
  y

 

• 두 코드를 비교해보면 ES6+의 새로운 기능추가로 프로퍼티가 축약된 것을 확인 할 수있다.
• 또 프로퍼티의 key와 value에 할당할 변수명이 동일한 경우 value 생략 가능하다.

 

 

 

 

const convertExtension = function (fullFileName) {
  const fullFileNameArr = fullFileName.split('.')
  const filename = fullFileNameArr[0]
  const ext = fullFileNameArr[1] && fullFileNameArr[1] === 'png' ? 'jpg' : 'gif'
  return {
    filename, //  filename: filename
    ext       //   ext: ext
  }
}
convertExtension('abc.png')

//결과:
//{filename: "abc", ext: "jpg"}

 

• 함수에서 객체를 리턴할 때도 프로퍼티가 생략이 가능하다.
• 위의 코드를 보면 리턴할 프로퍼티 값을 생략이 가능 하다는 것을 이용하여 변수를 선언할 때 프로퍼티 값을 생략하기 위해 프로퍼티 값과 똑같이 지어놓았다.

 

 

 

 

 

 

concised method

 

var obj = {
  name: 'foo',
  getName: function () { return this.name }
  
                        

↓

const obj = {
  name: 'foo',
  getName () { return this.name }
}
  

 

• 객체안에 있는 메소드 함수를 간결하게 줄일 수 있는 기능도 있다.
• 하지만 메소드를 간결하게 줄이지 않은 것과 줄인 메소드는 차이가 있다. 간결하게 메소드를 줄인 것은 프로토타입이 존재하지가 않아 새로운 생성 함수를 만들지 못하게 한다.
• 이 의미는 원래 함수로서 생성자 함수와 생성 함수 두 가지로 존재할 수 있었지만 생성 함수를 막고 다른 일을 하지 말라는 거다. 즉 함수가 가벼워져 성능이 더 개선되는 효과를 볼 수 있다.

 

 

 

 

const Person = {
  greeting () { return 'hello' }
}
const friend = {
  greeting () {
    return 'hi, ' + super.greeting()
  }
}
Object.setPrototypeOf(friend, Person)
friend.greeting()

//결과;
//"hi, hello"

 

• 위와 같이 메소드를 간결하게 표현할 수 있다.
• 위의 코드를 해석해보자면 메소드 .setPrototypeOf(friend, Person)는 두 번째 인자인 Person을 생성자로 지정하고 첫 번째 인자인 friend는 Person의 생성 함수라고 볼 수 있다. 즉 friend는 Person보다 하위에 위치한다고 볼 수 있다.
• 이때 `super`는 상위 클래스에 접근 가능하도록 하는 기능을 가지고 있어 위의 코드 결과를 보고 super가 생성 함수 friend 안에서 friend 자신의 상위 함수인 Person의 함수를 가져오게 끔 하게 한 것을 유추할 수 있다.

 

 

 

 

 

 

computed property

 

 

var className = ' Class'
var obj = {}

obj.'ab cd' = 'AB CD' // 오류 - 점 뒤에 문자열은 올수 없음.
}

obj = {
  'ab cd': 'AB CD' //가능 - 객체 안에서는 문자열 가능함.
}

obj['ab cd'] = 'AB CD'//가능 - 대괄호를 해주어 문자열 또한 가능해짐.


var obj = {
  'A' + className: 'A급'//오류 - 객체 안에서 값 및 식 계산은 되지 않는다.
}

obj['A' + className] = 'A급'//가능 - 대괄호를 해주어 가능해짐.

const obj2 = {
  'ab cd':
  ['A' + className]: 'A급'//가능 - 대괄호만 해주면 값 및 식 계산도 가능해짐.
}

 

• 객체 리터럴 선언시 프로퍼티 키값에 대괄호 표기로 접근 가능해졌다.
• 또 대괄호 내에는 값 또는 식을 넣어 조합할 수도 있다.

 

 

 

 

 

 

 

property enumeration order

 

 

const obj1 = {
  c: 1,
  2: 2,
  a: 3,
  0: 4,
  b: 5,
  1: 6
}
const keys1 = []
for (const key in obj1) {
  keys1.push(key)
}
console.log(keys1) 
// ["0", "1", "2", "c", "a", "b"]


const obj2 = {
  [Symbol('2')]: true,
  '02': true,
  '10': true,
  '01': true,
  '2': true,
  [Symbol('1')]: true
}
const keys2= []
for(const key in obj2) {
  keys2.push(key)
}
console.log(keys2)
// ["2", "10", "02", "01"]

console.log(Reflect.ownKeys(obj2)) 
// ["2", "10", "02", "01", Symbol(2), Symbol(1)]


const obj3 = Object.assign({}, obj1, obj2)
const keys3= []
for(const key in obj3) {
  keys3.push(key)
}
console.log(keys3) 
// ["0", "1", "2", "10", "c", "a", "b", "02", "01"]

console.log(Reflect.ownKeys(obj3)) 
// ["0", "1", "2", "10", "c", "a", "b", "02", "01", Symbol(2), Symbol(1)]

 

number &rarr string &rarr symbol 의 순서로 정렬된다.

 

 

• number key는 프로퍼티들 중 가장 앞에 위치하며, 오름차순이다.
• string key는 객체에 추가된 당시의 순서를 유지하면서 숫자 뒤에 위치한다.
• Symbol key는 객체에 추가된 당시의 순서를 유지하면서 제일 마지막에 위치한다.

※ Reflect.ownKeys이라는 메소드는 심볼 또한 추출하게 한다.

 

 

예외

 

• 0 이상의, 첫째자리가 0이 아닌 수는, 문자열로 입력해도 똑같이 숫자로 인식한다.
• 첫째자리가 0인 두자리 이상의 숫자는 문자열로 입력해야 하고, 문자열로 인식한다.
• 음수는 문자열로 입력해야 하고, 문자열로 인식한다.