Node.js - 최신 자바스크립트

이 문서는 Node.js 학습을 단순화하는 데 도움이 되는 일련의 문서인 의 3부입니다. 이 항목에서는 JavaScript 코드 현대화에 대한 몇 가지 팁을 다룹니다.

소개

따라서 JavaScript로 일부 코드를 작성하라는 임무를 받았고 작업을 완료했습니다. 이제 검토를 위해 코드를 제출하여 프로젝트 리포지토리에 병합할 수 있습니다. 다음은 코드를 더 깔끔하게 보이도록 하기 위해 고려해야 할 몇 가지 사항입니다.

변수

어레이 포장 풀기

const x = [1, 2, 3, 4, 5];

let [y, z] = x;
console.log(y); // 1
console.log(z); // 2

사용 사례 - x[0] , x[1]

객체 파괴

const user = { id: 1, firstName: 'John', lastName: 'Doe' };

const { firstName, lastName } = user;
console.log(firstName); // John
console.log(lastName); // Doe

사용 사례 - user.firstName 및 user.lastName

조건부 초기화

const fee = isMember ? '$2.00' : '$10.00';

사용 사례 - if/else

개체 속성 복사

const obj1 = {
    name: 'John Doe',
    email: '[email protected]',
};

const obj2 = {
    id: 1,
    ...obj1
};

사용 사례 - Object.assign({}, obj1);

배열

forEach 반복

const items = [
    { id: 1, name: "TV", price: 300 },
    { id: 2, name: "Stereo", price: 100 },
    { id: 3, name: "Computer", price: 1800 },
];

items.forEach((item) => { // do something... });

사용 사례 - 배열의 각 인덱스를 반복하고 그것에 대해 무언가를 하고 싶습니다.
map 새 어레이

const items = [
    { id: 1, name: "TV", price: 300 },
    { id: 2, name: "Stereo", price: 100 },
    { id: 3, name: "Computer", price: 1800 },
];

const halfOffItems = items.map((item) => { 
    return {
        ...item,
        price: item.price / 2
    }
 });

사용 사례 - 각 배열 요소의 새 복사본 또는 변경 사항을 포함하는 새 배열을 원합니다.
filter 어레이

const items = [
    { id: 1, name: "TV", price: 300 },
    { id: 2, name: "Stereo", price: 100 },
    { id: 3, name: "Computer", price: 1800 },
];

const expensiveItems = items.filter(item => item.price > 500);

사용 사례 - 필요한 항목만 포함하는 새 배열을 원합니다.
reduce 어레이

const items = [
    { id: 1, name: "TV", price: 300 },
    { id: 2, name: "Stereo", price: 100 },
    { id: 3, name: "Computer", price: 1800 },
];

const itemTotal = items.map(item => item.price)
    .reduce((prev, next) => prev + next);
console.log(expensiveItems); // 2200

사용 사례 - 배열을 단일 값으로 줄이고 싶습니다.
find 배열의 요소

const items = [
    { id: 1, name: "TV", price: 300, promo: false },
    { id: 2, name: "Stereo", price: 100 , promo: false },
    { id: 3, name: "Computer", price: 1800, promo: true },
];

const promoItem = items.find(item => item.promo);
console.log(promoItem); // returns third object in items

사용 사례 - 내 배열에서 특정 요소를 찾고 싶습니다.
some 어레이

const items = [
    { id: 1, name: "TV", price: 300, promo: false },
    { id: 2, name: "Stereo", price: 100 , promo: false },
    { id: 3, name: "Computer", price: 1800, promo: true },
];

const hasPromo = items.some(item => item.promo);
console.log(hasPromo); // true

사용 사례 - 내 배열의 값이 특정 조건을 충족하는지 확인하고 싶습니다.

기능

클로저 - 함수 내에서 함수를 호출하고 싶습니다.

function init(type) {
    let id = 0;
    return (name) => {
        id += 1;
        return { id: id, type: type, name: name };
    }
}
const createUser = init('user');
const createBook = init('book');
const dave = createUser('Dave');
const book = createBook('A book');
console.log(dave); //prints {id: 1, type: 'user', name: 'Dave'}
console.log(book) //prints {id: 1, type: 'book', name:'A book'}

createUser 및 createBook는 init 함수 클로저 범위의 개별 인스턴스에 액세스할 수 있습니다.


종결 2 - 또 다른 접근법

 function doFunc() {
     let id = 0;
    function doSomething() {
        console.log('Do something...');
    }
    function doWork(name, email) {
         id += 1;
        console.log('Do work on user', name);
    }
    return {
         doSomething: doSomething,
         doWork: doWork,
    };
}
const fn = doFunc();
fn.doSomething();
fn.doWork('Timmy', '[email protected]');
// Do something...
// Do work on user Timmy

구조 분해 매개변수

function myFunc({ id, firstName, lastName }) {
    console.log(id); // 1
    console.log(firstName); // John
    console.log(lastName); // Doe
}
const user = { id: 1, firstName: 'John', lastName: 'Doe' };
myFunc(user);

클래스

클래스 및 상속은 JavaScript에서 사용할 수 있습니다.

class Person {
    constructor(name) {
      this.name = name;
    }
    greet() {
      console.log(`Hello ${this.name}!`);
    }
  }

class Student extends Person {
    constructor(name, level) {
      super(name);
      this.level = level;
    }
    greet() {
      console.log(`Hello ${this.name} from ${this.level}`);
    }
  }

  const max = new Person("Max");
  const tina = new Student("Tina", "1st Grade");
  const mary = new Student("Mary", "2nd Grade");

  max.greet();
  tina.greet();
  mary.greet();

이 기사의 목적은 일부 최신 JavaScript 코드를 시연하는 것이었습니다. 이 글이 도움이 되셨다면 별점을 남겨주시고 시리즈를 구독해주세요.