FrontJavascript

ES6 Part-2

ES6, javascript

목차

  1. Class

  2. map, set

  3. modules

  4. (추가중)

1. Class

자바스크립트는 프로토타입 기반 객체지향을 구현할 수 있다. ES6 에서 class를 활용 해서 좀 더 간결하게 구현 할 수 있다

1
2
3
4
5
6
7
8
9
10
11
12
//ES5 (생성자 함수 + 프로토타입 메소드 사용 객체지향 구현)
var Person = function(name, yearOfBirth, job) {
  this.name = name;
  this.yearOfBirth = yearOfBirth;
  this.job = job;

  Person.prototype.calcAge() = function() {
   	var age = new Date().getFullYear() - this.yearOfBirth;
    console.log(age);
  }
 }
  console.log(min) // min = {name: Min , yearOfBirth: 1990 , job: developer}
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
//ES6 (Class 를 통한 객체지향 구현 간소화지원 , 재사용성 up!)
class Person {
  constructor(name, yearOfBirth, job) { // 생성자 함수 지원
    this.name = name;
  	this.yearOfBirth = yearOfBirth;
 		this.job = job;
  }
  
  caclAge() { // 간소화 된 Method 추가
    const age = new Date().getFullYear() - this.yearOfBirth;
    	console.log(age);
  	}
  
  //static method , 인스턴스에 상속x class로만 사용가능
  static greet() {  // 인스턴스 생성 불필요, 전역에서 쓰이는 범용 유틸리티 함수 생성 시 주로 이용된다.
    console.log("Hi there!");
  }
}

// new 연산자로 인스턴스 생성 시 호출 되는건 Person 의 constructor 임
const min = new Person("Min", 1990, "developer"); 
console.log(min) // min = {name: Min , yearOfBirth: 1990 , job: developer}

Person.greeting() // Hi there!
//class 정의는 결국 => 함수 정의 => 함수 = 객체 => 객체 내 greet메소드를 추가한 격

상속, Subclass

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
//ES5
var Person = function(name, yearOfBirth, job) {
  this.name = name;
  this.yearOfBirth = yearOfBirth;
  this.job = job;

  Person.prototype.calcAge() = function() {
   	var age = new Date().getFullYear - this.yearOfBirth;
    console.log(age);
  }
 }

var Developer = function(name, yearOfBirth, job, portfolio) {
  Person.call(this, name, yearOfBirth, job) // 부모 갹체 person으로 부터 상속
  this.portfolio = portfolio;
}
Developer.prototype.makePortfolio() = function() {
  this.portfolio = true;
  console.log(this.portfolio);
}

//Object.create() 는 객체의 prototype을 임의지정할 수 있음
Developer.prototype = Object.create(Person.prototype) //prototype 연결(=상속)

var junior = new Developer("Min", 1990, 'developer', true);

junior.calcAge(); // 26, Person 의 calcAge() 상속받아 차용
junior.makeProtfolio(); // true
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
//ES6
class Person {
  constructor(name, yearOfBirth, job) { // 생성자 함수 지원
    this.name = name;
  	this.yearOfBirth = yearOfBirth;
 		this.job = job;
  }
  
  caclAge() { // 간소화 된 Method 추가
    const age = new Date().getFullYear() - this.yearOfBirth;
    	console.log(age);
  	}
}

class Developer extends Person {
  constructor(name, yearOfBirth, job, portfolio) {
    super(name, yearOfBirth, job); // super 키워드로 부모 객체로 부터 상속 
    this.portfolio = portfolio;
  }
  makePortfolio() {
    this.portfolio = true;
    console.log(this.portfolio);
  }
}

const junior = new Developer('Min', 1990, "developer", false);

junior.calcAge(); // 26
junior.makePortfolio(); // true

2. map,set

map

map 은 object 와 유사하지만 몇가지 주요한 차이점 존재

  1. key 로 어떠한 type도 지정 가능하다 (object는 String만 가능)

  2. 삽입된 순서로 key 가 정렬된다.

  3. size 로 map 의 요소의 수를 셀 수 있다.

  4. iteratorable, 순회 할 수 있다.

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
let question = new Map();

//요소 추가, set()
question.set('what', '지금 배우고 있는 자바스크립트 버전의 공식명은?')
question.set(1, 'ES5');
question.set(2, 'ES6');
question.set(3, 'ES1997');
question.set('correct', '3');
question.set(true, 'Correct answer!');
question.set(false, 'Wrong!');

//요소 불러오기, get()
console.log (question.get('what')); // 지금 배우고 있는 자바스크립트 버전의 공식명은?
console.log(question.size) // 6

//삭제, delete() 확인, has()
if (question.has(4)) {
  question.delete(4);
}

// iterable, use loop!
question,forEach((value, key) => {
	console.log (`${key} => ${value}`) // key 1,2,3,4 => ES5,ES6,ES1997...
})

//entries(), 모든 [key,value] 형태 iterator객체를 반환함
for (let [key, value] of question.entries()) { 
  if (type of(key) === 'number') { //map은 모든 타입 key 값 지정 가능 활용!
    console.log(`answer: ${value}`);
  }
}

set

set은 중복값을 허용하지 않기 때문에, 유니크한 값을 찾거나, 중복값을 체크할 때 유용하다

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
let set = new Set();

//중복 불가
set.add(1);
set.add(2);
set.add(1);

console.log(set); // set { 1, 2} , 이미 존재하는 값은 추가x

//set 반복, forEach
set.forEach(function(val) => {
	console.log(val); // 1, 2
)};

//has(), 값이 존재하는지 확인
console.log(set.has("3"))// false
//delte() 삭제 / clear() 모두삭제

// spread operator 로 array <-> set 전환
const items = new Set();
items.add('가방');
items.add('신발');
items.add('핸드폰');

let item2 = [...items]

weakmap, weakset 생략 ( key가 객체, 가비지컬렉션 허용)

3. Modules

외부에서(다른파일) 에서 코드를 불러오는 방식, 

1
2
3
4
5
6
7
8
9
10
11
12
13
//index.js , 메인파일

//단일 코드 불러오기
import string from './models/Search'; //string은 임의명 ,from 은 상대경로 지정

//복수 코드들 불러오기
import { add,  multifly, ID} from './function';
//import { add as a,  multifly as b, ID} from './function'; // as, 별명으로 사용가능
console.log(add(1,2)); // 3
console.log(multifly(5,ID)); // 5 

//import * as Search from './function' // 모두 불러오기
Search.add() //이런식으로 사용가능
1
2
//Search.js , 내보낼 파일1 (단수)
export default 'search.js'; // 하나의 객체만 내보낼때, 불러온 쪽에서 임의이름으로 사용가능
1
2
3
4
//functions.js , 내보낼 파일2 (복수) // 내보 낼 객체 앞에 export 키워드 붙여줄 것
export const add = (a,b) => a + b;
export const multiply = (a,b) => a * b;
export const ID = 1;

###4. (추가중)

Share