함수: 기본중의 기본 정리하기

함수의 기본

함수는 사용을 위해 만들어놓는 것이고, 누군가 호출하지 않으면 아무일도 일어나지 않는다.

function add(a,b){
	return a + b ;
}

const result = add(1,2)
console.log(result);

>3

• 함수의 이름을 함수를 잘 나타내줘야하고, 인자값은 무슨 타입인지 잘 나타내줘야 한다.(숫자인지? 스트링인지? 배열인지?)
• 함수와 이름과 인자값은 다 내가 지금 입력하는거다!!
• 숫자를 인자값으로 받아올때는 보통 a,b라고 쓴다.

---

function myName(firstName, lastName) {
  return `제 이름은 ${firstName}${lastName} 입니다.`;
}

let yourName = myName('허', '지현');
console.log(yourName);

let suhyun = myName('허', '수현');
console.log(suhyun);

 

여기서 만약에 문장의 마지막에 이모지를 하나 추가해주고 싶다면?

함수를 사용하지 않았다면 각각 따로따로 이모지를 추가해줘야겠지만,

함수를 사용할때는 함수만 변경해주면 된다. 이름이 1000개라고 생각해보면 함수가 얼마나 편리하고 중요한지 알 수 있다.

function myName(firstName, lastName) {
  return `제 이름은 ${firstName}${lastName} 입니다.🤩`;
}

let jihyun = myName('허', '지현');
console.log(jihyun);

let suhyun = myName('허', '수현');
console.log(suhyun);

---

함수와 메모리

정~말 중요한 개념이다! 이거 잘 알아둬야 프레임워크쓸 때 멘붕안온다

function add(a,b) {
	return a + b;
};

const sum = add;

함수를 만들면, add에는 add 함수가 들어있는 메모리값의 ‘주소'가 들어가고,

해당 주소에 진짜 함수코드가 들어가있다.

그래서 sum = add;를 하면 sum의 값도 메모리값의 ‘주소'가 된다.

 

 

만약 인자를 전달하지 않으면 어떻게 될까?

function add(a, b) {
  console.log(a);
  console.log(b);
  return a + b;
}

console.log(add());

아무값이 전달되지 않아서 a와 b는 undefined이고,

숫자가 아닌 undefined와 undefined를 더하니까 NaN(Not A Number)기 나오는 것을 볼 수 있다.

 

---

반환이란?

함수에서 처리한 특정한 값을 출력하기 위해 return을 쓴다.

return을 쓰지 않으면 js에서는 undefined를 자동으로 반환해준다.

return을 활용해서, 함수 중간에 쓰면 함수가 즉시 종료됨.

함수 도입부분에서 원하는조건이 아닐 때 함수를 즉시 종료해버는 유용한 기능!!! 많이 씀

function print(num){
	if (num < 0) {
		return;
	}
	console.log(num);
}

print(12)
pring(-12)

 

---

함수의 인자

인자값을 출력할 때, arguments를 사용하면 전달한 인자를 배열로 만들어주고 index를 사용할 수 있다.

function add(a, b) {
  console.log(arguments);
  console.log(arguments[0]);
  console.log(arguments[1]);
  console.log(arguments[2]);
  return a + b;
}

add(1, 2, 3);

 

하지만 이런식으로 코딩은 잘 하지 않고 보통 주어진 배개변수를 이용해서 출력한다!

인자값으로 아무것도 전달되지 않았을 때를 대비해서 기본값을 설정해줄 수 있다.

function add(a = 1, b = 1) {
  console.log(a);
  console.log(b);
}
add();

 

Rest 매개변수 (Rest Parameters)

몇개의 인자를 받을 지 모를 때 ‘배열'로 매개변수를 받을 수 있다.

function sum(a, b, ...numbers) {
  console.log(a);
  console.log(b);
  console.log(numbers);
}
sum(1, 2, 3, 4, 5, 6, 7, 8);

 

---

함수 표현식

함수도 객체이기 때문에 함수를 다른 변수에 할당하거나 재할당하는것이 가능하다.

보통은 함수를 선언하면서 바로 할당하는 형식으로 쓴다.

let add = function (a,b) {
	return a + b;
};

console.log(add(1,2));

이는 화살표 함수를 사용하여 function키워드를 생략한 형태로 쓸 수 있다.

둘의 기술적인 차이는 다음에 배울예정~

add = (a, b) => {
	return a + b;
};

코드안에서 특별한 일을 하지 않고 값을 바로 리턴하는 경우라면 return과 괄호 모두 생략가능하다.

add = (a,b) => a + b;

IIFE (Immediately-Invoked Function Expressions)

(function run() {
	console.log('😍');
})();

함수를 괄호로 묶으면 함수를 값으로 표현한 다음 ()를 통해 바로 호출할 수 있다.

잘 쓰이지는 않는다.

 

---

콜백함수

내가 나중에 호출해줄게~

함수에 파라미터로 들어가는 함수 = 콜백함수

용도: 자스안에서 무언가 순차적으로 실행하고 싶을 때 씀

documnet.querySelector('.button').addEventListener('click, function() {
	console.log('hello')
}

setTimeout(function(){
	}, 1000)

• 다른데서 만든 함수도 콜백함수로 넣을 수 있음
• 콜백함수에 함수명 쓸데없이 작명할 순 있음
• 아무데나 다 넣을 수 있는게 아니라 콜백함수가 필요한 콜백함수 사용가능

 

막간 개념정리: 자바스크립트에서 함수는 일반 객체처럼 모든 연산이 가능하다.

일급함수 First-class function

• 함수의 매개변수로 전달
• 함수의 반환값
• 할당 명령문
• 동일 비교대상

고차함수 Higher-order function

• 인자로 함수를 받거나(콜백함수)
• 함수를 반환하는 함수

 

다른함수를 매개변수로 받거나 다른함수를 리턴하는 함수

전달할 당시에 바로 호출하는게 아니라 함수의 레퍼런스만 전달을 받아놓고, 고차함수 안에서 나중에 호출받는다.

//콜백함수
const add = (a, b) => a + b;
const multifly = (a, b) => a * b;

//calculator는 고차함수
function calculator(a, b, action) {
  let result = action(a, b);
  console.log(result);
  return result;
}

calculator(5, 10, add); //add를 호출한게 아니라 함수를 가리키고있는 레퍼런스를 전달
calculator(5, 10, multifly); //마찬가지