화살표 함수를 활용한 함수 정의 간소화

function sum(x, y) {
  return x + y;
}

// 화살표 함수
const sum = (x, y) => x + y;

구조 분해 할당을 통한 변수 선언 간결화

const first = user.first;
const last = user.last;

// 구조 분해 할당
const { first, last } = user;

템플릿 리터럴을 이용한 문자열 조합

const welcome = 'Hello, ' + userName + '!';

// 템플릿 리터럴
const welcome = `Hello, ${userName}!`;

전개 연산자를 활용한 배열 및 객체 조작

// 배열 병합
const merged = [...arr1, ...arr2];

// 객체 복사
const copy = { ...source };

배열 고차 함수를 이용한 데이터 처리

// 배열 변환
const doubledValues = numbers.map(n => n * 2);

// 배열 필터링
const evenNumbers = numbers.filter(n => n % 2 === 0);

조건 연산자로 조건문 간소화

// 기존 방식
let resultMsg;
if (isValid) {
  resultMsg = '성공';
} else {
  resultMsg = '실패';
}

// 조건 연산자
const resultMsg = isValid ? '성공' : '실패';

객체 구조 분해와 기본 매개변수 활용

// 기존 기본값 설정
function welcome(user) {
  const name = user || 'Guest';
  console.log(`Hello, ${name}!`);
}

// 객체 구조 분해
function welcome({ name = 'Guest' }) {
  console.log(`Hello, ${name}!`);
}

순수 함수와 함수 합성

// 순수 함수
function multiply(a, b) {
  return a * b;
}

// 함수 합성
const double = x => x * 2;
const addTen = x => x + 10;
const output = addTen(double(5));

객체 리터럴 단축 문법

const firstName = 'John';
const lastName = 'Doe';
const userAge = 30;

const person = { firstName, lastName, userAge };

명확한 네이밍과 주석 활용

// 개선 전
const n = 10;
function proc(v) {
  return v * 2;
}

// 개선 후
const maxSpeed = 10;
function doubleValue(input) {
  return input * 2;
}

조건문 처리 최적화

const statusText = {
  1: "성공",
  2: "실패", 
  3: "진행중",
  4: "대기중"
};

const statusMap = new Map([
  [1, "성공"],
  [2, "실패"],
  [3, "진행중"], 
  [4, "대기중"]
]);

조건문 캡슐화

function shouldDisplayLoader(state, node) {
  return state === 'loading' && isEmpty(node);
}

if (shouldDisplayLoader(appState, container)) {
  // 로직 실행
}

단일 책임 함수 원칙

function createFile(path) {
  fs.create(path);
}

function createTempFile(name) {
  createFile(`./temp/${name}`);
}

Object.assign을 이용한 기본값 설정

const defaultSettings = {
  title: '기본제목',
  content: '기본내용',
  button: '확인',
  cancel: true
};

function createMenu(settings) {
  Object.assign({}, defaultSettings, settings);
}

함수 매개변수 최소화

const config = {
  title: '제목',
  content: '내용',
  button: '버튼',
  cancel: true
};

function createMenu(options) {
  // 설정 처리
}

의미 있는 변수명 사용

const fullAddress = '주소정보';
const addressPattern = /패턴정규식/;
const [, city, postalCode] = fullAddress.match(addressPattern) || [];
saveAddressInfo(city, postalCode);

getter/setter 활용

class Account {
  constructor(balance = 1000) {
    this._balance = balance;
  }
  
  set balance(amount) {
    if (this.isValidAmount(amount)) {
      this._balance = amount;
    }
  }
  
  get balance() {
    return this._balance;
  }
}

클로저를 이용한 private 멤버 구현

function createEmployee(name) {
  return {
    getName: function() {
      return name;
    }
  };
}

메서드 체이닝 패턴

class Vehicle {
  constructor() {
    this.brand = '기본';
    this.model = '모델';
  }
  
  setBrand(brand) {
    this.brand = brand;
    return this;
  }
  
  save() {
    console.log(this.brand, this.model);
    return this;
  }
}

new Vehicle().setBrand('새브랜드').save();