2-2 ES6 문법 소개 및 실습 2

단축 속성명(property shorthand)
*많이 쓰임. 해석이 중요. 단축시켜서 숨어있는 속성명을 머릿속에 그려보기.


const name = "nbc";
const age = "30";

const obj = {
  name: name,
  age: newAge
}
여기서 object의 객체 키: 밸류 형태는 name(키)과 그것이 들어갈 자리의 이름을 name이라고 만들어놓은 것인데,
만약 키와 밸류가 같은이름으로 명시해 놓았다면
const obj = {
  name,
  age: newAge
}
으로 생략이 가능하고, age도 마찬가지로 밸류자리의 이름을 그냥 age로 하기로 한다면
const obj = {
  name,
  age
}
즉 const obj = {name, age}로 간단하게 단축시킬 수 있는데
언뜻 보면 배열과 헷갈릴 수 있으므로 이 점 유의해야 할 것이다.

전개 구문(spread operater)
...을 씀으로써 구조를 풀어헤쳐주기(+더불어 새로운 구조로 덧입혀주기)
구조분해할당(destructuring)과 함게 가장 많이 사용되는 ES6문법 중 하나

1. 배열에서의 전개 구문
let arr = [1, 2, 3];

let newArr = (arr)
let newArr = (...arr)

터미널 결과:
[1, 2, 3]
1 2 3

새로운 인덱스 추가하고싶을 때
let arr = [1, 2, 3];
let newArr  = [...arr]

console.log(arr);
console.log(newArr);

터미널 결과:
[1, 2, 3]
[1, 2, 3]

덧입히기(newArr에 4 추가)
let arr = [1, 2, 3];
let newArr  = [...arr, 4]

console.log(arr);
console.log(newArr);

터미널 결과:
[1, 2, 3]
[1, 2, 3, 4]

2. 객체에서의 전개구문
let user = {
  name: 'nbc',
  user: 30,
}

let user2 = { ...user }

console.log(user);
console.log(user2);

터미널결과:
{ name: 'nbc', user: 30 }
{ name: 'nbc', user: 30 }

3. 나머지 매개변수(rest parameter)

fuction exampleFunc(a, b, c) {
  console.log(a, b, c);
}

exampleFunc(1, 2, 3);

터미널 결과:
1 2 3
여기서 어떤 args(arguments. 객체의 인스턴스(실행중인 임의의 프로세스). )가 들어올 수 있다는 것을 이렇게 표현할 수 있다.

fuction exampleFunc(a, b, c, ...args) {
  console.log(a, b, c);
  console.log(a, b, c, ...args);
}
exampleFunc(1, 2, 3)

터미널 결과:
1 2 3
빈 공간
기존 exampleFunc의 1 2 3 만 자리한 채, 아래 새로 들어올 args의 자리를 비워놓은 것을 알 수 있다.

여기서 매개변수 추가
fuction exampleFunc(a, b, c, ...args) {
  console.log(a, b, c);
  console.log(a, b, c, ...args);
}

exampleFunc(1, 2, 3, 4, 5, 6, 7)
터미널 결과:
1 2 3
4 5 6 7

console.log(a, b, c, ...args)자리에 추가된 것을 볼 수 있다.

스프레드문법 ...을 빼보기
fuction exampleFunc(a, b, c, ...args) {
  console.log(a, b, c);
  console.log(a, b, c, args);
}

exampleFunc(1, 2, 3, 4, 5, 6, 7)
터미널 결과:
1 2 3
[ 4, 5, 6, 7 ]

배열형태 그대로 나타내어준다.

4. 템플릿 리터럴(Template Literal)
본 뜬 데이터 값. ``을 활용해서 기본 따옴표보다 더 추가적인 기능을 한다.
``안의 ${}에 연산을 넣으면 결과를 출력해주기도 하고
console.log(`${3 + 3}`);
터미널 결과: 6

변수명만 `${}`안에 언급해서 변수값을 띄워줄 수 있다.
const testValue = "안녕하세요!"
console.log(`Hello World ${testValue}`);
터미널 결과: Hello World 안녕하세요!

또한, 멀티라인을 지원한다. ``안에 쓰여진 공백, 줄바꿈 등을 자유롭게 표현한 그대로 결과를 찍어준다.
console.log(`
   Hello
     My name is Javascript!!

     nice to meet you!!
`);

터미널 결과:
   Hello
     My name is Javascript!!

     nice to meet you!!

*나중에 React나 Node.js를 쓰게 될 때 모듈을 import 또는 export 처리하게 될 것.
그럴 때 이런 ES6문법을 활용해서 쓸 수 있을 것. 말씀해주신 자료는 아래와 같다.
(모듈(module)이란 프로그램을 구성하는 구성 요소로, 관련된 데이터와 함수를 하나로 묶은 단위. 보통 하나의 소스 파일에 모든 함수를 작성하지 않고, 함수의 기능별로 따로 모듈을 구성. 이러한 모듈을 합쳐 하나의 파일로 작성하는 방식으로 프로그램을 만듦.)

1. default Export
// name.js
const Name = () => {
}

export default Name

// other file 
// 아무 이름으로 import 가능
import newName from "name.js"
import NameFromOtherModule from "name.js"

나의 해석.
const Name = () => {
}
이라는 내용의 name.js라는 파일명인 모듈을 내보낼때 export default Name라고 명시하여 디폴트값으로 지정하면,
프로그래밍 중 다른 파일에서 import해올 때 변수명을 Name이 아닌 newName으로 불러왔다 할지라도 
import newName from "name.js"
뒤에 from "name.js"를 매개로 import가 가능하다.

2. named export
// 하나의 파일에서 여러 변수/클래스 등을 export 하는 것이 가능

export const Name1 = () => {
}

export const Name2 = () => {
}

// other file
import {Name1, Name2} from "name.js"
import {newName} from "name.js" // x

// 다른 이름으로 바꾸려면 as 사용
import {Name1 as newName, Name2} from "name.js"

// default export 처럼 가져오려면 * 사용
import * as NameModule from "name.js"

console.log(NameModule.Name1)

나의 해석.
하나의 파일에 변수/클래스가 여러 개 일 때 그 변수명을 이용해서 여러개를 내보내기가 가능하다.
다른 파일에서 불러올 때는 import {} from "파일명.js"로 가져올 수 있으며, 이때 새로운 이름으로 가져올 수는 없다(defalt가 아니기에).

다른이름으로 바꿔서 import해 오려면 원래변수명에 as 붙인 후 만들어서 가져오기
import {원래변수명1 as 바꿔가져올이름, 원래변수명2} from "파일명.js"

default export 인것처럼 가져오려면 * 사용
import * as 바꿔가져올이름 from "파일명.js"

콘솔에 찍을 때는
console.log(바꿔가져올이름.원래변수명)