ES6

📒 var, let, const

📌 scope

💡 var vs let vs const

• 선언 및 할당
• var : 같은 이름으로 선언 및 재할당 가능
• let : 같은 이름으로 재선언 X, 재할당 O
• const : 값 변경 불가능
  • 객체 { } 또는 배열 [ ]로 선언했을 경우 객체의 속성과 배열의 요소는 변경 가능

💡 Scope

1. 함수레벨 스코프 (function-level scope)
   • 함수 내에서 선언된 변수는 함수 내에서만 유효
   • 함수 외부에서는 참조 X
   • 함수 내부에서 선언한 변수는 지역 변수
   • 함수 외부에서 선언한 변수는 모두 전역변수
2. 블록레벨 스코프 (block-level scope)
   • 모든 코드 블록(함수, 제어문, 조건문, try/catch문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며, 블록 외부에서는 참조 X
   • 코드 블록 내부에서 선언한 변수는 지역 변수

• var의 유효범위 : 함수레벨 스코프
• let의 유효범위 : 블록레벨 스코프

📒 Property Shorthand (단축 속성명)

• 객체를 정의할 때 객체의 key 값과 value에 할당할 변수명이 같을 경우 value를 생략 가능

// ES6 이전
const id = "test",
  name = "홍길동",
  age = 30;

// const user = {
//   id: id,
//   name: name,
//   age: age,
// };
// console.log(user);

// ES6 이후

const user = {
    id,
    name,
    age
}
console.log(user)

📒 Concise Method (간결한 메소드)

• 객체 내에서 좀 더 간결하게 메소드를 사용

// ES6 이전
const id = "test",
  name = "홍길동",
  age = 30;

// const user = {
//   id: id,
//   name: name,
//   age: age,
  
//   info를 사용해서 익명함수를 만듦
//   info: function () {
//     console.log("user info : " + this.id + " " + this.name + " " + this.age);
//   },
// };
// user.info();

// 함수 선언 형식
// function a() { } // 명명(익명) 함수 선언
// const a = function () { } // 명명 함수 표현
// const a = new Function('x', 'y', 'return x + y') // 함수 생성자

// ES6 이후
const user = {
    id,
    name,
    age,
    info() {
        console.log("user info : " + this.id + " " + this.name + " " + this.age);
    }
}
user.info();

📒 Destructuring Assignment(구조 분해 할당)

• 배열이나 객체에 입력된 값을 개별적인 변수에 할당하는 간편한 방식 제공

// 배열
const areas = ["광주", "구미", "서울", "대전", "부울경"];

// ES6 이전
{
  const a1 = areas[0];
  const a2 = areas[1];
  const a3 = areas[2];
  const a4 = areas[3];
  const a5 = areas[4];

  console.log(a1, a2, a3, a4, a5);
}

// ES6 이후
{
  const [a1, a2, a3, a4, a5] = areas;
  console.log(a1, a2, a3, a4, a5);
}

// 객체
const user = {
  id: "test",
  name: "홍길동",
  age: 30,
};

// ES6 이전
{
  let id = user.id;
  let name = user.name;
  let age = user.age;
  console.log(id, name, age);
}

// ES6 이후
// 객체의 property와 변수명이 같을 경우.
{
  let { id, name, age } = user;
  console.log(id, name, age);
}

// 변수명을 객체의 property명과 다르게 만들 경우.
{
  let { id: userId, name: userName, age: userAge } = user;
  console.log(userId, userName, userAge);
}

// 객체를 return 하는 함수.
function getUser() {
  return {
    id: "test",
    name: "홍길동",
    age: 30,
  };
}

// ES6 이전
{
  let user = getUser();
  let id = user.id;
  let name = user.name;
  let age = user.age;
  console.log(id, name, age);
}

// ES6 이후
{
  let { id, name, age } = getUser();
  console.log(id, name, age);
}

// ES6 이전
function showUserInfo1(user) {
  console.log("showUserInfo1 call");
  let id = user.id;
  let name = user.name;
  let age = user.age;
  console.log("아이디 : " + id);
  console.log("이름 : " + name);
  console.log("나이 : " + age);
}
showUserInfo1(user);

// ES6 이후
function showUserInfo2({ id, name, age }) {
  console.log("showUserInfo2 call");
  //let { id, name, age } = user;
  console.log("아이디 : " + id);
  console.log("이름 : " + name);
  console.log("나이 : " + age);
}
showUserInfo2(user);

📒 Spread Syntax

• Spread operator는 반복 가능한 객체에 적용할 수 있는 문법
• 배열이나 문자열 등을 풀어서 하나 하나로 전개 가능
• spread operator의 경우 값 복사가 아닌 주소를 가져오기 때문에 값을 바꿀경우 모두 변경
• key가 같은 object를 병합할 경우 마지막 obj의 값이 설정

const user1 = { id: "test1" };
const user2 = { id: "test2" };

const arr = [user1, user2];

// array copy (reference)
const copyArr = [...arr];
console.log(arr, copyArr);
// 객체와 배열은 === 비교시 주소를 비교.
console.log(arr === copyArr); // false
// 객체 또는 배열의 내용 비교시 JSON.stringify()사용
console.log(JSON.stringify(arr) === JSON.stringify(copyArr)); //true

// 주의 : spread operator의 경우 값 복사가 아닌 주소를 가져오기 때문에 값을 바꿀경우 모두 변경.
user1.id = "test";
console.log(arr, copyArr);

// 배열 복사 + 새로운 객체 추가.
const addArr = [...arr, { id: "ssafy3" }];
console.log(arr, addArr);

const team1 = ["서울", "광주"];
const team2 = ["대전", "부울경", "구미"];
// 배열 복사
const team3 = [...team1];
console.log(team3);
// 배열의 추가 요소로 넣기
const team4 = ["서울", ...team2, "광주"];
console.log(team4);
// 두 배열 이어 붙이기.
const team = [...team1, ...team2];
console.log(team);

//////////////////////////////////////////////////////

// 객체 복사
const copyUser = { ...user1 };
// const refUser = user1;
// console.log(user1 === refUser); // true
console.log(copyUser);
copyUser.id = "test100";
console.log(user1, copyUser);
console.log(user1 === copyUser);

// 객체 복사 + 새로운 property 추가.
const copyUser2 = { ...user1, name: "홍길동" };
console.log(copyUser2);

// object merge (병합)
const u1 = { id1: "test1" };
const u2 = { id2: "test2" };
const u = { ...u1, ...u2 };
console.log(u);

// 주의점 : key가 같은 object를 병합할 경우 마지막 obj의 값이 설정.
const user = { ...user1, ...user2 };
console.log(user);

// 함수 호출시 인자로 전달.
const num = [1, 3, 5, 7];

function plus(x, y, z) {
  return x + y + z;
}

const result = plus(...num);
console.log(result);

📒 Default Parameter

• 함수에 전달된 파라미터가 undefined이거나 전달되지 않았을 경우, 설정한 값으로 초기화
• default parameter가 reference type일 경우 호출될 때마다 새로운 객체를 생성

// ES6 이전
function print1(msg) {
  console.log(msg);
}
print1("hello");
print1();

// ES6 이후
function print2(msg = "안녕") {
  console.log(msg);
}
print2("hello");
print2();

// default parameter는 함수에 전달된 파라미터가 undefined이거나 전달되지 않았을 경우, 설정한 값으로 초기화.
function getUserId(userId = "test") {
  return userId;
}

console.log(getUserId());
console.log(getUserId(undefined));
console.log(getUserId(null));
console.log(getUserId("hissam"));

// default parameter가 reference type일 경우 호출될 때마다 새로운 객체를 생성함.
function appendArr(val, array = []) {
  array.push(val);
  return array;
}

console.log(appendArr(10)); // [10]
console.log(appendArr(20)); // [20] or [10, 20] ???

📒 Template String

• 문자열에 변수를 포함시킬 때 좀 더 직관적이고 편하게 사용하기 위한 기능
• 변수를 넣고자 하는 부분에 ${var} 키워드를 사용해 변수를 넣어 줌
• 문자열 사용시 큰따옴표 대신 백틱 사용
• 백틱 내부의 줄 바꿈은 그대로 적용

const id = "test",
  name = "홍길동",
  age = 30;
// ES6 이전
console.log(name + "(" + id + ")님의 나이는 " + age + "입니다.");
// ES6 이후
console.log(`${name}(${id})님의 나이는 ${age}입니다`);

📒 Arrow Function

• 화살표 함수

📌

Java의 lambda식 vs JS의 Arrow Function → this

생성자 함수의 this, addeventlistener의 콜백함수의 this 등

• 함수 선언

  // 기존 함수 선언
  function name(param) {}
  
  // 화살표 함수
  // 함수의 이름이 없는 익명함수 이므로 반드시 변수에 담아서 사용.
  const name = (param) => {};

• 매개변수에 따른 설정
  • 매개변수가 없을 경우
    • ( ) ⇒ {} ;
  • 매개변수가 한 개 있을 경우, (param)의 소괄호 생략 가능
    • (param) ⇒ {} ;
  • 매개변수가 여러 개 있을 경우, (param1, param2)의 소괄호 생략 X
    • (param1, param2) ⇒ {} ;
• function body 설정

  (x) => {
     return x + 10;
  };

  • body의 내용이 한줄일 경우 {} 생략 가능하고 자동으로 결과값이 return된다.

    (x) => x + 10;
    

  • object return시 ( ) 사용.

    () => {
    	return { id: "test" };
    };
    
    () => ({ id: "test" });

  • body가 여러줄일 경우 {}, return 생략 불가.

    (x) => {
    	const y = x + 100;
    	return y;
    };

// ES6 이전
function func1() {
  return 100;
}
let result = func1();
console.log(result);

// ES6 이후
//const func2 = () => { return 100; }
const func2 = () => 100;
let result2 = func2();
console.log(result2);

// ES6 이전
function func3(x) {
  return x + 100;
}
result = func3(50);
console.log(result);

// ES6 이후
const func4 = (x) => x + 100;
result = func4(50);
console.log(result);

// ES6 이전
function func5(x, y) {
  return x + y;
}
result = func5(50, 80);
console.log(result);

// ES6 이후
const func6 = (x, y) => x + y;
result = func6(50, 80);
console.log(result);

// ES6 이전
function func7() {
  return {
    id: "test",
  };
}
result = func7();
console.log(result.id);

// ES6 이후
const func8 = () => ({ id: "test" });
result = func8();
console.log(result.id);

// ES6 이전
function func9(x) {
  const y = x * 3;
  return y;
}
result = func9(10);
console.log(result);

// ES6 이후
const func10 = x => {
  const y = x * 3;
  return y;
}
result = func10(10);
console.log(result);

// Arrow Function에서는 this가 바인딩 되지 않음.
const user = {
  id: "test",
  age: 20,
  //   info() {
  //     console.log(this.id, this);
  //   },
  // info: () => console.log(this.id, this), // this 사용 불가.
  info: function () {
    const innerFunc = () => console.log(this.id, this);
    innerFunc();
  }
};
user.info();

📒 Module

💡 Module

• import 또는 export 구문을 사용

<script type="module" src="app.js"></script>

💡 module system

• CommonJS (NodeJS) : 웹 브라우저 밖에서도 동작될 수 있는 모듈 규칙 설립
• AMD (Asynchronous Module Definition) : 비동기적으로 모듈을 로딩
• ESM (ECMAScript Module, ECMA215, es6) : 자바스크립트 자체 모듈

💡 module scope

• 모듈의 가장 바깥쪽에서 선언된 이름은 전역 스코프가 아니라 모듈 스코프에서 선언됨
• 모듈 스코프에 선언된 이름은 export 해주지 않으면 해당 모듈 내부에서만 접근 가능 → 여러 모듈의 가장 바깥쪽에서 같은 이름으로 변수, 함수, 클래스를 선언하더라도, 서로 다른 스코프에서 선언되기 때문에 이름의 충돌이 발생하지 않음
  

💡 export & import

• module scope에 선언된 이름은 export 구문을 통해 다른 파일에서 사용 가능

  • 변수, 함수, 클래스 export 가능

  • 개별 export, 한번에 export, export default

    export const name = "홍길동";
    export {name, age, info, Student };
    export default function() {}

• exort 된 이름을 다른 파일에서 import 구문을 통해 가져온 뒤 사용 가능

<script type="module">
      import { name, age, info, Student } from "./02.declare.js";

      console.log(name, age);

      const result = info();
      console.log(result);
</script>

1. export를 이용한 개별 변수, 함수, 클래스를 export

   • 이름을 선언하는 구문 앞에 export를 붙이면 선언과 동시에 export 가능

   export const name = "홍길동";
   export const age = 30;
   
   export function info() {
     return `이름 : ${name}, 나이 : ${age}`;
   }
   
   export class Student {}

   ⇒ 홍길동 30

   이름 : 홍길동, 나이 : 30

1. export를 이용한 변수, 함수, 클래스를 한번에 export

   • 파일의 마지막에 export를 선언하여 한번에 export 가능

   const name = "홍길동";
   const age = 30;
   
   function info() {
     return `이름 : ${name}, 나이 : ${age}`;
   }
   
   class Student {}
   
   export { name, age, info, Student };

1. export default
   • 모듈을 대표하는 하나의 값을 지정하고 모듈을 가져올 때 { }를 사용하지 않아도 됨

     export const name = "홍길동";
     export const age = 30;
     
     export default function () {
       return `이름 : ${name}, 나이 : ${age}`;
     }
     
     export class Student {}

   • import 시 이름을 다르게 가능

     <script type="module">
           import info2, { name, age, Student } from "./04.declare.js";
     
           console.log(name, age);
     
           const result = info2();
           console.log(result);
     </script>

   • 객체 형식으로 하게 되면 한번에 import 가능