#7 자바스크립트 함수 : 코드의 재사용과 효율성을 위한 핵심

자바스크립트에서 함수는 특정 작업을 수행하는 코드 블록을 의미합니다.함수를 사용하면 코드의 재사용성을 높이고, 코드를 더욱 모듈화하여 관리하기 쉽게 만들 수 있습니다.

함수의 기본 구조

 

function 함수이름(매개변수1, 매개변수2, ...) {
  // 함수 내부에서 실행될 코드
  return 결과값; // (선택 사항)
}

 

 

• 함수 이름: 함수를 호출할 때 사용하는 이름입니다.
• 매개변수: 함수 내부에서 사용할 값을 전달받는 변수입니다.
• 함수 본문: 함수가 실행할 코드를 작성하는 부분입니다.
• return: 함수의 실행 결과를 반환합니다. return 문을 생략하면 undefined가 반환됩니다.

함수 호출

 

함수이름(인수1, 인수2, ...);

 

 

함수 이름 뒤에 괄호를 쓰고, 필요한 인수를 괄호 안에 전달하여 함수를 호출합니다.

함수의 종류

1. 함수 선언 (Function Declaration)

• 코드의 어디에서든 호출 가능합니다.
• 호이스팅이 발생하여, 함수 선언 전에 호출해도 에러가 발생하지 않습니다.

 

function greet(name) {
  console.log("안녕하세요, " + name + "님!");
}

greet("홍길동"); // 안녕하세요, 홍길동님! 출력

 

 

2. 함수 표현식 (Function Expression)

• 변수에 할당하여 사용합니다.
• 호이스팅이 발생하지 않으므로, 선언 후에만 호출할 수 있습니다.

 

const greet = function(name) {
  console.log("안녕하세요, " + name + "님!");
};

greet("홍길동"); // 안녕하세요, 홍길동님! 출력

 

 

3. 화살표 함수 (Arrow Function)

• 간결한 함수 표현 방식입니다.
• 함수 키워드 대신 화살표(=>)를 사용합니다.

 

const greet = (name) => {
  console.log("안녕하세요, " + name + "님!");
};

 

 

함수의 특징

• 재사용성: 동일한 코드를 여러 번 사용할 수 있습니다.
• 모듈화: 코드를 작은 단위로 나누어 관리하기 쉽습니다.
• 추상화: 복잡한 로직을 간단한 함수로 표현할 수 있습니다.
• 일급 객체: 함수를 변수에 할당하거나, 다른 함수의 인수로 전달하거나, 함수의 반환값으로 사용할 수 있습니다.

함수의 매개변수와 인수

• 매개변수: 함수를 정의할 때 사용하는 변수입니다.
• 인수: 함수를 호출할 때 실제로 전달하는 값입니다.

함수의 반환값

• return: 함수의 실행 결과를 반환합니다.
• undefined: return 문이 없거나 값을 반환하지 않으면 undefined가 반환됩니다.

함수의 범위 (Scope)

• 전역 범위: 함수 외부에서 선언된 변수는 어디서든 접근 가능합니다.
• 지역 범위: 함수 내부에서 선언된 변수는 함수 내부에서만 접근 가능합니다.

함수의 활용 예시

• 데이터 처리: 배열 요소를 변환하거나, 데이터를 필터링하는 등의 작업
• DOM 조작: 웹 페이지의 요소를 동적으로 변경
• 이벤트 처리: 사용자의 이벤트에 반응하여 특정 작업 수행
• 비동기 처리: 비동기 작업을 처리하기 위한 콜백 함수, Promise, async/await 등

핵심 개념 정리

• 함수 선언: 호이스팅 발생, 코드 어디서든 호출 가능
• 함수 표현식: 호이스팅 발생하지 않음, 선언 후 호출
• 화살표 함수: 간결한 표현, this 바인딩 특징
• 매개변수와 인수: 함수 정의 시 사용하는 변수와 실제 전달하는 값
• 반환값: 함수의 결과를 반환