4. 함수와 스코프

자바스크립트에서 함수는 특정 작업을 수행하거나 값을 반환하는 블록입니다. 함수는 정의(declaration)된 후에 호출(calling)되어야 합니다.

 

함수의 정의와 호출

자바스크립트에서 함수는 특정 작업을 수행하거나 값을 반환하는 블록입니다. 함수는 정의(declaration)된 후에 호출(calling)되어야 합니다.

함수의 정의:
1. 함수 선언문 (Function Declaration):

function greet(name) {
  console.log("Hello, " + name + "!");
}

2. 함수 표현식 (Function Expression):

let greet = function(name) {
  console.log("Hello, " + name + "!");
};

3. 화살표 함수 (Arrow Function, ES6 이후):

let greet = (name) => {
  console.log("Hello, " + name + "!");
};

함수는 function 키워드로 시작하며, 함수 이름, 매개변수 리스트, 중괄호로 둘러싸인 함수 몸체로 구성됩니다.

 

함수의 호출:
함수를 호출하여 정의된 작업을 실행하고, 필요에 따라 값을 반환할 수 있습니다.

greet("John");

 

위의 코드에서 greet 함수를 호출하고, 매개변수로 "John"을 전달합니다. 호출된 함수는 정의된 동작을 수행하며, 여기서는 "Hello, John!"이라는 메시지를 콘솔에 출력합니다.

반환 값:
함수는 return 키워드를 사용하여 값을 반환할 수 있습니다. 반환된 값은 함수를 호출한 곳에서 사용될 수 있습니다.

function add(a, b) {
  return a + b;
}

let result = add(3, 4);
console.log(result); // 7

 

위의 코드에서 add 함수는 두 매개변수를 더한 값을 반환하며, 이 값을 result 변수에 할당하여 출력합니다.

함수를 정의할 때 매개변수를 받고, 호출할 때 인자를 전달하여 함수를 실행할 수 있습니다. 함수는 코드의 재사용성을 높이고 모듈화를 촉진하는 데에 중요한 역할을 합니다.

 

 

매개변수와 반환값

 

매개변수(parameters)는 함수가 호출될 때 전달되는 값들을 받는 변수를 말하며, 반환값(return value)은 함수가 실행된 결과로서 함수 호출자에게 반환되는 값입니다. 아래는 매개변수와 반환값에 관한 예시입니다:

매개변수의 사용:

// 매개변수를 받는 함수 정의
function greet(name) {
  console.log("Hello, " + name + "!");
}

// 함수 호출 시 매개변수 전달
greet("John"); // 출력: Hello, John!

위의 코드에서 greet 함수는 name이라는 매개변수를 받아와서 사용합니다. 함수를 호출할 때 greet("John")처럼 매개변수에 실제 값을 전달하여 함수를 실행합니다.

여러 매개변수:

function add(a, b) {
  return a + b;
}

let result = add(3, 4);
console.log(result); // 출력: 7

위의 코드에서 add 함수는 두 개의 매개변수 a와 b를 받아서 그 합을 반환합니다. 함수를 호출할 때 add(3, 4)처럼 여러 개의 매개변수에 값을 전달할 수 있습니다.

반환값:

function multiply(x, y) {
  return x * y;
}

let product = multiply(5, 3);
console.log(product); // 출력: 15

위의 코드에서 multiply 함수는 두 개의 매개변수를 받아서 그들을 곱한 값을 반환합니다. 함수가 값을 반환하면, 해당 값을 변수에 저장하거나 다른 작업에서 사용할 수 있습니다.

매개변수의 기본값 (ES6 이후):

function power(base, exponent = 2) {
  return Math.pow(base, exponent);
}

let result1 = power(3);    // 3^2 = 9
let result2 = power(3, 3); // 3^3 = 27

위의 코드에서 power 함수는 base와 exponent 두 개의 매개변수를 받습니다. 그런데 exponent에 기본값인 2가 설정되어 있어서, 만약 함수를 호출할 때 exponent를 전달하지 않으면 기본값 2가 사용됩니다.

함수의 매개변수와 반환값은 함수를 효과적으로 사용하고 재사용 가능한 코드를 작성하는 데에 중요한 부분입니다.

 

 

 

지역 스코프와 전역 스코프

 

자바스크립트에서 변수와 함수는 스코프(scope)라고 불리는 유효 범위를 가집니다. 스코프는 변수가 유효한 범위를 나타내며, 주로 전역 스코프(global scope)와 지역 스코프(local scope)로 나뉩니다.

 

전역 스코프 (Global Scope):
전역 스코프는 프로그램 전체에서 유효한 스코프를 의미합니다. 전역 스코프에 선언된 변수나 함수는 어디서든지 접근할 수 있습니다.

let globalVariable = "I'm a global variable";

function globalFunction() {
  console.log("I'm a global function");
}

console.log(globalVariable); // 출력: I'm a global variable
globalFunction(); // 출력: I'm a global function

위의 코드에서 globalVariable과 globalFunction은 전역 스코프에 선언되었기 때문에 어디서든 접근 가능합니다.

 

지역 스코프 (Local Scope):
지역 스코프는 특정 블록이나 함수 내에서만 유효한 스코프를 의미합니다. 지역 스코프에 선언된 변수나 함수는 해당 스코프 내에서만 접근할 수 있습니다.

블록 스코프 (let/const, ES6 이후):

if (true) {
  let blockVariable = "I'm in a block scope";
  console.log(blockVariable); // 출력: I'm in a block scope
}

// console.log(blockVariable); // 오류: 접근 불가능

위의 코드에서 blockVariable은 if 블록 내에서 선언되었기 때문에 블록 외부에서는 접근할 수 없습니다.

함수 스코프 (var, ES5 이전):

function localScopeFunction() {
  var localVariable = "I'm in a function scope";
  console.log(localVariable); // 출력: I'm in a function scope
}

localScopeFunction();
// console.log(localVariable); // 오류: 접근 불가능

위의 코드에서 localVariable은 localScopeFunction 함수 내에서 선언되었기 때문에 함수 외부에서는 접근할 수 없습니다. ES6 이후에는 let과 const를 사용하여 블록 스코프를 만들 수 있습니다.

스코프는 변수의 유효 범위를 제어하고 변수의 충돌을 방지하는 데에 중요한 역할을 합니다. 함수를 사용하면 지역 스코프를 활용하여 코드를 모듈화하고, 변수나 함수의 충돌을 최소화할 수 있습니다.