[VUE] Vue.js 자주 사용하는 ES6 문법 정리

 

📌화살표 함수 (Arrow function)

• 기존 함수에서는 this를 사용, 화살표 함수에서는 this없이 사용
• 함수 로직이 한 줄이면 { } 생략 가능

<script setup>
    // ES5 일반 함수 문법
    function fncES5(val) {
        console.log(val);
    }
    // ES6 화살표 함수 문법
    const fncES6_1 = (val) => {
        console.log(val);
    }

    // 함수 로직이 1줄이면 {} 생략 가능
    const fncES6_2 = (val) => console.log(val);
</script>

 

 

📌템플릿 리터럴 (Template literals)

• 백틱( ` ) 을 사용
• 문자열과 자바스크립트 표현식 혼용 가능

<script setup>
    let text = 'ES6!';
    
    const fncES6 = () => {
        console.log(`Hello, ${text}`);  // Hello, ES6!
    }     
</script>

 

 

 

📌모듈 (Modules)

• import, expert 문법 사용
• 다른 js 파일에서 파일 내용을 가져옴

// component.js
const  component = {
    fncES6() {
        console.log('hello, ES6!');
    }
}

<!-- vue -->
<script setup>
    import es6Comp  from './component.js'
    es6Comp.fncES6();   // hello, ES6!
</script>

 

 

 

📌분해와 확장 문법

• 분해 문법은 { , } 사용
• 확장 문법은  ... 사용

<script setup>
    let obj = {
        prop1 : 'hello, ',
        prop2 : 'ES5!',
        prop3 : 'hello, ',
        prop4 : 'ES6!',
    }

    // ES5 분해 문법
    const prop1 = obj.prop1;
    const prop2 = obj.prop2;

    // ES6 분해 문법
    const {prop3, prop4} = obj;
    
    console.log(prop1 + prop2); // hello, ES5!
    console.log(prop3 + prop4); // hello, ES6!
    
    // ES5 확장 문법
    let objES5 = {
        name : 'Alice',
        prop1 : obj.prop1,
        prop2 : obj.prop2
    }

    console.log(objES5.prop1 + objES5.name); // hello, Alice

    // ES6 확장 문법
    let objES6 = {
        name : 'John',
        ...obj  
    }

    console.log(objES6.prop3 + objES6.name) // hello, John
</script>