이 글은 드림코딩 유튜브 강의를 보며 학습한 내용을 정리한 JavaScript 복습 노트입니다.
1. 함수란? (Function)
✅ 함수(Function)
함수는 특정 작업을 수행하거나 값을 계산하는 코드 블록입니다.
프로그래밍에서 가장 중요한 요소 중 하나이며, 재사용 가능하기 때문에 코드의 효율성을 높여줍니다.
✅ 왜 함수를 사용할까?
- 코드의 재사용
- 같은 기능을 여러 번 작성하지 않고 한 번 정의한 함수를 반복해서 사용할 수 있음.
- 가독성 향상
- 코드가 모듈화되어 구조가 깔끔해지고 이해하기 쉬워짐.
- 유지보수 용이
- 함수로 분리하면 특정 기능을 쉽게 수정 가능.
2. 함수 선언과 호출 (Function Declaration & Call)
✅ 함수 선언하기
JavaScript에서 함수를 선언하는 기본적인 방법입니다.
function printHello() {
console.log('Hello');
}- function 키워드를 사용하여 함수를 선언.
- 함수 이름 printHello는 함수의 역할을 설명하는 것이 좋음.
- {} 안에 실행할 코드를 작성.
✅ 함수 호출하기
printHello(); // "Hello"- 함수는 호출해야 실행됨.
- printHello();를 실행하면 "Hello"가 출력됨.
3. 매개변수와 반환값 (Parameters & Return)
✅ 함수의 입력: 매개변수 (Parameter)
함수는 입력값을 받아서 처리할 수 있음.
function log(message) {
console.log(message);
}
log('Hello@'); // "Hello@"
log(1234); // 1234- log 함수는 message라는 매개변수(Parameter)를 받음.
- log('Hello@')를 실행하면 message = 'Hello@'로 전달됨.
- 결과적으로 console.log('Hello@');가 실행됨.
✅ 함수의 출력: 반환값 (Return)
function sum(a, b) {
return a + b;
}
console.log(sum(2, 3)); // 5- return 키워드를 사용하면 함수의 결과를 반환할 수 있음.
- sum(2, 3)을 호출하면 2와 3을 더한 값(5)이 반환됨.
4. 기본 매개변수 (Default Parameters)
함수를 호출할 때 매개변수를 전달하지 않으면 기본값을 설정할 수 있음.
function showMessage(message, from = 'unknown') {
console.log(`${message} by ${from}`);
}
showMessage('Hi!'); // "Hi! by unknown"
showMessage('Hello', 'Ellie'); // "Hello by Ellie"- from = 'unknown' → 기본값을 설정하여 from이 전달되지 않으면 "unknown"으로 자동 지정됨.
5. 나머지 매개변수 (Rest Parameters)
매개변수의 개수를 미리 알 수 없을 때, 여러 개의 값을 배열로 저장할 수 있음.
function printAll(...args) {
args.forEach(arg => console.log(arg));
}
printAll('dream', 'coding', 'ellie');- ...args → 여러 개의 인자를 배열로 저장.
- printAll('dream', 'coding', 'ellie');를 실행하면 "dream", "coding", "ellie"가 각각 출력됨.
6. 지역 변수와 전역 변수 (Local & Global Scope)
✅ 변수의 범위 (Scope)
변수는 어디에서 선언되었느냐에 따라 접근할 수 있는 범위가 달라짐.
let globalMessage = 'global'; // 전역 변수
function printMessage() {
let message = 'hello'; // 지역 변수
console.log(message); // "hello"
console.log(globalMessage); // "global"
}
printMessage();
console.log(globalMessage); // "global"- 전역 변수(Global Variable): 어디에서든 접근 가능 (globalMessage).
- 지역 변수(Local Variable): 함수 내부에서만 접근 가능 (message).
7. 화살표 함수 (Arrow Function)
✅ 화살표 함수 기본 형태
ES6에서 도입된 간결한 함수 표현 방법.
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5- function 키워드 없이 =>를 사용하여 함수를 정의.
- 한 줄 코드에서는 {}와 return 생략 가능.
✅ 여러 줄일 경우
const multiply = (a, b) => {
return a * b;
};
console.log(multiply(2, 3)); // 6- {}를 사용하면 반드시 return을 명시해야 함.
8. 콜백 함수 (Callback Function)
✅ 콜백 함수란?
함수의 인자로 전달되어 특정 시점에서 실행되는 함수.
function randomQuiz(answer, correct, wrong) {
if (answer === 'love you') {
correct();
} else {
wrong();
}
}
const printYes = () => console.log('Yes!');
const printNo = () => console.log('No!');
randomQuiz('love you', printYes, printNo); // "Yes!"
randomQuiz('wrong', printYes, printNo); // "No!"- printYes와 printNo는 콜백 함수로 randomQuiz 함수에 전달됨.
- randomQuiz('love you', printYes, printNo); → "Yes!" 출력.
9. 즉시 실행 함수 (IIFE: Immediately Invoked Function Expression)
✅ 즉시 실행 함수란?
정의되자마자 즉시 실행되는 함수.
(function hello() {
console.log('IIFE');
})(); // "IIFE"- 함수를 ()로 감싸고 즉시 호출하여 실행.
- 전역 변수 오염을 방지하는 데 유용함.
10. Fun Quiz
function calculate(command, a, b) {
switch (command) {
case 'add':
return a + b;
case 'subtract':
return a - b;
case 'multiply':
return a * b;
case 'divide':
return a / b;
case 'remainder':
return a % b;
default:
throw Error('Unknown command');
}
}
console.log(calculate('add', 2, 3)); // 5- 입력된 command에 따라 연산을 수행하는 함수.
- calculate('add', 2, 3) → 5 반환.
✅ 함수는 코드의 재사용을 가능하게 해줌
✅ 매개변수와 반환값을 활용하면 더 유용한 함수 작성 가능
✅ 화살표 함수는 간결한 문법을 제공
✅ 콜백 함수는 특정 조건에서 실행됨
✅ 즉시 실행 함수(IIFE)는 전역 변수 오염을 방지