개인노트 정리 Node.js 백엔드 part 1-3

한 번에 끝내는 Node.js 웹 프로그래밍 초격차 패키지 백엔드 part 1

모던 JavaScript  syntax

# 모던 JavaScript - 자바스크립트의 최근 변화, TC39, node

• 비영리 기구 Ecma International은 JavaScript를 포함한 다양한 기술 표준 정립을 목적으로 하는 단체입니다.
• 그 중 TC39 위원회(committee)는 자바스크립트(ECMAScript) 표준 제정을 담당합니다. https://tc39.es/
• 이 위원회에는 Microsoft, Google, Apple 등 웹 기술과 관계가 깊은 거대 기술 벤더들이 참여합니다.
• 대부분의 논의 내용이 Github 등 웹에 공개되어 있습니다.

 

## node.green

https://node.green/ 

node.green 은 브라우저가 아닌 node에만 초점을 맞춰서 기능 개발이 어떻게 되어있는지를 확인할 수 있습니다.

node.green 에서 Node의 각 버전별로 지원하는 ECMAScript 기능을 확인할 수 있습니다.

 

# 모던 JavaScript - let 과 const

• let과 const는 ES2015(ES6)에 추가된 변수 선언 키워드입니다.
• hoisting 규칙이 없습니다.
• block scoping을 지원합니다.
• 따라서 var보다 훨씬 예측 가능한 코드를 짤 수 있게해 줍니다.

 

## let, const

• let은 레퍼런스가 바뀔 수 있고, const는 바뀔 수 없습니다.

 

## var와 let, const

• var 와는 달리 let 과 const 는 같은 스코프 내에서 같은 변수를 두 번 이상 정의할 수 없습니다.
• var와는 달리 let과 const는 변수를 정의하기 전에는 사용할 수 없습니다.
  아래 예시

console.log(x); // undefined
var x = 0;

console.log(x); // ReferenceError: Cannot access 'x' before initialization
const x = 0;

• let과 const 모두 같은 scoping rule (block scoping)을 따릅니다.
  아래 예시

var x = 1;
{
    var x = 2
    console.log(x); // 2
}
console.log(x); // 2

const x = 1;
{
    const x = 2;
    console.log(x); // 2
}
console.log(x); // 1

 

## var vs let, const 결론

• let 과 const 의 예측 가능성과 유지보수성이 var보다 훨씬 뛰어납니다.
• 가능하다면 const만 쓰고, 필요한 경우에 한해 let을 쓰고, var는 절대 쓰지 마세요!

 

# 모던 JavaScript - Spread syntax (...)

• ES2015 에서 새로 추가된 syntax입니다.
• 병합, 구조 분배 할당(destructuring) 등에 다양하게 활용할 수 있습니다.

 

## 활용법 - object merge (1)

두 개 이상의 object를 하나의 새로운 object로 만들기.

const personalData = {
    nickname: 'JH',
    email: 'jh12@email.com',
}

const publicData = {
    age: 22,
}

const user = {
    ...personalData,
    ...publicData,
}

 

## 활용법 - object merge (2)

기존에 있던 값 덮어 씌우기.

const overrides = {
    DATABASE_HOST: 'myhost.com',
    DATABASE_PASSWORD: 'mypassword',
}

const config = {
    DATABASE_HOST: 'default.host.com',
    DATABASE_PASSWORD: '****',
    DATABASE_USERNAME: 'myuser',
    ...overrides,
}
/* 결과
{
    DATABASE_HOST: 'myhost.com',
    DATABASE_PASSWORD: 'mypassword',
    DATABASE_USERNAME: 'myuser',
}
*/

주의 - ...overrides가 뒤가 아닌 앞에 오게되면 덮어 씌워지지 않습니다.

 

## 활용법 - object rest (destructuring)

const user = {
    nickname: 'JH',
    age: 22,
    email: 'jh12@example.com',
}

const { nickname, ...personalData } = user;
console.log(personalData); // { age: 22, email: 'jh12@Jexample.com' }

 

## 활용법 - array merge

object 뿐만 아니라 배열에도 사용될 수 있습니다.

const pets = ['dog', 'cat'];
const predators = ['wolf', 'cougar'];
const animals = [...pets, ...predators];
console.log(animals); // ['dog', 'cat', 'wolf', 'cougar']

 

## 활용법 - array rest

object 뿐만 아니라 배열에서도 destructuring을 사용할 수 있습니다.

const [head, ...rest] = [1, 2, 3];
console.log(head); // 1
console.log(rest); // [2, 3]

 

## 다양한 예시 및 활용

const ary = [1, 2, 3, 4, 5];
const [head, ...rest] = ary
console.log(head, ...rest); // 1 [2, 3, 4, 5]
console.log(head, ...rest); // 1 2 3 4 5

const personalData = {
    email: 'abc@def.com',
    password: '****',
}

const publicData = {
    nickname: 'foo'
}

const user = {
    ...personalData,
    ...publicData,
}

// 각각에 있던 필드들이 하나로 합쳐져서 하나의 object가 되었습니다.
console.log(user); // { email: 'abc@def.com', password: '****', nickname: 'foo' }

const personalData = {
    email: 'abc@def.com',
    password: '****',
}

const publicData = {
    nickname: 'foo'
}

const overrides = {
    email: 'rrr@rrr.com'
}

// 같은 이름의 프로퍼티는 나중에 온 프로퍼티로 덮어씌우게 됩니다.
const user = {
    ...personalData,
    ...publicData,
    ...overrides,
}

// 각각에 있던 필드들이 하나로 합쳐져서 하나의 object가 되었습니다.
console.log(user); // { email: 'rrr@rrr.com', password: '****', nickname: 'foo' }

// 이렇게 사용될 일은 거의 없겠지만 아래처럼도 가능합니다.
const user = {
    ...{
        email: 'abc@def.com',
        password: '****',
    },
    ...{
        nickname: 'foo',
    },
    ...{
        email: 'rrr@rrr.com'
    },
}

// 각각에 있던 필드들이 하나로 합쳐져서 하나의 object가 되었습니다.
console.log(user); // { email: 'rrr@rrr.com', password: '****', nickname: 'foo' }

// 위 코드를 좀 더 활용해 본다면..

const shouldOverride = false

// 삼항 연산자를 활용하여 조건부 spread syntax를 사용합니다.
const user = {
    ...{
        email: 'abc@def.com',
        password: '****',
    },
    ...{
        nickname: 'foo',
    },
    ...(shouldOverride ? {
        email: 'rrr@rrr.com'
    } : null),
}

// shouldOverride가 false일 경우
console.log(user); // { email: 'abc@def.com', password: '****', nickname: 'foo' }

// shouldOverride가 true일 경우
console.log(user); // { email: 'rrr@rrr.com', password: '****', nickname: 'foo' }

// 이렇게 다양한 시나리오도 좀 더 알아보기 쉽게 커버가 가능합니다.

// function에서도 spread syntax를 똑같이 사용할 수 있습니다.

function foo(head, ...rest) {
    console.log(head);
    console.log(rest);
}

foo(1, 2, 3, 4);
// 1
// [2, 3, 4]