[JavaScript] 함수 (Function)

방용환·2023년 6월 5일
0
post-thumbnail

1. 함수 (Function)

1. 함수 (Function)

  • 함수 (Function) : 매개변수로 값을 전달받아 가공 처리하여 결과값을 반환하는 기능을 제공
  • 자바스크립트에서는 함수를 선언해야만 함수를 호출하여 함수에 작성된 명령을 실행하여 결과값을 반환받아 사용

2. 구분

  • 자바스크립트에서는 함수 선언방법에 따라 선언함수와 익명함수로 구분
  • 선언함수 : 함수명을 명시하여 선언하는 함수
  • 익명함수 : 함수명을 명시하지 않고 선언하는 함수

2. arguments 객체

arguments 객체

  • 인자 (Argument) - 함수에 작성된 명령을 실행하기 위해 반드시 필요한 값을 함수를 호출할 때 전달받아 저장하기 위해 사용하는 변수
  • arguments 객체 : 함수 호출시 전달된 모든 값을 배열 형식으로 저장하기 위한 내장 객체
  • arguments.length : 전달값의 개수를 제공받아 출력
  • 자바스크립트에서는 인자에 상관없이 함수명으로 함수 호출 가능
function total() {
	let tot = 0;
	for (i = 0; i < arguments.length; i++) {
		tot += arguments[i];//전달값을 제공받아 변수에 누적 처리
	}
	console.log("합계 = " + tot);
}

total(10, 20, 30, 40, 50);

// 합계 = 150

3. 함수 표현식

1. 선언함수

  • 선언함수 : 함수명을 명시하여 함수 선언
  • 내부적으로 함수명은 변수로 처리되어 선언함수를 값으로 저장
function 함수명 (매개변수, 매개변수, ...) {
 		명령;
	  	명령;}
function display() {
  console.log("선언함수 명령");
}

display();

// 선언함수 명령
function display() {
  console.log("선언함수 함수명 명령");
}

display;

// 선언함수 함수명 명령
  • 함수명 출력 : 함수명에 저장된 선언함수 출력

2. 익명함수

  • 익명함수 : 함수명을 명시하지 않고 함수 선언
  • 익명함수는 함수를 선언하고 바로 함수를 호출하여 사용
    => 함수를 한번만 호출
(function (매개변수, 매개변수, ...) {
	명령;
  	명령;})(,, ...);
(function() {
	console.log("익명함수 명령");
})();

// 익명함수 명령

3. 선언함수

  • 선언함수 : 자바스크립트 명령 실행전에 선언
  • 함수 선언 전에 함수 호출 가능
display(); //함수 선언 전 함수 호출 - 가능

function display() {
		console.log("선언함수 명령 실행");
}
	
display(); //함수 선언 후 함수 호출 - 가능

// 선언함수 명령 실행
// 선언함수 명령 실행

4. 람다표현식을 활용한 화살표 함수

  • ES6에서는 람다 표현식을 이용한 화살표함수 추가
  • 코드를 간결하게 표현하여 가독성 증가
  • 함수에 작성된 명령이 하나인 경우 { } 기호 생략 가능
  • 변수에 화살표함수를 저장하고 변수를 이용하여 함수 호출
(매개변수, 매개변수) => {
	명령;
  	명령;};
const display1 = () => {
  console.log("화살표함수의 명령 실행");
}
const display2 = () => console.log("화살표함수의 명령 실행"); 
	
display1();
display2();

// 화살표함수의 명령 실행
// 화살표함수의 명령 실행

4. 콜백 함수 (Callback Function)

  • 콜백 함수 (Callback Function) : 매개변수로 함수를 전달받아 함수 내부에서 매개변수로 호출되는 함수
function display(callback) {
	callback();
}

display(function() {
	console.log("익명함수의 명령 실행");
});
	
display(() => alert("화살표함수의 명령 실행"));

// 익명함수의 명령 실행
// 화살표함수의 명령 실행

5. 클로저 함수 (Closure Function)

  • 클로저 함수 (Closure Function) : 함수 내부에 선언된 함수를 반환받아 함수 외부에서 호출하는 함수
  • 내부 함수를 함수 외부에서 호출할 경우 에러 발생
function outer() {
  function inner() {
    console.log("내부함수의 명령 실행");
  }
  
  return inner;
}

let closure = outer();
closure();

// 내부함수의 명령 실행
function outer() {
  function inner() {
    console.log("내부함수의 명령 실행");
  }
  
  return inner;
}

outer()(); // 내부함수를 반환받아 변수에 저장하지 않고 직접 호출
// 내부함수의 명령 실행

0개의 댓글