🎇 함수
함수는 코드의 집합을 나타내는 자료형이다.
function 함수이름(매개변수1, 매개변수2) {
코드
}함수를 사용하는 것을 함수 호출, 함수를 호출하다 라고 표현한다.
함수를 호출할 때 전달하는 자료를 매개 변수 라고 부르며,
함수를 호출에서 최종적으로 나오는 결과를 리턴값 이라고 한다.
✔ 함수의 좋은 점
반복 작업 최소화 : 반복되는 코드를 한 번 정의해놓고, 필요할 때마다 호출함
유지보수 용이 : 기능별, 함수별로 수정이 가능하므로
가독성 굿 : 긴 프로그램을 여러 함수의 작성을 통해 모듈화
✔ 익명함수
anonymous function
이름이 붙어있지 않은 함수를 말한다.
✔ 선언적 함수
이름이 있는 함수를 말한다. 익명함수와의 차이점은 함수를 출력했을 때 함수에 이름이 붙어있다는 것 뿐이다.
🔗 함수 선언과 호출
함수 선언
function showMessage() {
alert( '안녕' );
}함수 호출
showMessage();
showMessage();🔗 매개변수
parameter argument
모든 함수에 매개변수 와 리턴값 을 사용할 필요는 없다. 필요한 경우에만 사용한다.
매개변수를 사용하여 임의의 데이터를 함수 안에 전달한다.
아래 예시에서 sayHello는 매개변수 name과 age를 가진다.
function sayHello(name, age) {
alert(`안녕하세요. ${age}세 ${name}라고 합니다.`);
}
sayHello('오동이', 10); // 안녕하세요. 10세 오동이라고 합니다.
sayHello('먼지', 4); // 안녕하세요. 4세 먼지라고 합니다.sayHello('오동이', 10) 과 같이 함수를 호출하면,
함수에 전달된 매개변수는 함수의 지역변수 name과 age에 복사된다.
✔ 함수는 외부 변수에 접근과 수정을 할 수 있다.
(함수의 외부 변수와 같은 지역 변수가 없는 경우에만 외부 변수를 사용할 수 있다. )
✔ 함수 바깥에서 함수 내부의 지역변수에 접근하는 것은 불가능하다.
✔ 매개변수의 기본값
매개변수에 값을 전달하지 않으면 그 값은 undefined 가 된다.
혹은 함수의 매개변수로 항상 비슷한 값을 입력하는 경우 등에 매개변수에 기본값을 지정하는 기본 매개변수 를 사용한다.
function 함수이름(매개변수1, 매개변수2, 매개변수3=기본값, 매개변수4=기본값) { }매개변수는 순서대로 입력하므로,
기본 매개변수를 입력받아야 할 매개변수보다 앞에 작성하지 말자.function 함수이름(매개변수1=기본값, 매개변수2) { } 함수이름(매개변수2에 값을 전달하려면 결국 매개변수1의 값을 입력해야한다, 매개변수2의 값)
기본 매개변수 사용 예시
function sayHello(name, age) {
alert(`안녕하세요. ${age}세 ${name}라고 합니다.`);
}
sayHello('오동이'); // 안녕하세요. undefined세 오동이라고 합니다.undefined 가 되지 않게 하려면 기본값을 설정해주면 된다.
function sayHello(name, age = 10) {
alert(`안녕하세요. ${age}세 ${name}라고 합니다.`);
}
sayHello('오동이'); // 안녕하세요. 10세 오동이라고 합니다.혹은 age = no text given 으로 작성하여 값을 전달받지 못한 경우에
undefined 대신 출력되도록 하는 방법도 있다.
또한 보다 복잡한 표현식도 기본값으로 설정할 수 있다.
function sayHello(name, age = anotherFunction()) {
alert(`안녕하세요. ${age}세 ${name}라고 합니다.`);
// age값을 전달받지 못했을 때, anotherFucntion()이 호출되고,
// anotherFunction()의 리턴값이 age의 값이 된다.
}이외에도 함수 선언부가 아닌 함수 실행되는 도중에 기본값을 설정할 수도 있다.
이런 경우에는 일반적으로 매개변수를 undefined 와 비교하여 매개변수가 생략되었는지 확인한다.
✔ 나머지 매개변수
함수를 호출할 때, 매개변수의 개수가 고정적이지 않은 함수를 가변 매개변수 함수 라고 한다. 배열을 사용하지 않고, 여러 개의 숫자를 매겨변수로 넣어 함수를 호출할 때 사용한다.
JS에서 이러한 함수를 구현할 때에는
나머지 매개변수 rest parameter 라는 문법을 사용한다.
function 함수이름(...나머지 매개변수) { }함수의 매개변수 앞에 마침표 3개 ... 를 입력하면 매개변수들이 배열로 들어온다.
function ex(...a) {
console.log(a);
}
ex(1, 2, 3, 4, 5, 6, 7);
(7) [1, 2, 3, 4, 5, 6, 7]나머지 매개변수와 일반 매개변수 조합
function 함수이름(매개변수, 매개변수, ...나머지 매개변수) { }function ex(a, b, ...c) {
console.log(a, b, c);
}
ex(2, 4, 5, 6, 7);
ex(2, 3, 4, 5, 6, 3, 2);
ex(1, 2);
2 4 (3) [5, 6, 7]
2 3 (5) [4, 5, 6, 3, 2]
1 2 []매개변수의 자료형에 따라 작동하는 max()함수 구현
function max(a, ...rests) {
let result;
let items;
if (Array.isArray(a)) {
// a가 배열이면
result = a[0]; // a의 첫 번째 element를 result에 대입
items = a; // 배열 a를 items에 대입
} else if (typeof a === 'number') {
//a가 숫자이면
result = a; // result에 숫자 a 대입
items = rests; // items에 ...rest로 들어간 배열 대입
}
for (const i of items) {
if (result < i) {
result = i;
}
}
return result;
}
console.log(`max(숫자, ...나머지) : ${max(11, 22, 342, 342, 543, 24, 12)}`);
console.log(`max(배열) : ${max([11, 22, 342, 342, 543, 24, 12])} `);
max(숫자, ...나머지) : 543
max(배열) : 543 ✔ 전개 연산자
전달할 값으로 배열의 자료형이 있는데,
매개변수로 배열을 입력할 수 없고, 숫자를 입력해야 하는 함수가 있을 때,
배열을 전개해서 함수의 매개변수로 전달해주는 전개 연산자를 사용한다.
함수이름(...배열);배열의 앞에 마침표 3개 ... 를 입력해서 전개하는 형태이다.
let array = [1,2,3,4,5];
// 전개 연산자를 사용하지 않았을 때
anotherFunction(array[0], array[1], array[2], array[3], array[4]);
// 전개 연산자 사용
anotherFunction(...array);
🔗 반환 값
return value
함수를 호출했을 때, 함수를 호출한 곳에 특정 값을 반환하게 한다.
return 키워드와 반환할 변수를 함께 사용한다.
함수 내 어디서든 사용할 수 있으며, 실행 흐름이 return 을 만나면
함수는 즉시 중단되고 함수를 호출한 곳에 값을 반환한다.
함수를 중단하라는 의미에서 return 키워드만 사용하는 것도 가능하다.
return키워드가 없거나,return키워드만 있는 경우,undefined를 반환한다.
return=return undefined동일하게 작동한다.
