Basic VS ES6

원문 : https://www.sitepoint.com/shorthand-javascript-techniques/

1. 삼항조건 연산자 (The Ternary Operator)

• if , else 사용할때 한줄로 줄여주는 방법

기존 (Basic)

const x = 20;
let answer;
if (x > 10) {
    answer = 'greater than 10';
} else {
    answer = 'less than 10';
}

축약 (ES6)

const answer = x > 10 ? 'greater than 10' : 'less than 10';

// or

const answer = x > 10 ? " greater than 10" : x 

// React 에서는 특정 버튼을 상태값에 따라 나타낼 경우 이렇게 사용한다고 한다.

{editable ? (
    <a onClick={() => this.save(record.key)}>확인</a>
) : (
    <a onClick={() => this.edit(record.key)}>수정</a>
)} 

2. 간략계산법 (Short-circuit Evaluation)

• 기존 변수를 다른 변수에 할당하고 싶다면 기존 변수가 값이 널 , 언디파인 값이 아닌지 확인을 해야 한다 (하지 않는다면 에러)

기존 (Basic)

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}

축약 (ES6)

const variable2 = variable1  || 'new';

// add

let variable1;
let variable2 = variable1  || '';
console.log(variable2 === ''); // prints true

variable1 = 'foo';
variable2 = variable1  || '';
console.log(variable2); // prints foo

3. 변수선언 , If Presence

• 대표적인 언어들과 차이점은 없어 보인다.

기본(Basic)

// 변수 선언 

let x;
let y;
let z = 3;

//  If Presence

if(likeJavaScript == true)

축약(ES6)

// 변수 선언

let x , y , z = 3 으로 변경이 가능하다


 // If Presence

if(likeJavaScript)

4. For 루프

• 반복문 돌릴때 제이쿼리의 lodash 같은 라이브러리를 의존 하지않는다면 매우 유용하다.

기본 (Basic)

for(let i = 0; i < alllmgs.length; i++)
{}

축약(ES6)

for(let index of alllmgs)

//or

function logArrayElements(element, index, array) {
  console.log("a[" + index + "] = " + element);
}
[2, 5, 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[2] = 9  

5. 간략 계산법 (Short-circuit Evaluation)

• 기존 값을 부여하기 위해 파라미터에 널 , 언디파인 여부를 파악하느라 6줄 코드를 작성하는것 보다 이 방법을 통해 작성하는 방법이 있다.

기본 (Basic)

let dbHost
if(process.env.DB_HOST){
  dbHost = process.env.DB_HOST;
  }
else{
   dbHost = "localhost";
}

축약(ES6)

const dbHost = process.env.DB_HOST || 'localhost';

6. 십진수 지수 (Decimal base exponents)

• 0이 만은 숫자를 적을때, 수 많은 0들을 제외하고 코딩을 하게 된다면 편하게 사용 할 수 있다고 한다
• 하지만 직관성이 떨어진다고 생각해서 나는 사용하지 않을 것이다.

기본 (Basic)

for (let i = 0; i < 10000; i++) {}

축약(ES6)

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;

7. 객체 프로퍼티

• 객체 리터럴 표기법은 자바스크립트 코딩을 훨씬 쉽게 만들어준다 , ES6은 더 쉬운 방법을 제공해준다.
• 프로퍼티 이름과 key 이름이 같다면 축약기법을 사용 할 수 있다.

기본 (Basic)

const obj = { x:x , y:y };

축약(ES6)

const obj {x,y}

8. 에로우 Function

• 기존 함수 선언시 선언문 자체가 불필요하게 느껴지고 헷갈리게 되어짐

• 에로우 함수 표기법에는 this 가 기존의 함수 선언문과 다르게 받아들여진다.

• 이 두 예제는 완벽하게 동일 할수 없다고 본다 더 궁금한게 있다면 아티클

기본 (Basic)

function sayHello(name) {
  console.log('Hello', name);
}

setTimeout(function() {
  console.log('Loaded')
}, 2000);

list.forEach(function(item) {
  console.log(item);
});

축약(ES6)

sayHello = name => console.log('Hello', name);

setTimeout(() => console.log('Loaded'), 2000);

list.forEach(item => console.log(item));

9. 묵시적 반환 (Implicit Return)

• return은 함수 결과를 반환하는데 사용되는 명령어

• 한 줄로만 작성된 함수는 별도의 return 명령어가 없어도 자동으로 반환 (다만 {} 를 생략한 함수 )

• 한 줄 이상의 문장(객체 리터럴)을 반환하려면 중괄호({})대신 괄호(())를 사용해서 함수를 묶어야 한다 이렇게 하면 함수가 한 문장으로 작성된 것을 나타낼수 있다.

기본 (Basic)

function calcCircumference(diameter) {
  return Math.PI * diameter
}

축약(ES6)

calcCircumference = diameter => (
  Math.PI * diameter;
)

10. 파라미터 기본 값 지정하기(Default Parameter Values)

• 기존에는 if문을 통해 파라미터값에 기본 값을 지정 해줬다.

• 함수 선언문 자체에서도 기본값을 지정이 가능하다

기본 (Basic)

function volume(l, w, h) {
  if (w === undefined)
    w = 3;
  if (h === undefined)
    h = 4;
  return l * w * h;
}

축약(ES6)

volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24

11. 템플릿 리터럴 (Template Literals)

• 문자열 + 가 너무 힘들어서 쉬운 방법을 만든 방법

• ${}를 감싼다 주의사항: ( "" , '' 가 아닌 `` 안에서 사용 가능)

기본 (Basic)

const welcome = 'You have logged in as ' + first + ' ' + last + '.'

const db = 'http://' + host + ':' + port + '/' + database;

축약(ES6)

const welcome = `You have logged in as ${first} ${last}`;

const db = `http://${host}:${port}/${database}`;

12. 비구조화 할당 (Destructuring Assignment)

• 프레임워크 개발시 컴포넌트 , API간 정보을 송신하기 위해 객체 리터럴이나 배열로 이뤄진 데이터를 사용을 많이한다.

• 그렇다면 데이터 객체가 컴포넌트에 들어가게 되면 unpack이 필요 해진다.

• React에서 컴포넌트들을 사용 할 때 축약 방식을 채택한다.

기본 (Basic)

const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');

const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;

축약(ES6)

import { observable, action, runInAction } from 'mobx';

const { store, form, loading, errors, entity } = this.props;

// 커스텀 지정도 가능.

const { store, form, loading, errors, entity:contact } = this.props;

13. 여러줄로 문자열 쓰기 (Multi-line String)

• 한 줄 이상의 문자열을 입력하게 될 경우가 있다면 기존의 방법보다 훨씬 편한 방법이 있다

기본 (Basic)

const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
    + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
    + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
    + 'veniam, quis nostrud exercitation ullamco laboris\n\t'
    + 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'
    + 'irure dolor in reprehenderit in voluptate velit esse.\n\t'

축약(ES6)

const lorem = `Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse.`

14. 전개 연산자 (Spread Operator)

• ES6에서 소개된 전개 연산자는 자바스크립트 코드를 더 효율적인 방법을 제시 한다

• 간단히는 배열의 값을 변환하는데 사용할 수 있다.

• 전개 연산자를 사용하는 방법은 점 세개(...)를 붙이면 된다

기본 (Basic)

// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()

축약(ES6)

// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

// concat() 함수와 다르게 전개 연산자를 이용하면 하나의 배열을 다른 배열의 아무 곳에나 추가 가능

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

// 전개 연산자는 ES6의 구조화 대입법(destructuring notation)와 함께 사용할 수도 있음

const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

15. 필수(기본) 파라미터 (Mandatory Parameter)

• 자바스크립트는 함수의 파라미터값을 받지 않는다면 언디파인으로 지정 , 다른 언어는 경고나 에러 메시지를 나타낸다.

• 기본 파라미터 값을 강제로 지정하는 방법은 if 문을 사용해서 undefined 일 경우 에러가 나도록 한다.

• 전개 연산자를 사용하는 방법은 점 세개(...)를 붙이면 된다

기본 (Basic)

function foo(bar) {
  if(bar === undefined) {
    throw new Error('Missing parameter!');
  }
  return bar;
}

축약(ES6)

mandatory = () => {
  throw new Error('Missing parameter!');
}

foo = (bar = mandatory()) => {
  return bar;
}

16. Array.find

• 자바스크립트로 특정 값을 찾기 위한 함수를 작성하다보면 보통 반복문 이용해서 작성함

• ES6에서는 find()라는 새로운 함수가 생김

기본 (Basic)

const pets = [
  { type: 'Dog', name: 'Max'},
  { type: 'Cat', name: 'Karl'},
  { type: 'Dog', name: 'Tommy'},
]

function findDog(name) {
  for(let i = 0; i<pets.length; ++i) {
    if(pets[i].type === 'Dog' && pets[i].name === name) {
      return pets[i];
    }
  }
}

축약(ES6)

pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }

17. Object key

• Foo.bar 를 Foo[‘bar’] 로 적을 수 있다

• 왜 후자와 같이 코딩을 해야하는지 의문이 들 수도 있겠지만, 재사용이 용이한 코드 블락을 작성하기 위해서는 매우 효율적인 방법이라고 한다.

기본 (Basic)

function validate(values) {
  if(!values.first)
    return false;
  if(!values.last)
    return false;
  return true;
}

console.log(validate({first:'Bruce',last:'Wayne'})); // true

축약(ES6)

// 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

18. 단항 비트 논리부정 연산자 (Double Bitwise NOT)

• 사용 할 일이 거의 없다 자세한건 여기

기본 (Basic)

Math.floor(4.9) === 4  //true

축약(ES6)

~~4.9 === 4  //true