AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

NodeJS 기초: 함수 선언

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 및 백엔드 개발자, 특히 JavaScript 애플리케이션의 유지보수성과 성능 최적화를 고려하는 중급 이상 개발자

핵심 요약

  • 함수 선언은 호이스팅(Hoisting)을 지원하여 함수 정의 전에 호출이 가능하며, 코드 재사용성을 높임
  • React/Vue/Svelte 등 프레임워크에서 복잡한 컴포넌트 로직을 정리하기 위해 사용 가능
  • 보안 위험 감소를 위해 eval() 사용 피하기Content Security Policy(CSP) 적용 권장

섹션별 세부 요약

1. 함수 선언의 정의 및 호이스팅

  • function 키워드를 사용한 함수 선언은 호이스팅으로 인해 정의 전에 호출 가능
  • ECMA-262 명세서에 정의된 호이스팅은 변수 초기화와는 별도로 작동
  • 모든 현대 브라우저(V8, SpiderMonkey 등)에서 호이스팅 지원

2. 실무 적용 사례

  • 재사용 가능한 유틸리티 함수 예시:

```javascript

function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1); }

```

  • React 컴포넌트에서 복잡한 로직 정리:

```javascript

function calculateTotal(items) { return items.reduce(...); }

```

  • 이벤트 핸들러 및 모듈 내보내기:

```javascript

export function add(a, b) { return a + b; }

```

3. 성능 및 최적화

  • 함수 선언은 함수 표현식보다 약간 더 빠름 (100만 회 반복 테스트 기준)

```javascript

console.time('Function Declaration'); for (let i=0; i<1e6; i++) { function add(a, b) { return a + b; } add(1, 2); }

```

  • Lighthouse 점수에 직접적인 영향은 작음 → 전체 코드 최소화 및 핵심 함수 최적화 필요

4. 보안 고려사항

  • XSS, 프로토타입 오염 등 위험 방지를 위해:

- 사용자 입력 검증 및 정화(sanitizeEmail)

- eval() 또는 new Function() 사용 금지

- Content Security Policy(CSP) 적용

- DOMPurify 같은 라이브러리 활용

결론

함수 선언은 코드 재사용성과 유지보수성을 높이는 핵심 기법이며, 호이스팅과 성능 최적화를 고려해 React, 유틸리티 모듈 등에 적극적으로 활용해야 합니다. 보안 위험 방지를 위해 입력 검증 및 CSP 적용이 필수적입니다.