IIFE, 화살표 함수, 구조 분해 할당 및 속기 속성을 사용하여 객체의 일부를 복제하는 방법.

우리의 목표
전부는 아니지만 다른 개체로부터 몇 개property:value만 상속하는 새 개체를 만들고 싶다고 가정해 보겠습니다. 다음과 같습니다.



이를 수행하는 가장 좋은 방법은 무엇입니까? 여러 가지가 있지만 가장 강력하고 간결한 것은 다음을 의심하는/w입니다.



당신이 보는 것은 객체를 받아들이고 그 속성을 파괴하고 새로운 객체로 반환하는 IIFE(즉시 호출되는 익명 화살표 함수)입니다.

복잡하게 들리나요? 자, 그럼 분해해보겠습니다.

즉시 호출 함수 표현식(IIFE)

즉시 호출 함수 표현식은 함수를 실행하는 방법입니다.
즉시, 선언되자마자. IIFE는 전역 객체를 오염시키지 않고 변수 선언을 분리하는 현명한 방법이기 때문에 탁월한 솔루션입니다. (이 특별한 설명에 대해 Flavio Copes에게 감사드립니다)

IIFE의 기본 형식은 다음과 같습니다.

;(function() {
  // The code we want to execute immediately.
})()

// No need to call this funcion after.

이제 우리는 IIFE 내부의 코드가 객체에 대한 작업을 수행하기를 원하므로 전체 IIFE 범위에서 사용할 수 있도록 원본 객체를 주입해야 합니다.

// Our original object.
const person = { name: "Luca", lastName: "Grandicelli", age: 39 }

// Let's inject 'person' into the IIFE
;(function() {
  // The object 'person' is now available here.
})( person )

The ';' at the beginning of the IIFE help us to prevent issues when concatenating two JavaScript files. Since the language does not require semicolons, you might concatenate with a file with some statements in its last line that causes a syntax error.

화살표 함수

화살표 함수는 아마도 ES6/ECMAScript 2015에 도입된 이후 JS 개발자 커뮤니티에서 가장 높이 평가한 변경 사항 중 하나일 것입니다. 화살표 함수는 기본적으로 이전 함수 선언을 변환합니다.

// The old way
const foo = function myFunction( param1, param2 ) {
/* */
}

// The new way
const foo = ( param1, param2 ) => {
/* */
}

주의: 화살표 함수는 우리에게 익숙한 다른 방식으로 this 키워드를 처리하므로 특히 클래스 및 개체 메서드 또는 이벤트 콜백과 같은 컨텍스트에서 여전히 유효한 이전 구문을 완전히 대체하지는 않습니다.

그러나 그들의 힘은 매우 간결할 수 있는 방식에 있습니다.

/*
* When the function body contains only a single statement, you can omit the
* parentheses and put everything on a single line, such as:
*/
const foo = () => doSomething()

// Of course, you can pass parameters too:
const foo = ( param1, param2 ) => doSomething( param1, param2 )

// ...but if you have only one parameter, you can just omit the parentheses completely:
const foo = param => doSomething( param )

또 다른 훌륭한 속성은 Implicit Return입니다.

/**
* When there's an in-line statement in the function body, you can return values
* without using the return keyword:
*/
const foo = () => 'my value'
foo() // Returns 'my value'

/**
* You can return an object too. Just remember to wrap the curly brackets in
* parentheses to avoid it being considered the wrapping function body brackets:
*/
const foo = () => ({ value: 'my value' })
foo() //Returns { value: 'my value' }

꽤 멋지지 않나요? 좋아, 이제 IIFE/w 화살표 기능을 결합하자:

// Let's cast some magic spell here...
;(() => {
/* */
})( person )

좋은. 이제 객체에서 속성을 추출하는 방법을 살펴보겠습니다.

구조 분해 할당

From the MDN Webdocs :

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

예를 들어/w를 시작해 보겠습니다.

/**
* We want to create two variables called 'a' and 'b'
* and fill them /w the first two elements of the 'list' array.
*/
const list = [1, 2, 3, 4, 5]
const [ a, b ] = list
console.log( a ) // Prints 1
console.log( b ) // Prints 2

/**
* Same thing, we can use objects too.
* In this case, we have to use the same property names as variables.
* This allow us to extract multiple properties regarless of their order.
*/
const list = { a: 1, b: 2, c: 3, d: 4, e: 5 }
const { a, c } = list

console.log( a ) // Prints 1
console.log( c ) // Prints 3

Destructuring 할당은 객체를 함수의 매개변수로 전달한 다음 그로부터 값을 추출해야 할 때 특히 유용합니다. 따라서 IIFE + 화살표 함수 + 구조 분해 할당을 결합하여 이 개념을 초기 코드에 적용해 보겠습니다.

// Our original object.
const person = { name: "Luca", lastName: "Grandicelli", age: 39 }

/*
* Let's destructure the original object properties 'name' and 'age'
* into two separate variables in the function args declaration.
* Then return a new object with those props as values.
*/
;(({ name, age }) => {

  // Build & return the new object.
  return { name: name, age: age } // Equals to: { name: "Luca", age: 39 }
})( person )

속기 속성

JavaScript ES6/ECMAScript 2015에서 키가 속성으로 전달된 변수와 동일한 이름을 가진 객체를 정의하려는 경우 속기를 사용하고 간단히 키 이름을 전달할 수 있습니다.

// Let's declare some variables here.
var name = 'Luca';
var lastName = 'Grandicelli';
var age = 39;

/**
* Old pre-ES6 syntax:
*/
var myObject = {
  name : name ,
  lastName : lastName ,
  age : age 
}

/**
* ES6/ECMAScript 2015 syntax
*/
const myObject = {
  name,
  lastName,
  age
}

// ...or...
const myObject = { name, lastName, age }

그리고 여기서 우리는 이 글을 마칠 것입니다. 모든 것을 요약하고 IIFE + 화살표 함수 + 구조 분해 할당 + 속기 속성을 결합해 보겠습니다.

// Our original object.
const person = { name: "Luca", lastName: "Grandicelli", age: 39 }

/**
* Now let's apply the property shorthand to our returning object,
* since its keys names equals the value names.
*/

// Our IIFE function.
;(({ name, age }) => {
  return { name, age } // Equals to: { name: "Luca", age: 39 }
})( person )

// Since the above function is one-only return statement, everything becomes:
;(({ name, age }) => ({ name, age }))( person )

// ... and finally:
const luca = (({ name, age }) => ({ name, age }))( person )

그러나 이 작업을 수행하는 방법에는 여러 가지가 있습니다. 이것은 Javascript가 얼마나 강력한지 보여주는 예일 뿐입니다.

이 기사에서 논의된 주제에 대해 더 알고 싶으면 다음 링크를 따르십시오.

화살표 기능
MDN Webdocs

A tutorial to JavaScript Arrow Functions

IIFE - 즉시 호출되는 함수 표현식
MDN Webdocs
Wikipedia
Essential JavaScript: Mastering Immediately-invoked Function Expressions

구조 분해 할당
MDN Webdocs
ES6 Destructuring: The Complete Guide

속기 속성
MDN Webdocs
Object Property Value Shorthand in JavaScript with ES6