[Vue] Vue.js를 위한 ES6 필수 개념

1. ES6 소개

1.1 ES6란?

• ECMAScript 6(ES6)는 2015년에 도입된 JavaScript의 주요 업데이트 버전.
• 새로운 문법과 기능이 추가되어 코드 가독성과 개발 생산성이 향상됨.

✅ ES6 주요 특징

기능	설명
`let`, `const`	블록 스코프 변수 선언
화살표 함수	`function`을 간결하게 표현
구조 분해 할당	배열과 객체의 값을 쉽게 추출
템플릿 리터럴	문자열 조합을 백틱(`)으로 표현
`Promise`	비동기 프로그래밍 개선
`import/export`	모듈 시스템 도입
전개 연산자	배열, 객체 확장 및 복사
Proxy	객체 동작을 가로채서 제어

---

2. `let`과 `const`

2.1 `var`의 문제점 (호이스팅)

• `var`는 선언 전에 접근 가능 (호이스팅) → 예기치 않은 동작 가능
• 블록 스코프를 따르지 않음

console.log(A1); // undefined
var A1 = "hello";

 

• 변수를 여러 번 선언 가능(에러 아님)

var V1 = 100;
console.log(V1); // 100
var V1 = "hello";
console.log(V1); // hello

2.2 `let` (블록 스코프)

• `let`은 블록({}) 단위로 동작
• 같은 블록 내에서만 접근 가능
• 호이스팅 지원하지 않음

let msg = "GLOBAL";
function outer() {
    let msg = "OUTER";
    console.log(msg); // OUTER

    if (true) {
        let msg = "BLOCK";
        console.log(msg); // BLOCK
    }
}
outer();

 

2.3 `const` (변경 불가 변수)

• `const`로 선언한 변수는 재할당 불가
• 객체의 속성 변경은 가능, 하지만 객체 자체를 재할당할 수 없음.

const p1 = { name: 'john', age: 20 };
p1.age = 22; // 가능 (객체 속성 변경)
p1 = { name: 'lee', age: 25 }; // 오류 발생 (객체 참조 변경 불가)

---

3. 기본 파라미터와 가변 파라미터

3.1 기본 파라미터 (Default Parameter)

• 기본값을 미리 설정하여 매개변수 생략 시 자동 할당
• 반드시 뒷부분에 지정, 중간에만 기본값 지정하는 것은 불가능

function addContact(name, mobile, home="없음", address="없음") {
    console.log(`name=${name}, mobile=${mobile}, home=${home}, address=${address}`);
}

addContact("홍길동", "010-222-3331");
// name=홍길동, mobile=010-222-3331, home=없음, address=없음, email=없음

 

3.2 가변 파라미터 (Rest Parameter)

• `...`을 사용하여 가변 개수의 인자를 배열로 수집 가능

function foodReport(name, age, ...favoriteFoods) {
    console.log(name + ", " + age);
    console.log(favoriteFoods);
}

foodReport("이몽룡", 20, "짜장면", "냉면", "불고기");
foodReport("홍길동", 16, "초밥");

//이몽룡, 20
//[ '짜장면', '냉면', '불고기' ]
//홍길동, 16
//[ '초밥', '초밥']

---

4. 구조 분해 할당 (Destructuring Assignment)

• 배열, 객체의 값들을 추출하여 한 번에 여러 변수에 할당할 수 있는 기능
• 배열, 객체에서 필요한 값을 쉽게 추출 가능.
•  

let arr = [10, 20, 30, 40];
let [a1, a2, a3, a4] = arr;
console.log(a1, a2, a3, a4); // 10 20 30 40

 

✅ 객체 구조 분해

• `age:a`처럼 콜론으로 별칭 지정 가능

let p1 = { name: "홍길동", age: 20, gender: "M" };
let { name, age:a, gender } = p1;
console.log(name, a, gender); // 홍길동 20 M

---

5. 화살표 함수 (Arrow Function)

• 기존 함수 표현식 간결과
• 함수의 본체가 한 줄 문장인 경우 ({ } 생략, return 생략)

const add = (a, b) => a + b;
console.log(add(3, 4)); // 7

 

✅ 자바스크립트의 `this`

• 메서드, 함수가 호출될 때마다 현재 호출 중인 메서드를 보유한 객체가 `this`로 연결
• 현재 호출 중인 메서드를 보유한 객체 없다면 전역 객체가 연결 ( Window 객체)

✅ `this`와의 차이

let obj = {
    value: 10,
    normalFunc: function() { console.log(this.value); },  // this = obj
    arrowFunc: () => { console.log(this.value); } // this = window (상위 스코프)
};
obj.normalFunc(); // 10
obj.arrowFunc(); // undefined

 

✅ 자바스크립트의 `this` 지정

• 험수나 메서드를 호출할 때  `this`를 변경할 수 있음
• `bind()` : 지정한 객체를 this로 미리 연결한 새로운 함수를 리턴
• `apply()`, `call()` : 지정한 객체를 this로 연결한 후 함수를 직접 호출

let add = function(x,y) {  
	this.result = x+y;
}
let obj = {};
//1. apply() 사용
//add.apply(obj, [3,4])

//2. call() 사용
//add.call(obj,3,4)

//3. bind() 사용
add = add.bind(obj);

add(3,4)
console.log(obj); //{ result: 7 }

---

6. 새로운 객체 리터럴

✅ 기존 객체 리터럴

let name = "홍길동";
let age = 20;
let obj = { 
	name: name,
 	age: age
};

 

✅ ES6 객체 리터럴

• 객체 속성과 변수명이 같을 경우 생략 가능
• 메서드인 경우 function 키워드 없이 바로 선언

let name = "홍길동";
let age = 20;
let obj = { name, age }; // ES6 단축 문법

 

//기존 방법
add : funtion(a,b){
	let sum = a + b;
    consol.log(sum);
}

//ES6 메서드 선언
add(a,b){
	let sum = a + b;
    consol.log(sum);
}

---

7. 템플릿 리터럴 (Template Literal)

• 문자열을 백틱(`)을 사용하여 변수 삽입 가능.
• 개행 문자를 포함하여 여러 줄로 작성 가능

let product = "갤럭시S7";
let price = 199000;
let str = `${product}의 가격은 ${price}원 입니다.`;
console.log(str);

---

8. 모듈 (Module)

• `export`와 `import`를 사용하여 코드를 모듈화.
• 모듈 내부에서 선언된 변수, 함수, 객체, 클래스는 지역적인(Local)것으로 간주

// module.js
export const add = (x, y) => x + y;

// main.js
import { add } from './module.js';
console.log(add(4, 5));

 

 

---

9. `Promise`

• 비동기 처리 지원
• 콜백 함수 : 비동기 작업의 순차 처리 시 콜백 함수의 중첩 문제 발생
• `resolve()`가 호출되면 `then()`, `reject()`가 호출되면 `catch()` 실행됨.

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        let num = Math.random();
        num >= 0.8 ? reject("0.8 이상") : resolve(num);
    }, 2000);
});

p.then(result => console.log("결과:", result)) // 0.8미만이면 reslove를 통해 .then으로 들어옴
 .catch(error => console.log("오류:", error)); // 0.8이상이면 reject를 통해 .catch로 들어옴

---

10. 전개 연산자 (Spread Operator)

• `...` 연산자
• 배열, 객체를 복사 및 확장할 때 사용.

let obj1 = { name: "홍길동", age: 29 };
let obj2 = { ...obj1, email: "test@gmail.com" }; // 객체 복사 및 속성 추가
console.log(obj2);

 

---

11. Proxy

• 객체의 get 및 set을 가로채서 제어 가능.
• Vue 내부에서  Proxy 사용
• 반응성(reactivity) 지원을 위한 기법 

  

let obj = { name: "홍길동", age: 20 };
const proxy = new Proxy(obj, {
    get: (target, key) => {
        console.log(`## get ${key}`);
        return target[key];
    },
    set: (target, key, value) => {
        console.log(`## set ${key}`);
        target[key] = value;
    }
});

console.log(proxy.name); // 읽기 작업 get 호출
proxy.name = "이몽룡";          // 쓰기 작업 set 호출

// get name
// 홍길동
// set name
// {name: '이몽룡', age: 20}

 

✅ Vue3의 반응성

---

📎 참고자료

• MDN ES6 공식 문서
• 원쌤의 Vue.js 퀵스타트 (원형섭 저)