본문 바로가기
JavaScript 기초 시리즈

[JavaScript 기초 시리즈] 4일차: JavaScript 함수와 스코프에 대해 알아보자

by cogito21_js 2024. 8. 4.
반응형

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. 블록 스코프

letconst로 선언된 변수는 블록 스코프를 가집니다.

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의 함수와 스코프는 코드 구조를 이해하고 작성하는 데 매우 중요합니다. 함수를 적절히 활용하고 스코프를 이해하면 더 깨끗하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.

 

다음 글에서는 객체와 배열에 대해 알아보겠습니다. 다음 글에서 만나요!

반응형