1. const and let
var keyword 대신 const나 let keyword를 사용
2. Arrow functions
ES5
|
1
2
3
4
5
6
7
8
|
// ES5
function myFunc(name) {
return '안녕' + name;
}
console.log(myFunc('영희'));
// 출력 => 안녕 영희
|
ES6
|
1
2
3
4
5
6
7
8
9
10
11
|
// ES6 화살표 함수
const myFunc = (name) => {
return `안녕 ${name}`;
}
console.log(myFunc('영희')); // 출력 => 안녕 영희
// 또는 화살표를 사용하거나 'return' 키워드를 사용하지 않아도 됩니다
const myFunc = (name) => `안녕 ${name}`;
console.log(myFunc('영희')); // 출력 => 안녕 영희
|
3. Template Literals
백틱( ` )을 사용해 문자열을 연결할 수 있다. (+) 기호를 사용하지 않아도 된다.
ES5
|
1
2
3
4
5
6
7
|
// ES5
function myFunc1() {
return '안녕' + name + '너의 나이는' + age + '살 이다!';
}
console.log(myFunc1('영희', 22));
// 출력 => 안녕 영희 너의 나이는 22살 이다!
|
ES6
|
1
2
3
4
5
6
7
|
// ES6
const myFunc = (name, age) => {
return `안녕 ${name}, 너의 나이는 ${age}살 이다!`;
};
console.log(myFunc1('영희', 22));
// 출력 => 안녕 영희, 너의 나이는 22살 이다!
|
4. Default parameters
가끔 parameter를 사용할 때 값을 잊어버리는 경우가 존재하는데 이러한 경우에 Default parameter를 설정해 잊어버리거나 의도적으로 값을 설정할 때 사용할 수 있다.
ES5
|
1
2
3
4
5
6
|
const myFunc = (name, age) => {
return `안녕 ${name} 너의 나이는 ${age}살 이니?`;
};
console.log(myFunc1('영희'));
// 출력 => 안녕 영희 너의 나이는 undefined살 이니?
|
위의 결과에서 나이가 undefined가 나오지만 이를 방지하기 위해
ES6
|
1
2
3
4
5
6
|
const myFunc = (name, age = 22) => {
return `안녕 ${name} 너의 나이는 ${age}살 이니?`;
};
console.log(myFunc1('영희'));
// 출력 => 안녕 영희 너의 나이는 22살 이니?
|
위처럼 parameter값을 설정해 놓을 수 있다.
5. Array and object destructing(배열 및 객체 비구조화)
ES6에서는 비구조화를 이용해 간단하게 표현이 가능하다.
ES5
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// ES5 문법
const contacts = {
famillyName: '이',
name: '영희',
age: 22
};
let famillyName = contacts.famillyName;
let name = contacts.name;
let myAge = contacts.age;
console.log(famillyName);
console.log(name);
console.log(age);
// 출력
// 이
// 영희
// 22
|
ES6
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// ES6 문법
const contacts = {
famillyName: '이',
name: '영희',
age: 22
};
let { famillyName, name, age } = contacts;
console.log(famillyName);
console.log(name);
console.log(age);
// 출력
// 이
// 영희
// 22
|
참고 : 속성 이름과 동일하지 않은 변수를 할당하면 undefined가 반환된다. 예를 들어, 속성의 이름이 name이고 username 변수에 할당하면 undefined를 반환한다.
변수의 이름을 바꾸고 싶은 경우 ( : )를 이용하면 된다.
ES6
|
1
2
3
4
5
6
7
8
9
10
11
|
// ES6 문법
const contacts = {
famillyName: '이',
name: '영희',
age: 22
};
let { famillyName, name: ontherName, age } = contacts;
console.log(ontherName);
// 영희
|
6. Promises(프로미스)
기존 JS 비동기 처리를 할 때 콜백 패턴을 사용했는데 이 때문에 발생한 단점들을 보안하기 위해 Promises가 등장했다.
|
1
2
3
4
5
6
7
8
9
10
11
|
// Promise 객체의 생성
const promise = new Promise((resolve, reject) => {
// 비동기 작업을 수행한다.
if (/* 비동기 작업 수행 성공 */) {
resolve('result');
}
else { /* 비동기 작업 수행 실패 */
reject('failure reason');
}
});
|
상태의미구현
| pending | 비동기 처리가 아직 수행되지 않은 상태 | resolve 또는 reject 함수가 아직 호출되지 않은 상태 |
| fulfilled | 비동기 처리가 수행된 상태 (성공) | resolve 함수가 호출된 상태 |
| rejected | 비동기 처리가 수행된 상태 (실패) | reject 함수가 호출된 상태 |
| settled | 비동기 처리가 수행된 상태 (성공 또는 실패) | resolve 또는 reject 함수가 호출된 상태 |
then
promise가 종료가 되면 resolve에 들어간 값을 받을 수 있다.
|
1
2
3
4
5
6
7
8
9
|
const promise = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve("resolve");
}, 3000);
});
promise.then(value => console.log(value));
// 3초 후에 결과가 출력
// resolve
|
catch
하지만 reject된 경우에는 then으로 받을 경우 에러가 발생한다. → catch를 사용해 에러를 잡아줄 수 있다.
|
1
2
3
4
5
6
7
8
9
|
const promise = new Promise((resolve, reject)=>{
setTimeout(()=>{
reject("reject");
}, 3000);
});
promise.then(result => console.log(result)).catch(error => console.log(error));
// 3초 후에 결과가 출력
// reject
|
7. Rest parameter and Spread operator(나머지 매개 변수 및 확산 연산자)
Rest parameter를 이용해 배열의 인수를 가져오고 새 배열을 반환하는데 사용한다.
|
1
2
3
4
5
6
7
8
9
10
|
const arr = ['영희', 20, '열성적인 자바스크립트', '안녕', '지수', '어떻게 지내니?'];
// 비구조화를 이용한 값을 얻기
const [ val1, val2, val3, ...rest ] = arr;
const Func = (restOfArr) => {
return restOfArr.filter((item) => {return item}).join(" ");
};
console.log(Func(rest)); // 안녕 지수 어떻게 지내니?
|
|
1
2
3
4
5
6
7
8
|
const arr = ['영희', 20, '열성적인 자바스크립트', '안녕', '지수', '어떻게 지내니?'];
const Func = (...anArray) => {
return anArray;
};
console.log(Func(arr));
// 출력 => ["영희", 20, "열성적인 자바스크립트", "안녕", "지수", "어떻게 지내니?"]
|
8. Classes(클래스)
class를 만들려면 'class' keyword 뒤에 두 개의 중괄호가 있는 class 이름을 사용한다.
ES6
|
1
2
3
4
5
|
class myClass {
constructor() {
}
}
|
이제 new 키워드를 사용하여 class메서드와 속성에 액세스 가능하다.
ES6
|
1
2
3
4
5
6
7
8
9
10
11
|
class myClass {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
const user = new myClass('영희', 22);
console.log(user.name); // 영희
console.log(user.age); // 22
|
다른 class에서 상속하려면 java에서와 같이 extends keyword 사용하면 된다.
ES6
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
class myClass {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`안녕 ${this.name} 너의 나이는 ${this.age}살이다`);
}
}
// myClass 메서드 및 속성 상속
class UserProfile extends myClass {
userName() {
console.log(this.name);
}
}
const profile = new UserProfile('영희', 22);
profile.sayHello(); // 안녕 영희 너의 나이는 22살이다.
profile.userName(); // 영희
|
'Develop > JS' 카테고리의 다른 글
| JS 궁금했던거 (0) | 2022.04.18 |
|---|---|
| JS vs Java -this차이- (0) | 2022.04.14 |
| JS 동기, 비동기 (0) | 2022.04.08 |
