[JavaScript 기초] 4. JavaScript 최신 문법(ES6, ES11)

2023. 8. 27. 12:35·🍦 JavaScript/JavaScript 기초

📌 Shorthand property names

  • 자바스크립트에서 오브젝트는 항상 키(Key)와 값(Value)로 이루어져 있습니다.
const person = {
    name: 'baegwon',
    age: '18'
};
  • 만약 이 키와 값이 미리 정의되어 있다면, 해당 변수를 이용해서 새로운 오브젝트를 만들 수도 있습니다.
const name = 'baegwon';
const age = '18';

const person = {
    name: name,
    age: age
};
  • Shorthand property names 기능을 이용하면 위와 같이 Key와 Value의 이름이 동일할 경우 다음과 같이 코드를 축약해서 작성할 수 있습니다.
const name = 'baegwon';
const age = '18';

const person = {
    name,
    age
};

📌 Destructuring assignment

  • 자바스크립트에서 오브젝트의 Value에 접근하기 위해서는 다음과 같이 코드를 작성해주어야 했습니다.
const person = {
    name: 'baegwon',
    age: '18'
};

{
    const name = person.name;
    const age = person.age;
    console.log(name, age);  // "baegwon 18"
}
  • Destructuring assignment를 사용할 경우 다음과 같이 코드를 축약할 수 있습니다.
const person = {
    name: 'baegwon',
    age: '18'
};

{
    const { name, age } = person;
    console.log(name, age);  // "baegwon 18"
}
  • 위처럼 하기 위해서는 오브젝트에 정의된 Key의 이름과 동일하게 변수의 이름을 선언해주어야 합니다.
  • 만약 변수 이름을 다르게 선언하고 싶다면 다음과 같이 할 수 있습니다.
const person = {
    name: 'baegwon',
    age: '18'
};

{
    const { name: personName, age: personAge } = person;
    console.log(personName, personAge);  // "baegwon 18"
}
  • 해당 기능은 오브젝트 뿐만 아니라 배열에서도 동일하게 사용할 수 있습니다.
const animals = ['dog', 'cat'];

{
    const [ first, second ] = animals;
    console.log(first, second)  // "dog cat"
}
  • 차이점으로는 '{}'가 아닌 '[]'를 사용한다는 점입니다.

📌 Spread Syntax

  • 아래와 같은 배열이 있다고 가정해보겠습니다.
{
    const obj1 = { key: 'key1' };
    const obj2 = { key: 'key2' };
    const array = [obj1, obj2];
}
  • 위 배열을 복사하기 위해서는 어떻게 해야 할까요?
  • 몰론 많은 방법들이 있겠지만 Spread Syntax를 사용하면 매우 간단하게 배열을 복사할 수 있습니다.
{
    const obj1 = { key: 'key1' };
    const obj2 = { key: 'key2' };
    const array = [obj1, obj2];
    
    // array copy
    const arrayCopy = [...array];
}
  • 만약 배열을 복사하면서 새로운 요소를 추가하고 싶다면 다음과 같이 할 수 있습니다.
{
    const obj1 = { key: 'key1' };
    const obj2 = { key: 'key2' };
    const array = [obj1, obj2];
    
    // array copy
    const arrayCopy = [...array, { key: 'key3' }];
}
  • 또한 다음과 같이 배열 병합에도 사용할 수 있습니다.
const fruits1 = ['apple', 'banana'];
const fruits2 = ['melon', 'lemon'];

const fruits = [...fruits1, ...fruits2];
console.log(fruits);  // ["apple", "banana", "melon", "lemon"]
  • 추가로, Spread Syntax는 배열 뿐만 아니라 오브젝트 복사에도 사용할 수 있으며, 배열과 동일하게 오브젝트 병합에도 사용할 수 있습니다.
const obj1 = { key1: 'key1' };
const objCopy = {...obj1};

const obj2 = { key2: 'key2' };
const obj = { ...obj1, ...obj2 };
console.log(obj)  // {key1: "key1", key2: "key2"}
  • 주의해야 할 점은 '[]'가 아닌 '{}'를 사용한다는 점과, 만약 키의 이름이 동일한 오브젝트를 병합할 경우 제일 뒤에 선언된 오브젝트의 값이 제일 앞에 선언된 오브젝트의 값을 덮어씌운다는 점입니다.
  • Spread Syntax의 중요한 포인트는 Spread Syntax의 경우 해당 오브젝트가 가리키고 있는 주소의 참조값만 복사해오는 것이기 때문에 복사한 오브젝트들 모두 동일한 주소값을 참조하게 됩니다.
  • 따라서 하나의 오브젝트 값을 변경할 시 다른 오브젝트에도 영향을 준다는 사실을 이해하고 사용해야 합니다.

📌 Default parameters

function printMessage(message) {
    console.log(message);
}

printMessage('hello');  // "hello"
  • 위와 같은 함수가 존재한다고 할 때, 만약 인자로 아무런 메시지도 전달하지 않을 경우 undefined가 출력됩니다.
function printMessage(message) {
    console.log(message);
}

printMessage();  // "undefined"
  • 만약 인자가 전달되지 않은 경우 따로 출력할 메시지를 설정하고 싶다면 다음과 같이 할 수 있습니다.
function printMessage(message) {
    if (message == null) {
        message = 'default message';
    }
    console.log(message);
}

printMessage();  // "default message"
  • Default parameters를 사용하면 위 코드를 아래와 같이 축약할 수 있습니다.
function printMessage(message = 'default message') {
    console.log(message);
}

printMessage();  // "default message"

📌 Optional chaining

const person1 = {
    name: 'Baegwon',
    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);  // Error
  • 당연히 person1에는 해당하는 Key가 있고, person2에는 해당하는 키가 없기 때문에 주석과 같은 결과가 출력되게 됩니다.
  • 이를 유연하게 처리하기 위해서는 다음과 같은 방법을 사용할 수 있습니다.
function printManager(person) {
    console.log(
        person.job
            ? person.job.manager
                ? person.job.manager.name
                : undefined
            : undefined
    );
}

printManager(person1);  // "Bob"
printManager(person2);  // "undefined"
  • 또는 다음과 같은 방법을 사용할 수도 있겠죠.
function printManager(person) {
    console.log(person.job && person.job.manager && person.job.manager.name);
}

printManager(person1);  // "Bob"
printManager(person2);  // "undefined"
  • 다만, 위 두 코드의 공통적인 문제점은 중복되는 코드(person.job)가 나타난다는 것입니다.
  • 이제는 이렇게 작성하는 대신 Optional chaining을 통해 다음과 같이 코드를 축약할 수 있습니다.
function printManager(person) {
    console.log(person.job?.manager?.name);
}

printManager(person1);  // "Bob"
printManager(person2);  // "undefined"

📌 Nullish Coalescing Operator

  • 많은 개발자들이 특정 값이 null일 경우, 즉 정해져 있지 않을 경우, 기본값을 할당하기 위해 다음과 같이 OR 연산자를 사용하여 코딩하곤 합니다.
// false: false, '', 0, null, undefined
const name = '';
const userName = name || 'Guest';
console.log(userName);  // 'Guest'
  • 다만 위처럼 코드를 작성하게 되면 name 값이 공백이거나 0인 경우에도 false로 처리되기 때문에 userName에 'Guest'가 할당되게 됩니다.
  • 따라서 조금 더 명확하게 코딩하기 위해서는 다음과 같이 Nullish Coalescing Operator를 사용해야 합니다.
const name = '';
const userName = name ?? 'Guest';
console.log(userName);  // ''
저작자표시 (새창열림)

'🍦 JavaScript > JavaScript 기초' 카테고리의 다른 글

[JavaScript 기초] 3. 비동기 처리(Callback, Promise, async/await)  (1) 2023.08.26
[JavaScript 기초] 2. Variable  (0) 2023.08.26
[JavaScript 기초] 1. async와 defer  (0) 2023.08.26
[JavaScript 기초] 0. JavaScript의 역사와 현재  (0) 2023.08.25
'🍦 JavaScript/JavaScript 기초' 카테고리의 다른 글
  • [JavaScript 기초] 3. 비동기 처리(Callback, Promise, async/await)
  • [JavaScript 기초] 2. Variable
  • [JavaScript 기초] 1. async와 defer
  • [JavaScript 기초] 0. JavaScript의 역사와 현재
Baeg-won
Baeg-won
  • Baeg-won
    좋았다면 추억이고 나빴다면 경험이다.
    Baeg-won
  • 전체
    오늘
    어제
    • 분류 전체보기
      • 🍃 Spring, Spring Boot
        • 스프링 프레임워크 기초
        • 스프링 핵심 원리 - 기본편
        • 자바 ORM 표준 JPA 프로그래밍 - 기본편
        • 스프링 MVC
        • 실전! 스프링 부트와 JPA 활용1 - 웹 애플리..
      • 🥑 Web Technoloy
      • 🚗 Backend Toy Project
        • 스프링 부트 게시판
        • Photogram
        • Baeg-won Clothing Gallery
      • 🥇 Problem Solving
        • Breadth-First Search
        • Depth-First Search
        • Backtracking
        • Simulation
        • Two-pointer
        • Binary Search
        • Greedy
        • Dynamic Programming
        • Minimum Spanning Tree
        • Dijkstra
        • Floyd warshall
      • ☕ Java
        • 명품 자바 에센셜
        • Applications
      • 🍦 JavaScript
        • JavaScript 기초
      • 🐧 Linux
        • 이것이 리눅스다(CentOS 8)
      • 📟 Database
        • 혼자 공부하는 SQL
      • 🧬 Data Structure
      • 🎬 HTML
      • 🎤 Tech Interview
      • 📌 etc
        • Unity 2D Raising Jelly Game
        • C++
        • 영어 쉐도잉
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
Baeg-won
[JavaScript 기초] 4. JavaScript 최신 문법(ES6, ES11)
상단으로

티스토리툴바