0504 ES6
ES6(ECMAScript6)
: ECMAScript는 JavaScript의 표준 사양으로, 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법을 규정하고 있다. 이는 각 브라우저나 엔진마다 JavaScript를 구현할 때, ECMAScript에서 규정한 모든 문법을 준수해야 함을 뜻한다.
ES6 문법
const and let
const : 변경 불가능한 변수. 값을 재할당하려고 하면 오류가 반환됨.
let : 변경 가능한 변수. 새로운 값을 가질 수도, 재할당할수도 있음.
const 와 let 모두 블럭 범위임
let msg = "global";
console.log(msg);
function outer(a) {
let msg = "outer";
console.log(msg);
if (true) {
let msg = "block";
console.log(msg);
}
console.log(msg);
}
outer(1);
console.log(msg);
// 출력
// >> global
// >> outer
// >> block
// >> outer
// >> global기본 매개변수
매개 변수를 입력하지 않은 경우, 기본으로 정해둔 값을 대입해준다.
function addContact2(name, mobile, addr = "없음") {
var string = `name=${name}, mobile=${mobile}, addr=${addr}`; // Template Literals
console.log(string);
}
addContact2("홍길동", "010-0123-0123");
addContact2("수지", "010-7777-7777", "부산시");
addContact2("아무개"); // 기본 매개변수도 없을 경우, undefined 출력
// 출력
// >> name=홍길동, mobile=010-0123-0123, addr=없음
// >> name=수지, mobile=010-7777-7777, addr=부산시
// >> name=아무개, mobile=undefined, addr=없음Template Literals(템플릿 리터럴)
백틱(`) 사용을 통해 문자열을 더 간편하게 작성할 수 있다.
// 백틱을 사용하면 변수이름을 jQuery문에서처럼 사용가능
let str2 = "홍길동";
console.log(`abc ${str2}`); // 이전 문법에서는 'abc ' + str2 로 작성해야 했음
// 출력 >> abc 홍길동여러 라인의 문자열도 작성이 가능하다.
let song = `동해물과
백두산이
마르고
닳도록`; // 들여쓰기까지 포함됨
console.log(song);
// 출력
// >>동해물과
// >>백두산이
// >> 마르고
// >> 닳도록비구조화 할당
비구조화를 통해 배열 또는 객체의 값을 새 변수에 더 쉽게 할당할 수 있다.
ex1)
let arr = [1, 2, 3, 4];
let [a1, a2, a3] = arr;
console.log(a1, a2, a3);
// 출력 >> 1 2 3
ex2)
let p1 = {
name: "홍길동",
age: 20,
gender: "M",
};
let {
// 타입을 앞에 써줘야함
name: n,
age: a,
gender, // 이름이 동일할 때는 변수명을 생략할 수 있다
} = p1;
console.log(n, a, gender);
// 출력 >> 홍길동 20 MArrow Functions(화살표 함수)
function 키워드 대신 화살표(=>)를 사용하여 함수를 간략하게 표현할 수 있다.
let test1 = function test1(a, b) {
return a + b;
};
let test2 = function (a, b) {
return a + b;
};
let test3 = (a, b) => {
return a + b;
};
let test4 = (a, b) => a + b;
console.log(test1(3, 4));
console.log(test2(3, 4));
console.log(test3(3, 4));
console.log(test4(3, 4));
// 출력
// >> 7
// >> 7
// >> 7
// >> 7
화살표 함수의 this 와 일반 함수의 this 가 가르키는 것이 다르기 때문에 주의해야 한다.
화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다.
function Persion(name, cnt) {
this.name = name;
this.cnt = cnt;
this.age1 = 0;
this.age2 = 0;
var incAge1 = function () {
// 일급 객체
this.age1++; // 내부의 this : Object [global] (안쪽 영역)
};
var incAge2 = () => {
// 화살표 함수(객체 x)
this.age2++; // 내부의 this : p Persion 객체 (바깥 영역)
};
for (var i = 1; i <= cnt; i++) {
incAge1();
incAge2();
}
}
var p = new Persion("김연아", 22);
console.log(`${p.name} 님은 ${p.age1}살, ${p.age2}살`);
// 출력 >> 김연아 님은 0살, 22살
Import / Export
import 시 상대경로를 사용하며 .js가 생략 가능하다.
둘 이상의 모듈(독립성을 가진 재사용가능한 코드블럭)을 가져오려는 경우, 중괄호를 사용한다.
ex) detailComponent.js 에서 detail 함수를 내보내려 한다.
export default function detail(name, age) {
return `안녕 ${name}, 너의 나이는 ${age}살 이다!`;
}
homeComponent.js 에서 이 기능을 사용하기 위해 import를 실행한다.
// 여러 모듈을 가져올 경우, {function1, function2, ... }
import detail from './detailComponent';
console.log(detail('영희', 20));
// 출력 => 안녕 영희, 너의 나이는 20살 이다!Spread 연산자
Iterable에 적용되어 해당 대상을 개별 요소로 분리하는 연산자로, 대상 앞에 '...'를 작성하면 된다.
Spread 연산자는 배열 자체를 가진다.
function food(name, price, ...data) {
console.log(name + "," + price);
console.log(data);
}
food("홍길동", 1000, "라면", "떡볶기", "삼겹살");
food("류현진", 3000);
// 출력
// >> 홍길동,1000
// >> ['라면', '떡볶기', '삼겹살']
// >> 류현진,3000
// >> []