꼭! 알아야하는 JavaScript 최신문법 (ES6, ES11) 사용법 정리 (1)

이번 포스팅에서는 자주 쓰이는 JS 최신 문법 사용법에 대해 알아보겠습니다.

다음 포스트 자주쓰는 ES11 문법 사용법 정리(2)

~ES6 2015

• Shorthand property names
• Destructuring assignment
• Spread syntax
• Default parameters
• Ternary Operator
• Template Literals

1. Shorthand property names

const person = {
  name: 'dev_min',
  age: '19',
}  

javascript 에서 object는 항상 key와 value로 이루어져 있습니다.

const name = 'dev_min';
const age = '19';

const person1 = {
  name: name,
  age: age,
}

perseon1 객체에서 name, age는 위에서 const 로 선언한 name, age 변수를 참조한 벨류 값 일 것입니다.

이렇게 key 와 value 가 동일하다면 축약형으로 사용할 수 있습니다.

const name = 'dev_min';
const age = '19';

const person2 = {
  name,
  age
}

2. Destructuring assignment

const student = {
  name: 'Anna',
  level: 3,
}

console.log(student.name, student.level);

Object의 Key와value에 접근하기 위해서는 연결 연산자를 이용하여 객체의 key와 value에 접근을 하였는데요

student.name, student.level

Destructuring assignment을 이용하면 편리하게 Object에서 꺼내서 사용할 수 있습니다.

const { name, level } = student;
console.log(name, level); 

사용 방법은 할당연산자(=) 오른편에는 사용하는 Object를 적어주고 왼편에는 꺼내서 사용할 key의 이름을 {} 안에 적어주게 되면 student의 key와 value들이 각각 name과 level에 맞게 할당이 됩니다.

추가로 객체의 original Name이 아닌 새로운 이름을 사용하고 싶은경우는 아래의 코드처럼

const { name: studentName, level: studentLevel } = student;
console.log(studentName, studentLevel); 

key 옆에 콜론(:)을 붙인 뒤 새로운 name을 적어서 사용하시면 됩니다.

이것은 객체에서 뿐만 아니라 배열에서도 사용이 가능합니다.

// array
const ['apple', 'banana'] = fruits;


// 기존 코드  
{  
  const apple = fruits[0];
  const bananna = fruits[1];

  console.log(apple, banana);

}

// Destructuring assignment
{  
  const [apple, banana] = fruits;
  console.log(apple, banana);
}

Point! Object를 Destructuring 할 때는 {} 를 사용하고 Array를 할 때는 []를 사용합니다.

3. Spread syntax

const obj1 = { key: 'key1' };
const obj2 = { key: 'key2' };
const array = [obj1, obj2];

// array copy
const arrayCopy = [...array];

Spread syntax(...) 는 array에 들어있는 아이템들 하나하나씩을 각각 낱개로 가져와서 복사해 오는 것 을 의미합니다.

배열을 복사하면서 복사한 배열에 아이템을 추가하고 싶다면? 가능합니다.

 // array copy
const arrayCopy = [...array, { key: 'obj3' }];

console.log(arrayCopy);

Spread syntax를 사용한 다음에 추가할 아이템을 작성해주면 됩니다.

주의할 점! Spread syntax는 해당 객체의 값을 복사하는 게 아닌 주소 값을 참조하기 때문에 객체의 값을 수정하게 되면 참조하던 객체의 값도 변하기 때문에 이점 유의해서 코딩하시기 바랍니다

Spread syntax 는 array 뿐만 아니라 object에서도 사용 가능합니다

const obj3 = { ...obj1 };
console.log(obj3);

차이점은 array에서는 [...items] 배열의 괄호를 이용하고 , object는 {... items} object의 괄호를 이용해서 하시면 됩니다.
한 가지 참고하실 점은 object의 key가 동일한 경우 뒤에 있는 key가 앞에 있는 key를 덮습니다.

const obj1 = { animal: '개' };
const obj2 = { animal: '고양이' };
const obj3 = {...obj1, obj2};

console.log(obj3); // 결과: {animal: '고양이'}

4.Default parameters

function printMessage(message) {
  if (message == null) {
    message = 'default message';
  }

  console.log(message);
}

printMessage('hello'); // hello
printMessage(); // default message

기존에는 파라미터로 전달받은 값이 null, undefinded 라면 분기문을 통해 기본값을 할당해주었습니다.
이제 Default parameters를 이용하면 간단하게 작성이 가능합니다.

function printMessage(message = 'default message') {
  console.log(message);
}

printMessage('hello'); // hello
printMessage(); // default message

인자 다음에 초기값을 지정하면 됩니다 인자가 전달될 때는 인자의 값을 사용하고 인자가 전달되지 않는다면 설정해 둔
default parameter 값을 이용하게 됩니다.

5.Ternary Operator

const isCat = true;

// 기존
{
  let component;  
  if (isCat) {
    component = 'cat';
  } else {
       component = 'dog'; 
  }

  console.log(component);
}


// Ternary Operator
{
  const component = isCat ? 'cat' : 'dog';
  console.log(component);
  console.log(isCat ? 'cat' : 'dog');    
}

저는 간단한 조건문 같은 경우 자주 사용하는 편 입니다.

6.Template Literals

const pageNumber = 1;
const pageSize = 10;

// 기존
console.log('현재 페이지 번호는: ' + pageNumber +  ' 이고 페이지 사이즈는: ' + pageSize + '입니다.');

// Template Literals
console.log(`현재 페이지 번호는: ${pageNumber} 이고 페이지 사이지는: ${pageSize} 입니다.`);

편리함과 가독성이 좋아 Template Literals 사용하는 것을 추천드립니다.

지금 까지 ES6 최신 문법에 대해서 알아봤는데요 다음 포스터는 ES11 최신 문법으로 뵙겠습니다.

오타나 틀린 내용이 있다면 댓글로 공유해주시면 감사합니다😊