18_[vanillajs]함수

함수

• 특정 코드를 특정 명령어로 실행할 수 있게 하는 것!
• 파라미터가 들어오면, 그에 따른 결과를 내보내 주는 것!

1. 리턴값이 없는 함수
   • 어떤 변수에 리턴값이 없는 함수를 저장하려고 하면, 해당 수행 내용을 휘발적으로 수행하고, 그 이후에는 효력이 떨어져서 사용성의 어려움이 있음
   • 파라미터가 없는 경우

function 함수명(){
	expression;
}

• 파라미터가 있는 경우

function 함수명(변수1 이름, 변수2 이름){
	expression;
}

1. 리턴값이 있는 함수

• 파라미터가 없는 경우

function 함수명(){
	expression;
	return value;
}

• 파라미터가 있는 경우

function 함수명(변수1 이름, 변수2 이름){
	expression;
	return value;
}

---

function sum(a,b){
    return a+b;
}
console.log(sum(2,3));//5

위의 경우는 파라미터로 두 개의 값을 받아올 수가 있고, 그 합을 리턴받는 함수다.

이를 통해서 sum(2,3)을 출력하면 5가 출력된다!

⚠️ 단, 파라미터명은 a,b가 아닌 c,d 등으로 자유롭게 명명해도 된다!

⚠️ 함수 내부에 있는 return 으로 인해서 함수 블럭은 유효성이 끝남!

---

화살표 함수 문법

• ES6에서 지원됨

const 혹은 let 함수명 = (파라미터1, 파라미터2)=>{
	expression;
}

• 화살표 분법은 const나 let을 적어준 후,
• 함수명=(파라미터)⇒
• {함수블럭} 의 구성, 절차로 작성해준다!

const tot1 = add(2,3);
console.log(tot1);

console.log(`3+5=${add(3,5)}`);//3+5=8

📌 화살표 함수 문법에서 let과 const의 차이는 기존 변수에 관한 사항과 동일!

const add = (a,b)=>{
    return a+b;
}
const tot1 = add(2,3);
console.log(tot1);

console.log(`3+5=${add(3,5)}`);//3+5=8

let hello=(name)=>{
    console.log(`hello ${name}`);
}
console.log(`${hello('js')}`);//hello js
hello=1;
console.log(hello);//1

add =1;
console.log(add);

-화살표함수에 대해서는 let이 붙으면 함수였다가도 변수로 바로 사용할 수도있음!(하지만 const는 불가능~) ✅ const 함수를 변수로 바꾸려 한다면 아래와 같은 에러가 날 것!

function.js:48 Uncaught TypeError: Assignment to constant variable. at function.js:48

• 함수 내부에서 바로 값을 리턴해줌으로써 보다 간결하게 사용 가능!

const 또는 let 함수명=(파라미터)=>expression;

const adder= (a,b)=>a+b;
console.log(`3+5=${adder(3,5)}`);//3+5=8

• 화살표함수의 this ≠ 기존 함수의 this

---

함수의 종류

• 여러가지가 있지만, 큰 가지만 확인하기!
  1. 명시적/선언적 함수

function 함수명(~){
	//내용
}

1. 익명 함수

• 변수에 함수를 할당

const 혹은 let 함수명 = function(~){
	//code
}

1. 리터럴 함수

• 익명 함수와의 차이점은 값(리터럴)로써 함수를 사용할 수 있다는 점!

function func03(){
	prn(function(msg){
		alert(msg);
 });
}

function prn(literal){
	alert(literal);
	literal("안녕하세요! 리터럴입니다!");
}

• 확인해보면, literal 매개변수에는 func03의 function(msg){~}가 그대로 들어가고,
• 그 이후에는 literal 매개변수를 마치 함수처럼 사용하여 msg 매개변수에 “안녕하세요! 리터럴입니다!”를 넣어서 알람을 준다!

리터럴 함수

1. 화살표 함수

• 위에서 정리한 부분 확인하기!