1️⃣ 일급 객체로서의 함수 (First-class Object) 🏆
자바스크립트에서 함수는 일급 객체입니다. 이게 무슨 뜻일까요? 간단히 말해, 함수를 '값'처럼 다룰 수 있다는 뜻이에요!
- 변수에 함수를 저장할 수 있어요
- 다른 함수의 인자(파라미터)로 함수를 전달할 수 있어요
- 함수에서 다른 함수를 반환할 수 있어요
// 함수를 변수에 저장하기
const greet = function() { return "안녕하세요!"; };
// 함수를 인자로 전달하기
const executeFunction = function(fn) { return fn(); };
console.log(executeFunction(greet)); // "안녕하세요!" 출력
이런 특성 덕분에 자바스크립트로 유연하고 창의적인 코드를 작성할 수 있습니다! 💫
2️⃣ 익명 함수와 함수 표현식 🎭
자바스크립트에서는 이름 없는 함수(익명 함수)를 만들 수 있어요. 이런 함수는 주로 함수 표현식에서 사용됩니다.
// 익명 함수를 변수에 할당 (함수 표현식)
const add = function(a, b) {
return a + b;
};
console.log(add(5, 3)); // 8 출력
이런 방식은 함수를 바로 실행하지 않고 나중에 사용하고 싶을 때 유용해요. 마치 선물 상자에 기능을 담아두는 것과 같죠! 🎁
3️⃣ 호이스팅 (Hoisting) ⬆️
자바스크립트에는 호이스팅이라는 흥미로운 특성이 있어요. 함수 선언식으로 만든 함수는 코드의 최상단으로 '끌어올려져서' 어디서든 사용할 수 있게 됩니다.
// 함수를 선언하기 전에 호출해도 작동해요!
console.log(sayHi()); // "안녕!" 출력
// 함수 선언식
function sayHi() {
return "안녕!";
}
반면, 함수 표현식은 호이스팅되지 않아요:
// 이렇게 하면 오류가 발생해요!
console.log(sayBye()); // 오류!
const sayBye = function() {
return "잘가!";
};
함수 선언식은 마치 마법처럼 코드의 어디에서든 사용할 수 있지만, 함수 표현식은 정의된 후에만 사용할 수 있어요. 🪄
4️⃣ 클로저 (Closure) 🔒
클로저는 함수가 자신이 생성된 환경을 기억하는 특별한 능력입니다. 함수가 자신의 '고향'을 기억하는 것과 같죠!
function makeCounter() {
let count = 0; // 비밀스러운 변수
return function() {
return ++count; // 비밀 변수에 접근 & 수정
};
}
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
이 예제에서 내부 함수는 count 변수를 '기억'해요. 이 변수는 외부에서 직접 접근할 수 없지만, 반환된 함수를 통해 안전하게 조작할 수 있습니다. 정보 은닉과 상태 관리에 매우 유용해요! 🔐
5️⃣ 고차 함수 (Higher-Order Functions) 🔝
고차 함수는 다른 함수를 인자로 받거나 함수를 반환하는 함수예요. 이는 함수형 프로그래밍의 핵심이죠!
// 함수를 반환하는 함수
function multiplyBy(factor) {
return function(number) {
return number * factor;
};
}
const double = multiplyBy(2);
const triple = multiplyBy(3);
console.log(double(5)); // 10
console.log(triple(5)); // 15
이런 패턴은 코드를 모듈화하고 재사용성을 높이는 데 큰 도움이 됩니다. 마치 레고 블록처럼 함수들을 조립할 수 있어요! 🧩
6️⃣ 화살표 함수 (Arrow Functions) 🏹
ES6에서 도입된 화살표 함수는 더 간결한 문법과 특별한 this 바인딩을 제공합니다:
// 일반 함수
const multiply = function(a, b) {
return a * b;
};
// 화살표 함수
const multiply = (a, b) => a * b;
화살표 함수의 가장 중요한 특징은 자신만의 this를 갖지 않는다는 점이에요. 대신 화살표 함수가 정의된 곳의 this를 사용합니다:
const person = {
name: "철수",
greet: function() {
setTimeout(() => {
console.log(`안녕, 내 이름은 ${this.name}이야!`);
}, 1000);
}
};
person.greet(); // "안녕, 내 이름은 철수이야!" (1초 후 출력)
화살표 함수는 특히 콜백 함수를 간결하게 작성할 때 유용합니다! 🎯
자바스크립트 함수에 대해서 아는대로 설명해주세요.
자바스크립트 함수에는 여러가지 특징들이 있습니다.
첫번째 특징은 자바스크립트 함수는 일급 객체라는 점입니다.
자바스크립트에서 함수는 값처럼 취급될 수 있으며, 변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수의 반환값으로 사용할 수 있습니다.
const sayHello = function() { return 'Hello'; };
console.log(sayHello()); // 'Hello'
const executeFunction = function(fn) {
return fn();
};
console.log(executeFunction(sayHello)); // 'Hello'
이를 통해 매우 유연하게 코드를 작성할 수 있으며, 고차 함수를 포함한 다양한 패턴을 구현할 수 있습니다.
두번째 특징은 익명 함수와 함수 표현식입니다.
자바스크립트에서는 이름 없는 함수, 즉 익명 함수를 정의할 수 있습니다. 익명 함수는 함수 표현식에서 주로 사용되며, 필요에 따라 함수에 이름을 지정하지 않아도 됩니다.
const add = function(a, b) {
return a + b;
};
console.log(add(2, 3)); // 5
세번째 특징은 호이스팅입니다.
함수 선언식을 통해 선언한 함수는 코드가 실행되기 전에 호이스팅되어, 함수 선언 이전에 호출할 수 있습니다. 반면, 함수 표현식은 변수에 할당된 후에 사용할 수 있습니다.
console.log(declaredFunction()); // 'Declared Function'
function declaredFunction() {
return 'Declared Function';
}
// 함수 표현식은 할당 후에만 사용할 수 있음
const expressedFunction = function() {
return 'Expressed Function';
};
console.log(expressedFunction()); // 'Expressed Function'
네번째는 클로저입니다.
자바스크립트 함수로는 클로저를 구현할 수 있습니다. 클로저는 함수가 자신이 선언된 환경(스코프) 을 기억하고, 해당 환경에 접근할 수 있는 기능(혹은 특징)입니다. 이를 통해 함수는 자신이 선언된 당시 스코프 내의 변수를 참조할 수 있습니다.
function outer() {
const outerVar = 'I am outer!';
return function inner() {
return outerVar; // 외부 변수에 접근 가능
};
}
const innerFunction = outer();
console.log(innerFunction()); // 'I am outer!'
다음으로는 고차 함수입니다.
자바스크립트에서는 함수가 일급 객체이기 때문에, 고차 함수, 즉 다른 함수를 인자로 받거나 반환하는 함수를 정의할 수 있습니다. 이는 함수형 프로그래밍 패턴을 가능하게 합니다.
function multiplyBy(factor) {
return function(num) {
return num * factor;
};
}
const double = multiplyBy(2);
console.log(double(5)); // 10
마지막으로 화살표 함수입니다.
화살표 함수는 더 간결한 문법을 제공하고, 특히 this 바인딩에서 기존 함수와 다른 동작을 합니다. 화살표 함수는 선언된 위치의 this 값을 유지하므로, 일반 함수와 달리 별도로 this를 바인딩할 필요가 없습니다.
const obj = {
value: 42,
method: function() {
setTimeout(() => {
console.log(this.value); // 42 (Arrow 함수는 obj의 this를 유지)
}, 1000);
}
};
obj.method();
'1일 1CS(Computer Science)' 카테고리의 다른 글
동기 방식으로 외부 서비스를 호출할 때 외부 서비스 장애가 나면 어떻게 조치할 수 있나요? (0) | 2025.04.16 |
---|---|
자바스크립트의 고급 메소드에 대해 설명해주세요. (1) | 2025.04.11 |
자바스크립트 배열에 대해서 설명해주세요. (0) | 2025.04.11 |
동일성과 동등성에 대해 설명해주세요 (0) | 2025.04.09 |
자바스크립트 호이스팅에 대해서 설명해주세요. (0) | 2025.04.09 |