ES6 축약코딩

1. 삼항조건 연산자

const answer = x > 10 ? "greater than 10" : "less than 10";
JavaScript
복사

2. 간략 계산법

// undefind & null & <empthy string>
const variable2 = variable1 || "new";
JavaScript
복사

3. 변수 선언

let x,
  y,
  z = 3;
JavaScript
복사

4. if문

Truthy한 값들

// 긍정시 실행
if (likeJavaScript) {
}

// 부정시 실행
if (!a) {
}
JavaScript
복사

5. For loop

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
JavaScript
복사

6. 간략 계산법

const dbHost = process.env.DB_HOST || "localhost";
JavaScript
복사

7. 십진수 지수

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

1 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;
JavaScript
복사

8. key : value

const obj = { x, y };
JavaScript
복사

9. Arrow Function

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

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

list.forEach((item) => console.log(item));
JavaScript
복사

10. 묵시적 반환

// 한 문장 이상 반환시 {} 대신 ()를 사용함
calcCircumference = diameter => (
  Math.PI * diameter;
)
JavaScript
복사

11. 파라미터 기본 값 지정

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

12. 템플릿 리터럴 ````

const welcome = `You have logged in as ${first} ${last}`;
const db = `http://${host}:${port}/${database}`;
JavaScript
복사

13. 비구조화 할당

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

14. 여러줄로 문자열 쓰기

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.`;
JavaScript
복사

15. 전개 연산자

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

// 구조화 대입법과 사용 가능함.
// a, b는 따로의 객체로 인식되고, 나머지 객체를 z로 묶음
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 }
JavaScript
복사

16. 기본 파라미터

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

foo = (bar = mandatory()) => {
  return bar;
};
JavaScript
복사

17. Array.find()

// pet.type이 Dog이고, name이 Tommy인 값을 찾음.
pet = pets.find((pet) => pet.type === "Dog" && pet.name === "Tommy");
console.log(pet); // { type: 'Dog', name: 'Tommy' }
JavaScript
복사

18. Object['key']

// 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
JavaScript
복사

19. 단항 비트 논리부정 연산자

// Math.floor과 똑같음
~~4.9 === 4; // true
JavaScript
복사