자바스크립트 기본 - 함수지향, 유효범위

함수지향 - https://opentutorials.org/course/743/6583

함수지향 카테고리의 하위 수업들은 함수형 언어로서 자바스크립트의 면모를 다룬다. 

자바스크립트의 핵심적인 도구는 함수이며 함수에 대한 이해 없이는 자바스크립트를 잘 다루기 어렵다. 

또한 자바스크립트에서 함수는 객체를 이해하는 데 가장 중요한 기초를 이룬다. 

유효범위 - https://opentutorials.org/course/743/6495

유효범위(Scope)은 변수의 수명을 의미한다.

전역변수와 지역변수

전역변수에 대한 예제이다.

---

var vscope = 'global'; //함수 밖에서 vscope을 선언한다.

function fscope(){

    alert(vscope); //함수 안에서 vscope을 실행한다.

}

fscope();

---

결과화면은 global이라는 알럿창이다.

이 예제를 통해서 함수 밖에 선언되어 있는 vscope변수를 함수안에서 사용할 수 있다는 것을 확인 할 수 있다.

지역변수에 대한 예제이다.

---

var vscope = 'global';

function fscope(){

    var vscope = 'local';

    alert('함수안 '+vscope); //함수 안에서 선언된 vscope에 대한 알럿창이다. 전역변수를 가지고 오지 않은 이유는 제일 가까운 변수를 사용하기 때문에 함수 안에서 선언된 지역변수를 가지고 온 것이다.

}

fscope(); //함수 안에서 선언된 vscope 변수에 대한 알럿창이다.

alert('함수밖 '+vscope); //함수 밖에서 선언된 vscope 변수에 대한 알럿창이다.

---

결과화면은 local, global이라는 알럿창이 순서대로 뜬다.

함수안에서 선언되는 지역변수는 함수안에서만 동작하며

함수밖에서 선언되는 전역변수는 함수안, 함수밖에서 모두 동작한다.

단, 함수안에서 변수가 사용 될때 우선적으로 지역변수를 찾으며 지역변수가 없을 경우 전역변수를 가지고 와서 사용한다.

함수 안에서 지역변수 사용시 주의해야 할 점이 있다.

var vscope 으로 선언할 경우, 지역변수를 뜻하지만

var없이 그냥 vscope으로 선언할 경우, 전역변수의 값을 바꿔주는 의미로 변한다.

하지만 아래와 같이 함수안에서 지역변수를 생성한 뒤 var 없이 변수를 선언할 경우는 전역변수가 아닌 지역변수의 값을 바꿔준다.

---

var vscope = 'global';

function fscope(){

    var vscope = 'local';

    vscope = 'local'; //지역변수의 값을 바꾼다.

}

---

전역변수를 꼭 사용해야 하는 이유를 잘 모르는 상태라면 지역변수를 사용하는 것이 좋다.

전역변수를 사용하게 되면 이름의 충돌이 있을 수 있기 때문이다.

유효범위의 효용

지역변수를 사용해야 하는 이유

아래의 예제를 통해서 지역변수를 사용해야 하는 이유를 알 수 있다.

---

function a (){ //var을 꼭 붙여서 i를 선언하여 지역변수 i를 만들어야 한다.

    var i = 0;

}

for(var i = 0; i < 5; i++){ //i는 전역변수이다.

    a();  //함수 내에 i값에 var이 없이 선언될 경우, 전역변수 i를 계속 0으로 선언하기 때문에 i가 중첩되어 for문안에 있는 i의 값이 올라가지 않는다. 이 문제로 인해 코드는 무한루프에 빠지게 된다.

    document.write(i);

}

---

전역변수의 사용

하나의 전역변수를 만들어서 나머지 전역변수들을 소속전역변수로 만든다.

---

var MYAPP = {} //전역변수이며 변수의 값은 객체이다.

MYAPP.calculator = { //객체 안에 객체를 넣는다. calculator객체 안에 left, right를 넣음.

    'left' : null,

    'right' : null

}

MYAPP.coordinate = { 

    'left' : null,

    'right' : null

}

 

MYAPP.calculator.left = 10;

MYAPP.calculator.right = 20;

function sum(){

    return MYAPP.calculator.left + MYAPP.calculator.right;

}

document.write(sum());

---

마지막 document.writhe로 sum()함수를 호출하면 30이 나온다.

만약 전역변수를 그래도 사용하기 싫다면 코드자체를 함수로 만들어서 전역변수들을 지역변수로 만들면 된다.

---

(function(){ //혼자 실행되는 익명함수

    var MYAPP = {}

    MYAPP.calculator = {

        'left' : null,

        'right' : null

    }

    MYAPP.coordinate = {

        'left' : null,

        'right' : null

    }

    MYAPP.calculator.left = 10;

    MYAPP.calculator.right = 20;

    function sum(){

        return MYAPP.calculator.left + MYAPP.calculator.right;

    }

    document.write(sum());

}())

---

이름이 없는 익명함수를 만들어서 함수가 혼자실행되는 방식을 선택하면 된다.

유효범위의 대상 (함수)

지역변수를 선언할 수 있는 곳은 함수로 제한된다.

아래 예제는 for문안에 있는 변수를 for문 밖에서 사용하는 예제이다.

---

for(var i = 0; i < 1; i++){

    var name = 'coding everybody';

}

alert(name);

---

자바스크립트는 함수외에 다른 곳에서 변수를 선언할 경우 전역변수로 인식하기 때문에 위의 코드는 정상적으로 실행된다.

정적 유효 범위

클로저와 연결되어 있는 개념이다.

---

var i = 5; //전역변수

 

function a(){

    var i = 10; //지역변수

    b(); //호출된 시점에서 i를 찾지 않는다.

}

 

function b(){

    document.write(i); //b함수 안에 있는 i지역변수를 찾는다. b함수가 선언된 시점에서 i를 찾기 때문에 전역변수 i=5를 가져온다.

}

 

a();

---

예제의 결과는 5이다.

위의 예제를 통해서 함수가 정의될 때 전역변수, 지역변수를 정하게 된다.

그래서 a함수안에서 b함수가 호출될 때 i변수를 정하지 않고

b함수가 정의될 때 i변수를 정하게 된다.

사용될때 변수를 찾는 다면 동적 유효범위지만

정의될때 변수를 찾기 때문에 정적 유효범위라고한다.