[JavaScript] 함수 표현식, 함수 선언문, IIFE(즉시실행함수표현), Intersection Observer, Pure Function, Curry Function, OOP(객체지향), 다형성, Prototype

 

JavaScript 핵심 개념 정리

 

 

1. 함수 표현식 vs 함수 선언문

함수 선언문(Function Declaration)

function greet() {
    console.log("Hello");
}

• 호이스팅(hoisting)이 적용되어 코드 어디서든 호출 가능
• 선언과 동시에 정의됨

함수 표현식(Function Expression)

const greet = function() {
    console.log("Hello");
};

• 변수에 할당되므로 호이스팅 시 초기화되지 않음
• 실행 시점에서 정의됨

 

2. IIFE (Immediately Invoked Function Expression)

즉시 실행 함수는 선언과 동시에 실행되는 함수

(function() {
    console.log("IIFE 실행!");
})();

• 전역 스코프 오염 방지
• 초기화 코드 실행 시 유용

 

3. Intersection Observer

비동기적으로 요소가 뷰포트 안에 들어왔는지 감지하는 API

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            console.log("요소가 보입니다!");
        }
    });
});
observer.observe(document.querySelector("#target"));

• 성능 최적화: 스크롤 이벤트 대신 활용 가능
• Lazy Loading, 무한 스크롤 등에 활용

4. Pure Function

부작용(Side Effect)이 없고 동일한 입력에 동일한 출력을 반환하는 함수

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

• 외부 상태 변경 없음
• 테스트와 유지보수가 용이함

5. Curry Function

인자를 나누어 적용할 수 있도록 변환된 함수

const add = a => b => a + b;
console.log(add(2)(3)); // 5

• 함수 조합(composition)에 유용
• 재사용성과 가독성 향상

6. OOP (Object-Oriented Programming)

객체 지향 프로그래밍, 코드의 재사용성과 유지보수를 높이는 패러다임

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name}이(가) 소리를 냅니다.`);
    }
}
const dog = new Animal("강아지");
dog.speak();

• 캡슐화, 상속, 다형성 등의 개념 활용

7. 다형성 (Polymorphism)

같은 메서드가 다양한 형태로 동작할 수 있는 성질

class Animal {
    speak() {
        console.log("소리를 냅니다.");
    }
}
class Dog extends Animal {
    speak() {
        console.log("멍멍!");
    }
}
const dog = new Dog();
dog.speak(); // "멍멍!"

• 상속을 활용한 오버라이딩 가능
• 유연한 코드 작성 가능

8. JavaScript Prototype

JavaScript의 객체 지향 시스템을 구성하는 핵심 개념

function Person(name) {
    this.name = name;
}
Person.prototype.greet = function() {
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
};
const person1 = new Person("철수");
person1.greet();

• 모든 객체는 프로토타입을 가짐
• 상속 구조를 통해 메모리 절약 및 코드 재사용 가능