eatthefrog

모던 자바스크립트 모듈,클래스,함수 정리 본문

프론트엔드 노트

모던 자바스크립트 모듈,클래스,함수 정리

eater_forg 2024. 12. 31. 18:59

 

 

 

 

언제 사용하는가?

  • 모듈:
    • 프로젝트가 커질 때 파일 단위로 코드 분리.
    • 여러 파일에서 공통 기능을 가져와 사용.
    • 예: 유틸리티 함수, API 호출 로직 등.
  • 클래스:
    • 객체지향 프로그래밍(OOP)을 구현할 때.
    • 복잡한 데이터 구조와 메서드가 필요한 경우.
    • 예: 사용자 객체(User), 데이터 모델 등.
  • 함수:
    • 특정 작업이나 계산을 수행할 때.
    • 코드가 간단하고 상태 관리가 필요 없을 때.
    • 예: 단순 계산, 데이터 변환 등.

 

예시 코드

모듈

// math.js (모듈)
export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

// app.js (모듈 사용)
import { add, multiply } from './math.js';

console.log(add(2, 3));       // 5
console.log(multiply(2, 3)); // 6

 

 

클래스

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, my name is ${this.name}.`;
  }
}

const person1 = new Person("NewJeans", 2);
console.log(person1.greet()); // Hello, my name is Newjeans

 

함수

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("NewJeans")); // Hello, NewJeans!