자바스크립트 Javascript 함수 사용법

자바스크립트에서 함수(Function)는 프로그램에서 수행할 작업 또는 기능을 정의한 코드 블록입니다. 함수 정의 방법을 사용하면 코드 내에서 재사용 가능한 함수를 정의할 수 있으며, 함수 호출을 통해 원하는 결과를 얻을 수 있습니다. 함수는 JavaScript에서 중요한 개념 중 하나이며, 코드를 구조화하고 모듈화하는 데 도움을 줍니다. 자바스크립트 함수의 주요 특징과 개념은 다음과 같습니다.

 

 

 

◎ 1. 특징

 

l  재사용성: 함수를 사용하면 동일한 코드 블록을 여러 번 호출하여 실행할 수 있습니다. 이것은 코드의 재사용을 강화해서 작업 효율을 높입니다.

l  매개변수: 함수는 입력 값을 받을 수 있는 매개변수(파라미터)를 정의합니다. 매개변수는 함수 내에서 사용합니다.

l  반환 값: 함수는 작업을 완료하고 결과 값을 반환할 수 있습니다. 반환 값은 함수 호출자에게 제공합니다.

l  범위 : 함수 내에서 정의된 변수와 매개변수는 해당 함수의 스코프(범위)에 속합니다. 이것은 변수 이름 충돌을 방지하고 함수 내부에서의 변수와 외부에서의 변수를 분리함입니다. .

l  클로저: 자바스크립트 함수는 클로저(Closure)를 형성할 수 있습니다. 클로저는 함수 내에서 선언된 변수가 함수 외부에서 접근할 수 없게 하는 방법을 제공하며, 함수의 상태를 보존하기 위해 사용합니다.

 

 

◎ 2. 함수 선언문(Function Declaration)

 

함수 선언문은 function 키워드를 사용하여 정의합니다. 함수를 선언문으로 정의하면 함수가 호이스팅되어 함수 정의가 스코프의 최상단으로 끌어올려집니다.

 

호이스팅은 JavaScript 엔진이 코드를 실행하기 전에 변수 및 함수 선언을 해당 스코프의 맨 위로 끌어올리는 프로세스를 나타냅니다. 따라서 함수 선언문을 사용하면 해당 함수가 스코프 내 어디에서든 호출 가능한 상태가 됩니다.

 

function sayHello(name) {
  console.log('안녕, ' + name + '!');
}

sayHello('Alice'); // 함수 호출

[출력]
안녕, Alice!

 

sayHello라는 함수를 선언문으로 정의했습니다. 이 함수는 name이라는 매개변수를 받아서 환영 메시지를 출력합니다. 함수를 정의한 후, 함수를 호출하여 인수 'Alice'를 전달하고 결과를 출력합니다.

 

 

◎ 3. 함수 표현식(Function Expression)

 

함수 표현식은 함수를 변수에 할당하는 방법입니다. 이 함수는 변수에 할당되어야 사용할 수 있으며, 호이스팅은 변수에만 적용됩니다.

 

const sayHello = function(name) {
  console.log('안녕, ' + name + '!');
};

sayHello('Bob'); // 함수 호출

[출력]
안녕, Bob!

 

sayHello이라는 변수에 함수 표현식을 할당했습니다. 이 함수는 name 매개변수를 받아서 환영 메시지를 출력합니다. 함수를 정의한 후, 변수에 할당된 함수를 호출하여 인수 'Bob'를 전달하고 결과를 출력합니다.

 

 

◎ 4. 함수 호출과 반환값

 

함수 호출은 함수를 실행하고, 필요한 인수를 전달하며, 필요한 경우 반환값을 받을 수 있는 중요한 개념입니다. 함수는 프로그램의 여러 부분에서 재사용되며, 코드의 구조화와 모듈화에 기여합니다.

 

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

const result = add(3, 4); // 함수 호출과 반환값 저장
console.log('결과: ' + result);

[출력]
결과: 7

 

add라는 함수를 정의하고, 이 함수는 a와 b 매개변수를 받아서 두 수를 더한 값을 반환합니다. add(3, 4)와 같이 함수 이름 뒤에 괄호를 사용하여 함수를 호출하고, 결과를 result 변수에 저장합니다. console.log('결과: ' + result)를 사용하여 결과를 출력합니다.

 

 

◎ 5. 함수가 반환값을 가지지 않는 경우

 

자바스크립트 함수는 반환값을 가질 수 있지만 없을 수도 있습니다.

 

function greet(name) {
  console.log('안녕, ' + name + '!');
}

greet('Alice'); // 함수 호출, 반환값 없음
greet('Bob');   // 함수 호출, 반환값 없음
 
[출력]
안녕, Alice!
안녕, Bob!

 

greet라는 함수를 정의하고, name 파라미터를 사용하여 환영 메시지를 출력합니다. greet 함수는 반환값을 명시적으로 정의하지 않았으므로, 기본적으로 undefined가 반환됩니다. 함수를 호출하면 환영 메시지는 화면에 표시하지만 반환값이 없습니다.

 

 

◎ 6. 함수 파라미터 추가하기

 

자바스크립트에서 함수에 파라미터(매개변수)를 추가하는 방법은 함수 정의 시 괄호 내에 파라미터 이름을 추가하는 것입니다. 이러한 파라미터는 함수가 호출될 때 인수로 전달될 값에 대한 이름을 제공하고 함수 내에서 사용합니다. 아래는 함수에 파라미터를 추가하는 예제와 설명, 그리고 출력입니다.

 

예제 1: 함수에 단일 파라미터 추가하기

 

function greet(name) {
  console.log('안녕, ' + name + '!');
}

greet('Alice'); // 함수 호출과 'Alice'를 파라미터로 전달
greet('Bob');   // 함수 호출과 'Bob'을 파라미터로 전달
 
[출력]
안녕, Alice!
안녕, Bob!

 

greet라는 함수를 정의하고, name이라는 단일 파라미터를 가집니다. 이 파라미터는 함수 내에서 사용되어 이름을 환영 메시지에 포함시킵니다. greet('Alice')와 greet('Bob')와 같이 함수를 호출하면, 함수에 파라미터로 전달된 값을 사용하여 환영 메시지를 출력합니다.

 

예제 2: 여러 개의 파라미터 추가하기

 

function addNumbers(a, b) {
  const result = a + b;
  console.log(a + ' + ' + b + ' = ' + result);
}
 
addNumbers(3, 4);    // 함수 호출과 두 개의 파라미터 전달
addNumbers(10, -5);  // 함수 호출과 다른 두 개의 파라미터 전달
 
[출력]
3 + 4 = 7
10 + -5 = 5

 

addNumbers라는 함수를 정의하고, a와 b라는 두 개의 파라미터를 가집니다. 이 함수는 두 숫자를 더한 결과를 계산하고 출력합니다. addNumbers(3, 4)와 addNumbers(10, -5)와 같이 함수를 호출하면, 함수에 두 개의 파라미터가 전달되고, 이들을 사용하여 덧셈이 수행되고 결과가 출력합니다.