[🌳javascript] Destructuring, import/export

구조분해할당

배열이나 객체의 구조에 맞게 바로 개별 변수에 값을 할당

어떤 배열이 있고, 각 요소가 너무 중요해서 각 변수 안에 그 값을 지정하고 싶을 땐?

const arr= [2,3,4]
const a=arr[0]
const b=arr[1]
const c=arr[2]

물론 이렇게 써도 되겠지만, 요소가 백개 되는 순간 내 손목도 날라가는거다...

머리를 잘 쓰면 나의 소중한 손목도 지킬 수 있다!
오늘은 구조분해할당에 대해 알아보자.

array

const [a,b,c]=[2,3,4] // 기본
const [d,e,f=1]=[2,3] //default 기본값

const arr = [1,2,3]
const [,,q]=arr
console.log(q)는 3이 나온다 //반환값 무시

const arr2=[1,2,3]
const [a,...rest]=arr2
console.log(a,rest)는 1 [2,3]이 나온다 //나머지 할당

object

객체에서 데이터를 꺼낼 때 변수명을 object의 key 값과 똑같이 맞춰줘야 한다. 이름 변경도 가능하긴 함!

const {name: a, age: b} = {name: 'kim', age:30}
// 기본: a,b에게 각각 'kim', 30 할당됨

const {name,age} = {name: 'kim', age:30}
// name, age 변수 생성되고 'kim', 30 할당됨
// name:name, age:age일 경우 name, age로만 써도 가능

const {name:이름, age=31}={name:'kim'}
console.log(이름,age)은 'kim',31
// 변수명 변경+기본값

const obj={a:1,b:2,c:3}
const {a, ...rest} = obj
console.log(a,rest)는 1 {b:2,c:3}이 된다
// 나머지 할당

import/export

코드가 길어지면 한 파일에 주구장창 쌓아둘 게 아니라 다른 파일로 나누어 보관하는 것이 좋다. 다른 파일로 쪼개두고, 그걸 첨부하는 방식에 대해 알아보자!
참고로,

• 변수, 함수, class만 import/export 가능
• import 해온 변수,함수는 가져와서 사용하는 건 상관없지만, 가져와서 수정하는 건 불가능하다. read-only!

사용법

나는 movie.js에 있는 정보를 index.js에 가져와서 쓸거다.
일단, index.html에서 script type="module"적어주기

export default

다음은 movie.js 파일이다.

const title='스즈메의 문단속'
const year=2023

export default title;

export default는 한 파일에서 1회만 사용가능하다.
default로 내보내고 나면 import 할때의 이름은 아무렇게나 지어도 상관없다.
import 아무렇게나지은이름 from './movie.js'

export {a,b}

여러개를 export하고 싶을 땐 {}안에 차곡차곡 예쁘게 담아서 보낸다.

const title='스즈메의 문단속'
const year=2023

export {title,year}

아니면 내가 보내고 싶은 것 앞에 일일이 export를 붙이는 방법도 있다.

export const title='스즈메의 문단속'
export const year=2023

두가지 방법 중 어느것으로 했든 import할땐 내 마음대로 작명하지 말고, 이전 js에서 썼던 이름 그대로 가져와야 한다. import {title,year} from './movie.js'

export default + export {a,b}

const title='스즈메의 문단속'
const year=2023
const 영화관='메가박스'

export {title,year}
export default 영화관

둘을 한 파일 안에서 혼용 가능!
단 import 해올때는 default로 보낸 것부터 import해오기
import 영화관,{title,year} from './movie.js'

import {변수명 as 새로운변수명}

default로 보낸건 import 할 때 내 마음대로 작명이 가능한데, 그냥 export {a,b} 이런식으로 보낸 건 그대로 써야하는게 불만이라면, 사실 방법이 있다.
import {title as 제목, year as 개봉연도} 라고 쓰면 사실 변수명을 간지나게 바꿀 수 있다.
대신 export할땐 착하게 그대로 썼어야한다.

* as

export , import 할때 너무 많은 정보를 옮겨야해서 내 손목 걱정이 다시금 생긴다면,

*를 사용하면 된다. 한꺼번에 다 가져온다는 뜻!

const title='스즈메의 문단속'
const year=2023
const 영화관='메가박스'
const 좌석='F5'
const 간식='팝콘'
const 언제='주말'

export {title,year,영화관,좌석,간식,언제}

import * as 영화나들이 from './movie.js'
대신 안에 든 데이터를 사용할때는 *을 그대로 쓰는게 아니라 내가 가져온 이름을 사용해서 영화나들이.title이렇게 써야한다!

데이터만 저장해두고 그때그때 써먹기

데이터를 한 파일에서 가져와 바로 사용하는 게 아니라, abc.js라는 파일에 다 저장해두고 그때그때 필요할때마다 abc.js에서 가져오는 방법도 있다.
중간매개체 역할을 하는 파일에서 export키워드만 잘 이용하면 된다.
movie.js >> abc.js >> index.js 순으로 데이터를 옮긴다고 해보자.

모듈의 각 내보내기를 모두 가져와서 한 번에 내보내기

//movie.js
const title='스즈메의 문단속'
const year=2023
const 영화관='메가박스'
const 좌석='F5'
const 간식='팝콘'
const 언제='주말'

export {title,year,영화관,좌석,간식,언제}

//abc.js
export * as default from './movie.js'

import 영화나들이 from './abc.js'
console.log(영화나들이.title)

모듈의 각 내보내기를 {}에 가져와서 그대로 내보내기

//abc.js
export {title,year,영화관,좌석,간식,언제} from './movie.js'

import {title,year,영화관,좌석,간식,언제} from './abc.js'
console.log(title)

모듈의 이름 변경 내보내기를 {}에 가져와서 내보내기

//abc.js
export {title,year as 개봉연도} from './movie.js'

import {title,개봉연도} from './abc.js'
console.log(개봉연도)

---

• 오늘 알게 된 것
  배열/객체 구조분해 방법이랑 import,export 하는 거 배웠다.
• 오늘 배운 것 중 궁금하거나 더 알고 싶은 것
  근데 모듈 너무 쪼개지면 더 머리아픈 것 같기도...?
• 오늘의 소감
  나도 영화 보고 싶어....