#JavaScript Grammar_ES6문법

# ES6(ECMAScript 6)란? 

JavaScript의 버전 중 하나로, 15년도에 발표됨. 이전 버전인 ES5에서 새로운 문법과 기능을 도입하여 효율적으로 코드를 작성 할 수 있도록 개선함. //ES6이후 대격변

 

1) let, const 

기존 변수 선언인 var를 대체해서 나온 변수 선언 키워드이며, var, const, let의 차이는 선언과 할당의 차이로 나누어짐. 

- 선언: 변수명을 자바스크립트 엔진에 알리는 것. 

- 할당: 변수에 값을 저장하는 것(= 할당연산자).  

 

*** let의 특징: 재할당은 가능하고, 재선언은 불가능함. 

let value = "value1"
console.log(value) // value1

value = "value2" // 재할당 가능
console.log(value) // value2

let value = "value3" // 재선언 불가능,  SyntaxError: Identifier 'value' has already been declared

 

*** const의 특징: 재할당, 재선언 불가능, 초기값이 없으면 선언 불가능함. 

const vlaue; // 초기값 없이 선언 불가능,  SyntaxError: Missing initializer in const declaration.
------------
const value = "value1"
console.log(value) // value1

value = "value2" // 재할당 불가능, TypeError: Assignment to constant variable.

const value = "value2" // 재선언 불가능,  SyntaxError: Identifier 'value' has already been declared.

 

* var의 특징: 재할당, 재선언이 가능하며, 호이스팅 됨.

//재할당,재선언 가능
var value = "value1"
console.log(value) // value1

var value == "value2"
console.log(value) // value2

----------------------------
//호이스팅
console.log(value) // undefined
var value = "value1"

 

---

2) 화살표 함수(Arrow Function)

function이나 return 키워드 없이 함수를 만드는 방법임. 

// 이전 ES5 문법 방식
function () {
return true
}

// 이후 ES6 문법 방식 
const func = () => true
const func = () => {
return true
}

() => {}
parm => {}
(parm1, parm2, ...parm) -> {}

//익명 화살표 함수 
() => {}

***this

function은 호출을 할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해짐. 

 

---

3) 삼항 연산자(tetnary operator)

condition ? expr1 : expr2
console.log(true ? "참" : "거짓") // 참
console.log(false ? "참" : "거짓") // 거짓

 

---

4) 구조 분해 할당(Destructuring)

배열`[ ]`이나 객체`{ }`의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법. 

// 배열의 경우
let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // "new"

let arr = ["value1", "value2", "value3"];
let [a,b,c] = arr;
console.log(a,b,c) // value1 value2 value3

// let [a,b,c] = arr; 은 아래와 동일!
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];

let [a,b,c,d] = arr
console.log(d) // undefined

let [a,b,c,d = 4] = arr
console.log(d) //  4

// 객체의 경우
let user = {name: "nbc", age: 30};
let {name, age} = user;

// let name = user.name;
// let age = user.age;

console.log(name, age) // nbc 30

// 새로운 이름으로 할당
let {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) //nbc 30

et {name, age, birthDay} = user;
console.log(birthDay) // undefined

let {name, age, birthDay = "today"} = user;
console.log(birthDay) // today

 

---

5) 단축 속성명(property shorthand)

객체의 key와 value 값이 같다면, 생략 가능함. 

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

const obj = {
name, // name:name
age: newAge
}

const obh = {
name, // name:name
age // age:age
}

 

---

6) 전개 구문(Spread)

배열이나 객체를 전개하는 문법임. 구조분해할당과 함께 많이 사용.

// 배열 
let arr = [1,2,3];

let newArr = [...arr, 4];
console.log(newArr) // [1,2,3,4]

// 객체
let user = {name: "nbc", age: 30};
let user2 = {...user}

user2.name = "nbc2"

console.log(user.name) // nbc
console.log(user2.name) // nbc2

 

---

7) 나머지 매개변수(rest parameter)

function func (a,b, ...args) {
console.log(...args)
}

func(1, 2, 3) // 3
func(1, 2, 3, 4, 5, 6, 7)// 3 4 5 6 7

 

---

8) 템플릿 리터럴(Template literals)

여러 줄로 이뤄진 문자열과 문자 보간기능을 사용하게 만들어 주는 문자열 리터럴 표현식.

백틱(`)과 ${ }로 표현함 

"string"
'string'
new String("string")

`string text`

`string text
string text line2`

`string text ${value} text`

 

---

9) named export vs default expot

묘듈 시스템에서, 여러 변수, 함수 또는 클래스 내보내는 방법으로 ` named export`와 `default expot`가 존재함. 

1. default expot

// name.js
const Name = () => {
}
export default Name
// other file
// 아무 이름으로 import 가능
import newName from "name.js"
import NameFromOtherModule from "name.js"

 

2. default expot 장단점과 사용방법

2-1) 장점

- 하나의 모듈에서 기본적으로 내보낼 항목을 정의할 수 있으며, 다른 모듈에서 이 모듈을 가져올 때 이름 없이 간단하게 사용가능.

- 모듈에서 단일 항목을 내보내는 경우 코드가 간결해짐.

 

2-2) 단점

- 모듈에서 하나의 항목만 내보내기 때문에, 묘듈 자체의 복잡성이 증가할 수 있음. 모듈이 단순한 경우에는 큰 문제가 되지 않지만, 복잡한 모듈에서는 기본 내보내기의 항목이 어떤 것인지 이해하기 어려울 수 있음.

- 이름 없이 가져오기: Default export를 사용할 때는 가져오는 코드는 간결하지만, 어떤 항목이 가져와지는지 코드 자체에서 알 수 없음. 이는 가독성과 유지보수성을 감소시킬 수 있음.

 

2-3) 사용방법

-모듈에서 `export` 키워드를 사용하여 기본으로 내보낼 항목을 정의함. 

// 모듈에서 default export 사용
const defaultExportedItem = 42;
export default defaultExportedItem;

 

- 다른 모듈에서 기본 내보낸 항목을 가져올 때 중괄호를 사용하지 않고 간단히 가져올 수 있음. 

// 다른 모듈에서 default export 가져오기
import myDefaultExport from './모듈명';

 

3. 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)

 

4. named export 장단점과 사용방법

4-1) 장점

- 여러 항목을 하나의 모듈에서 내보낼 수 있어 모듈이 다양한 함수,변수,클래스 등을 포함할 때 유용함.

- 이름을 지정하여 가져올 수 있으므로, 다른 모듈에서 가져오는 항목과 충돌을 방지 할 수 있음.

- 코드에서 명시적으로 내보내는 항목을 확인할 수 있으므로 가독성이 향상됨.

 

4-2) 단점

- 모듈을 가져오는 코드가 길어질 수 있음. named export를 사용할 때는 중괄호 안에 가져올 항목을 나열해야 하므로, 여러 항목을 가져올 때 코드가 길어질 수 있음.

- 이름 충돌 가능성: 여러 모듈에서 동일한 이름의 항목을 사용할 경우, 이름 충돌 문제가 발생할 수 있음. 

 

4-3) 사용방법

- 모듈에서 `export` 키워드를 사용하여 내보내려는 각 항목을 이름과 함께 내보냄. 

// 모듈에서 named export 사용
export const myFunction = () => { /* ... */ };
export const myVariable = 42;

- 다른 모듈에서 해당 이름으로 내보낸 항목을 가져올 수 있음.

// 다른 모듈에서 named export 가져오기
import { myFunction, myVariable } from './모듈명';

 

5. `named export`와 `default expot` 둘 중 어떤 것을 선택해야하는가?

- Named export는 여러 항목을 모듈에서 내보내는 경우나 충돌을 방지하고 명시성을 갖추고자 할 때.

- Default export는 단일 항목을 모듈에서 내보내고자 할 때나 다른 모듈에서 이름 없이 가져오고자 할 때.

- 보통 하나의 모듈에서는 default export와 named export를 혼용하지 않는 것이 좋음. 따라서 모듈마다 한 가지 패턴을 선택하여 일관성을 유지하면 코드를 이해하고 유지보수하기 더 쉬워짐.

 

예를 들어, 함수나 클래스를 하나만 내보내야 할 때 default export를 사용하고, 다수의 변수나 함수를 내보내야 할 때 named export를 사용하는 것이 일반적인 관례임.