핵심 ES6 개념에 대해 알아보자 🔥

ES6 또는 ES2015는 JavaScript의 핵심 기본 개념 중 하나입니다. 스크립트의 표준과 기능을 상당 부분 통합합니다.

🟡 템플릿 리터럴:

템플릿 리터럴은 문자열이 사용되는 모든 곳에서 사용할 수 있습니다. 보기 흉한 작은 따옴표와 큰 따옴표 대신 역따옴표(`)를 사용합니다. 이점에 대해 이야기해 보겠습니다.

✨ String Interpolation:이것은 JavaScript 변수에 액세스하고 해당 변수 또는 표현식을 문자열에 포함하는 방법으로 생각할 수 있습니다. 보간 연산자${}를 사용하여 수행할 수 있습니다.

const lastName = 'Things';

//Without Template Literals
console.log('Stranger ' + lastName); // Stranger Things

// With Template Literals
console.log(`Stranger ${lastname}`); // Stranger Things

✨ Multi-Line Display:템플릿 리터럴을 입력할 때 enter/return를 사용할 수도 있습니다. 그러면 문자열이 여러 줄에 표시됩니다!

let bio = `CS Undergrad and  // newline character \n
Software Developer           // will be added to
among many other things.`;   // the whole string.

🟡 기본 매개변수 값 사용:

기본 할당 문은 인수가 함수에 전달되지 않은 경우에만 발생합니다.

function sayHey(name = 'Suzie') {
    console.log(`Hey ${name}`);
}
sayHey('Dustin') // Hey Dustin
sayHey(); // Earlier, it used to give undefined
// but with default para, it gives - Hey Suzie

🟡 기본값과 기본값이 아닌 혼합:

항상 매개변수 목록의 끝에 기본값을 설정해야 합니다. 그렇지 않으면 NaN 결과가 나타날 수 있습니다.

function doSum(a,b=1) {
    console.log(a+b);
}
doSum(2,3); // 5
doSum(3); // 4, here a = 3, b = 1

🟡 화살표 기능:

기능을 표현하는 더 짧고 간결한 방법입니다. function()를 () =>로 바꿉니다.
구문은 다음과 같습니다.

const sayHey = () => "value" 
// this will return value by default!

✨ 속기: 화살표 함수에 매개변수가 하나만 있는 경우 괄호를 무시할 수 있습니다().

const whichMonth = month => console.log(month);
whichMonth(September); // September

✨ 가장 중요'this' Borrower 화살표 표현식에는 고유한this 값이 없습니다. 이것은 우리가 그것들을 사용할 수 없다는 것을 의미하지는 않지만 this의 값은 화살표 함수의 주변이 될 것입니다.
Before Arrow Functions , 바인딩해야 this , 액세스하려면 this

class Wallet {
    constructor() {
        this.money = 200;
    }

    increaseMoney() {
        function IncrementM() {
            this.money++;
        } // before binding, this refers to global window object.
        setInterval(IncrementM.bind(this), 100);
    }
}

let w = new Wallet();
w.increaseMoney();

더 이상 기본값this 값을 허용하지 않기 때문에 작동합니다. 대신 이 순간에 수동으로 this로 설정하고 있습니다.
After Arrow Functions Came , 이제 더 간결하게 🎉

class Wallet {
    constructor() {
        this.money = 200;
    }

    increaseMoney() {
        setInterval(() => {
            this.money++;
        }), 100);
    }
}

let w = new Wallet();
w.increaseMoney();

🟡 스프레드 구문 :

기본적으로 스프레드 연산자array를 사용하여 (...)의 모든 값을 인수로 함수에 보냅니다.

const addSum = (a,b,c) => console.log(a+b+c);

const values = [3,4,5];

addSum(...values);

// Same as
addSum.apply(null, values);

// Same as
addSum(3,4,5);

✨ 중요 : 문자열의 문자를 배열로 퍼뜨릴 수도 있습니다.

const str = 'abhi';
const char = [...str];
console.log(char); // ['a','b','c','d']

🟡 구조 분해 할당:

그것은 우리에게 더 큰 구조의 데이터 조각에서 필요한 요소를 제거할 수 있는 힘을 줍니다. arrays 및 objects 에서만 수행할 수 있습니다. 배열 구조 해제를 수행하면 position를 기반으로 하고 객체의 경우 property 이름을 기반으로 합니다!

let mail = {
    name: 'Abhishek',
    programme: BSoC,
    email: '[email protected]'
};
// Order doesn't matter when destructuring!
const selected = ({ programme, name }) => {
    return console.log(`Congratulations ${name}! You've been selected for ${programme}!`);
}
// We can also rename the property!
let {name: firstName} = mail;

selected(mail);
// Congratulations Abhishek! You've been selected for BSoC!

이 블로그의 원래 게시 날짜: My Blog WebSite