출처 : https://chanspark.github.io/2017/11/28/ES6-%EA%BF%80%ED%8C%81.html
1. 삼항조건 연산자 (The Ternary Operator)
const answer = x > 10 ? " greater than 10" : x
2. 간략계산법 (Short-circuit Evaluation)
variable1 = 'foo';
variable2 = variable1 || '';
console.log(variable2); // prints foo
3. 변수 선언
let x, y, z=3;
for (let index of allImgs)
[2, 5, 9].forEach(logArrayElements);
7. 십진수 지수 (Decimal base exponents)
for (let i = 0; i < 1e7; i++) {}
// All the below will evaluate to true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;
list.forEach(item => console.log(item));
10. 묵시적 반환(Implicit Return)
11. 파라미터 기본 값 지정하기(Default Parameter Values)
12. 템플릿 리터럴 (Template Literals)
const db = `http://${host}:${port}/${database}`;
13. 비구조화 할당 (Destructuring Assignment)
const { store, form, loading, errors, entity:contact } = this.props;
14. 여러줄로 문자열 쓰기 (Multi-line String)
15. 전개 연산자 (Spread Operator)
const nums = [2, ...odd, 4 , 6];
16. 필수(기본) 파라미터 (Mandatory Parameter)
기본적으로 자바스크립트는 함수의 파라미터값을 받지 않았을경우, undefined로 지정합니다. 다른 언어들은 경고나 에러 메시지를 나타내기도 하죠. 이런 기본 파라미터 값을 강제로 지정하는 방법은 if 문을 사용해서 undefined일 경우 에러가 나도록 하거나, ‘Mandatory parameter shorthand’을 사용하는 방법이 있습니다.
기존:
function foo(bar) {
if(bar === undefined) {
throw new Error('Missing parameter!');
}
return bar;
}
축약기법:
mandatory = () => {
throw new Error('Missing parameter!');
}
foo = (bar = mandatory()) => {
return bar;
}
17. Array.find
pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }
Foo.bar 를 Foo[‘bar’] 로 적을 수 있는걸 알고 있나요? 왜 후자와 같이 코딩을 해야하는지 의문이 들 수도 있겠지만, 재사용이 용이한 코드 블락을 작성하기 위해서는 매우 효율적인 방법입니다.
아래의 간단한 validation 함수 예시를 확인해보세요:
function validate(values) {
if(!values.first)
return false;
if(!values.last)
return false;
return true;
}
console.log(validate({first:'Bruce',last:'Wayne'})); // true
위 함수로 validation기능을 완벽하게 사용할 수 있습니다. 하지만 form 요소들과 validation 옵션으로 사용해야하는 영역과 규칙(fields and rules) 이 많을 경우 위의 함수는 점점 복잡해지고 길어지게 됩니다. 이를 방지하기 위해서 실행시 옵션을 부과할 수 있는 포괄적인 validation 함수를 작성하는 방법을 알아보겠습니다.
축약기법:
// object validation rules (객체로 만든 validation 규칙)
const schema = {
first: {
required:true
},
last: {
required:true
}
}
// universal validation function (공통적으로 사용할 수 있는 validation 함수)
const validate = (schema, values) => {
for(field in schema) {
if(schema[field].required) {
if(!values[field]) {
return false;
}
}
}
return true;
}
console.log(validate(schema, {first:'Bruce'})); // false
console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true
위 예시처럼 사용한다면 모든 form에 공통으로 적용시킬 수 있는 validation 함수를 작성할 수 있습니다.
19. 단항 비트 논리부정 연산자 (Double Bitwise NOT)
비트 연산자는 자바스크립트 공부를 시작하면서 한번 배운뒤 한번도 적용해본적 없는 연산자일 겁니다. 애당초 이진법으로 코딩하지 않는다면 1 과 0 을 사용 할 일이 없죠.
하지만 이번 팁은 단항 비트 논리부정 연산자를 효율적으로 사용할 수 있는 방법을 알려드립니다. 바로 Math.floor() 함수의 대체용으로 사용할 수 있다는 것이죠. 또 Math.floor() 함수보다 훨씬 빠르게 작동한다는 장점도 있습니다. 단항 비트 논리부정 연산자에 대해서는 여기에서 더 알아보실 수 있습니다.
기존:
Math.floor(4.9) === 4 //true
축약기법:
