구조분해할당과 Named export와 default export의 차이

구조분해할당

const user = {
  name: "hong",
  age: 100,
  email: "abc@google.com ",
};

만약, 해당 속성에 값이 없으면 기본값으로 “~~” 이걸 넣어줘 설정하기

const { name, age, email, address = "기본값" } = user;
// user['name']
// 필요한 것들만 꺼내서 사용할 수 있다.
console.log(`${name}${age}${email}`);
console.log(address);
// 8번 라인에서처럼 값이 없다면 기본값을 따로 설정하는 걸 할 수 있다.

const user1 = {
  name: "abc",
  age: 100,
  address: "니똥",
};

객체에서 Key이름을 다른 이름으로 데려오고 싶다면??

// 이름을 객체 Key값이 아닌 다른 값으로 가져오고 싶을땐
// 아래처럼 key값 : 바꾸고싶은 이름 -> 으로 해주면 된다.
const { name: a, age, address } = user1;
console.log(`${a}${age}${address}`);

배열도 구조분해할당 할 수 있지롱

const arr = ["a", "b", "c", "d"];
const [a, b, c, d] = arr;
console.log(a, b, c, d);
// 배열도 이렇게 구조분해할당 할 수 있넹

특정 어레이에 있는 값만 가져오고 싶으면?

const arr = ["사과", "오렌지", "바나나", "체리"];
// 인덱스1번째 것만 가져오고 싶으면??
const [, b] = arr;
console.log(b);

---

>> 전개연산자 (…)

const fruits = ["사과", "바나나", "체리"];
console.log(fruits);
// 출력값 : [ '사과', '바나나', '체리' ]
console.log(...fruits);
// 출력값 : 사과 바나나 체리
// ...(전개연산자)를 사용하면 이렇게 텍스트로 출력되는 걸 볼 수 있음

function toObject(a, b, c) {
  return {
    a,
    b,
    c,
  };
}
console.log(toObject(...fruits));
// ...(fruits)
// fruits[0],fruits[1],fruits[2] 와 같은 의미

나머지 전개연산자!!

const fruits = ["사과", "바나나", "체리", "수박", "참외"];
// 매개변수 안에도 전개연산자를 사용할 수 있는데, 이때는 '나머지'의 의미가 된다.
function toObject(a, b, ...c) {
  return {
    a,
    b,
    c,
  };
}

console.log(toObject(...fruits));
// { a: '사과', b: '바나나', c: [ '체리', '수박', '참외' ] }

+) 잠깐! 저 function을 축약형 화살표함수로 간단하게 표현하면?

const toObject (a,b,…c) ⇒ ( { a,b,c } )

**화살표함수에서 그냥 { } 를 쓰면, 단순히 실행될 함수라고 인식하기 때문에 객체타입으로 반환을 하고 싶다면 ( )소괄호로 화살표함수에 표시를 해주고 그 안에 { } 를 사용한다.

---

자바스크립트 파일은 2개의 통로를 가지고 있다.

(가지고 오는 통로 + 내보내는 통로)

default export : 이름 지정 x

named export : 이름 지정 필수

⇒ 이러한 구조로 만드는 것을 ‘모듈’이라고 한다.

한마디로, js파일은 언제든지 ‘모듈’이 될 준비가 되어있는 것

이 두 개의 차이를 알고 있는가?!

⇒ 바로, 디폴트 익스포트와 네임드 익스포트이 차이인거시다

>> export default

export default로 빠져나가는 애들은 따로 이름을 정해줄 필요가 없다

export default function getType (data){
    return Object.prototype.toString.call(data).slice(8,2)
}

// 이런식으로 export할때 function이름을 getType으로 굳이 안써주고, 이름 없애도 됌
// main.html에서 import할때 역시 아무 이름이나 붙여서 import해오면 된다.

• default export는 ‘하나’만 내보낼 수 있다.

>> Named export

export function getType (data){
    return Object.prototype.toString.call(data).slice(8,2)
}
// Named export를 할때는
// main.html에서 import를 해올때
import {getType} from "./JsDate/getType"
// 이렇게 구조분해할당처럼 지정한 네임을 적어서 불러와야 한다.

• Named export는 여러개를 내보낼 수 있다. (아래처럼 2개를 내보내도 문제 없다는 것)

export function getType (data){
    return Object.prototype.toString.call(data).slice(8,2)
}

export const user = {
    name : 'hong',
    age : 100
}

** Named export를 import 해올때 , 내가 원하는 네임으로 불러올 수도 있는데 (구조분해할당처럼)

import { random, user as userMethod } from “~~~~”

user 를 useMethod 라고 쓰겠다고 선언해준것

(구조분해할당에서는 const { a, b : bong , c } 이런식으로 네임 바꿨었자농)

** 전체를 가져올 때 이름을 지정해 줄 수도 있는데

import * as R from “~~~~” 

이런식으로 쓰는 것도 가능

---

로데쉬

1. uniq

1. find구조분해할당객체에서 Key이름을 다른 이름으로 데려오고 싶다면??

   ---

   >> 전개연산자 (…)

   function toObject(a, b, c) {
     return {
       a,
       b,
       c,
     };
   }
   console.log(toObject(...fruits));
   // ...(fruits)
   // fruits[0],fruits[1],fruits[2] 와 같은 의미
   

   나머지 전개연산자!!+) 잠깐! 저 function을 축약형 화살표함수로 간단하게 표현하면?**화살표함수에서 그냥 { } 를 쓰면, 단순히 실행될 함수라고 인식하기 때문에 객체타입으로 반환을 하고 싶다면 ( )소괄호로 화살표함수에 표시를 해주고 그 안에 { } 를 사용한다.

   ---

   default export : 이름 지정 x⇒ 이러한 구조로 만드는 것을 ‘모듈’이라고 한다.>> export default

   export default function getType (data){
       return Object.prototype.toString.call(data).slice(8,2)
   }
   
   // 이런식으로 export할때 function이름을 getType으로 굳이 안써주고, 이름 없애도 됌
   // main.html에서 import할때 역시 아무 이름이나 붙여서 import해오면 된다.
   

   • default export는 ‘하나’만 내보낼 수 있다.
   >> Named export
   • Named export는 여러개를 내보낼 수 있다. (아래처럼 2개를 내보내도 문제 없다는 것)

   export function getType (data){
       return Object.prototype.toString.call(data).slice(8,2)
   }
   
   export const user = {
       name : 'hong',
       age : 100
   }
   

   ** Named export를 import 해올때 , 내가 원하는 네임으로 불러올 수도 있는데 (구조분해할당처럼)user 를 useMethod 라고 쓰겠다고 선언해준것** 전체를 가져올 때 이름을 지정해 줄 수도 있는데이런식으로 쓰는 것도 가능
2. 특정 어레이에 있는 값만 가져오고 싶으면?
3. const user1 = { name: "abc", age: 100, address: "니똥", };