[JavaScript] JavaScript 기초 문서 정리 Part 2 - 고급 기능

1. 고급 문자열 처리

1-1. 템플릿 리터럴

변수를 문자열에 삽입하거나 멀티라인 문자열을 간결하게 표현할 수 있습니다.

const name = "John";
const greeting = `Hello ${name}!`; // 문자열 보간
const multiLine = `첫 번째 줄
두 번째 줄`; // 멀티라인 문자열

1-2. 정규 표현식 사용

문자열 검색, 패턴 매칭 등에 사용됩니다.

const text = "Hello, World!";
const regex = /Hello/;
console.log(regex.test(text)); // true
console.log(text.match(/o/g)); // ['o', 'o']

---

2. 배열 고급 메서드

2-1. 배열 구조 분해

배열의 요소를 변수에 개별적으로 할당할 수 있습니다.

const numbers = [1, 2, 3];
const [first, second, third] = numbers;
const [head, ...tail] = numbers;

2-2. reduce, flatMap

누산 또는 중첩 배열 평탄화에 활용됩니다.

const sum = numbers.reduce((acc, cur) => acc + cur, 0);

const nested = [[1, 2], [3, 4]];
const flattened = nested.flatMap(arr => arr);

---

3. 객체 조작 고급 기능

3-1. 객체 구조 분해

객체 속성을 변수로 추출합니다.

const user = { id: 1, name: "Alice" };
const { id, name } = user;

3-2. 객체 스프레드와 병합

다양한 객체를 결합하거나 덮어씌울 수 있습니다.

const defaults = { theme: "light", lang: "en" };
const userSettings = { theme: "dark" };
const settings = { ...defaults, ...userSettings };

---

4. 비동기 처리

4-1. Promise 체이닝

비동기 작업을 순차적으로 연결할 수 있습니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

4-2. async/await 활용

비동기 처리를 동기식 문법처럼 표현하여 가독성을 높입니다.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

---

5. 고급 함수 기능

5-1. 클로저 활용

외부 함수의 변수 상태를 은닉하고 유지할 수 있습니다.

function counter() {
  let count = 0;
  return {
    increment() { return ++count; },
    decrement() { return --count; }
  };
}

5-2. 커링 함수

인자를 나눠서 처리할 수 있는 함수 구성 방식입니다.

const multiply = a => b => a * b;
const multiplyByTwo = multiply(2);
console.log(multiplyByTwo(4)); // 8

---

6. 데이터 타입 변환과 검사

6-1. 타입 변환 고급 기법

기본형 간의 명시적 변환 처리입니다.

const toBool = !!undefined; // false
const toNumber = +"42";     // 42
const toString = 42 + "";   // "42"

6-2. 타입 검사

정확한 객체 타입 판별을 위한 방법입니다.

const isArray = Array.isArray([1, 2, 3]);
const type = Object.prototype.toString.call(new Date()); // "[object Date]"

---

7. 메모리 관리와 성능

7-1. 메모리 누수 방지 (WeakMap 활용)

객체가 더 이상 참조되지 않으면 자동으로 GC 대상이 됩니다.

const cache = new WeakMap();
let object = { data: "some data" };
cache.set(object, "metadata");
object = null; // 가비지 컬렉션 대상

7-2. 성능 최적화 기법

렌더링, 반복, 이벤트 처리를 효율적으로 수행하기 위한 대표적인 코드입니다.

반복 최적화

const items = Array(1000).fill(1);

// 일반 for문이 고성능 상황에서는 유리
for (let i = 0; i < items.length; i++) {
  items[i] *= 2;
}

이벤트 위임 (Event Delegation)

document.querySelector('#list').addEventListener('click', event => {
  if (event.target.matches('li')) {
    console.log('Clicked:', event.target.textContent);
  }
});

디바운싱 (Debounce)

function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

window.addEventListener('resize', debounce(() => {
  console.log('Resize event (debounced)');
}, 300));

쓰로틀링 (Throttle)

function throttle(fn, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

window.addEventListener('scroll', throttle(() => {
  console.log('Scroll event (throttled)');
}, 200));

---

8. 결론

• JavaScript 고급 기능은 코드의 표현력을 향상시키고, 성능·메모리 측면에서도 실질적인 최적화를 가능하게 합니다.
• 실제 프로젝트에 적용할 때는 사용 목적과 맥락을 고려하여 선택적으로 활용하는 것이 중요합니다.