JavaScript | 함수 [함수 선언식, 함수 표현식, 콜백함수]

yuni·2022년 9월 26일

javascript

목록 보기

5/16

⇒ 함수(function)란 어떤 목적의 작업을 수행하도록 설계된 독립적인 블록이며,
이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다.
그렇기 때문에 재사용성과 유지보수하기 좋다.

👀 구성요소

자바스크립트에서 함수의 정의는 function 키워드로 시작되고 실제로는 객체이다.
1. 함수의 이름(=식별자)
2. 괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter)
3. 중괄호({})로 둘러싸인 자바스크립트 실행문

function 함수이름(매개변수1, 매개변수2,...) {
함수가 호출되었을 때 실행하고자 하는 실행문;
}
function add(a, b) {  //a,b : 매개변수
  return a + b;
}
const result = add(2, 3);  
//add()함수에 인수로 2와 3 전달하여 호출
console.log(result);  // 6

→ 입력을 받아서 출력을 내보낼 때, 인수로 전달된 값을 함수 내부에 사용할 수 있게 해주는 변수를 매개변수(parameter), 입력을 인수(argument), 출력을 반환값(return value)이라고 한다.

▶ 매개변수(parameter)

기본값은 undefinde
매개변수의 값은 함수 내부에 접근이 가능한 인수=인자(argument) 객체에 저장된다.
값이 없는 undefinde일때, 기본값 (Default Parameters)을 지정할 수 있다. (ex: parameter1 = 1 , parameter = 2 ...)
단, 인수를 지정해 호출 할땐 그 값으로 명시된다.
Rest 매개변수 : 인자의 숫자가 정해지지 않을때 사용( function name( ...parameter ) { } )

▶ 반환(return)

반환문을 통해 함수에서 실행되는 결과를 전달 받을 수 있다. 함수의 실행을 중단하고,
return 키워드 다음에 명시된 표현식의 값을 호출한 후 반환한다.
function 함수에 return 값이 없을 경우, 자동으로 undifined이 반환된다.
return을 함수 중간에 하게 되면 함수 종료한다.(조건에 맞는 함수만 걸러줌)

📌 함수 표현식

const name = function ( ) { }
함수를 생성하고 변수에 값을 할당하는 것처럼 함수가 변수에 할당
함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.

// 함수표현식
let add = function (a, b) {
  return a + b;
};
console.log(add(1, 2)); //3

✔ 화살표 함수

const name = ( ) => { }

// () => {} vs function () {}

const double = function (a) {
  return a * 2;
};
console.log("double: ", double(7)); //duble: 14

//화살표 함수
const doubleArrow = (a) => {
  return a * 2;
};

//일부함수를 축약(화살표함수)
const doubleArrow = (a) => a * 2  

// 객체는 ()감싸기
const name = (a) => ({ name : 'Sunny' }) 

console.log("doubleArow: ", doubleArrow(7)); // duble Arow: 14

✔ 생성자 함수

const object = new Function();
함수 이름의 첫글자는 대문자로 시작
반드시 new 연산자를 붙여 실행

function User(name) {
  this.name = name;
}

let user = new User('kim');

console.log(use.name); //kim

✔ 즉각실행함수_IIFE (Immedicately-Invoked Function Expressions)

(함수) ( )

const a = 7;
function double() {
  console.log(a * 2);
}
double();

//즉시실행함수
(function () {
  console.log(a * 2);
})();                    // (함수)()

(function () {
  console.log(a * 2);
}());                   //** (함수())

📌 콜백 함수

함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 "나중에 호출(called back)"한다.
실행 위치 보장

//콜백함수 예시 1
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;

function culculator(a, b, action) {
  let result = action(a, b);
  console.log(result);
  return result;
}

// 1과 2와 함수 add가 num의 인수로 전달됨
num(1, 2, add);  //3
// 2과 3와 함수 multiply가 num의 인수로 전달됨
num(2, 3, multiply);  //6

⇨ 전달된 action은 콜백함수다.( add, multiply ) 값을 전달되는 것이 아닌 함수의 참조값이 전달된다.

//콜백함수 예시 2
//setTimeout
function timeout(callback) {
 setTimeout(() => {
	console.log('Hello!')
  callback()
},3000)
}

//timeout()
//console.log('Done!') //Done! -> Hello!

timeout(()=>{
	console.log('Done!')
})