안녕하세요 개발적금입니다.
오늘은 Javascript에서 함수 표현식과 함수 선언식 그리고
CallBack함수와 화살표함수를 알아보겠습니다.
목차
1. 함수 선언식
2. 함수 표현식
3. CallBack 함수란?
4. 화살표함수 사용방법!
1. 함수 선언식
함수 선언식이란 말그대로 함수를 선언하는것입니다.
function showMessage(){
console.log("Hello World!");
}
console.log(showMessage());
이런식으로 function showMessage(){}을 선언하여
사용하는것을 함수 선언식이라고 합니다!
2. 함수 표현식
함수 표현식은 쉽게말해서 대입연산자를 통해
함수를 만들고 그 값을 변수에 할당하는것을 말합니다.
const msg = function(){
console.log("Hello World~~~~~!");
}
msg();
이런식으로 변수안에 함수를 할당하는 방법을 함수 표현식이라고 합니다.
함수표현식은 그럼 왜쓸까요?!
1. 호이스팅이 일어나지 않는다(변수를 맨위로 올리는행위)
2. 대입연산자( = ) 를 사용했다는것은 무언가의 "값"이다 라는것입니다
이부분을 잘기억해주시고 다음으로 넘어가겠습니다!
3. CallBack 함수란?
CallBack 함수를 들어가기전에 함수표현식에서 말했던거와 같이
함수는 무언가의 "값"이라고 말씀드렸습니다.
ex) function showMessage(){
console.log("Hello World~!");
}
console.log(showMessage); <- 이부분은 함수를 호출한것이 아닙니다.
코드를 작성하시고 결과값을 보게되면
f showMessage(){
console.log("Hello World~!");
}
즉 showMessage()의 자체가 모두 출력되게 됩니다.
다음 예시를 보여드리겠습니다
function hello(fn){
console.log(fn());
}
function print(){
return 10;
}
hello(print);
이 예시는 callback함수의 예시입니다. 먼저 hello()라는 함수를 호출하였는데
그 인자값은 print가 됩니다. 즉
function hello(print){
console.log(print());
}
가 됩니다. console.log를 실행하려 했는데 그 안에 또 print()함수를 호출합니다.
print 함수는 안에 return 10 이라는 값이 있네요!
그러면 결론적으로 console.log(fn()) -> console.log(print()) -> console.log(10);
이렇게 되어서 10을 출력하게됩니다!
정리하자면
1. 위에 형태를 callback 함수라고 말하고 ,
2. 매개변수의 값( 즉 hello(fn) ) 은 함수 자체의 값이고,
3. hello()함수 호출시 인자값으로 함수"값"을 전달합니다.
4. 그리고 그 값을 전달받은 hello()함수는 내부에서 print()함수를 호출합니다.
어려운 내용이었는데 이 내용을 이해하려면! 함수도 곧 값이다! 라는사실을
인지하고 계셔야합니다.
CallBack 함수의 로직을 이해하기위한 문제!
function hong(callback){
const fn = function(){
return 30;
}
const result = 1 + callback(fn)
return result;
}
function getNumber(callback){
return 2 * callback();
}
console.log(hong(getNumber));
위의 코드를 해석해보겠습니다~!
1. 먼저 console.log안에서 hong()이라는 함수를 호출하게되는데 , 인자값 getNumber를 갖고 호출하게됩니다.
2. 그렇게되면
function hong(getNumber){
const fn = function(){
return 30; // 이부분은 hong()함수 내에서 fn값을 30을 주겠다는 함수입니다!
}
const result = 1 + getNumber(30) // 매개변수로 받은 callback값이 인자값 30을 받아 다시 getNumber(30)으로 호출하네요
return result;
}
3. function getNumber(30){
return 2 * 30 // 즉 getNumber(30)의 값은 60입니다.
}
함수 내에서 return으로 함수를 종료하였고 return 60의 값을 가지고 함수 호출시점으로 다시 이동합니다!
4. const result = 1 + 60 이 되겠네요 그러면 result의 값은 61이 될것이고 다시 맨 처음 1번, 즉 호출했던 시점으로 이동합니다.
5. console.log(hong(getNumber)) => console.log(61); 이 되어 최종적으로 61이 출력이됩니다!
4. 화살표함수 사용방법!
화살표함수는 함수 표현식을 조금더 간결한 문법으로 만드는 방법입니다!
ES6에서 추가된 문법으로 "화살표 함수(Arrow Function)" 입니다.
일단 함수표현식으로 함수를 하나 표현해보겠습니다!
const sum = function(a,b){
return a + b;
}
인자값 두개를 받아서 두 숫자를 합쳐주는 함수입니다. 이것을 화살표함수로 표현해보겠습니다.
const sum = (a,b) => a+b;
간결하게 표현이 되었죠?
function이라는 말이 없어졌고 , return이 없어졌습니다.
매개변수가 하나밖에 없다면 중간에 ()를 생략할수있습니다.
const sum = a => a * 5;
이렇게 오늘은 조금 많이 알아보았습니다.. 저도 개발은 처음이라
뭐랄까 컴퓨팅적인 사고를 하기 많이 어려운데
직접 코드를치고 쓰고 이해하는과정이 너무 재밌네요
계속 재미있었으면 좋겠습니다..ㅎㅎ
감사합니다.
'Javascript' 카테고리의 다른 글
| Javascript 메서드 , this , getter/setter , 생성자(생성자함수)를 알아보 (0) | 2022.11.04 |
|---|---|
| Javascript의 객체에 대해 알아보자!! (1) | 2022.11.02 |
| Javascript의 함수에대해 알아보자 (0) | 2022.11.01 |
| JavaScript의 조건문/반복문 그리고 데이터타입을 조금더 알아보자 (0) | 2022.11.01 |
| JavaScript 변수,연산자 그리고 조건문과 반복문 (0) | 2022.10.28 |