ES6 문법 02 (23.05.12)

1. 문자열의 사용

1-1. 템플릿 문자열

let firstname = "홍";
let lastname = "길동";
let middlename = "최고";

console.log(lastname + ", " + firstname + " " + middlename);

console.log(`${lastname}, ${firstname} ${middlename}`);

• 기본적인 문자열 : +로 이어붙이기
• ${}을 사용하여 표기할 수도 있다.

1-2. 백틱의 사용

• 장점 : 문자의 공백도 처리할 수 있다.

`
${firstname} 님께,

${event} 티켓 ${qty}건을 구매해주셔서 감사합니다.

주문 상세 정보 :
	${lastname} ${firstname} ${middlename}
    ${qty} x $${price} = $${qty*price}	공연 : ${event}
    
공연 30분 전까지 배부처에서 티켓을 수령하시기 바랍니다.
감사합니다 :)

${ticketAgent} 드림
`

2. Default Parameter

function greet(name = "홍길순") {
	console.log("Welcome mr." + name);
}

greet("홍길동");
greet();

        function logActivity(name = "EZ", activity = "서핑") {
            console.log(`${name}은(는) ${activity}을(를) 좋아합니다.`);
        }
        var defaultPerson = {
            name: {
                first: "Z",
                last: "E",
            },
            favActivity: "서핑"
        }

        function logActivity(p = defaultPerson) {
            console.log(`${p.name.first}은(는) ${favActivity}을(를) 좋아합니다.`);
        }

• logActivity 함수를 호출하면서 인자를 지정하지 않아도 디폴트 값을 사용해서 함수가 정상적으로 실행된다.
• 문자열뿐만 아니라 어떤 타입의 값도 디폴트 값으로 사용할 수 있다.

3. 화살표 함수 이용하기

        var lodify = function (name) {
            return `열심히 공부하는 ${name}`;
        }

        console.log(lodify("EZ")); // 열심히 공부하는 EZ

        var lodify = name => `열심히 공부하는 ${name}`;

4. 객체와 배열

4-1. 구조 분해를 사용한 대입

var sandwich = {
  bread : "플랫 화이트",
  meat : "베이컨",
  topping : ["치즈","상추","칠리소스"]
}

var {bread, meat} = sandwich;
console.log(bread, meat); // 플랫 화이트 베이컨

• 위 코드는 sandwich를 분해해서 bread와 meat필드를 같은 이름의 변수에 넣어준다.
• 두 변수의 값은 sandwich에 있는 같은 이름의 필드 값으로 초기화되지만, 두 변수를 변경해도 원래의 필드 값은 바뀌지 않는다.

var {bread, meat} = sandwich;

bread = "식빵"
meat = "삼겹살"

console.log(bread, meat); // 식빵 삼겹살
console.log(sandwich.bread, sandwich.meat); // 플랫 화이트 베이컨

var study = person => {
  console.log(`오늘도 공부하는 ${person.firstname}`);
}

var person = {
  firstname : "zeze",
  lastname : "E"
}

study(person); // 오늘도 공부하는 zeze

var study = ({firstname}) => {
  console.log(`오늘도 공부하는 ${firstname}`);
}

study(person); // 오늘도 공부하는 zeze

4-2. 배열의 구조 분해

var [firstResort] = ["용평","평창","강촌"];

console.log(firstResort); // 용평

var [,,thirdResort] = ["용평","평창","강촌"];

console.log(thirdResort); // 강촌