함수

 

 

1. 호이스팅

 

변수 '선언' 과 함수 '선언' 을 끌어올립니다.

 

 

2. 함수선언문과 함수표현식

 

함수 선언문

function a(){ return 'a'; }

 

기명 함수 표현식

var b = function bb(){ return 'b'; }

 

익명 함수 표현식

var c = function(){ return 'c'; }

 

익명 함수 표현식 선언, 정의되는 방식

var c = function(){ return 'c'; }

var c                           // 변수 선언
function(){ return 'c'; }       // 익명함수 선언
c = function(){ return 'c'; }   // 변수 c에 익명함수 할당.

 

함수 선언문의 문제점은 같은 함수 이름을 선언했을 경우 나중에 호이스팅된 함수가 이전 함수를 덮어 씌웁니다. 

이러한 이유로 함수 표현식을 권장합니다.

 

 

3. 함수 스코프, 실행 컨텍스트

 

스코프 : 유효 범위 (정의 될 때 결정)

실행컨텍스트 : 실행되는 코드 덩어리 (실행 될 때 생성). 호이스팅, this 바인딩 등의 정보가 담긴다.

 

 

4. 메소드

함수처럼 생겼는데 앞에 . 점이 있으면 메소드라고 생각하면 됩니다.

함수와 메소드의 차이는 this를 바인딩 하느냐 안하느냐. 메소드는 this를 바인딩

 

var obj = {
    a : 1,
    b : function bb(){
        console.log(this);      // this = obj
    },
    c : function(){
        console.log(this.a);    // obj.a = 1
    }
};
 
obj.b();    // 메소드
obj.c();
 
console.dir(obj.b);
console.dir(obj.c);

 

5. 콜백함수

 

함수 안에서 어떤 특정한 시점에 호출되는 함수를 말합니다. 보통 콜백 함수는 함수의 매개변수로 전달하여 특정 시점에서 콜백 함수를 호출합니다. 콜백함수를 사용하는 가장 큰 이유 중 하나는 비동기 데이터를 처리하기 위함입니다. 

 

예시)

$("button").click(function() {
  alert(1);
});

$.ajax({
    url : 'http://...',
    success : function(res){
    	console.log(res);
    }
});

 

일반적인 경우 or 콜백함수)

일반적인 경우

다음은 plus 함수의 리턴 값을 print 함수로 전달하여 출력하는 예제입니다. print함수가 실행되기 위해서는 plus함수의 실행이 전부 완료가 돼야 됩니다. 즉, print함수는 plus함수의 동작이 모두 끝날 때까지 계속 기다려야 합니다.

만약 위 코드가 웹사이트의 동작에 해당하는 코드이고 plus함수가 로직이 복잡해서 처리속도가 늦어지게 된다면 실행이 계속 지연되기 때문에 자바스크립트로 이루어진 웹사이트의 모든 동작이 멈춰버리게 됩니다. 

 

콜백함수

반면에 콜백함수를 이용하여 동작을 구현하면 처리가 끝날 때까지 기다리는 것이 아니라 처리가 끝나는 시점에서 함수를 호출합니다. 즉, 정말로 필요할 때만 함수를 호출해서 효율이 좋고 웹사이트에서도 여러 가지 동작을 동시에 할 수 있습니다.

일반적인 경우
function plus(a, b) { 
  var sum = a + b;
  return sum;
}  

function print(result) {
  console.log(result);
}

print(plus(1,2));

콜백함수
function plus(a, b, callback) {
  var sum = a + b;
  callback(sum);
}

function print(result) {  // 콜백 함수로 사용할 함수 정의
  console.log(result);
}                         

plus(1, 2, print);

 

Callback hell)

 

$("button").click(function() {
  alert(1);
});

$.ajax({
    url : 'http://...',
    success : function(res){
    	$.ajax({
           url : 'http://...',
    	   success : function(res){
              $.ajax({
        	    url : 'http://...',
    		    success : function(res){
                }
              })
           }
       })
    }
});

 

콜백지옥 해결

async/await, Promise 를 활용

 

https://victorydntmd.tistory.com/87

[JS] async/await으로 콜백지옥을 해결해보자