아래의 문제는 자바스크립트에서 유효범위인 전역변수와 지역변수에 대해 아는 가에 관한 문제인데요.

유효범위(Scope)는 변수의 수명을 의미합니다.

먼저 고민해서 풀어보시고 난 후에 정답을 확인하면 좋을 것 같아요!

<script type="text/javascript">
$(document).ready(function(){
    function A(){
        console.log(myVar);
        var myVar = 1;
        console.log(myVar);
			
        function B(){
            console.log(myVar);
            myVar = 2;
            console.log(myVar);
				
            var myVar = 3;
            console.log(myVar);
        }
        B();
    }
    var myVar = 4;
    A();
		
});
</script>

정답은 다음과 같습니다!

1번째 값과 3번 째 값이 undefined가 된 이유는 지역 변수가 적용 되는 범위 내에서 변수가 선언되기 전까지의 값은 주지 않았기 때문에 undefined가 됩니다. 이름이 같은 전역 변수가 있다해도 함수내에서 무시됩니다. B() 함수내 값을 할당함으로 인해 변수를 선언한 효과가 있습니다.

*함수의 중괄호 안에 선언된 변수만이 함수 안의 지역변수이므로 for, if 중괄호에 선언된 함수는 지역변수로의 의미를 갖지 않습니다.

값으로서의 함수와 콜백(함수의 용도)

자바스크립트에서도 함수는 객체입니다. 즉, 함수 자체가 값이 될 수 있습니다.

var a = function(){ } a라는 변수에 함수가 담길 수 있습니다.

객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부릅니다.

함수는 인자로 전달될 수 있고 리턴값(반환값)으로도 사용 가능합니다.

함수는 배열의 값으로 사용할 수 있습니다.

var process = [

    function(input){ return input + 10;},   //input[0] = 11

    function(input){ return input * input;}, //input[1] = 121

    function(input){ return input / 2;}    //input[2] = 60.5

];

var input = 1;

for(var i = 0; i < process.length; i++){

    input = process[i](input);

}

alert(input);

콜백

function sortNumber(a,b){

    // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 됩니다.

    return b-a;

}

var numbers = [20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];

alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]

콜백함수란 ? sort 기본적인 동작 방법을 변경할 수 있습니다. 즉 값으로서 함수를 사용할 수 있기 때문에 오리지널 함수의 동작방법을 값을 전달하는 것을 통해 완전히 바꿀 수 있는 것입니다.

콜백이 가능한 이유는 자바스크립트에서 함수가 값이기 때문에 콜백이 가능합니다.

비동기 처리

콜백은 비동기처리에서도 유용하게 사용됩니다. 시간이 오래 걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있습니다. 다음 코드는 일반적인 환경에서는 작동하지 않고 서버 환경에서만 동작합니다.

대표적인 예로 AJAX(Asynchronous Javascript And XML) : 자바스크립트를 이용해 html코드를 이용해 화면에 출력

클릭 시 웹 페이지가 변경되지 않고 서버와 웹 브라우저가 내부적으로 조용히 통신하는 기법

Ajax는 웹이 단순히 문서에서 벗어나 이런 동작을 할 수 있는 애플리케이션으로 발전하게 한 단서입니다.

클로저

클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것입니다. 클로저는 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용됩니다.

function outter(){

    function inner(){

        var title = 'coding everybody';

        alert(title);

    }

    inner(); //'coding everybody' 출력

}

outter(); //'coding everybody' 출력

내부함수에서 외부함수의 지역변수에 접근 가능한 것이 클로저입니다.

function outter(){

    var title = 'coding everybody'; 

    return function(){       

        alert(title);

    }

}

var inner = outter();

inner(); //'coding everybody' 출력

외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있습니다. 이러한 메커니즘을 클로저라고 합니다. 결과는 경고창으로 coding everybody를 출력할 것입니다.

private variable

객체 안의 함수가 있는 상태, 첫 번째 매개변수는 title, 매개변수는 함수 안에서 지역변수로 사용

get_title 메소드를 호출하면 title을 리턴합니다.

set_title 메소드는 _title이 title값을 변경합니다.

function factory_movie(title){

    return {

        get_title : function (){

            return title;

        },

        set_title : function(_title){

            title = _title

        }

    }

}

ghost = factory_movie('Ghost in the shell');

matrix = factory_movie('Matrix');

alert(ghost.get_title()); //'Ghost in the shell'

alert(matrix.get_title());//'Matrix'

ghost.set_title('공각기동대');

alert(ghost.get_title()); //'공각기동대'

alert(matrix.get_title()); //'Matrix'

ghost와 matrix는 private 변수에 객체를 담았습니다

private변수가 필요한 이유는 소프트웨어의 규모가 커질수록 많은 데이터가 존재하게 됩니다.

그 데이터를 누구나 수정 가능하다면 소프트웨어가 쉽게 망가질 수 있기 때문입니다.

출처 : 생활코딩 강의

자바스크립트 유효범위: 전역변수와 지역변수

유효범위(Scope)는 변수의 수명을 의미합니다.

var vscope = 'global';

function fscope(){

    alert(vscope); //global을 출력

}

fscope();

fscope함수는 함수 바깥에 선언된 vscope에 접근할 수 있습니다.

var vscope = 'global';                                        var vscope = 'global';

function fscope(){                                                        function fscope(){

    var vscope = 'local';                                       vscope = 'local';

    alert('함수안 '+vscope); //local을 출력                alert('함수안 '+vscope); //local을 출력

}                                                                  }

fscope();                                                         fscope();

alert('함수밖 '+vscope); //global을 출력                alert('함수밖 '+vscope); //local을 출력

var vscope = 'global';

function fscope(){

var vscope = 'local' //지역변수에 해당

 vscope = ‘local’ //역시 지역변수에 해당

}

fscope();

alert(vscope); //global을 출력

이미 var으로 vscope의 지역변수가 생성되었습니다.

전역변수는 사용하지 않는 것이 좋습니다. 여러가지 이유로 그 값이 변경될 수 있기 때문입니다.함수 안에서 전역변수를 사용하고 있는데, 누군가에 의해서 전역변수의 값이 달라졌다면 어떻게 될까요? 함수의 동작도 달라지게 됩니다. 이는 버그의 원인이 됩니다. 또한 함수를 다른 애플리케이션에 이식하는데도 어려움을 초래합니다. 변수를 선언할 때는 꼭 var을 붙이는 것을 습관화해야 합니다. 전역변수를 사용해야 하는 경우라면 그것을 사용하는 이유를 명확히 알고 사용해야합니다.

전역변수를 사용하는 법

MYAPP = {}                                         (function(){

MYAPP.calculator = {                                       var MYAPP = {}

    'left' : null,                                                MYAPP.calculator = {

    'right' : null                                               'left' : null,

}                                                                  'right' : null

MYAPP.coordinate = {                                       }

    'left' : null,                                                MYAPP.coordinate = {

    'right' : null                                                          'left' : null,

}                                                                             'right' : null

MYAPP.calculator.left = 10;                                            }

MYAPP.calculator.right = 20;                               MYAPP.calculator.left = 10;

function sum(){                                                MYAPP.calculator.right = 20;

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

function sum(){

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

document.write(sum());                                   }

                                                                document.write(sum());

                                                        }())

오른쪽 코드처럼 함수로 감싸주어 바로 호출할 수 있습니다. = 익명함수

Var MYAPP은 function()내에 있기 때문에 지역변수입니다.

이러한 코드는 자바스크립트에서 로직을 모듈화하는 일반적인 방법입니다.

자바스크립트 유효범위의 대상(함수)

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

 var name = 'coding everybody';               String name = "egoing"; //name은 지역변수

}                                                       }

alert(name);                                         System.out.println(name); //에러가 납니다.

*함수의 중괄호 안에 선언된 변수만이 함수 안의 지역변수이므로 for, if 중괄호에 선언된 함수는 지역변수로의 의미를 가지 않습니다.

자바스크립트 정적 유효 범위

var i = 5; //전역 변수

function a(){

    var i = 10; //지역 변수

    b();

}

function b(){

    document.write(i); //b함수 내에 i라는 변수가 존재하지 않기 때문에 전역 변수를 찾게 된다.

}                         //사용될 때가 아니라 정의될 때의 전역 변수가 사용됩니다. 이를 정적

//유효범위 또는 렉시컬이라고 부릅니다.

a(); //실행 결과는 5

출처 : 생활코딩 강의

JavaScript

JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어입니다. 그렇기 때문에 오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어입니다. 최근에 HTML5의 적용이 가속화되면서 지금까지 모바일 환경에서 네이티브 앱(안드로이드, IOS)으로 구현해왔던 기능이 웹에서도 대부분 구현할 수 있게 되고 있습니다. 웹이 크로스플랫폼이라는 점, 검색 가능하다는 점, 네이티브 디바이스를 제어할 수 있는 하드브리드 시스템(phonegap 등)이 존재한다는 점에서 웹의 중요함은 더욱 확대될 것입니다. 자연스럽게 웹에서 구동되는 유일한 언어인 JavaScript의 중요함도 점점 커질 것으로 예상됩니다.

자바스크립트의 문자 표현 방식

alert(“coding everybody”); 또는 alert(‘coding everybody’);

alert(“coding everybody’); -> 문법에러

typleof는 값의 데이터형을 알려주는 기능입니다.

typeof 1 = “number”

typeof “1” = “string”

문자에 대한 명령들

alert(“coding\neverybody”); : \n은 줄바꿈의 의미를 갖습니다.

alert(“coding”+”everybody”); : 문자와 문자를 더할 때 +를 이용합니다.

alert("coding everybody".length); : 문 자의 길이를 구할 때는 문자 뒤에 .length를 붙입니다.

변수

JavaScript에서 변수는 var로 시작합니다. (문자나 숫자 같은) 값을 담는 컨테이너로 값을 유지할 필요가 있을 때 사용합니다. 여기에 담겨진 값은 다른 값으로 바꿀 수 있습니다. 변수는 마치 (사람이 쓰는 언어인) 자연어에서 대명사와 비슷한 역할을 합니다.

var a = 1; alert(a+1);  //2

var a = 2; alert(a+1);  //3

var first = "coding";

alert(first+" everybody");

변수는 코드의 재활용성을 높여줍니다.

alert(100+10);

alert((100+10)/10);

alert(((100+10)/10)-10);

alert((((100+10)/10)-10)*10);

그런데 계산해야 할 값을 100이 아니라 1000으로 바꿔야 한다면 위의 코드를 모두 수정해야 합니다. 변수를 적용 사용한 코드입니다.

a = 100;

a = a + 10;

alert(a);

a = a / 10;

alert(a);

a = a - 10;

alert(a);

a = a * 10;     

alert(a);

출처 : 생활코딩 강의