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 적용이 필수적입니다.