-03- 함수

mintgranita·2024년 3월 8일

JS101

목록 보기

3/9

함수란 코드의 덩어리를 만든 다음 그것을 호출하고 반환시키는 구조를 말합니다. 복잡한 코드를 관리할 수 있게 만들어 줍니다. 자바스크립트의 함수에 대한 몇 가지 토픽을 정리하고 가겠습니다.

parameter vs argument

parameter(매개변수): 함수를 정의할때 넣는 변수.

argument(인수 or 인자) : 함수를 정의하고 나서 호출할때 실제로 넣는 값.

function add(a,b) { //a,b는 매개변수
 return a+b
}

add(1,2) //1,2는 인수

일급시민

자바스크립트에서 함수는 일급 시민(first class citizen)입니다. 일급 시민이란 변수에 함수를 넣을 수 있다는 뜻입니다. 변수에 넣을 수 있기 때문에 함수의 리턴 값이나 인수로 사용 가능합니다.

const firstClass = function(a,b) { 
	return a+b 
}

함수 표현식 vs 함수 선언

// function declaration
function calcAge(birthYear) {
  return 2037 - birthYear;
}

// function expression
const calcAge = function (birthYear) {
  return 2037 - birthYear;
};

앞서 말했듯이 자바스크립트에서는 함수를 변수로 쓸 수 있습니다. 이런 형태를 함수 표현식이라 합니다. (function expression) let이나 const로 선언한다면 호이스팅을 막아 코드를 좀 더 예측 가능하게 작성 할 수 있습니다.

고차 함수와 콜백 함수

고차 함수는 다른 함수를 다른 함수를 리턴하는 함수 혹은 매개변수로 받는 함수를 말합니다.

function count() {
  let counter = 0 
  return function() { // <= 다른함수 리턴
    counter++
  }
}

콜백 함수는 다른 함수의 매개변수로 전달되는 함수를 말합니다.

const greet = () => console.log(" Hey Tom"); // <= 콜백함수

btnClose.addEventListener("click", greet); //<=  매개변수 자리에 콜백함수를 넣는 고차함수.

순수함수

어떤 함수가 순수 함수라면 다음의 조건을 만족해야 합니다.

부수효과(side effect)가 없어야 한다 .
외부 변수에 의존하지 않아야 한다.
콜백 함수로 구현되었거나 콜백함수를 사용하는 코드가 없다.
* Promise와 같이 비동기 방식으로 동작하는 코드가 없다.

// side-effect가 있는 함수
const array = [1, 2, 3]

function addElement(arr, element) {
  arr.push(element)
  return arr
}
// side-effect가 없도록 고친 함수
const array = [1, 2, 3]

function addElement(arr, element) {
  return [...arr, element]
}
//외부의 값을 복사해 와서  새로운 값 리턴

부수효과(side effect)란 함수 외부의 값을 변경시키는 것을 말합니다. 어떤 함수가 순수 함수라면 함수가 함수 외부의 값을 변경시키면 안 됩니다.

// 외부 변수에 의존하는 함수
const TAX_RATE = .07

function calculateTax(price) {
  return price * TAX_RATE
}
// 수정
const TAX_RATE = .07

function calculateTax(price, taxRate) {
  return price * taxRate
}