Javascript에서 ES6의 상위 7가지 기능

1.let 및 const 키워드

두 키워드 모두 사용자가 변수를 정의할 수 있도록 합니다. 한편 'let' 키워드는 코드 전체에서 변경할 수 있는 'var'과 비슷합니다.

let a = 10;
console.log(a) //10

반면에 'const' 키워드는 사용자가 상수를 정의할 수 있도록 합니다. 'let' 및 'var'와 달리 이 변수를 변경하거나 재할당할 수 없습니다.

const PI = 3.14;
console.log(PI); //3.14

객체나 배열의 경우

const obj1 = {name : "John", city:"NewYork"};
obj1.name = "Mike"; //this is valid
obj1 = {name : "Mike", city: "NewYork"} //this is not valid

const arr1 = [1,2,3];
arr1.push(4); //valid
arr1.pop(); //valid
arr1 = [1,2] //not valid

재할당할 수 없다는 점만 기억하세요.

둘 다 블록 범위입니다. 'var'를 사용하여 if 블록에 하나의 변수를 정의한다고 가정하면 전체 함수에서 유효합니다. 그러나 'let' 또는 'const'를 사용하여 정의하면 해당 특정 if 블록에서만 유효합니다.

function something() {
if(true) {
    var a = 10;
}
console.log(a); //prints 10
}
something();

const 또는 let을 사용하는 경우

function something() {
if(true) {
    let a = 10;
}
console.log(a); //Reference Error
}
something();

2.화살표 기능

'function' 및 'return' 키워드를 제거하여 함수 표현식 작성을 위한 보다 간결한 구문을 제공합니다.

화살표 함수는 굵은 화살표( => ) 표기법을 사용하여 정의됩니다.

//Arrow function
let sum = (a,b) => a+b;
console.log(sum(5,10));  //prints 15

하지만 함수 본문에 여러 표현식이 있는 경우 중괄호로 묶어야 합니다. 또한 'return' 문을 사용하여 필요한 값을 반환해야 합니다.

3. 기본 매개변수

ES6에서 사용자는 함수 서명에서 바로 기본값을 제공할 수 있습니다. 하지만 ES5에서는 OR 연산자를 사용해야 했습니다.

//In ES6
let calculateArea = (height = 100, width = 50) => {
    //logic
}

//In ES5
var calculateArea = function(height,width) {
    height = height || 50;
    width = width || 100;
    //logic
}

4. 템플릿 리터럴

ES6에는 변수에 대한 자리 표시자와 함께 매우 간단한 문자열 템플릿이 도입되었습니다. 템플릿 문자열을 사용하기 위한 구문은 ${YOUR_VARIABLE}이며 백틱 문자열 내부에서 사용해야 합니다.

const firstName = "John";
const lastName = "Doe";
let name = `My name is ${firstName} ${lastName}

5.향상된 객체 리터럴

ES6는 중괄호 안에 속성이 있는 객체를 쉽고 빠르게 생성할 수 있는 향상된 객체 리터럴을 제공합니다. 개체의 변수 이름과 키 속성이 동일한 경우에 적용됩니다.

function getName(firstName,lastName) {
   return {
      firstName,
      lastName
   }
}

console.log(getName("John", "Doe")); //Outputs {firstName :"John", lastName: "Doe" }

6. 디스트럭처링 할당

Destructuring은 ES6의 가장 인기있는 기능 중 하나입니다. 기본이 아닌 데이터 유형(예: 객체 및 배열)에만 적용할 수 있습니다. 향상된 개체 리터럴과 마찬가지로 개체의 속성 키를 변수로 사용할 수 있습니다.

//Object - mapped through keys
let Person = {id : 1, name:"Peter", age: 24}
let {name,age} = Person
console.log(name) //Outputs "Peter"
console.log(age) //Outputs 24

//Array - mapped through index
let apps = ["Netflix", "Amazon", "Whatsapp"];
let [a,b] = apps;
console.log(a); //Outputs "Netflix"
console.log(b); //Outputs "Amazon"
let [,c,d] = apps;
console.log(c); //Outputs "Amazon"
console.log(d); //Outputs "Whatsapp"

별칭을 사용할 수 있습니다. 특정 해체된 변수 이름을 다른 이름으로 사용하려는 경우 별칭을 사용할 수 있습니다. 예를 들어 설명하겠습니다.

//Object
let obj1 = {name1 : "Mike", name2:"Smith"};
let {name1 : firstName, name2 : lastName} = obj1;
console.log(firstName); //Outputs "Mike"
console.log(lastName); //Outputs "Smith"

//I am pretty sure you won't face this problem but in case

let obj2 = {"first Name" : "Mike", "last Name":"Smith"}; //this is valid in JS objects
let {"first Name" : firstName, "last Name" : lastName} = obj2;
console.log(firstName); //Outputs "Mike"
console.log(lastName); //Outputs "Smith"

7. 스프레드 연산자

이것은 또한 가장 많이 사용되는 ES6 기능 중 하나입니다. javascript 확산 연산자(...)를 사용하면 기존 배열 또는 객체의 전체 또는 일부를 다른 배열 또는 객체로 빠르게 복사할 수 있습니다.

//Array
const oddNumbers = [1,3,5,7];
const evenNumbers = [2,4,6,8];
const numbersCombined = [...oddNumbers, ...evenNumbers]; //Outputs [1,3,5,7,2,4,6,8]

//Objects
const name = {
   firstName : "Terry",
   lastName : "Brown"
}

const details = {
   age : 42,
   city : "New Jersey"
}

const fullDetails = {...name, ...details};
console.log(fullDetails); //Outputs { firstName : "Terry", lastName : "Brown",  age : 42,city : "New Jersey" }

확산 연산자는 종종 구조 분해와 함께 사용됩니다.

//Array
const numbers = [1,2,3,4,5,6,7,8];
const [one, two, ...remainNumber] = numbers;
console.log(remainNumbers); //[3,4,5,6,7,8]

//Object
const Person = {id : 1, name : "Terry", age: 42, city: "New Jersey" };
const {id, ...rest} = Person;
console.log(rest); //Outputs { firstName : "Terry", lastName : "Brown",  age : 42,city : "New Jersey" }

이것이 여러분에게 유용하기를 바랍니다. 행복한 코딩. 명성.