[JavaScript] 자바스크립트 함수 표현식 & 화살표 함수

함수를 값처럼 취급해서 변수에 담을 수 있는 함수 표현식에 대해 알아보자.

함수도 자바스크립트안에서 자료형, 즉 값이기 때문에 변수나 상수에 담아서 활용 가능!

let hello = function(){ //함수의 이름 지정하지 않아도 O.K -> hello라고 불리면 됨
	return "안녕하세요 여러분";
};

console.log(hello); //f hello(){} -> hello라는 변수는 함수를 담고있다

함수를 값에 담을 때는 이름을 명시해주지 않아도 O.K

함수 사용 방법?
함수를 담고 있는 변수의 이름이 곧 함수의 이름인 것 처럼 사용하면 됨

let hello = function(){ 
	return "안녕하세요 여러분";
}; // 함수를 변수에 담아서 사용하는 방식 -> 함수표현식

const helloText = hello(); // hello라는 변수 안에 담겨져 있는 함수가 호출이 되고 "안녕하세요 여러분"이 리턴되며 이 값이 helloText에 담기게 됨
console.log(helloText); //안녕하세요 여러분

함수 선언식 vs 함수 표현식 차이!👇

console.log(helloB()); //안녕하세요 여러분 -> 함수 선언전에 호출해도 정상적으로 실행됨

let helloA = function(){ 
	return "안녕하세요 여러분";
}; // 함수표현식 -> 함수를 이름이 없도록(무명함수) 만들어서 변수에 담아 활용하는 방식

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

자바스크립트의 특징!
호이스팅(hoisting) : 함수 선언식으로 만들어진 함수들은 프로그램 실행전에 코드의 최상단으로 끌어올려진다

즉, 자바스크립트가 읽는 코드는 👇 이런 코드와 같다.

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

console.log(helloB()); //안녕하세요 여러분 -> 함수 선언전에 호출해도 정상적으로 실행됨

let helloA = function(){ 
	return "안녕하세요 여러분";
}; // 함수표현식 -> 함수를 이름이 없도록(무명함수) 만들어서 변수에 담아 활용하는 방식

호이스팅이 일어나기 때문에 함수 선언은 가장 밑바닥에 해도 정상적으로 호출해서 사용 가능

console.log(helloA()); // 에러 발생

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

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

함수 표현식은 호이스팅이 이루어지지 X
그러므로 함수 표현식을 실행하는 순서가 되었을 때, 그제서야 비로소 함수 생성

-> 함수 표현식으로 생성된 함수들은 함수 선언식으로 생성된 함수들과는 다르게 해당 함수가 직접적으로 선언되기 전에는 접근 불가능

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

console.log(helloA()); // 안녕하세요 여러분 -> helloA라는 변수가 초기화된 다음에 사용 가능

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

함수 표현식을 더 간략하게 사용하는 방법 -> 화살표 함수!

function 키워드 지워주고 소괄호 뒤에 => 를 넣으면 됨
-> 중괄호 안에 있는 부분을 실행하는 함수로 바뀌게 됨

let helloA = () => { 
	return "안녕하세요 여러분";
}; 

//만약 "안녕하세요 여러분"만 리턴한다면 {} 중괄호도 칠 필요 X
let helloA = () =>  "안녕하세요 여러분";
// 이렇게 사용해도 상관X

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

화살표 함수 : 무명함수를 굉장히 빠르고 간결하게 작성할 수 있도록 도와주는 문법

화살표 함수 또한 호이스팅의 대상이 아니니 순서 잘 지켜서 쓰기!😉