JavaScript 최신 문법 정리

ES6 ~ ES13 version 정리 입니다.

 

자바스크립트의 혁명이라 할 수 있는 ES6 이후 추가된 자바스크립트 최신 문법 중 자주 이용할 기능들을 정리하였습니다.

 

Numeric Separators

 

10000000000 과 같은 단위가 큰 숫자의 가독성을 높일 수 있게 언더바 ( _ ) 로 단위를 구분할 수 있는 표현입니다.

구분자는 임의의 위치에 마음대로 추가가 가능합니다.

 

console.log(1_000_000_000 + 10_000) // 1000010000

 

Shorthand Property names

 

프로퍼티 이름과 value 값의 변수이름과 동일할 때에는 하나로 생략이 가능합니다.

 

const ellie1 = {
  name: 'Ellie',
  age: '18',
};
const name = 'Ellie';
const age = '18';


// ❌ ( 비효율 )
const ellie2 = {
  name: name,
  age: age,
};

// ⭕
const ellie3 = {
  name,
  age,
};

 

Destructuring Assignment

 

구조분해 문법으로, 객체, 배열안의 원소값들을 바깥 변수로 한번에 빼서 사용하기 위한 문법 입니다.

 

// object
const student = {
  name: 'Anna',
  level: 1,
};


// ❌

const name = student.name;
const level = student.level;
console.log(name, level); // Anna 1

// ⭕
const { name, level } = student;
console.log(name, level); // Anna 1

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




// array
const animals = ['🐶', '😽'];


// ❌
const first = animals[0];
const second = animals[1];
console.log(first, second); // 🐶 😽

// ⭕
const [first, second] = animals;
console.log(first, second); // 🐶 😽

 

Spread Syntax

 

전개 연산자로, 객체나 배열 안의 요소들을 펼쳐 복사하는 것을 말합니다.

주의할 점은 얕은 복사가 이루어 집니다.

 

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

// array copy
const arrayCopy = [...array];
console.log(arrayCopy); // [ { key: 'key1' }, { key: 'key2' } ] 

const arrayCopy2 = [...array, { key: 'key3' }];
obj1.key = 'newKey'; 

console.log(array); // [ { key: 'newKey' }, { key: 'key2' } ]
console.log(arrayCopy2); // [ { key: 'newKey' }, { key: 'key2' }, { key: 'key3' } ]

// object copy
const obj3 = { ...obj1 };
console.log(obj3); // { key: 'newKey' }

// array concatenation
const fruits1 = ['🍑', '🍓'];
const fruits2 = ['🍌', '🥝'];
const fruits = [...fruits1, ...fruits2];
console.log(fruits); // [ '🍑', '🍓', '🍌', '🥝' ]

// object merge
const dog1 = { dog: '🐕' };
const dog2 = { dog: '🐶' };
const dog = { ...dog1, ...dog2 };
console.log(dog); // { dog: '🐶' }

 

Short Circuit

 

and 연산자 or 연산자 특성을 이용해 반환값을 결정하는 기법 입니다.

 

|| 연산자

왼쪽 값이 true 하면 왼쪽 값을 return 하고, 왼쪽 값이 false 하면 오른쪽 값을 return 합니다.

 

const seaFood = {
  name: "박달대게"
};

function getName(fish) {
  /*if(!fish) {
    return '이름없음'
  }
  return fish;*/
  return fish || '이름없음' // 만약 fish가 null이라면 대신 or '이름없음'을 리턴
}

const name = getName(seaFood)
console.log(name) // {name : 박달대게}

const name2 = getName()
console.log(name2) // '이름없음'



console.log(false || 'hello') // 'hello'
console.log('' || 'hello') // 'hello'

console.log('트루' || 'hello') // '트루'
console.log(1 || 'hello') // 1

console.log('hello1' || false) // 'hello1'
console.log('hello2' || NaN) // 'hello2'

console.log(null && false) // false
console.log(undefined || null) // null

 

&& 연산자

왼쪽 값이 true 이면 오른쪽 값을 return 합니다. 만일 오른쪽 값이 없으면 undefined , null 입니다.

왼쪽 값이 false 이면 왼쪽 값을 return 합니다.

 

console.log(true && "hello"); // 'hello'
console.log(null && undefined); // null
console.log(undefined && "hello"); // undefined
console.log("hello" && null); // null
console.log("hello" && "bye"); // bye
console.log(null && "hello"); // null
console.log(undefined && "hello"); // undefined

 

Nullish Coalescing Operator

?? 라는 문법 으로써, 거짓의 판단을 유연하게 판단하는 문법 입니다. 간단하게 값이 있고 없고로 판단합니다.

 

var named = 'Ellie';
var userName = named || 'Guest';
console.log(userName); // Ellie

var named = null;
var userName = named || 'Guest';
console.log(userName); // Guest


// ❌
var named = '';
var userName = named || 'Guest'; // 논리값은 빈값도 false로 판단
console.log(userName); // Guest

var num = 0;
var message = num || 'Hello'; // 논리값은 0은 false로 판단
console.log(message); // Hello

// ⭕
var named = '';
var userName = named ?? 'Guest'; // 그냥 심플하게 값이 있고 없고로 판단. 빈칸도 결국 값이 빈칸인 것이다.
console.log(userName); // ''

var num = 0;
var message = num ?? 'Hello'; // 0도 결국 값이 0인것
console.log(message); // 0

 

문자열 최신 문법

replaceAll()

일치하는 모든 문자열을 replace 해줍니다.

즉 첫번째 인자로 바꿔야 하는 문자열을 넣어주고 두번 째 인자로 바꾸고 싶은 문자열을 넣어주면 됩니다.

 

// ❌
console.log("문자열에서 여러번 나오는 문자열을 한꺼번에 변경할 수 있습니다.".replace(/문자열/g,""));
// 에서 여러번 나오는 을 한꺼번에 변경할 수 있습니다.

// ⭕
console.log("문자열에서 여러번 나오는 문자열을 한꺼번에 변경할 수 있습니다.".replaceAll("문자열",""));
// 에서 여러번 나오는 을 한꺼번에 변경할 수 있습니다.

 

padStart()

문자열 끝 부분이나 시작 부분을 다른 문자열로 채워 주어진 길이를 만족하는 새로운 문자열을 만들어낼 수 있습니다.

 

"hello".padStart(6); // " hello"
"hello".padEnd(6); // "hello "
"hello".padStart(3); // "hello" // 문자열 길이보다 목표 문자열 길이가 짧다면 채워넣지 않고 그대로 반환
"hello".padEnd(20, "*"); // "hello***************" // 사용자가 지정한 값으로 채우는 것도 가능

 

trimStart() , trimEnd()

빈공간을 제거하는 trim 을 좀 더 세부화 시켜 줍니다.

 

// trimStart()
'Testing'.trimStart() //'Testing'
' Testing'.trimStart() //'Testing'
' Testing '.trimStart() //'Testing '
'Testing '.trimStart() //'Testing '

// trimEnd()
'Testing'.trimEnd() //'Testing'
' Testing'.trimEnd() //' Testing'
' Testing '.trimEnd() //' Testing'
'Testing '.trimEnd() //'Testing'

 

배열 최신 문법

flat()

중첩 배열을 삭제하거나 배열의 빈 공간을 삭제시켜 주는 문법 입니다.

 

// 중첩 다차원 배열 평평하게
const array = [1, [2, 3], [4, 5]];
array.flat(1); // 결과 : [1,2,3,4,5]

// 데이터 정리도 됨
const entries = ["bob", "sally", , , , , , , , "cindy"];
entries.flat(); // 결과 ['bob', 'sally', 'cindy'];

at()

배열안에 양수, 음수 index 를 사용하여 편하게 접근할 수 있게 만들어 주는 문법 입니다.

 

const arrays = ['a','b','c','d'];
console.log(arrays.at(-1)); // 'd

 

객체 최신 문법

Optional chaining

?. 으로 쓸 수 있는 문법으로, 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다.

?. 앞의 평가 대상이 undefined , null 이면 평가를 멈추고 undefined 를 반환합니다.
data?.name 일 때 data 값이 없다면 undefined 를 반환해 줍니다.

 

const person1 = {
  name: 'Ellie',
  job: {
    title: 'S/W Engineer',
    manager: {
      name: 'Bob',
    },
  },
};

const person2 = {
  name: 'Bob',
};


// ❌
function printManager(person) { // 중첩 객체의 값을 불러오는 함수
  console.log(person.job.manager.name);
}
printManager(person1); // Bob
printManager(person2); // 에러


// ❌
function printManager(person) {
  console.log(person.job && person.job.manager && person.job.manager.name);
}
printManager(person1); // Bob
printManager(person2); // undefined


// ⭕
function printManager(person) {
  console.log(person?.job?.manager?.name);
}
printManager(person1); // Bob
printManager(person2); // undefined

 

함수도 마찬가지 입니다.

 

let user1 = {
  admin() {
    alert("관리자 계정입니다.");
  }
}

let user2 = {};

user1.admin?.(); // 관리자 계정입니다.
user2.admin?.(); // undefined