javascript-함수 표현식, 콜백, 호이스팅,화살표 함수, 익명함수 등[0805]

오늘은 javascript에서 함수에 관련된것을 조금 더 배웠습니다.

한번 함수 표현식 부터 차례대로 알아보겠습니다!😁😁

---

함수 표현식

자바스크립트는 함수를 특별한 종류의 값으로 취급을 합니다.

이전에는 저희가 함수 선언문 방식으로 만들었습니다.

function sayHi() {
  alert( "Hello" );
}

함수 표현식

위 와 아래는 분명히 다릅니다.

함수를 생성하고 변수에 값을 할당하듯이 함수가 변수에 할당되었습니다!!👍👍

굉장히 유연한 방식이죠?

위 함수 표현식은 sayHi라는 변수안에 함수를 할당한 것입니다.

함수 표현식 2

위 사진은 마지막 줄에서 sayHi라는것 옆에 ()가 없어서 함수는 실행 되지 않습니다.

반드시 자바스크립트에서는 괄호가 있어야만 실행이 됩니다!

 

그리고 함수를 변수에 할당할 수 있으므로 이런 것도 가능합니다!

함수가 복사가 된다고?!

맨 첫번째 사진인 함수표현식을 보시면 끝에 세미콜론(;)이 붙습니다.

하지만 함수선언문에는 세미콜론이 없는데 말이죠!

모던자바스크립트사이트에서는 이렇게 설명하고 있습니다.

 

함수 표현식에서 변수에 할당된 함수는 값의 역할을 합니다.

그래서 붙이는 것이죠 그리고 웬만하면 모든 구문의 끝에는 세미콜론을 붙이는 습관이 있으면 좋습니다!

(는 가끔 저도 깜빡합니다..😒😒)

---

콜백함수

이번에는 콜백함수에 대하여 알아보겠습니다.

콜백 함수

여기서 함수 ask의 인수, showOK와 showCancel은 콜백 함수 또는 콜백이라고 불립니다!

쉽게 말해서 함수를 함수의 인수로 전달하고 나중에 필요할때 호출하는것이 콜백 함수의 중심이라고 할 수 있습니다!

익명함수

잠깐 보고 지나갈 [익명 함수]인데 위 코드와 다른점이 보이시나요?🤷‍♂️

바로 ask 안에 함수가 선언되었지만 이름이 없이 선언이 되었습니다!

이런 함수들을 익명함수라고 합니다.

이 익명함수는 ask의 외부에선 접근할 수 없고 1회성으로 사용할때 많이 사용합니다.

실제로 회사에서는 이런걸 많이 사용하지는 않겠죠.

---

호이스팅(Hoistion)

호이스팅이란 끌어올리다라는 뜻을 가지고 있습니다.

밑에 선언이 있고, 앞에서 사용을 하면 선언을 내부적으로, 즉 허용범위 최상단으로 끌어 올려줍니다.(실제 메모리상 변화는 없음)

이게 무슨 이야기냐 하면

let 변수 선언과 함수 표현식에는 호이스팅이 발생하지 않고 함수선언식에서만 호이스팅이 일어납니다

(추가적으로 var 변수 선언도 있지만 이것은 제외하겠습니다)

호이스팅 1

 

위 사진은 함수를 사용한 뒤에 밑에서 함수를 선언했습니다.

아니 선언하기도전에 사용을 했는데 Hello, John 이라는 문구가 출력이 됩니다!

어째서 일까요? 위 코드는 이것과 같습니다.

호이스팅 2

자동적으로 자바스크립트 내부에서 선언한것을 위로 끌어올려주는 것입니다.

 

하지만 위에서 말했듯이 함수표현식에는 작동하지 않고 함수 선언식에만 호이스팅이 일어나게 됩니다 그이유는 이렇습니다.

호이스팅 3

함수를 사용을 했지만 밑에서 함수를 선언한것을 호이스팅 해야하는데

밑에것은 함수선언이 아닌 함수표현식이며 아래와 같이 동작이 되어버립니다.

호이스팅 4

바로 let sayHi라는 변수에 함수가 담겨져있었긴하지만 그 변수 자체를 가지고 올라오기만 할뿐 해당 함수는 가져오지 않습니다. 그래서 개발자들은 이 개념을 필히 알고 있어야 할것입니다.

함수 표현식에서 유연하게 하겠답시고 저렇게 할려다가 오류가 발생해버리는거죠

뭐 깔끔한것은 함수를 선언한 뒤에 사용하는것이 제일 깔끔하다고 생각합니다.

개발자를 꿈꾸고 있다면 호이스팅은 일어나지 않도록 하는게 좋다고 느끼고 있습니다.

---

화살표 함수(Arrow function)

화살표 함수는 현재 아주 많이~~~ 쓰이는 함수 선언 표현식입니다.

화살표 함수

바로 let또는 const = (매개변수) => { 실행 구문 }

이런식으로 문법을 작성합니다.

만약에 실행 구문의 중괄호가 생략된다면 자동적으로 해당구문의 값이 return 됩니다!

 

맨 처음에는 화살표 함수라고 그래서 -> 인줄 알았는데 -> 이 아닌 => 였습니다 ㅋㅋㅋ;;

 

실행구문에 중괄호가 생략되지 않았다면 반드시 return을 넣어주어야 합니다.

 

그리고 만약에 매개변수가 하나밖에 없다면 괄호를 생략할수 있고

매개변수가 하나도 없을땐 () 처럼 괄호를 비워놓으면 됩니다.

하지만 주의할점은 괄호는 반드시 반드시 작성 되어야 합니다.

---

오늘의 판봉의 바닥글

오늘은 함수에 대해서 더 배웠습니다.

호이스팅 이라는 개념이 조금 약했는데 이것저것 찾아보면서 확실하게 이해가 되었습니다.

그리고 함수 선언식과 함수 표현식이 따로 존재한다는 것 이것을 두루뭉실하게 이해하고 있었지만

조금 더 확고히 하게 된 것 같습니다.

그리고 애로푸펑션이라는 화살표 함수도 배워서 무척이나 신기했습니다.

앞으로 꾸준히 더욱 증진하는 사람이 되도록 노력해야겠습니다.