JavaScript ES6 (variable, arrow function)

この文章は私の最初の文章になった.
羽毛センターで整理しながら書き復習しながら書きます
不足点はございますが、ご覧になっていただければ助かります.😃
今日はJavaScriptからES 6の文法を知りましょう.
1.変数
JavaScriptはこれまでvar、const変数を使用してきました.ES 6はlet、constをサポートしています.

const:変更できない変数宣言.

let:変数の宣言方法.

ここのvarとletはいったいどんな違いがありますか?という疑問があるかもしれません.
まず、違いを知る前に、アップグレードの概念を理解する必要があります.
簡単に言えば、昇格は、コードを構築するときにどこで宣言しても、宣言をコードの上部に昇格させることを意味します.すなわち、変数を宣言する前に変数を呼び出すと、コードは正常に動作します.
†††異なる点††

var:クレーン.

let:重くない.

=>なので、後でletを使うことをお勧めします.varはクレーンなので、コードを書くときに異常が発生する可能性があります.
2. Blocks and IIFEs
=>IIFEは、Immedially Invoked Function Expressionの略で、定義と同時に即時に実行される関数です.
ES 6にインスタント実行関数を書き込むようにコードを直接見てみましょう.

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

//ES5

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

コードでご覧のように、カッコを包んでコンテンツを作成すると、すぐに実行関数になります.
3. Strings

//ES5

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

ES 5は+を使用して文字列と値を接続します.

//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"));			// 포함하는지 판단.
 

であるが、ES 6は${값}の形で値を提供することができる.

文字列などの値を渡すには、カッコを使用して保護する必要があります.

4. Arrow Function ()=>{}

array.map->foreachと同様に、配列内の各要素を巡り、コールバック関数を実行します.コールバックで返される値を配列にします.

矢印関数にはこの機能はありません.

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);```