정보실

웹학교

정보실

javascript JavaScript Spread 연산자로 할 수 있는 것을 모르는 3 가지 이상한 사실 🥳

본문

ES6 언어에 포함 된 이래로 스프레드 시트 연산자는 JavaScript 커뮤니티에서 적극적으로 채택되었습니다. 

많은 공통 객체 및 배열 조작 패턴을 크게 단순화합니다.


https://dev.to/harrison_codes/3-weird-things-you-probably-didn-t-know-you-can-do-with-the-javascript-spread-operator-2fln 


일반적인 용도는 널리 인식되고 활용되지만, 약간 더 모호한 패턴을 용이하게 합니다.


1) 조건부로 객체에 속성 추가 


특히 흔하지는 않지만 어떤 이유로 든 조건부로 객체에 속성을 추가하려고 한다고 상상해보십시오. 

특히 속성 값이 true 인 경우 속성을 추가하려고 하지만 속성이 null이거나 undefined거나 값이 잘못된 경우 제외 할 수 있습니다. 

어떻게 접근 할 수 있습니까?


합리적인 접근 방식은 다음과 같습니다.


const firstName = 'Harrison'
const lastName = null
const address = '123 Street Rd'
const phoneNumber = null

const userInfo = {}

if (firstName) {
  userInfo.firstName = firstName
}

if (lastName) {
  userInfo.lastName = lastName
}

if (address) {
  userInfo.address = address
}

if (phoneNumber) {
  userInfo.phoneNumber = phoneNumber
}

console.log(userInfo)

// {
//   firstName: 'Harrison',
//   address: '123 Street Rd'
// }


이 접근 방식에는 아무런 문제가 없습니다. 그러나 스프레드 연산자를 사용하면 조건부 논리를 객체 리터럴 내부로 옮길 수 있습니다.


결과는 다소 간결하며, 일단 당신이 그것을 몇 번 본 후에는 실제로 더 읽기 쉽습니다.


const firstName = 'Harrison'
const lastName = null
const address = '123 Street Rd'
const phoneNumber = null

const userInfo = {
  ...firstName && { firstName },
  ...lastName && { lastName },
  ...address && { address },
  ...phoneNumber && { phoneNumber }
}

console.log(userInfo)

// {
//   firstName: 'Harrison',
//   address: '123 Street Rd'
// }


이전에 이 패턴을 보지 못했다면 진행 상황을 파악하는 데 1 초가 걸릴 수 있습니다. 나는 설명하려고 노력할 것이다.


속성을 객체에 추가해야 하는 경우 객체 리터럴 내부의 첫 번째 줄을 고려해 보겠습니다.


...firstName && { firstName } 


firstName에 이전에 정확한 값인 'Harrison'이 할당되었으므로 firstName && {firstName} 표현식은 {firstName : 'Harrison'}을 리턴 합니다. &&의 왼쪽과 오른쪽 모두 진실한 것으로 평가되고, 오른쪽이 반환 됩니다.


이 반환 된 객체는 userInfo 객체로 확산되어 firstName 속성이 성공적으로 설정됩니다.


다음으로, 다른 경우를 고려하여 잘못된 값을 할당하려고 합니다. 객체 리터럴의 두 번째 줄을 보자.


...lastName && { lastName } 


이 경우 lastName은 null입니다. 이는 lastName && {lastName} 표현식이 &&의 왼쪽을 리턴 하도록 단락되며 이 경우에는 널입니다.


그런 다음 userInfo 객체에 null을 분산하려고 시도합니다. 이것이 오류가 발생할 것이라고 생각할 수도 있지만 실제로는 그렇지 않습니다.


사실, 내가 잘못된 값을 객체에 퍼뜨리는 것은 완벽하게 유효한 구문이지만 객체에는 아무런 변화가 없습니다. 사용해보십시오 :


let obj = { ...null }
console.log(obj)
// {}

let obj = { ...undefined }
console.log(obj)
// {}

let obj = { ...false }
console.log(obj)
// {}

let obj = { ...'' }
console.log(obj)
// {}

let obj = { ...0 }
console.log(obj)
// {}

let obj = { ...{} }
console.log(obj)
// {}

let obj = { ...[] }
console.log(obj)
// {}


이 모든 것의 최종 결과는 진실한 값이 객체에 추가되고 거짓 값은 제외된다는 것입니다!


코드를 보다 명확하게 하기 위해 동일한 패턴을 사용할 수 있지만 진지한 검사를 자체 기능으로 리팩터링 합니다.


const hasIfTruthy = (propertyName, property) => {
  return property && { [propertyName]: property }
}

const firstName = 'Harrison'
const lastName = null
const address = '123 Street Rd'
const phoneNumber = null

const userInfo = {
  ...hasIfTruthy('firstName', firstName),
  ...hasIfTruthy('lastName', lastName),
  ...hasIfTruthy('address', address),
  ...hasIfTruthy('phoneNumber', phoneNumber)
}

console.log(userInfo)

// {
//   firstName: 'Harrison',
//   address: '123 Street Rd'
// }


이 패턴을 사용하면 속성의 포함 또는 제외 여부를 나타내는 조건을 완전히 변경할 수도 있습니다. 

반드시 진실성 / 거짓 성을 기반으로 할 필요는 없습니다.


👉 2) 배열을 객체로 확산 


그래서 ... 아직 실제로 이 작업을 수행 해야 하는 특별한 이유를 생각하지는 않지만 (있는 경우 주석에서 언급), 배열을 객체로 완전히 펼칠 수 있습니다.


결과적으로 각 배열 요소가 객체에 삽입되고 키가 해당 배열 색인으로 설정됩니다.


const fruitsArray = ['apple', 'orange', 'banano']

const fruitsObject = { ...fruitsArray }

console.log(fruitsObject)

// {
//   0: 'apple',
//   1: 'orange',
//   2: 'banano'
// }


3) 배열 (또는 객체)에 문자열 확산 


이것은 실제로 매우 근사하며 아마도 다른 것보다 더 널리 알려져 있습니다. 문자열을 배열로 펼칠 수 있습니다!


결과는 문자열의 개별 문자를 포함하는 배열입니다.


내 생각에 이것은 일반적인 'string'.split (' ') 스타일보다 더 즐거운 구문을 허용합니다.


const characters = [..."apple"]

console.log(characters)

// ['a', 'p', 'p', 'l', 'e']


그리고 만약 당신이 정말로 거친 느낌이라면, 당신은 심지어 물체에 줄을 퍼뜨릴 수 있습니다🙀


const characters = {..."apple"}

console.log(characters)

// {
//   0: 'a',
//   1: 'p',
//   2: 'p',
//   3: 'l',
//   4: 'e'
// }



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 12회 ]  작성일20-02-13 09:47

웹학교