Javascript - 화살표 함수, 호이스팅

Javascript

 

화살표 함수

화살표 함수(Arrow Function)  =>

ECMA Script6 이후 함수 도입

비교연산자랑 헷갈리지 말자

 

기존 함수와 비교 해보자 (일반함수, 익명함수)

 

🍖 일반함수 : 직접호출

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

console.log(add1); // 함수구문이 출력
console.log(add1(2,3)); // 2랑 3이랑 5 출력

return을 통해 함수구문 내부에서 결합된 값을 호출한 대상으로 돌려준다.
(함수구문 외부로 반출이 가능)

 

 

🍖 익명함수 : 간접호출

const add2 = function(c, d){
    console.log(c);
    console.log(d);
    return c+d;
}
console.log(add2(10, 20)); // 10, 20, 30 출력

 

 

🍖 화살표 함수 적용

- function 단어 제거
- {} 대신에 => 를 사용
- (return 문만 존재시) return 단어 제거

const add3 = (c, d) => c+d;
console.log(add3(10, 20)); // 30 출력

완전 간단해졌다!

 

 

🍖 화살표 함수 - 매개변수가 하나만 존재할 때

const add4 = (g) => g+9;
console.log(add4(6, 32)); // 15

 const add5 = g => g+9;
console.log(add4(6, 32)); // 15

이렇게 괄호를 뺄 수 있다! (g) → g

 

단, 함수구문이 return 문만 존재하지 않은 경우 중괄호를 생략하면 안된다!

const calc1 = (a, b, c) => {
    let sum = (a+b)*c;
    console.log(sum);
    return `최종 결과값 : ${sum}`;
}
console.log(calc1(12, 14, 2)); // 최종 결과값 : 52

 

또한 매개변수가 없어도 () 를 적어야한다!

const func2 = () => {
    console.log(`func2의 호출에 의한 함수 실행`);
}
func2();

 

---

호이스팅

Hoisting : 함수의 호출문 위치에 따라서 함수구문을 호출가능한가?

 

func1(); // func1의 호출에 의한 함수 실행
function func1(){
    console.log(`func1의 호출에 의한 함수 실행`);
}

함수 선언보다 실행을 먼저했는데 실행이 가능함!

 

일반함수는 호이스팅이 적용되기 때문에 스크립트 구문의 상단으로 올라감

하지만 이러면 순서가 꼬일 수 있어서 치.명.적

 

그래서 익명함수는 호이스팅을 막아주는 역할을 담당

func3(); // Uncaught ReferenceError: Cannot access 'func2' before initialization
 
const func3 = function(){
    console.log(`func3의 호출에 의한 함수 실행`);
}