[JS] - 함수에 대하여

sehannnnnnn·2022년 8월 22일
1
post-thumbnail

함수 (Function)

함수는 수학적으로 생각했을 때 입력 값 x를 넣으면 출력값 y를 반환하는 동작을 수행한다.

반복적으로 수행되는 일이 필요한 경우 프로그래밍에서는 함수로 만들 수 있다.

함수란

  • 코드의 묶음
  • 기능의 단위
  • 입력과 출력간의 매핑
  • 반환값이 존재한다.

함수의 선언과 호출

아래에 코드는 함수의 선언(declaration)을 의미한다.

function cal (num1, num2) {
	return num1 + num2;
}

해당 cal 이라는 함수 또한 특정 메모리 주소 내에 보관된다.

함수는 저장된 메모리를 통해 언제든 다시 불러와 재사용 할 수 있는데, 이를 함수의 호출(call) 이라고 한다.

let result = cal(100, 200);

function cal (num1, num2) {
	return num1 + num2;
}

함수를 호출되면 저장된 함수가 조회되며, 함수 바디에 해당하는 전달인자가 매개변수로 바뀌고 함수가 수행된다. 이후 return을 통해 선언된 함수에서 호출된 부분으로 돌아온다.

함수에 return 반환값을 변수에 할당할 수 있다.

첫번째 코드 속 100, 200은 전달인자, 함수 선언식 속 num1, num2 는 매개변수

매개변수, 함수명, 출력값

함수를 할당할 수 있도록 하려면 return 값 (출력값이) 꼭 있어야한다.

function getArea (width, height) {
	return width * height
}

width, height 는 함수의 입력값에 해당하는 매개변수이다.
getArea 는 함수 명이다.

함수의 선언 방법

함수 선언식 (호이스팅에 영향을 받음)

function getArea (width, height) {
	return width * height
}

함수 표현식 (호이스팅에 영향을 받지 않음)

const getArea = function (width, height) {
	return width * height
}

화살표 함수 (ES6 이후 도입됨)

const getArea = (width, height) => {
	return width * height
}

화살표 함수는 함수 표현식과 유사함.

  • 화살표 함수에서 함수 본문에 return만 있는 경우 중괄호와 return을 생략할 수 있다.
const getArea = (width, height) => width * height

함수가 2줄이상으로 간단하지 않을 때는 중괄호와 return을 사용한다.

함수 선언식과 표현식에 경우 활용에 따라 차이가 존재하는데, 추후 클로저, 호이스팅, 콜백 등을 자세히 배운 후 정리하겠다.

profile
FE 개발자 준비생 블로그 🪐

0개의 댓글