FrontJavascript

ES6 Part-1

ES6, javascript

ES6 정리 (간단예제 위주)

목차

  1. let & index
  2. Arrow function
  3. String
  4. Array
  5. Object
  6. Destructuring

1. let & const

ES5 - var 가 function scope 를 가졌던 것에 반해

ES6 의 const 와 let 은 Block scope를 가진다

1
2
3
4
5
6
7
//ES5
function fn() = {
	if(true) {
    var name = "Kim"; // var , 가변적
	}
	console.log(name);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
//ES6
function fn2() {
  if (true) {
    const lastname = "Kim"; // const , 불변
    //lastname = "Park" // (Error) const는 상수취급
		let age = 23; // let , 가변

  }
  console.log(lastname, age); 
}

fn(); // Kim
fn2(); // (Error) lastname, let are not defined

단, const 객체, 배열은 변경 가능

1
2
3
4
5
6
7
8

const obj = {
  name: "a",
  age: 25
}

obj.name = "b";
console.log(obj.name); // b

Closure 관련 문제

1
2
3
4
5
6
7
8
9
var list = document.querySelector(".list");
for(var i=0; i<list.length(5); i++) {
  list[i].addEventListener("click", function() {
    console.log(i + 번째 항목);
  });
}

// 전부 4번쨰 항목 출력
// i를 let i = 0; 으로 수정하면 간단히 해결가능

2. Arrow Function

코드 축약 가능

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//ES5

var arr = [1,2,3,4,5];
arr.map(function(num) => {
 	return num * 2;
})

//ES6
let arr = [1,2,3,4,5];
arr.map( (num) => {
  return num * 2;
})
//한 번 더 축약 가능
arr.map( num => num * 2);

Arrow function 사용 시 this context

arrow function가 선언된 기준으로 해당 Arrow function 을 감싸고 있는 블록에 this가 바인딩 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//ES5
var object = {
run() {
  setTimeout(function() {
    console.log(this);
  },2000);
 }
} 
object.run(); // window 
//window 아닌 현재 객체에 this를 바인딩 하기 위해서 .bind(this) 주로 사용

//ES6
const object = {
run() {
  setTimeout(() => {
    console.log(this);
  },2000);
 }
} 
object.run(); // object 객체

메소드 형태로 사용하지 말 것

1
2
3
4
5
6
7
8
9
let obj = {
  a: 1,
  b: () => console.log(this.a);
  c: function() {
    console.log(this.a)
  }
}
obj.b(); // undefined 메소드로 사용 시 this 가 window에 바인딩 됨.
obj.c(); // 1

3. String

New String methods 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//startsWith, endsWith

let str = "hello world";

console.log(str.starsWith("hello));  // true
console.log(star.endsWith("ld")); // true

//includes

let str2 = 'hi hello 안녕';
console.log(str2.includes("안녕")) // true

//repeat

let str3 = "a";
console.log( str3.repeat(3)) // aaa

Template literals

불편한 문자열 처리 방식이 간편하게 바뀌었다 DOM string 처리 시 유용

내에서 ${변수명} 으로 변수 인식이 가능함

1
2
3
4
5
6
7
8
9
//ES5
var a = "hi";
var name = "Min";
console.log( a + " " + "my name is " + name); // hi my name is Min


const a = ‘hi';
const name = “Min”;
console.log (`${a} my name is ${name}`); // hi my name is Min

4. Array

for of

1
2
3
4
5
6
7
8
9
10
11
12
var numbers = [1,2,3,4,5];
var str = "hello"

for (let num of numbers) {
  console.log(num);
}
// 1,2,3,4,5

for (let c of str ) {
  console.log(c);
}
// h,e,l,l,o

Array.from()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//ES5
function addMark() {
  var newData = [];
	//for(var i =0; o<arguments.length; i++) { 
  	 //newData.push(arguments[i] + "!"); 
//	}	  
// 혹은 Array.protorype.slice.call() 식으로 차용해야 했음

var newData = arguments.map(function(val) {//(error) arguments 는 유사배열, 
  return val + "!";                        // Array의 Methods 사용불가
})
	console.log(newData);
}
addMark(1,2,3,4,5);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//ES6
function addMark() {
  let newArr = Array.from(arguments); // 유사배열 arguments -> 배열로 변환
  let newData = newArr.map(function(val) {
    return val + "!";
  });
  console.log(newData);
}
addMark(1,2,3); // ["1!","2!","3!"]

//DOM 관련 NodeList 조작 시 유용하게 쓰임

let list = document.querySelectorAll('list-item');
let itmes = Array.from(list); // items = [item~]; 배열처럼 조작 가능하게 해줌!

Spread operator

펼침 연산자, 인자로 넘겨주거나, 객체 리터럴, 배열 리터럴 혹은 문자열 에 편하게 사용 할 수 있다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//인자로 넘길 떄
function fn(a,b,c) {
  console.log(a + b + c);
}
let arr = [1,2,3];

fn(...arr) // 6

// 배열리터럴

let arr = ["a","b","c"];
let newArr = [1,2, ...arr, 3, 4]; // [1,2,"a","b","c",4]

// 배열 붙여넣기

//ES5
var arr1 = [1,2,3];
var arr2 = [4,5,6];
arr1 = arr1.concat(arr2);

//ES6
arr1 = [...arr1, ...arr2];

5. Object

Object literal 확장

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 표현 간소화
//ES5
function person(name, age) {
  return {
    name: name,
    age: age,
    sayName: function() {
      console.log(this.name)
    }
  };
}

//ES6
function person(name, age) {
  return {
    name,
    age,
    sayName() {
      console.log(this.name);
    }
  };
}

Object.assign()

1
2
3
4
5
6
7
8
9
10
//ES5 object.create()
const greeting = {
  sayHi: function() {
    console.log("안녕하세요, " + this.name + "님");
  }cc
}

const greet = Object.create(greeting);
greet.name = "Min"; // 이처럼 클래스 속성들을 일일히 추가해줘야 되는 단점 존재
console.log(greet.sayHi()); // 안녕하세요 Min님
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//object.assign()

Object.assign(target, ...sources)
sources 의 속성들이 모두 target 에 복사 됨

let obj = {a = 1, b = 2, c =3};
let newObj = Object.assign({} , obj);
console.log(newObj) // {a=1, b=2, c=3}

// target이 빈객체 {} 아닌 존재하는 객체 일 때
let obj = a = 1, b = 2, c = 3;
let obj2 = {d = 4}
let newObj = Object.assign(obj2, obj);

console.log(newObj) // {a=1,b=2,c=3,d=4}
console.log(obj2) // {a=1,b=2,c=3,d=4} 
//하지만 target으로 지정했던 객체도 변형 됨

//Object.assing()로 새로운 병합된 객체를 리턴 받고자 한다면 target에 빈 객체 {} 를 지정 할 것

6. Destructuring

배열요소나 객체의 속성을 리터럴 같이 사용해서 좀 더 간결한 방식으로 변수에 할당하는 것

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
//Array

//ES5 (새 변수에 할당 할 때 배열 요소의 인덱스가 필요)
var arr = [1,2,3];
var newArr = [];
var newVar = arr[2];
newArr.push[arr[0],arr[1],arr[2]];

//ES6 (인덱스 불필요, 배열 요소들을 변수처럼 자유롭게 재할당 가능)
let [newNum] = data;
console.log(newNum); // 1,2,3

let a,b,c;
[a,b,c] = ['hi', 'hellow' '안녕']
console.log(a,b,c,) // hi, hellow, 안녕

// 일부 요소, 특정 요소만 할당도 가능
let data = [1,2,3,4,5];
let [a, ,b] = data;
console.log(a,b) //1,3

// 기본값 지정 
let {a = 'a, b = 'b'} = {a: '아' };
console.log(b); // b

//rest pattern
let [a, ...b] = data;
console.log(a, b)  // a = 1 / b= 2,3,4,5


//Obejct

//ES5
var obj = {
  name: 'Min',
  age: 32
}
var person = {};
person.name = 'Min';
person.age = 32;

consoloe.log(person.name, person.age) // Min, 32


//ES6
let obj = {
  name: 'Min',
  age: 32
}

let {name, age} = obj
console.log(name, age) = min,32

let {a:myName, b:myAge} = obj;
console.log(a,myName,b.myAge) // Min, 32

destructuring 활용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//JSON 파싱

const news = [
  {
  	'title' : "SBS,
   	'thumnail' : "https://www.sbs.co.kr/news/5.png",
   	'content' : "주커버그, 코딩이 제일 쉬웠다고 밝혀 충격!"
  },
  
  {
  	'title' : "MBC,
   	'thumnail' : "https://www.MBC.co.kr/news/1.png",
   	'content' : "학생들 주커버그 의견 반박, "장난하나...""
  },
]

let [ ,mbc] = news; // MBC 기사만 추출 
let {title, thumnail} = mbc;  // mbc 기사의 제목, 섬네일만 추출

// 위의 두과정을 한번에 중첩으로 추출 가능
let [ , {title, ,content}] = news;
console.log(content)
// 학생들 주커버그 의견 반박, "장난하나..."

References

윤지수님 인프런 ES6 강좌

JSDEV 자바크스립트 개발자포럼 ES6 글

ES6 part-2

Share