JavaScript ES6 (variable, arrow function)

이번 글이 제 첫글이 되네요.
깃허브 리드미에 정리만 하다가 글 쓰면서 복습도 할겸 앞으로 글을 쓰려고 합니다.
부족하지만 보시고 조금이라도 도움이 되셨으면 좋겠습니다 😃

오늘은 JavaScript 에서 ES6 문법에 대해서 알아보겠습니다.

1. 변수

지금까지 JavaScript에서 변수를 var, const 를 사용해왔습니다. 이제 ES6 에서는 let, const 를 지원합니다.

• const : 변경할 수 없는 변수 선언 방식입니다.
• let : 변수를 변경할 수 있는 선언 방식입니다.

여기서 var 과 let 이 도대체 무슨 차이가 있지? 라고 의문이 들 수 있습니다.

우선 차이점을 알아가기 전에 hoisting 이라는 개념에 대해서 알고 가셔야 합니다.

간단하게 hoisting 은 코드를 구성할 때 어디에 선언을 했는지 상관없이 그 선언을 코드 맨 위로 끌어 올려주는 것을 뜻합니다. 즉, 변수를 선언 전에 호출해도 hoisting 이 되면 코드가 문제 없이 실행되는 것입니다.

‼️ 차이점 ‼️

• var : hoisting 을 합니다.
• let : hoisting 을 하지 않습니다.

=> 따라서 앞으로 let 을 사용하는게 더 권장됩니다. var 은 hoisting 을 하기 때문에 코드를 작성했을 때 이상하게 작동할 수 있게 됩니다.

2. Blocks and IIFEs

=> IIFE는 Immediately Invoked Function Expression의 약자로 정의와 동시에 즉시 실행되는 함수를 의미합니다.

ES6에서 즉시 실행 함수를 쓰는 방식으로 바로 코드로 보겠습니다.

//ES6
{
    const a = 1;
    let b = 2;
    console.log(a + b);
}

//ES5

(function () {
    var c = 3;
})();

코드에서 확인할 수 있듯이 bracket 을 그냥 감싸주고 안에 내용물을 작성해주시면 즉시 실행 함수가 됩니다.

3. Strings

//ES5

console.log("this " + name + age + " hihi");

• ES5 에서는 이런식으로 문자열와 값을 + 를 이용해서 연결 시켜줬습니다.

//ES6

console.log(`this is ${age} , ${name} hihi`);    
// backticks 를 사용하면 된다. 그리고 ${} 로 값을 전달

const n = `${name} ${age}`;

console.log(n.startsWith("h"));   // 시작 
console.log(n.endsWith("0"));			// 끝
console.log(n.includes("jj"));			// 포함하는지 판단.
 

• 하지만 ES6 에서는 ${값} 의 형태로 값을 전달해줄 수 있습니다.
• 문자열과 같이 값을 전달하기 위해서는 backbracket 을 사용해서 감싸주어야 합니다.

4. Arrow Function ()=>{}

• array.map -> forEach와 마찬가지고 배열의 각 요소를 순회하며 callback 함수를 실행한다. callback에서 return된 값을 배열로 만든다.

• arrow function 은 this 를 가지고 있지 않다.

• this 와 arguments 를 바인딩 하지 않는다.

const year = [1990, 1965, 1996, 2000];

//ES5

var ages5 = year.map(function (el) {
    return 2020 - el;
});

//ES6

let ages6 = year.map((el) => 2020 - el);

console.log(ages6);

ages6 = year.map((el, index) => `age : ${index + 1} : ${2020 - el}`);  // 인자가 2개인 경우.

//ES5

var box5 = {
    color: "green",
    pos: 1,
    click: function () {
        // -> click function 은 box5 object의 method 이기 때문에  this를 가지고 있다.

        document.querySelector(".green").addEventListener("click", function () {
            var str = "this is box number" + this.pos + this.color;
            //addEventListener 에 있는 function 은 method가 아니기 때문에 this가 없다.

            alert(str);
        });
    },
};

box5.click();

//ES6

const box6 = {
    color: "green",
    pos: 1,
    click: function () {
        
        document.querySelector(".green").addEventListener("click", () => {
            var str = "this is box number" + this.pos + this.color;
            // -> arrow function은 click 의 this를 가지고 올 수 있다. (from surrouding)
            alert(str);
        });
    },
};

box6.click();


//Another case


const box6 = {
    color: "green",
    pos: 1,
    click: () =>  {    // arrow function 으로 변경.  -> this는 외부 window를 가리킨다. (this 를 바인딩하지 않기 때문)
        
        document.querySelector(".green").addEventListener("click", () => {
            var str = "this is box number" + this.pos + this.color;
            alert(str);
        });
    },
};

box6.click();    // result: undefined

//ES5

function Person(name) {
    this.name = name;
}

Person.prototype.myFriends = function (friends) {
    var arr = friends.map(function (el) {
        return this.name + "is friend with" + el;
    });    // .bind(this) 를 하면 작동한다. 

    console.log(arr);
};

var friends = ["solji", "heeje", "bob"];

new Person("john").myFriends(friends);    // this.name is undefined.

//ES6

function Person(name) {
    this.name = name;
}

Person.prototype.myFriends = function (friends) {    // object 의 method.
    var arr = friends.map((el) => {     // 외부 this 를 가리키기 때문에 this 는 Person을 가리킴.
        return this.name + "is friend with" + el;
    });

    console.log(arr);
};

var friends = ["solji", "heeje", "bob"];

new Person("john").myFriends(friends);```