ES6 STEP 2 - 기본 문법 2

★ 새로운 객체 리터럴

• 객체의 속성을 작성할 때 변수명과 동일하다면 생략 가능.

var name = "홍길동";
var age = 20;
var email = "gdhong@test.com";

var obj = { name, age, email };
console.log(obj);

• 새로운 메서드 표기법
• ES6가 제공하는 새로운 객체 리터럴 -> function 키워드를 사용하지 않고 바로 { } 구현부가 따라옴. 
• 이 함수는 화살표 함수가 아니기 때문에, 함수가 중첩되었을 때 바깥쪽 함수의 this가 이 함수의 this로 자동으로 전달되지 않는다. 

let p1 = {
    name : "아이패드",
    price : 200000,
    quantity : 2,
    order : function() {
    	if(!this.amount) {
        	this.amount = this.quantity * this.price;
        }
        console.log("주문금액 : " + this.amount);
    },
    discount(rate) {
    	if (rate > 0 && rate < 0.8) {
        	this.amount = (1-rate) * this.price * this.quantity;
        }
        console.log(100*rate) + "% 할인된 금액으로 구매합니다.");
    }
}
p1.dicount(0.2);
p1.order();

 

★ 템플릿 리터럴

• 템플릿 리터럴은 역따옴표로 묶여진 문자열에서 템플릿 대입문(${})을 이용해 동적으로 문자역을 끼워넣어 구성할 수 있는 방법을 제공.
• 또한 템플릿 문자열은 개행 문자를 포함하여 여러 줄로 작성할 수 있다.

const d1 = new Date();
let name = "홍길동";
let r1 = `${name} 님에게 ${d1.toDateString() }에 연락했다.`;
console.log(r1);

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

 

★ 모듈

• ES6부터는 공식적으로 모듈 기능을 제공.
• 모듈이란 독립성을 가진 재사용 가능한 코드 블록.
• 코드 블록 안에서 import, export 구문을 이용해서 모듈을 가져오거나 내보낼 수 있음.

export let a = 1000;
export function f1(a) { ... }
export { n1, n2 as othername, ...}
//export할 때 기존의 이름이 아닌 다른 이름을 사용하고 싶다면 as를 이용함.

• 이렇게 export된 구문은 다른 모듈에서 import 구문으로 참조 사용 가능.
• 1. export 구문

let base = 100;
const add = (x) => base+x;
const multiply = (x) => base*x;

export { add, multiply };

• 2. import 구문

import { add } from './modules/02-19-module';
console.log(add(4));

• 여기서 export하지 않은 변수 base는 export 하지 않았으므로, 직접 접근 할 수 없다.
• 반드시 export된 함수들을 통해서만 간접적으로 이용할 수 있다.
• 구문 : import ... from ... 구문을 사용해 임포트 하는데, 이때 경로는 상대경로를 사용하며, 파일의 확장자는 생략이 가능하지만, 확장자가 다르거나 파일명이 같은 파일이 존재 한다면 확장자까지 지정하여 구분할 수 있다.
• 또 다른 상황
• 1. export 구문

let base = 100;
const add = (x) => base+x;
const multiply = (x) => base*x;
const getBase = ()=> base;

export { add, multiply };
export default getBase;

• 2. import 구문

import getBase, { add } from './modules/02-19-module';

console.log(add(4));
console.log(getBase());

• export default된 것은 import할 때 중괄호 없이 참조할 수 있다.
• 단, default로 export, import 할 수 있는 요소는 단 하나라는 점을 주의해야 한다.

 

★ Promise

• 비동기 처리를 수행할 때, 비동기 처리가 완료되면 콜백 함수가 호출되도록 작성하는 것이 일반적.
• 대표적인 예가 jQuery AJAX 함수.
• 하지만, 이 방법은 비동기로 처리할 작업이 순차적으로 반복되면 콜백 함수들이 중첩되어 예외 처리가 힘들어지고 복잡도가 증가하는 문제점.
• ES6에서는 이러한 단점들을 극복하기 위해, Promise 객체를 지원해 비동기 처리를 좀 더 깔끔하게 수행 가능하다.

//Promise 객체의 생성
const p = new Promise((resolve, reject) => {
	//비동기 작업 수행
    //이 내부에서 resolve(result)함수가 호출하면 then에 등록해둔 함수가 호출됨.
    //reject(error)가 호출되거나 Error가 발생되면 catch에 등록해둔 함수가 호출됨.
});

p.then((result)=> {

})
.catch((error)=> {

})

• new Promise()로 객체를 생성할 때 인자로 전달하는 함수를 '시작함수'라고 부르고 Promise 객체가 생성됨과 동시에 함수를 실행한다.
• 시작함수에는 비동기로 처리할 작업을 정의.
• 작업이 완료되면 처리 결과에 따라 작업이 성공이라면 시작함수의 인자로 전달받는 resolve 함수를 호출하여 then()에 등록한 함수가 실행된다.

const p = new Promise((resolve, reject) => {
	setTimeout()=> {
    	var num = Math.random(); //0~1사이의 난수 발생
        if(num >= 0.8) {
        	reject("생성된 숫자가 0.8 이상임 - " + num);
        }
        resolve(num);
    }, 2000)
})

p.then((result)=> {
	console.log("처리 결과 : ", result)
})
.catch((error)=> {
	console.log("오류 : ", error)
})

console.log('## promise 객체 생성!);

• 비동기 처리 결과 0~1사이의 난수를 발생시키고, 이 값이 0.8 이상이면 잘못된 값으로 보고 reject()을 호출하고 그렇지 않다면, resolve()를 호출한다.
•  Promise Chain : Promise를 이용해서 손쉽게 비동기적인 작업을 순차적으로 실행 가능
• 이때 사용되는게 then()을 체인처럼 엮어서 Promise Chain을 생성하면 된다.

var p = new Promise((resolve, reject) => {
    resolve("first!")
})

p.then((msg) => {
    console.log(msg);
    return "second";
})
.then((msg) => {
    console.log(msg);
    return "third";
})
.then((msg) => {
    console.log(msg);
})
.catch((error) => {
    console.log("오류 발생 ==> " + error)
})

 

★ 전개 연산자

• 가변 파라미터 : 개별 값을 나열해서 함수의 인자로 전달하면 함수의 내부에서 배열로 사용할 수 있도록 한다.

let obj1 = { name:"박문수", age:29 }; 
let obj2 = obj1; //shallow copy! obj1, obj2는 동일한 객체를 참조
let obj3 = { ...obj1 }; //객체 내부의 값은 복사하지만 obj3, obj1은 다른 객체
let obj4 = { ...onj1, email:"mspark@gmail.com"}; //새로운 속성 추가

obj2.age = 19
console.log(obj1);	//{ name:"박문수", age:19 }
console.log(obj2);  //{ name:"박문수", age:19 }
console.log(obj3);  //{ name:"박문수", age:29 }
console.log(obj1 == obj2); //true
console.log(obj1 == obj3); //false

let arr1 = [100, 200, 300 ];
let arr2 = ["hello", ...arr1, "world"];
console.log(arr1); // [ 100, 200, 300 ]
console.log(arr2); // [ "hello", 100, 200, 300, "world" ]

• 이와 같이 기존 객체의 속성이나 배열의 요소들을 포함하여 새로운 객체, 배열을 생성하고자 할 때 사용됨. 

★ Proxy

• 객체의 속성을 읽어오거나 설정하는 작업을 가로채기 위해 래핑 할수 있도록 하는 객체
• Vue 3에서는 Model 내부의 객체 속성이 변경될 때 '알림 전송'을 수행하기 위해 Proxy를 이용한다.

let obj = { name : "홍길동", age : 20 };
const proxy = new Proxy(obj, {
    get: function(target, key) {
    	console.log("## get " + key)
        if (!target[key] throw new Error(`존재하지 않는 속성(${key})입니다`);
        return target[key];
    },
    set: function(target, key, value) {
    	console.log("## set " + key)
        if (!target[key]) throw new Error(`존재하지 않는 속성(${key})입니다.");
        target[key] = value;
    }
})

• set : 쓰기 작업을 할 때 호출할 함수.
• get : 읽기 작업을 할 때 호출할 함수.
• proxy를 통해서 읽기/쓰기를 하면 3, 8행의 get, set이 호출되는 것.
• get, set 내부에서 console.log()로 출력하는 기능과 데이터 변경 기능만을 수행하고 있다.
• 알림 전송과 같은 추가적인 작업을 수행할 수도 있다.
• Vue 3 앱을 개발할 때는 Proxy를 직접 생성하지 않아도 된다.
• Vue 인스턴스르 생성하면 data로 지정된 객체에 대해 내부적으로 Proxy 객체로 래핑하는 작업을 자동으로 수행.