ES6 STEP 1 - 기본 문법

★ 호스이팅

• 변수의 선언을 스코프의 최상단으로 옮기는 행위
• var

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

• var는 if문이나 for문의 중괄호 {}, 에 의한 블록 수준의 유효 범위를 제공하지 않는다.
• 호이스팅 단계에서 이미 변수가 생성되어 있다면, 변수를 생성하지 않고 건너뛴다.

var A1 = 100;
console.log(A1);
var A1 = 'hello';
console.log(A1);

• 동일한 이름의 변수가 생성되어 오류가 발생할 것 같지만 오류 X

★ ES6

1. let

• 이러한 문제를 해결하기 위해 let 키워드를 지원

let msg = "GLOBAL";

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

• build 하면

"use strict";

var msg = "GLOBAL";

function outer() {
  
  var msg = "OUTER";
  
  console.log(msg);
  
  if (true) {
    
    var _msg = "BLOCK";
    console.log(_msg);
    
  }
}

• 변수명이 _msg로 변경되어, 블록 수준의 유효범위를 지원하지 않으므로 변수명을 변경해서 충돌을 피함.

2. const

• 선언될 때 값이 할당되면 값을 변경할 수 없는 상수를 만들 때 사용.

const p1 = {name : "john", age : 20}
p1.age = 22;

console.log(p1);

• 결과 = {name : 'john", age : 22}

★ 기본 파라미터와 가변 파라미터

• 기본 파라미터를 이용해 함수 파라미터의 기본값을 지정할 수 있다.

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

}

addContact("홍길동", "010-222-3331");
addContact("이몽룡", "010-222-33331", "02-3422-9900", "서울시");

• build 하면
• 이처럼 파라미터 값을 전달하지 않았는데, 없음 이라는 기본 값이 할당 된다.

"use strict";

function addContact(name, mobile) {
  var home = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "없음";
  var address = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "없음";
  var email = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : "없음";
  var str = "name=".concat(name, ", mobile=").concat(mobile, ", home=").concat(home, ", ") + "address=".concat(address, ", email=").concat(email);
  console.log(str);
}
addContact("홍길동", "010-222-3331");
addContact("이몽룡", "010-222-33331", "02-3422-9900", "서울시");

 

• 가변 파라미터

function foodReport(name, age, ...favoriteFoods) {

    console.log(name + ", " + age);
    console.log(favoriteFoods);

}

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

• build 하면
• 이름과 나이를 제외한 나머지 인자값들은 favoriteFoods에 배열 형태로 전달됨.

"use strict";

function foodReport(name, age) {
  console.log(name + ", " + age);
  for (var _len = arguments.length, favoriteFoods = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
    favoriteFoods[_key - 2] = arguments[_key];
  }
  console.log(favoriteFoods);
}
foodReport("이몽룡", 20, "짜장면", "냉면", "불고기");
foodReport("홍길동", 16, "초밥");

 

★ 구조분해 할당

• 배열, 객체의 값들을 추출하여 한번에 여러 변수에 할당할 수 있는 기능

let arr = [10, 20, 30, 40];
let [a1, a2, a3] = arr;

console.log(a1, a2, a3);

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

• 실행 결과
• arr의 배열 값을 순서대로 할당

10 20 30
홍길동 20 M

 

★ 화살표 함수

• 기존 함수 표현식에 비해 간결함을 제공
• 함수를 정의하는 영역의 this를 그대로 전달 받을 수 있다.

const test1 = function(a,b) {
	return a+b;
}

const test2 = (a,b) => {
	return a+b;
};

const test3 = (a,b) => a+b;

console.log(test1(3,4));
console.log(test2(3,4));
console.log(test3(3,4));

• 결과
• test1 : 자주 접하던 형태
• test2 : 화살표 함수
• test3 : 코드를 간결히 한 화살표 함수

7
7
7

 

★ this

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

var obj = { result: 0};
obj.add = function(x,y) {
	this.result = x+y;
}
obj.add(3,4);
console.log(obj);

• 실행 결과

7

• 또 다른 경우

var obj = { result: 0};
obj.add = function(x,y) {
	this.result = x+y;
}
var add2 = obj.add;
console.log(add2 === obj.add); //true, 동일한 함수
add2(3,4) //전역변수 result에 7이 할당됨.
console.log(obj);
console.log(result);

• 실행 결과

{ result : 0}
7

 

★ 화살표 함수에서의 this

• 함수가 중첩되는 상황

var obj = { result:0 };
obj.add = function(x,y) {
	function inner() {
    	this.result = x+y;
    }
    inner();
}
obj.add(3,4)

console.log(obj)
console.log(result)

• 실행 결과

{ result : 0 }
7