[2주차] 자바스크립트 문법 종합반 : es6 문법

es6 문법

-let, const

-화살표 함수 (Arrow Function)

-삼항 연산자 (ternary operator)

-구조 분해 할당 (Destructuring)

-단축 속성명 (property shorthand)

-전개 구문 (Spread operator)

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

-템플릿 리터럴 (Template literals)

-named export vs default export

---

es6 문법

: ECMAScript 6 (ES6)는 JavaScript의 버전 중 하나로, 2015년에 발표되었다. ES6는 이전 버전인 ES5에서 새로운 문법과 기능을 도입하여 JavaScript 개발자들이 보다 쉽고 효율적으로 코드를 작성할 수 있도록 개선하였다.

 

let, const

// 1. let, const
// 2015년 이전에는 var를 사용했지만, 2015년 es6 이후에 let(변수), const(상수)가 추가되었다.

// 중요 키워드
// 선언: 변수명을 자바스크립트 엔진에 알리는 것
// 할당: 변수에 값을 저장하는 것 (`=` 할당연산자)

// 1-1. let
// 재할당 가능, 재선언 불가능
let value = "value1"
console.log(value) // value1

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

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


// 1-2. const
// 재할당, 재선언 모두 불가능. 초기값이 없으면 선언 불가능
const value; // 초기값 없이 선언 불가능, 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 의 특징
// (1) 재할당 가능, 재선언 가능
var name = "name1"
console.log(name) // name1

var name = "name2"
console.log(name) // name2

// (2) 호이스팅 가능
console.log(name) // undefined

var name = "name1"

 

 

 

 

화살표 함수 (Arrow Function)

// 2. 화살표 함수 (Arrow Function)
// 함수 선언의 두 가지 방법이 있었는데
// (1) 함수 선언문
function add () {

}

// (2) 함수 표현식
var add = function() {

}

// 여기서 화살표 함수로 표현한다면?
var add = () => {

}

// 만약 화살표 함수 안에 로직이 한줄이라면 중괄호도 줄일 수 있다!
var add = () => {
  return 1;
}

var add = () => 1;

// +추가 지식 this
// function은 호출을 할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해진다.

 

 

 

삼항 연산자 (ternary operator)

// 3. 삼항 연산자 (ternary operator)
// condition ? expr1 : expr2 // 조건 ? true인 경우 : flase인 경우

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

 

 

구조 분해 할당 (Destructuring)

// 4. 구조 분해 할당 (Destructuring)
// 배열[]이나 객체{}의 속성을 분해해서, 그 값을 변수에 담을 수 있게 해주는 문법

// 4-1. 배열의 경우
[1, "new"] // 라는 배열이 있는데

let [value1, value2] = [1, "new"]; // 오른쪽의 배열을 쪼개서 왼쪽 변수 두 가지에 담는다. 1은 value1에, "new"는 value2에 담는다.

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 // 이와 같이 빈 변수에 초기값을 설정해주면, undefinded 시에 초기값으로 설정이 된다.
console.log(d) // 4

console.log(a); // value1
console.log(b); // value2
console.log(c); // value3
console.log(d); // value4




// 4-2 객체의 경우
let user = { // 객체 먼저 만들기
  name: "nbc",
  age: 30,
};  

let {name, age} = user; // 이 식과
let {name, age} = {     // 이 식은 같은 의미이다.
  name: "nbc",
  age: 30,
}

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

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





// + 추가지식, 새로운 이름의 변수로 할당하는 방법
let {              // 객체 만들기
  name: "nbc",
  age: 30,
};

let {              // user 에 할당
  name: newName,   // 그러면 "nbc"가 newName으로 할당되고, 30이 newAge로 할당된다.
  age: newAge
} = {              
  name: "nbc",
  age: 30,
} 

// 아래 정리를 쫙 하자면,,

let {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) //nbc 30

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

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

// 이해를 위해 node.js 돌려보기
let user = { 
  name: "nbc",
  age: 30,
};  

let {name: newName, age: newAge} = user; // ReferenceError: name is not defined

console.log(name, age);

// 그렇다면 이런 경우에는?
let user = { 
  name: "nbc",
  age: 30,
};  

let {name: newName, age: newAge} = user; 

console.log(newName, newAge); // nbc 30

 

 

 

단축 속성명 (property shorthand)

// 5. 단축 속성명 (property shorthand)
// 정말 많이 쓰임!!!!!!
// 객체의 key와 value 값이 같다면, 생략 가능하다
const name = "nbc"
const newAge = "30"


const obj = { // 객체
	name: name, // name과 newAge처럼 key의 value값이 변수가 올 수도 있다. // 그러다보면 key와 value 이름이 겹치는 경우도 생긴다. 그럴땐 과감히 value 값을 지운다.
	age: newAge 
};


const obj = { // 객체
	name,       // 이것처럼!!
	age: newAge
};




// 다른 예시
const name = "nbc"
const age = "30"

const obj = {
	name,
	age
}; // 그럼 이렇게 단축되었다면 아래와 같이 표현될 수 있다.

const obj = { name, age }; // 와
const obj = { name : name, age: age }; // 랑 같다.

 

 

 

 

전개 구문 (Spread operator) (...)

// 6. 전개 구문 (Spread operator) (...)
// destructuring과 함께 가장 많이 사용되는 es6 문법

// 6-1. 배열 전개구문
let arr = [1,2,3];
console.log(arr); // [1,2,3]

//하지만 spread operator를 쓰면?!
let arr = [1,2,3];
console.log(...arr); // 1 2 3

// 그럼 spread operator를 언제 쓰는가?
// -> 기존 구조를 벗어버리고, 새로운 구조로 덧입혀야 할 때 씁니다.

// --- 예시를 통해 알아봅시다. --- //
let arr = [1, 2, 3]; // 이 있는데 여기서
let arr = [1, 2, 3, 4]; // 로 만들고 싶다면?


let newArr = [...arr, 4]; // 새로운 array 변수 필요 그리고, 4 추가
console.log(newArr) // [1,2,3,4]







// 6-2. 객체 전개구문
let user = {name: "nbc", age: 30}; // 기본 user 객체
let user2 = {...user};

console.log(user); // {name: "nbc", age: 30}
console.log(user2); // {name: "nbc", age: 30}


user2.name = "nbc2";

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

 

 

 

 

 

나머지 매개변수(rest parameter)

// 7. 나머지 매개변수(rest parameter)
function exmapleFunc(a, b, c) {
    console.log(a, b, c);
}

exmapleFunc(1, 2, 3); // 1 2 3


// 함수에 들어가는 매개변수의 개수를 모를 때, 아래처럼 표현한다.
function func (a, b, ...args) { // 추가적으로 arguments가 들어올 수 있다는 뜻
	console.log(...args);
}

func(1, 2, 3); // a, b 제외하고 나머지  // 3 //
func(1, 2, 3, 4, 5, 6, 7); // a, b 제외하고 나머지 // 3 4 5 6 7


// 여기서 만약 ...을 안써준다면?
function func (a, b, args) { // 추가적으로 arguments가 들어올 수 있다는 뜻
	console.log(args);
}

func(1, 2, 3); // a, b 제외하고 나머지  // [ 3 ]
func(1, 2, 3, 4, 5, 6, 7); // a, b 제외하고 나머지 // [3, 4, 5, 6, 7]
// 배열 형태로 나온다.

 

 

 

 

 

템플릿 리터럴 (Template literals)

Template literals - JavaScript | MDN

// 8. 템플릿 리터럴 (Template literals)
// 활용도 높음!!!

//보통 문자열 출력할 때 어떻게 하는가?
console.log("hi");
//그런데 backtick ` 을 사용하면 똑같이 문자열이 출력되고, 추가기능도 있다.
console.log(`hi`); // `` 안에는 js 코드 , 변수, 연산도 들어갈 수 있다.

// ``안에 자바스크립트 코드가 들어가게 하려면 아래와 같이 ${}를 넣어야함
const testValue = "안녕하세요!";
console.log(`hi ${testValue}`);


// 또 다른기능, 멀티라인 지원
console.log(`
  hi
    my name
    
    nice
    
  `);

  // hi
  //    my name
  //    nice

 

 

 

 

 

named export vs default export

// 9. named export vs default export 
// 9-1. named export
// name.js
const Name = () => {
}

export default Name

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









// 9-2. default 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)