[javascript] ~ES6 의 유용한 문법

✨ Javascript ES6의 유용한 문법

2015년도에 나온 Javascript ES6 문법에는 유용한 문법이 많다.

오늘은 이러한 javascript ES6 문법 중 유용한 문법 몇 개를 살펴보자.

 

💡 Arrow function ( 화살표 함수 )

// Before Arrow function
const simplePrint = function () {
  console.log("simplePrint!");
};

// Arrow function
const simplePrint = () => console.log("simplePrint!");


// Before Arrow function
const add = function (a, b) {
  return a + b;
};

// Arrow function
const add = (a, b) => { // Arrow function 에서 이렇게 블럭을 사용할경우에는 반드시 return 값을 써 주어야함.
  return a + b;
}

 

위의 코드를 보고 알수있듯이 ES6는 기존의 function() {} 이런 식으로 되어있던 함수를 훨씬 간단하게 나타내었다.

 

우선 function 이라는 단어를 생략한 뒤 파라미터가 없다면 그냥 () 이것만, 파라미터가 있다면 (a, b) 이렇게 담아서 표현을 해준다. 그리고 =>를 사용해서 함수 내부에서 동작할 코드를 { }로 묶어 작성한다.

여기서 만약, 결과가 한줄로끝난다면? { }까지 생략해서 사용할 수 있다. 

 

즉, 함수내부에서 동작할 코드가 많다면 () => { ~~~ return ~~~ } 이러한 형태가 되는 것이고

함수 내부에서 결과가 한 줄로 끝난다면 () => ~~~ 이렇게 사용하면 된다.

결과가 한 줄일 때 { }가 생략된 곳에서는 return 도 안 써준다.

 

 

💡 Shorthand property names ( 단축 속성명 )

const wendy1= {
    name: 'Wendy',
    age: '18',
};

const name = 'Wendy';
const age = '18';

const wendy2 = {
    name: name,
    age: age,
};

// Shorthand property names
const wendy3 = {
    name,
    age,
};

 

객체 생성 시 key와 value 가 같다면 위의 코드에서 마지막의 wendy3와 같이 생략해서 작성할 수 있다.

 

 

💡 Destructuring Assignment ( 구조 분해 할당 )

const student = {
    name : 'Wendy',
    level: 1
};

const {name, level} = student;
console.log(name, level); // 결과 : Wendy 1

const {name: studentName, level: studentLevel} = student;
console.log(studentName, studentLevel);  // 결과 : Wendy 1


// array
const animals = ['🐶', '😸'];

const [first, second] = animals;
console.log(first, second);  // 결과 : 🐶 😸

 

위의 코드처럼 구조분해 할당을 하면 기존에 student.name, student.level 이렇게 사용했던 것을 훨씬 간편하게 name, level 이런 식으로 만으로도 원하는 결과를 출력 가능하다.

 

 

💡 Spread Syntax ( 값 복사 )

const obj1 = {key: 'key1'};
    const obj2 = {key: 'key2'};
    const array = [obj1, obj2];

    // array copy
    const arrayCopy = [...array];
    console.log(array, arrayCopy);
	// 결과
    [ { key: 'key1' }, { key: 'key2' } ] [ { key: 'key1' }, { key: 'key2' } ]
    
    const arrayCopy2 = [...array, {key: 'key3'}];
    obj1.key = 'newKey';
    console.log(array, arrayCopy, arrayCopy2);
    // 결과
    [ { key: 'newKey' }, { key: 'key2' } ] [ { key: 'newKey' }, { key: 'key2' } ] [ { key: 'newKey' }, { key: 'key2' }, { key: 'key3' } ]

    // object copy
    const obj3 = {...obj1};
    console.log(obj3);  // { key: 'newKey' }

    // array concatenation
    const fruits1 = ['🍑','🍓'];
    const fruits2 = ['🍌','🥝'];
    const fruits = [...fruits1, ...fruits2];
    console.log(fruits);  // ['🍑', '🍓', '🍌', '🥝']

    // object merge
    const dog1 = {dog1: '🐕'};
    const dog2 = {dog2: '🐶'};
    const dog = {...dog1, ...dog2};
    console.log(dog);  // { dog1: '🐕', dog2: '🐶' }

 

ES6에서는 위의 코드에서와 같이... 을 사용하여 값 복사를 할 수 있다.

 

다만, 여기서 주의할 점은 중간에 obj1.key = 'newKey'로 obj1의 key 값을 바꿨을 뿐인데 obj2까지 바뀐 것을 알 수 있다. 값 복사를 할 때 위와 같이 값을 중간에 변경하는 것은 복사된 모든 객체의 값이 바뀔 수 있기에 주의하자.

 

 

💡 Default parameters ( 디폴트 인자 )

// 기존
{
    function printMessage(message) {
        if (message == null) {
            message = 'default message';
        }
        console.log(message);
    }

    printMessage('hello');
    printMessage();
}

// Default parameters
{
    function printMessage(message = 'default message') {
        console.log(message);
    }

    printMessage('hello');
    printMessage();
}

 

기존에는 null 이 왔을 경우 default 값으로 if문으로 처리를 해야 했다면,

ES6에서는 인자로 받을 때 message = 'default message' 이렇게 null일 경우 어떤 값을 default로 줄 것인지 간편하게 작성할 수 있게 되었다.

 

 

💡 Ternary Operator ( 삼항 조건 연산자 )

const isCat = true;
    // 기존
    {
        let component;
        if(isCat) {
            component = '😸';
        } else {
            component = '🐶';
        }
        console.log(component);
    }

    // Ternary Operator
    {
        const component = isCat ? '😸' : '🐶';
        console.log(component);
    }

 

기존에는 만약 true이면 어떤 값이 와야하고, false 일경우에는 어떤값이 와야 하는지 if else 문으로 정의를 했다면, ES6에서는 isCat ? '😸' : '🐶'; 이렇게 작성하며 ? 바로뒤에는 ? 앞에 있는 isCat이 true 일 경우 와야 할 값이며 : 뒤에는 isCat이 false일 경우 와야할 값을 적도록 한다.

 

 

 

💡 Template Literals ( 템플릿 리터럴 )

    const weather = '⛅';
    const temperature = '16℃';

    // 기존
    console.log('Today weather is ' + weather + ' and temparature is ' + temperature);

    // Tmeplate Literals
    console.log(`Today weather is ${weather} and temperature is ${temperature}`);

 

기존에는 ''와 + 를 가지고 문장을 만들었다면,

ES6에서는 `(Shift+~) 내부에 ${}로 인자를 받아서 처리할 수 있게 되었다.

 

 

 

위의 코드 예제는 유튜브에서 드림 코딩 엘리님의 영상을 보고 작성한 것입니다 :)