지난 글에 이어서 함수를 선언하고 바로 호출하기에 대해서 알아보겠습니다.
자바스크립트에서는 함수 이름이 없는 익명 함수를 선언할 수 있고 다음 예제처럼 선언한 익명 함수를 변수나 프로퍼티에 대입할 수도 있습니다.
3. 함수 선언하고 바로 호출하기
var doSomething = function() {
// 함수 본문
}
이러한 익명 함수는 선언과 동시에 호출할 수 있고 또 그 반환 값을 변수에 할당하는 것도 가능합니다. 익명 함수 선언문 끝에 괄호를 열고 닫으면 바로 호출할 수 있습니다.
// 나쁜 예
var value = function() {
// 함수 본문
return {
message:"Hi"
}
}();
이 예제에서는 함수가 선언과 동시에 호출되었기 때문에 변수 value에는 함수가 아닌 객체가 할당됩니다. 이 패턴은 변수에 익명 함수를 할당하는 것과 상당히 유사해 보이는 문제점이 있습니다. 아마 익명 함수 선언문의 마지막 줄을 보기 전까지는 변수에 익명 함수를 대입하는 것으로 생각할 것입니다. 이처럼 혼동의 여지가 조금이라도 있으면 코드의 가독성은 떨어지게 됩니다. 함수 호출을 명확하게 하려면 다음 예제와 같이 함수 앞뒤에 괄호를 추가합니다.
// 좋은 예
var value = (function () {
// function body
return {
message : "Hi"
}
}());
이제 이 코드는 첫 번째 줄에 괄호가 열린 것을 보고 함수가 선언과 동시에 호출됨을 알 수 있습니다. 물론 괄호를 추가한다고 코드의 동작이 달라지지는 않습니다. 크락포드의 코드 컨벤션은 이 패턴을 권장하고 있고 JSLint는 괄호가 없으면 경고 메시지를 출력합니다.
4. static 모드
ECMAScriot5부터 자바스크립트 문장을 해석하고 실행할 때 실수를 줄이기 위해 strict 모드가 도입되었습니다. strict 모드를 적용하려면 아래와 같이 프라그마를 추가합니다.
"use strict"
보기에는 단순히 변수에 대입하지 않은 문자열로 보이지만 ECMAScript5 자바스크립트 엔진은 이 코드를 만나면 strict 모드를 위한 전환 명령어로 인식합니다. 이 프라그마는 전역으로 사용할 수 있고 함수 내부에서만 유효하도록 지역적으로 사용할 수도 있습니다. 그러나 일반적으로 "use strict"를 전역으로 사용하는 건 피해야 합니다. 만약 총 11개의 자바스크립트 파일 중 하나의 파일에라도 전역 strict 모드가 적용되어 있으면 나중에 파일을 합친 후에는 나머지 파일에도 전역 strict 모드가 적용되기 때문입니다. strict 모드에서는 strict 모드가 아닐 때와 연산 방식이 조금 달라져 다른 파일에서 에러가 발생할 수도 있습니다.
// 나쁜예 - 전역 strict 모드
"use strict"
function doSomething() {
// 코드
|
// 좋은 예
function doSomething() {
"use strict"
// 코드
}
함수마다 일일이 "use strict"를 입력해야 하는 게 싫다면 다음 예제처럼 선언과 동시에 호출하는 함수를 이용합니다.
// 좋은 예
(function() {
"use strict"
function doSomething() {
//코드
}
function doSomethingElse() {
// 코드
}
})();
상위 함수에서 "use strict"를 입력했기 때문에 이 예제의 doSomething()과 doSomethingElse()는 둘 다 strict 모드가 적용됩니다.
JSLint와 JSHing는 "use strict"를 함수 밖에 선언하면 경고 메시지를 출력합니다. JSLint와 JSHint 모두 "use strict"를 함수 안에서 사용하는 것을 기준으로 하여 검사를 수행합니다. 물론 둘 다 이에 대한 검사를 끌 수도 있습니다. 그러나 흔히 하는 실수를 예장하고 싶다면 strict 모드를 적용할 것을 권장합니다.
그럼 이만.
끝.
'IT 관련 > javascript & jquery' 카테고리의 다른 글
javascript 동등 연산자 (0) | 2022.03.05 |
---|---|
[java] APM 프로파일링 툴 (0) | 2022.02.20 |
[javascript] 기본 디렉터리 구조 (0) | 2022.02.05 |
javascript 자동화 (0) | 2022.02.04 |
[javascript] 파일과 디렉토리 구조 (0) | 2022.02.02 |