JavaScript 공부정리 002

시작하기 전에...

 

이번에 배울 내용은 다음과 같다.

1. 즉시호출함수

1-1. 엄격모드

2. 익명함수와 선언적 함수

---

1. 즉시호출함수

 

여러개의 스크립트를 한 곳으로 모아서 호출할 경우 변수의 이름이 겹치는 문제가 발생할 수 있다.

이 문제를 피하기 위해 함수 블록을 사용해 충돌 문제를 해결할 수 있다.

    let a = 123
    console.log(a)
    {
        let a = 'a의 값'
        console.log(a)
    }
    
    //결과
    //123
    //a의 값

보시다시피 블록을 나누어 주면 변수명이 겹치지 않는다.

 

이와 같은 현상은 중괄호로 나누어준 모든 곳에서 발생한다

때문에 for문을 사용할 때도 for문을 각자 따로 격리해서 선언하면 i값이 겹치지 않는다.

하지만 for문 안에 또 for문을 사용할 경우 i값이 겹치기 때문에 안에 있는 for문은 다른 변수명을 써줘야 한다.

이 경우 에러가 뜨는 것은 아니지만 프로그래머의 의도와는 다른 결과를 낼 수 있다.

for(i=0; i <5 ; i++){
    console.log(i)
    for(i=40; i < 45 ; i++){
        console.log(i)
    }
    console.log('경계선')
    console.log(i)
}

//결과
//0
//40
//41
//경계선
//42

i의 시작값은 0이다.

때문에 처음에 0이 나오지만 그 다음 for문에서 i는 40으로 재정의 되었고 i가 42가 될때까지 반복한다.

그리고 i는 42가 되었는데 이게 for문을 나와서도 그대로 적용되는 바람에

바깥쪽 for문은 한 번만 실행되었다.

 

for(i=0; i <3 ; i++){
    console.log(i)
    for(j=40; j < 42 ; j++){
        console.log(j)
    }
    console.log('경계선')
    console.log(i)
}

//결과값
//0
//40
//41
//경계선
//0
//1
//40
//41
//경계선
//이후 생략

결과값이 너무 길어져서 일부를 생략했다

안쪽 for문을 j로 바꾸어주자 의도에 맞게 실행되는 것을 볼 수 있다.

 

 

이렇듯 여러곳에서 스크립트를 가져와서 변수명이 겹치는 문제가 발생하는 것을 즉시호출함수문제라고 하는데

이는 상술했듯 블록{}을 사용하여 해결할 수 있다.

 

1-1. 엄격모드

일반적으로 자바스크립트는 코드를 대충 작성해도 얼추 알아먹는다.

data = 10
console.log(data)

위 코드는 let이라는 선언자가 없음에도 불구하고 정상작동한다.

 

하지만 다음과 같은 경우에는 그렇지 않다.

'use strict'
data = 10			//애러!!
console.log(data)

'use strict'이라는 명령은 코드를 엄격하게 검사하라는 특수 키워드다

이것을 읽은 시점부터, 자바스크립트는 코드를 엄격하게 검사한다.

때문에 선언문이 없는 data를 보고 바로 애러를 일으키는 것이다.

 

자바스크립트는 프로그래머가 몇 가지 실수를 해서 오류가 발생하도 유도리있게 넘어가는 경우가 종종 있다.

그러나 이것은 치명적인 실수를 유발하기도 하기 때문에 일반적으로는 사용하는 것이 좋다.

 

그리고 'use strict'을 읽은 시점부터 엄격모드가 적용되기 때문에

함수 내부 최상단에 작성할 경우, 그 함수에만 엄격모드를 적용시킬 수도 있다.

 

2.익명함수와 선언적 함수

익명함수는 그 함수가 위치한 줄을 읽을 때 생성되는 반면 선언적 함수는 위치에 상관없이 일단 생성되고 본다.

때문에 선언적 함수는 어디에 위치해 있든지 상관 없는 반면 익명함수는 위치를 잘 선정해 주어야 할 필요가 있다.

 

그렇다면 이 두가지를 같은 이름을 써서 선언하면 어떻게 될까?

함수 = function(){
    console.log('익명함수')
}
function 함수 (){
    console.log('선언함수')
}
함수()

//결과
//익명함수

똑같은 함수 명을 가진 함수를 선언하 되 하나는 선언함수, 하나는 익명함수로 선언했다.

그러나 실행해본 결과 익명함수가 나오는 것을 알 수 있다.

 

이는 선언함수가 먼저 실행되었지만 이후 실행된 익명함수에 의해 함수의 내용이 덮어진 것이다.

즉 나중에 실행된 함수가 먼저 실행된 함수의 내용을 덮어버렸기에 이런 현상이 나타난 것이다.

 

당연한 이야기겠지만 혹시라도 함수선언할 때 함수명을 겹치는 행동은 대단히 위험한 일이다.

그러니 위와같은 코딩은 가급적 지양하도록 하자

 

여담이지만 이번에 새로 안 사실인데 한글로 함수명을 작성해도 잘 돌아간다.

 

그렇다면 익명함수는 어떤 때에 자주 사용하는가?

 

<script>
function 함수 (){
    console.log('선언함수 1')
}
</script>

<script>
function 함수 (){
    console.log('선언함수 2')
}
</script>

<script>
함수()
</script>

//결과
//선언함수 1
//선언함수 2

 

HTML에서 자바스크립트를 사용한 모습이다.

코드를 살펴보면 분명 함수는 한 번 실행했지만

내용이 덮어씌워지지 않고 두 함수가 동시에 실행된 것을 볼 수 있다.

 

이런식으로 스크립트 블록을 나누어 버리면 선언적 함수의 실행 순서는 예측하기가 어렵고

만에하나 함수의 이름이 겹칠 경우, 예상치 못한 결과가 튀어나올 수 있기 때문에 이런 경우 익명함수를 더 선호하는 편이다.

 

따라서 한가지로 통일하는 것이 오류의 위험을 줄일 수 있고

가급적 익명함수를 쓰는 쪽이 더 유리하다.