[JS] 함수

[함수]

-함수 선언식

함수 선언 -> function a() {} //동작 x
호출 -> (); // 동작 o
return(반환)이 있는 경우, 변수에 할당가능하다.
새로운 변수를 함수로 지정할 때, 변수는 반환값을 가진다.

let area1 = getArea(100,200);

함수 내부에 선언된 지역변수는 함수 밖에서 사용할 수 없다.
함수 외부에서 선언한 전역변수는 함수 내에서 사용할 수 있다.

-힘수 표현식
let hello = function() {
	return "안녕하세요 여러분";
};

console.log(hello); // f hello() {}

hello() 앞에 f 가 붙어있음. hello 라는 변수는 함수를 담고 있다는 뜻.
함수를 담고있는 변수의 이름을 함수의 이름인 것처럼 사용하면 된다.

const helloText = hello(); 를 추가한다면
hello라는 변수에 담긴 함수가 호출이 되고, return값이
helloText에 담기게 된다.

console.log(helloText); //안녕하세요 여러분

익명함수로 함수를 사용하거나 변수에 담아사용하는 것을 함수 표현식이라고 한다.

함수 선언식과 함수 표현식의 차이

console.log(helloB()); // 안녕하세요 여러분
console.log(helloA()); // TypeError : helloA is not a function

let helloA = funtion() {
	return "안녕하세요 여러분";
}; // 함수 표현식

function helloB() {
	return "안녕하세요 여러분";
}; // 함수 선언식

helloB 함수를 마지막에 선언해 콘솔보다 아래에 두었지만 잘 실행된다.
이런것을 자바스크립트의 특징 중 하나인 '호이스팅' 이라고 한다.
함수 선언식을 만들면, 자바스크립트 엔진이 최상단으로 끌어올려준다.
그래서 아래에 선언해도 위에서 실행이 된다.

함수 표현식은 실행보다 선언이 아래에 있으면 에러가 난다. (호이스팅 X)
변수가 선언된 이후에 호출해야한다.

함수 표현식을 더 짧게 쓸 수 있다. (화살표 함수)

let helloA = () => {
	return "안녕하세요 여러분";
}	// 함수 표현식

위와 같이 return 값이 한 줄밖에 없는 경우, 더 짧게 사용가능하다.
let helloA = () => "안녕하세요 여러분"

화살표 함수도 함수 표현식이다. 호이스팅 되지 않는다.

[callback 함수]

어떠한 함수에 매개변수로 함수를 넘겨준 것.

function checkMood(mood){
	if(mood === 'good'){
		//기분 좋아 동작
        sing()
	}
    else{
		//기분 안좋아 동작
        cry()
    }
} 

function cry(){
	console.log("ACTION :: CRY");
}
function sing(){
	console.log("ACTION :: SING");
}
function dance(){
	console.log("ACTION :: DANCE");
}


checkMood("good"); //ACTION :: SING
checkMood("sad"); //ACTION :: CRY

매번 직접 함수를 입력해서 수행하는 것은 효율적이지 못하다.
그래서 매개변수에 함수를 직접 넣어준다.

function checkMood(mood, goodCallback, badCallback){
	if(mood === 'good'){
		//기분 좋아 동작
        goodCallback();
	}
    else{
		//기분 안좋아 동작
        badCallback();
    }
}

function cry(){
	console.log("ACTION :: CRY");
}
function sing(){
	console.log("ACTION :: SING");
}
function dance(){
	console.log("ACTION :: DANCE");
}

checkMood("sad", sing, cry);