ES6 문법

호이스팅 : var선언부, 함수선언부를 최상단 스코프로 끌어올린 후 동작하는것을 말하는 가상의 개념
(실제로 일어나지는 않는다.)

• 변수를 선언부 할당부로 나누어 선언부만 수집.
  • 변수가 함수 내에서 정의되었을 경우 : 선언부만 함수의 최상위로.
  • 변수가 함수 바깥에서 정의되었을 경우 : 전역 컨텍스트의 최상위로.
    
    
    
• 함수의 경우 선언문일 때 함수 전체가 수집.
  • 선언문 : 코드가 실행되는 런타임시에 이미 함수 객체가 생성되어 있고, 함수 이름과 동일한 식별자에 할당까지 완료된 상태.
  • 표현식 : 함수가 아닌 var 키워드를 사용한 변수의 선언부가 호이스팅되므로 Type Error.
    호이스팅 참조 사이트 : [https://velog.io/@kiki/귀여운포미와함께하는JS](https://velog.io/@kiki/%EA%B7%80%EC%97%AC%EC%9A%B4%ED%8F%AC%EB%AF%B8%EC%99%80%ED%95%A8%EA%BB%98%ED%95%98%EB%8A%94JS)
    
    

스코프 체인 : 안에서 부터 바깥으로 차례대로 참조할 수 있는 것을 검색하는 것

렉시컬 스코프 : 함수를 어디서 선언하였는지에 따라서 상위스코프를 결정함(호출한곳 기준이 아님!)
(자바스크립트는 상위 스코프 결정을 이 렉시컬 스코프로 한다.)

클로저 : 이미 호출이 끝난 함수를 지역변수에서 다시 사용할수 있는 것

---

let, const

1-0. var : var는 스코프 체인을 따라서 올라서 찾는다. (변수 호이스팅이 발생한다)

1-1. let : let은 function단위가 아닌 block단위 스코프로 변수를 찾는다. 스코프에 식별자가 없으면 에러를 띄운다.

1-2 const : let과 같은 block단위 스코프를 가지며, 상수를 선언할때 사용한다.
(객체를 const로 할 경우 내부의 값 변경은 가능하다. 객체메모리주소값만 immutable이 됨)

push(), concat()의 차이

• push() : 기존 배열에 원소를 추가함
• concat() : 기존 배열을 복사한 후 원소를 추가함

startsWith(), endsWith(), includes()

• .startWith() : 파라미터값이 시작지점에 포함되어있는지
• endsWith() : 파라미터값이 끝지점에 포함되어있는지
• includes() : 파라미터값이 포함되어있는지

let str = "hello world ! ^^ ~~";
let matchstr = "hello";
let matchstr2 = "& ~~";

console.log(str.startsWith(matchstr)); // true
console.log(str.startsWith(matchstr2)); // true
console.log(str.includes("^^^")); // false

for of

• forEach, for in를 개선한 반복문

let data = [1, 2, undefined, NaN, null, ""];
for (let value of data) {
    console.log(value)
}
let str1 = "hello world!!!!";
for (let value of str1) {
    console.log(value);
}

spread operator (=펼침연산자)

• 배열을 복사해줌

let pre = [100, 200, "hello", null];
let newData = [0, 1, 2, 3, ...pre, 4];
console.log(newData); // [0, 1, 2, 3, 100, 200, "hello", null, 4]

//--------------------------------------------

let sum = (a, b, c) => a+b+c;
let pre = [100, 200, 300];

console.log(sum(...pre));  // 600

arguments, from method

• arguments : 가변적인 함수(파라미터가 몇개가 들어가야하는지 모를때)를 사용해야할 때 좋음
  (배열처럼 생겼지만 배열이 아님!!!)
• Array.from() : 배열처럼 생긴 객체들을 배열로 바꿔줌

function addMark() {
    let newArray = Array.from(arguments);
    let newData = newArray.map(function(value) {
        return value + "!";
    });

    console.log(newData);
}

addMark(1,2,3,4,5,7,8,9);

번외 : map vs filter

• 공통점 : 기존 배열을 건드리지 않고 복사해서 사용한다.
• map : 콜백함수가 적용된 새 요소로 반환한다.
• filter : 조건문을 만족한 요소들을 반환한다.

destructuring

• 변수를 한번에 여러개 선언및초기화가 가능함
• let [변수1, 변수2, ....] = 가져올변수
• → 인덱스넣어줌
• { } → k:v일때 key값만 뽑아서 가져올수있음
  news에서 mbc의 title, newslist를 뽑는다면? ex) [ , {title, newslist}]

// Destructuring Array
let data = ["crong", "honux", "jk", "jinny"];
let [jisu, , jung] = data;
console.log(jisu);  // crong
console.log(jung);  // jk

// Destructuring Object
let obj = {
    name : "crong",
    address : "Korea",
    age : 10
}

let {name, age} = obj;
console.log(name,age);  // crong 10

let {name:myName, age:myAge} = obj;
console.log(myName, myAge); // crong 10

// Destructuring Json
let news = [
    {
            "title" : "sbs",
            "imgurl" : "http://static.naver.net/newsstand/2017/0313/article_img/9033/2204",
            "newslist" : [
                        "[가보니] 가상 경주도 즐기고, 내 손으로 자동차도 만들고",
                        "리캡차'가 사라진다",
                        "갤럭시S8' 출시? '갤노트7' 처리 계획부터 밝혀야",
                        "블로코-삼성SDS, 블록쳉니 사업 '맞손",
                        "[블록체인 톺아보기] 퍼블릭 블록체인의 한계와 브라이빗 블록체인"
            ]
    },
    {
            "title" : "mbc",
            "imgurl" : "http://static.naver.net/newsstand/2017/0313/article_img/9033",
            "newslist" : [
                        "Lorem ipsum dolor sit amet",
                        "ipsum dolor sit amet",
                        "dolor sit amet, consectetur adipisicin",
                        "amet, consectetur adipisin"
            ]
    }
];

let [,mbc] = news;
let {title, imgurl} = mbc;
console.log(title, imgurl);

// Event객체 전달
document.querySelector("div").addEventListener("click",
({target}) => console.log(target));
// event를 통째로 가져오지않고 event안의 target, type등 특정값만 가져올수도 있다.

Template literals

const data = [
    {
        name : 'coffee-bean',
        order : true,
        items : ['americano', 'milk', 'green-tea']
    },
    {
        name : 'starbucks',
        order : false,
    }
]

// Tagged template literals
// tags : 템플릿리터럴의 블럭 앞뒤로 오는 문자열을 배열로 모아놓음
function fn(tags, name, items) {
    if (typeof items === "undefined") {
        items = "주문가능한 상품이 없습니다";
    }
    return (tags[0] + name + tags[1] + items + tags[2]);
}

let template = fn`<div>welcome ${data[1].name} !!</div>
                                        <h2>주문가능항목</h2><div>${data[1].items}</div>`;
console.log(template);
/*
<div>welcome starbucks !!</div>
<h2>주문가능항목</h2>
<div>주문가능한 상품이 업습니다</div>
*/