이번 4일차에서는 자바스크립트의 함수와 스코프(Scope) 개념을 배웁니다. 함수는 코드의 재사용성을 높이고, 특정 작업을 모듈화하는 데 유용한 중요한 개념입니다. 스코프는 변수나 함수가 접근할 수 있는 범위를 정의하며, 자바스크립트의 변수 생명 주기 및 가시성을 이해하는 데 중요합니다.
함수 기본 개념
자바스크립트에서 함수는 특정 작업을 수행하는 코드 블록입니다. 함수는 선언 후 호출하여 여러 번 사용할 수 있습니다.
함수 선언과 호출
함수는
function키워드를 사용하여 선언합니다. 선언한 후에는 함수 이름을 통해 호출할 수 있습니다.함수 선언:
function greet() { console.log("Hello, world!"); }함수 호출:
greet(); // "Hello, world!" 출력
함수 매개변수와 반환값
함수는 입력값(매개변수)을 받아 특정 작업을 수행하고, 그 결과를 반환값으로 돌려줄 수 있습니다.
매개변수:
함수는 매개변수를 사용하여 외부에서 값을 전달받을 수 있습니다.function add(a, b) { return a + b; } console.log(add(3, 5)); // 8 출력반환값:
return키워드를 사용하여 함수에서 값을 반환할 수 있습니다.function multiply(a, b) { return a * b; } let result = multiply(4, 3); console.log(result); // 12 출력
함수 표현식 (익명 함수)
함수 표현식은 함수 선언 대신 변수에 함수를 할당하는 방법입니다. 익명 함수는 이름이 없는 함수로, 주로 일시적인 함수가 필요할 때 사용됩니다.
익명 함수 (함수 표현식):
const greet = function() { console.log("Hello, world!"); }; greet(); // "Hello, world!" 출력즉시 실행 함수 표현식 (IIFE):
함수 선언과 동시에 실행하는 방법으로, 주로 모듈화에서 사용됩니다.(function() { console.log("I am an IIFE!"); })(); // "I am an IIFE!" 출력
스코프(Scope)
스코프는 변수가 유효한 범위(즉, 접근할 수 있는 범위)를 결정합니다. 자바스크립트에서는 전역 스코프와 지역 스코프가 있으며, let, const, var를 사용할 때 각기 다른 스코프를 가집니다.
전역 스코프와 지역 스코프
전역 스코프:
전역 스코프에 선언된 변수는 전체 프로그램에서 접근 가능합니다.let globalVar = "I am global"; // 전역 변수 function display() { console.log(globalVar); // "I am global" } display();지역 스코프:
지역 스코프에 선언된 변수는 함수 내에서만 접근할 수 있습니다.function localScope() { let localVar = "I am local"; // 지역 변수 console.log(localVar); // "I am local" } localScope(); console.log(localVar); // 오류: localVar는 지역 변수이므로 접근할 수 없음
let,const와var의 스코프 차이var:var로 선언된 변수는 함수 스코프를 가집니다. 즉, 함수 내에서 선언된var변수는 함수 내 어디에서든 접근할 수 있습니다.function testVar() { if (true) { var x = 10; // 함수 내에서 선언된 변수 } console.log(x); // 10 (블록 밖에서도 접근 가능) } testVar();let과const:let과const는 블록 스코프를 가집니다. 즉, 중괄호{}내에서만 유효하며, 그 밖에서는 접근할 수 없습니다.function testLetConst() { if (true) { let y = 20; // 블록 스코프 변수 const z = 30; // 블록 스코프 상수 } console.log(y); // 오류: y는 블록 밖에서 접근 불가 console.log(z); // 오류: z는 블록 밖에서 접근 불가 } testLetConst();
클로저(Closure)
클로저는 함수와 함수가 선언될 때의 환경(즉, 변수들)을 기억하는 함수입니다. 이는 내부 함수가 외부 함수의 변수에 접근할 수 있게 해주는 특징을 가집니다.
클로저 예시:
function outer() { let counter = 0; return function inner() { counter++; console.log(counter); }; } const increment = outer(); increment(); // 1 출력 increment(); // 2 출력 increment(); // 3 출력
여기서
inner함수는outer함수의 변수인counter에 계속 접근할 수 있습니다. 이는 클로저 덕분에 가능하며,counter변수는increment함수가 실행될 때마다 증가합니다.
실습
간단한 함수를 작성하고, 매개변수를 활용한 계산 함수 만들기
목표: 함수에 매개변수를 전달하여 계산하고, 결과를 반환하는 함수를 만들어 봅니다.
예시:
// 두 숫자의 합을 구하는 함수 function add(a, b) { return a + b; } console.log(add(5, 10)); // 15 출력 // 두 숫자의 곱을 구하는 함수 function multiply(a, b) { return a * b; } console.log(multiply(3, 4)); // 12 출력
클로저 실습:
- 내부 함수가 외부 함수의 변수에 접근할 수 있는 클로저를 활용한 예시입니다.
function createCounter() { let count = 0; return function() { count++; console.log(count); }; } const counter = createCounter(); counter(); // 1 출력 counter(); // 2 출력 counter(); // 3 출력
정리
오늘 4일차에서는 함수와 스코프에 대해 배웠습니다. 함수는 코드를 재사용할 수 있게 해주며, 매개변수와 반환값을 통해 다양한 작업을 할 수 있습니다. 또한, 스코프를 이해하면 변수가 어디에서 유효한지 파악하고, 클로저를 활용하여 변수의 생명 주기와 접근을 효율적으로 관리할 수 있습니다. 실습을 통해 함수를 작성하고, 매개변수를 활용한 계산 함수와 클로저 개념을 익혔습니다.
'개발 > Javascript' 카테고리의 다른 글
| 5일차: 객체와 배열 (0) | 2025.01.31 |
|---|---|
| 자바스크립트에서 null과 undefined의 차이점 완벽 분석 (0) | 2025.01.31 |
| 3일차: 조건문과 반복문 (0) | 2025.01.29 |
| 2일차: 데이터 타입과 연산자 (1) | 2025.01.28 |
| 1일차: 자바스크립트 기본 개념과 변수 (0) | 2025.01.27 |