es6 문법 알아보기

Default Parameters

함수에 기본값을 줄 수 있다. 함수에 인자값을 주면 해당 인자를 사용하고, 인자값을 넣지 않으면 기본값을 사용하게 된다.

const makeLatte = (shot = 1) => {
  return `milk1 + shot${shot}`;
};

const adult = makeLatte();
console.log(adult);
// milk1 + shot1

const child = makeLatte(0);
console.log(child);
// milk1 + shot0

const programmer = makeLatte(2);
console.log(programmer);
// milk1 + shot2

 

Conditional Operator (삼항 연산자)

문법은 [ 조건식 ] ? [ 조건식이 true일때 값 ] : [ 조건식이 false일때 값 ]

const age = (birth) => {
  return birth === 1996 ? "we are friends" : "we are not friedns";
};

const user1 = age(1996);
console.log(user1);
// we are friends

const user2 = age(2002);
console.log(user2);
// we are not friedns

 

Template Literals

기본 문법은 `${}`이다. `` 안에 문자와 변수값을 함께 사용할 수 있으며, 변수값을 사용시에는 ${}안에 넣어 사용하면 된다.

const myName = "me";
const myAge = 27;
const hobby = "sleep";
const like = "snack";

console.log(`name: ${myName}\nmyAge: ${myAge}\nhobby: ${hobby}\nlike: ${like}`);
/*
name: me
myAge: 27
hobby: sleep
like: snack
*/

 

optional chaining

객체 안에 특정 요소가 존재하지 않더라고 에러가 나지 않도록 방지하여 준다. 즉 해당 객체값이 있을수도 없을수도 있음을 의미한다. 우선 optional chaining을 사용하지 않은 아래의 코드의 경우 실행시 아래와 같이 what 이 정의 되어 있지 않다는 에러가 나게 된다.

const users = [
  {
    name: "user1",
    like: {
      what: "snack",
      why: "delicliout",
    },
  },
  {
    name: "user2",
    like: {
      what: "cake",
      why: "delicliout",
    },
  },
  {
    name: "user3",
    like: {
      what: "milk",
      why: "delicliout",
    },
  },
  {
    name: "user3",
  },
];

const whatLike = (ele) => {
  return ele.like.what;
};

const likes = users.map((ele) => {
  return whatLike(ele);
});

console.log(likes);

아래의 코드와 같이 whatLike 부분에서 optional chaining을 추가해줌으로써 에러가 나는 것을 방지하여 준다.

const users = [
  {
    name: "user1",
    like: {
      what: "snack",
      why: "delicliout",
    },
  },
  {
    name: "user2",
    like: {
      what: "cake",
      why: "delicliout",
    },
  },
  {
    name: "user3",
    like: {
      what: "milk",
      why: "delicliout",
    },
  },
  {
    name: "user3",
  },
];

const whatLike = (ele) => {
  return ele.like?.what;
  // 옵셔널 체이닝을 추가하여 주었다.
  // return ele.like?.what === undefined ? "anything" : ele.like.what;
  // 삼항 연산자를 통해 위와 같이 작성할 수도 있다.
};

const likes = users.map((ele) => {
  return whatLike(ele);
});

console.log(likes);
// [ 'snack', 'cake', 'milk', undefined ]

 

||    &&  ??

|| 의 경우 기본 문법은 [value1] || [value2] 이며, value1의 값이 null, undefined, false, 0이면, value2의 값이 사용되며, value1의 값이 문자열, 숫자, true 등인 경우에는 앞의 값이 출력된다.

const myName = null;
console.log(myName);
// null

const whatName = () => {
  console.log(true || "me");
  // true
  console.log("my" || "me");
  // my
  console.log(2 || "me");
  // 2
  console.log(false || "me");
  // me
  console.log(undefined || "me");
  // me
  console.log(myName || "me");
  // me
  console.log(0 || "me");
  // me
};


whatName();

&& 의 경우 [value1] && [value2]이며, value1의 값이 존재하거나, true이면 value2의 값이 이용되고, value1의 값이 false, null, undefined 이면 해당 값 즉 value1이 그대로 출력된다.

const myName = null;
console.log(myName);
// null

const whatName = () => {
  console.log(true && "me");
  // me
  console.log("my" && "me");
  // me
  console.log(2 && "me");
  // me
  console.log(false && "me");
  // false
  console.log(undefined && "me");
  // undefined
  console.log(myName && "me");
  // null
  console.log(0 && "me");
  // 0
};

whatName();

?? 의 경우 기본 문법은 [value1] ?? [value2]이며 앞의 값이 null과 undefined인 경우를 제외하고는 앞의 값이 출력되며, 앞의 값이 null 또는 undefined인 경우에는 뒤의 값이 출력된다.