반응형
4. 함수와 스코프
함수란 무엇인가?
함수는 특정 작업을 수행하는 코드 블록입니다. 함수를 사용하면 코드의 재사용성을 높이고, 코드를 더 깔끔하고 구조화된 방식으로 작성할 수 있습니다.
함수 선언과 호출
1. 함수 선언
함수를 선언하는 방법은 다음과 같습니다.
function sayHello() {
console.log("Hello, World!");
}
2. 함수 호출
함수를 호출하여 실행할 수 있습니다.
sayHello(); // 출력: Hello, World!
3. 매개변수와 인수
함수는 매개변수를 받을 수 있으며, 호출할 때 인수를 전달할 수 있습니다.
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("Alice"); // 출력: Hello, Alice!
greet("Bob"); // 출력: Hello, Bob!
4. 반환값
함수는 값을 반환할 수 있습니다.
function add(a, b) {
return a + b;
}
let result = add(5, 3);
console.log(result); // 출력: 8
함수 표현식
함수 표현식은 변수에 함수를 할당하는 방식입니다.
let multiply = function(a, b) {
return a * b;
};
console.log(multiply(4, 5)); // 출력: 20
화살표 함수
화살표 함수는 ES6에서 도입된 간결한 함수 선언 방식입니다.
let divide = (a, b) => a / b;
console.log(divide(10, 2)); // 출력: 5
스코프란 무엇인가?
스코프(Scope)는 변수나 함수가 유효한 범위를 나타냅니다. JavaScript에는 전역 스코프와 지역 스코프가 있습니다.
1. 전역 스코프
전역 스코프에 선언된 변수는 코드 전체에서 접근 가능합니다.
let globalVar = "I am global";
function showGlobalVar() {
console.log(globalVar);
}
showGlobalVar(); // 출력: I am global
2. 지역 스코프
지역 스코프에 선언된 변수는 해당 블록 내에서만 유효합니다.
function localScope() {
let localVar = "I am local";
console.log(localVar);
}
localScope(); // 출력: I am local
// console.log(localVar); // 오류 발생: localVar is not defined
3. 블록 스코프
let
과 const
로 선언된 변수는 블록 스코프를 가집니다.
if (true) {
let blockVar = "I am block scoped";
console.log(blockVar); // 출력: I am block scoped
}
// console.log(blockVar); // 오류 발생: blockVar is not defined
클로저
클로저는 함수가 선언된 렉시컬 스코프(Lexical Scope) 외부의 변수를 기억하고 접근할 수 있는 기능입니다
function outer() {
let outerVar = "I am outer";
function inner() {
console.log(outerVar);
}
return inner;
}
let innerFunc = outer();
innerFunc(); // 출력: I am outer
클로저는 강력한 개념으로, 데이터 캡슐화와 같은 다양한 용도로 사용될 수 있습니다.
결론
JavaScript의 함수와 스코프는 코드 구조를 이해하고 작성하는 데 매우 중요합니다. 함수를 적절히 활용하고 스코프를 이해하면 더 깨끗하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.
다음 글에서는 객체와 배열에 대해 알아보겠습니다. 다음 글에서 만나요!
반응형
'JavaScript 기초 시리즈' 카테고리의 다른 글
[JavaScript 기초 시리즈] 6일차: JavaScript 조건문과 반복문에 대해 알아보자 (0) | 2024.08.06 |
---|---|
[JavaScript 기초 시리즈] 5일차: JavaScript 객체와 배열에 대해 알아보자 (0) | 2024.08.05 |
[JavaScript 기초 시리즈] 3일차: JavaScript 연산자와 표현식에 대해 알아보자 (1) | 2024.08.03 |
[JavaScript 기초 시리즈] 2일차: JavaScript 변수와 자료형에 대해 알아보자 (0) | 2024.08.02 |
[JavaScript 기초 시리즈] 1일차: JavaScript의 역사와 기본 개념 (0) | 2024.08.01 |