1. Destructuring : 패턴 매칭

Array, Object 자료형에 있는 중요한 자료들을 변수로 꺼내고 싶으면 어떻게 합니까. 한두개면 모르겠는데 여러개의 자료를 뽑아서 변수 만들려면 코드가 매우 길어지겠죠? 그럴 때 destructuring 문법을 사용하면 변수를 쉽게 만들 수 있습니다.

1.1 Array 안에 있는 데이터를 변수에 담는 법

[2,3,4]라는 array가 있는데, 여기안에 있는 3개의 데이터들을 전부 밖으로 꺼내서 변수에 담고 싶으면 어떻게 합니까.

1
let array = [2, 3, 4]
2
let a = array[0]
3
let b = array[1]

뭐 이런식 아닐까요? 근데 더 쉽게할 수 있는 방법이 있습니다.

1
let [a, b, c] = [2, 3, 4]

[2,3,4]라는 자료랑 비슷한 모양으로 변수를 선언해주시면 됩니다. 변수 이름은 아무렇게나 해주시면 되고요. 그럼 a,b,c 변수가 세개 생성되는데 각각 2,3,4라는 자료를 가집니다.

1.2 디폴트 값

왼쪽 오른쪽 갯수가 다르면 변수가 제대로 만들어지지 않습니다.

1
let [a, b, c] = [2, 3]

위처럼 쓰시면 c라는 변수는 값이 할당이 안되어서 undefined가 할당되어있습니다. 이걸 방지하고 싶으면, 값이 아무것도 안들어오는 변수들은 기본값을 가질 수 있게 만들 수 있습니다.

1
let [a, b, c = 5] = [2, 3]

그럼 c는 아무 값도 안들어오는 경우 5라는 기본값을 할당해줍니다.

1.3 Object 안에 있는 데이터를 변수에 담는 법

object도 좌우를 똑같이 맞춰주시면 변수가 생성됩니다.

1
let { name: a, age: b } = { name: 'Kim', age: 30 }

이렇게 하시면 됩니다. 그럼 a, b라는 변수가 생성되고 Kim과 30이라는 자료를 각각 할당해줍니다. 이렇게 쓰시면 조금 더 쉽게 변수를 뽑을 수 있는데, 변수 이름을 오브젝트 안의 key 이름과 똑같이 맞춰줄 때는 이렇게만 쓰셔도 됩니다.

1
let { name, age } = { name: 'Kim', age: 30 }

name : name을 name 이렇게 하나로 생략이 가능합니다. 이렇게 하시면 name, age라는 변수가 생성되고, 각각 Kim, 30이라는 값을 할당해줍니다. object에서 변수꺼내기 끝입니다. + array랑 똑같이 등호로 디폴트값도 적용가능합니다.

1.4 변수를 object로 집어넣고 싶은 경우

1
let name = 'Kim'
2
let age = 30
3

4
let obj = { name: name, age: age }

변수를 object 자료형에 집어넣고 싶은 경우 이런 식으로 쓰면 되겠죠? 하지만 destructuring 문법을 이용하시면 이런 것도 가능합니다.

1
let name = 'Kim'
2
let age = 30
3

4
let obj = { name, age }

name : name 이렇게 key값과 value값이 동일하면, name 이렇게 하나로 생략이 가능합니다.

1.5 함수 파라미터 변수 만들 때도 적용가능

함수가 하나 있는데 이 함수는 두개의 파라미터를 입력할 수 있습니다. 여기에 object 내의 Kim, 그리고 age 자료들을 입력하고 싶으면 어떻게 할까요?

1
function 함수(name, age) {
2
  console.log(name)
3
  console.log(age)
4
}
5

6
let obj = { name: 'Kim', age: 20 }
7
함수(obj.name, obj.age)

아마 obj.name 이걸 직접 집어넣고 그러면 되겠죠? 혹은 destructuring 문법을 쓰시면 됩니다.

1
function 함수({ name, age }) {
2
  console.log(name)
3
  console.log(age)
4
}
5

6
let obj = { name: 'Kim', age: 20 }
7
함수(obj)

아마 obj.name, obj.name 이걸 두개 뽑지 않고도 넣을 수 있습니다. 왜냐면 파라미터는 실은 변수만드는 거랑 똑같은 행위기 때문에 변수만드는 문법을 그대로 적용할 수 있는 것이지요. 파라미터를 입력할 때, {name, age} = { name : 'Kim', age : 20 } 이거 한거랑 똑같습니다. (솔직히 많이 쓰진 않습니다)

이해가 안되면 조금 더 쉬운 array를 보도록 합시다. 함수 파라미터로 array 내의 데이터들을 집어넣고 싶으면 어떻게 하죠?

1
function 함수(name, age) {
2
  console.log(name)
3
  console.log(age)
4
}
5

6
let array = ['Kim', 30]
7
함수(array[0], array[1])

위처럼 해도 되지만 destructuring 문법을 이용하시면

1
function 함수([name, age]) {
2
  console.log(name)
3
  console.log(age)
4
}
5

6
let array = ['Kim', 30]
7
함수(['Kim', 30])

이렇게 하셔도 됩니다. 파라미터인 [name, age]를 만들 때 ['Kim', 30] 이걸 그대로 대입해서 만드는 것이죠. 그럼 각각 name과 age에는 Kim과 30이라는 데이터가 들어갑니다.

2. 모듈 (import, export)

개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 옵니다. 이때 분리된 파일 각각을 ‘모듈(module)‘이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다.

모듈(module) : 프로그램을 기능별로 분할한 논리적인 최소 단위

• 모듈과 컴포넌트는 자주 혼용된다.
• 모듈은 설계 시점에 의미있는 요소이며,
• 컴포넌트는 런타임 시점에 의미있는 요소이다.

export default / import를 쓰면, 다른 파일에 있는 변수 등을 가져다쓸 수 있습니다. 변수 함수 class 전부 가능합니다.

1
// library.js
2
let a = 10
3
export default a

1
<!-- index.html -->
2
<script type="module">
3
  import a from 'library.js'
4
  console.log(a)
5
</script>

JS 파일에서는 특정 변수를 다른 파일에서 이용할 수 있게 내보내고 싶으면, export default 변수명이라고 하시면 됩니다. 그리고 그 변수를 가져다쓰고 싶다면, 다른 파일에서 import 어쩌구 from '경로'해주시면 됩니다. (import시 어쩌구라는 변수명은 여러분 아무렇게나 작명이 가능합니다.)

2.1 여러개를 export 가능

JS파일에서 변수를 여러개 만들고 그걸 다 내보내고 싶으면, export라는 키워드를 여러번 쓰시면 됩니다.

1
// library.js
2
let a = 10
3
let b = 20
4
export { a, b }

1
<!-- index.html -->
2
<script type="module">
3
  import { a, b } from 'library.js'
4
  console.log(a)
5
</script>

근데 export 라고 쓰실 땐, export {변수명1, 변수명2 ...} 이렇게 담아주셔야합니다. 혹은 export let a = 10; 이렇게 쓰셔도 됩니다. export 키워드로 내보낸 것들을 import 하실 땐, import {변수명1, 변수명2 ...} from '경로' 이렇게 가져오셔야합니다.

export default와 차이점은..

• export default는 한번만 쓸 수 있고 import시엔 변수명을 새롭게 작명가능하다
• export는 {변수명1, 변수명2 ...} 이렇게 담아야하고 import할 때도 정확히 변수명을 써줘야한다

라는 특징이 있습니다.

2.2 export와 export default 동시에 사용하면?

그래도 잘 됩니다. 근데 import할 때 어떻게 해야할지 감이 안오죠?

1
// library.js
2
let a = 10
3
let b = 20
4
let c = 30
5
export { a, b }
6
export default c

1
<!-- index.html -->
2
<script type="module">
3
  import c, { a, b } from 'library.js'
4
  console.log(c)
5
</script>

이렇게 import 해오시면 됩니다. export default 한건 맨 왼쪽에 써주시면 되고, 그 다음부터 이제 중괄호 안에 export 했던 변수들을 적어주시면 됩니다.

2.3 변수명이 마음에 안들면 as로 새로 짓자

import를 쓸 때 변수명 오른쪽에 as라는 키워드를 붙일 수 있습니다. 변수명 as 새변수명 이렇게 하면 import하는 변수의 변수명을 멋있는걸로 바꿀 수 있습니다.

1
// library.js
2
let a = 10
3
let c = 30
4
export { a }
5
export default c

1
<!-- index.html -->
2
<script type="module">
3
  import c, { a as 폭발 } from 'library.js'
4
  console.log(폭발)
5
</script>

a라는 것은 폭발로 이름을 바꿔봤습니다.

2.4 import할 때 변수들이 너무 많으면

export { } 했던 변수들을 한꺼번에 object에 담아서 import 해올 수 있습니다.

1
// library.js
2
let a = 10
3
let b = 20
4
let c = 30
5
export { a, b }
6
export default c

1
<!-- index.html -->
2
<script type="module">
3
  import c, * as 변수모음 from 'library.js'
4
  console.log(변수모음.a)
5
  console.log(c)
6
</script>

* 이라는 기호는 export { } 했던 애들을 그냥 다 import 해주세요~ 라는 뜻입니다. 근데 그냥 쓰면 안되고 as로 별명을 꼭 지어주어야합니다. 그럼 이제 별명에 export { } 했던 변수들이 다 들어갑니다. (export default 했던건 그냥 원래대로 import 하시면 되고요)

2.5 옛날엔 require, module.exports

옛날에 Require.js 이상한 라이브러리를 쓰거나 nodejs 개발시 자바스크립트를 모듈식으로 개발이 가능했었습니다.

1
// export 하는 js파일
2
module.exports.a = 10 ;
3
----------------------------------------
4
// import 하는 js파일
5
let 가져온거 = require('/library.js');

이러면 a를 쓸 수 있었습니다. 근데 이제는 ES6 import/export를 쓰면 되기 때문에, 아 그냥 저런게 있었구나 라고 이해만 하셔도 되겠습니다. 그리고 import/export는 당연 IE 호환성이 없기 때문에, 단순한 HTML, CSS, JS 프론트엔드 개발시 JS파일을 HTML에 첨부하시려면,<script src="경로"></script> 이걸 쓰도록 합시다. 이것이 원조 import 문법입니다.

혹은 모던 브라우저에선 <script type="module" src="경로"></script> 이렇게 하면 import, export 문법이 사용가능해지는데, 대부분은 React, Vue, Node.js할 때 많이 사용하게 됩니다.