티스토리툴바

함수 (Function)

입력에 따라 그에 걸맞은 논리적인 일련의 작업을 하는 하나의 작업 단위

어떠한 목적을 가진 작업들을 수행하는 코드들이 모인 블록

코드(지시사항)의 묶음

기능(function)의 단위

입력과 출력간의 매핑(mapping)

항상 출력값을 반환함(return)

함수 사용법

함수 선언 (declaration) 함수라는 버튼을 제작하는 단계. 함수는 변수와 다른 특별한 공간에 보관됨
1. 함수 선언식 가장 기본이 되는 함수 선언.
```
function getTriangleArea(base, height) {
	let triangleArea = (base * height) / 2;
	return triangleArea;
};
```
1. 함수 표현식 변수/상수 선언 후 그 안에 익명함수를 넣는 형식
```
const getTriangleArea = function (base, height) {
	let triangleArea = (base * height) / 2;
	return triangleArea;
};
```
1. 화살표 함수 ES6 버전부터 사용이 가능하며 함수표현식을 기반에 둠. 변수/상수 선언 후 익명함수를 화살표 => 로 축약해 사용한다.
```
const getTriangleArea = (base, height) => {
	let triangleArea = (base * height) / 2;
	return triangleArea;
};
```
  - 함수의 본문(body)에 return 문만 있는 경우, return 과 중괄호 {} 를 생략해야 하며, 소괄호는 사용 가능.
```
const getTriangleArea = (base, height) => {base * height / 2};
console.log(getTriangleArea(10,10)) // undefined

const getTriangleArea = (base, height) => base * height / 2;
console.log(getTriangleArea(10,10)) // 50

const getTriangleArea = (base, height) => (base * height / 2);
console.log(getTriangleArea(10,10)) // 50
```
  - 만약 함수 내의 표현식이 2줄 이상이라면 return 과 중괄호 {} 를 명시적으로 사용하는 것이 좋다.

함수 호출 (call, invocation) 함수라는 버튼을 사용. 언제든 다시 사용 가능함. name(argum);

선언 시 괄호 안에 들어가는 변수를 매개변수(parameter), 호출 시 괄호 안에 들어가는 변수를 전달인자(argument) 라 부른다.

argument > parameter 가 되면 남은 argument는 어느 parameter에도 할당하지 않는다.

parameter < argument가 되면 → 함수의 body에 해당 parameter를 사용해야 하는 표현식이 있다면 계산이 불가하므로 NaN을 반환한다. → 해당 parameter를 사용하지 않아도 return이 가능하다면 그에 맞춰 반환한다.

함수가 포함 된 표현식의 평가 과정

변수 안에 함수가 호출되면 보관된 코드를 실행

호출 할 때 괄호 안에 들어간 인자가 함수의 인자로 대입되어 계산

return을 하게 되면 호출 한 위치로 되돌아가고 이 때 리턴 값으로 바뀌게 된다

최종적으로 변수에는 함수의 return 값만 남게 됨 → 리턴을 하지 않으면 undefined를 반환함

let result = cal(10, 20);

function cal(a, b){
	console.log(a + b);
	return a * 10;
}

console.log(result);
// 30
// 100

Uploaded by N2T

티스토리툴바