웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트를 보면 느낌표로 시작하는 함수를 쉽게 볼 수 있습니다. 특히 외부 sdk 등의 코드들도 느낌표로 시작되고는 하죠. 어떤 기능이 있을까요?
함수를 즉시 실행하는 방법으로 두 가지 방법이 있습니다. 아래와 같이 적용된 코드가 바로 즉시실행함수입니다.
위 코드는 가장 잘 알려진 즉시실행 함수의 문법입니다. 하지만 아래와 같이 느낌표를 사용하는 것 역시 동일한 기능을 수행합니다.
느낌표를 사용하여도 코드를 읽는 즉시 함수가 실행됩니다. 이 둘의 차이점이 있다면 !를 사용한 코드는 반대의 결과를 반환한다는 차이가 있습니다.
또한 즉시호출되지 않게되면 함수가 호출 될 이름이 필요하겠죠? 즉시호출하게되면 익명함수를 사용하므로 함수명을 따로 필요로하지 않습니다.
# 자바스크립트 즉시실행함수
즉시실행함수는 코드의 실행이 콜백의 도움없이 스스로 실행될 수 있습니다. 그런 이유로 페이지가 열리는 동시에 반드시 시작될 코드함수가 이런 방식으로 실행됩니다.함수를 즉시 실행하는 방법으로 두 가지 방법이 있습니다. 아래와 같이 적용된 코드가 바로 즉시실행함수입니다.
(function() {
// Code here
})();
// Code here
})();
위 코드는 가장 잘 알려진 즉시실행 함수의 문법입니다. 하지만 아래와 같이 느낌표를 사용하는 것 역시 동일한 기능을 수행합니다.
!function() {
// Code here;
}();
// Code here;
}();
느낌표를 사용하여도 코드를 읽는 즉시 함수가 실행됩니다. 이 둘의 차이점이 있다면 !를 사용한 코드는 반대의 결과를 반환한다는 차이가 있습니다.
# 즉시실행함수를 사용하는 경우
위와 같이 즉시실행함수를 사용하는 경우는 페이지 내부에서 반드시 동작해야하는 스크립트인 경우가 대표적입니다. 예를들어 페이지 내부의 다른 동작을 위해 사용되는 경우 반드시 수행되어야하므로 즉시실행함수를 사용합니다. (페이스북 또는 기타 자바스크립트 sdk를 사용하려면 이런 즉시실행함수를 동작하는 경우가 많습니다.)또한 즉시호출되지 않게되면 함수가 호출 될 이름이 필요하겠죠? 즉시호출하게되면 익명함수를 사용하므로 함수명을 따로 필요로하지 않습니다.
! 최대한 간결한 코드의 작성 목적
우리는 페이지 내부에서 사용되는 이런 코드들을 익명함수와 즉시실행함수로 구현합니다. 그래야 코드를 최대한 간결하게 사용할 수 있기 때문이죠. 스크립트의 함수명을 줄이거나 공백을 없애는 등등 최대한 짧은 코드를 가지도록 하는 것과 같은 목적이라 볼 수 있겠습니다.아래의 글도 찾고 계시지 않나요?
