[JS] 생활코딩 섹션 10, 13,14,15

유누윤·2022년 9월 26일
JavaScriptjs생활코딩
0

섹션 10. 모듈

모듈이란? 여러 기능들에 관한 코드가 모여있는 하나의 파일

모듈사용의 장점

  1. 재사용성 : 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다.
  2. 유지보수성 :
  • 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
  • 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
  • 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
  • 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있다. (브라우저에서만 해당)

섹션 13. 유효범위(scope)

예제 1.

        var vscope = 'global';
          function fscope(){
              alert(vscope);
          }
        fscope();
        
        //결과값 :  'global'

fscope의 값은 global을 호출한다. --> 함수 바깥에 있는 변수에 접근할 수 있다.

예제 2.

        var vscope = 'global'; //전역변수 (global variable)
          function fscope(){
              var scope = 'local'; //지역변수 (local variable)
              alert(vscope);
          }
        fscope();
        
        //결과값 :  'local'

function 바깥에 있는 변수를 전역변수(global variable)
function 안에 있는 변수를 전역변수(local variable)라고 한다.

예제 3.

       var vscope = 'global';
       function fscope(){
           var scope = 'local';
           var lv = 'local variables'
           alert(vscope);
       }
       fscope(); //결과값 :  'global'
       alert(lv); //결과값 :  undefined

함수 내에서 만들어진 lv는 지역변수이고 지역변수는 그 지역에서만 접근할 수 있다.

예제 4.

        var vscope = 'global';
        function fscope(){
            vscope = 'local'; 
            alert(vscope);
        }
        fscope(); //결과값 :  'local'
        alert(vscope); //결과값 :  'local'

function fscope()안의 vscope는 전역변수인 vscope인 global을 재 할당한것이다.
따라서 지역변수가 아니다.

예제 5.

		var vscope = 'global';
       function fscope(){
           var vscope = 'local'; //지역변수 생성
           vscope = 'local'; //지역변수의 값을 재할당함
           alert(vscope);
       }
       fscope(); //'local'
       alert(vscope); //'global'
  • 왜 전역변수를 사용해야하는지 구체적인 이유가 없다면 지역변수를 사용해야 한다.
  • 수많은 함수를 만들어가는 과정에서 함수가 결합되는 가정중 똑같은 변수를 다른의미에서 사용할 때가 있다, 그러면 함수의 동작도 달라지게 됨으로 전역변수는 필요할때만 사용하는것이 좋다.

유효범위의 효용

	function a (){
    	var i = 0;
    }
    for(var i = 0; i < 5; i++){
       a();
   	   document.write(i);
    }//01234

    function a (){
        i = 0;
    }
    for(var i = 0 ; i < 5; i++){ //for문에서의 i는 전역변수이다.
        a();
        document.write(i);
    }

상단의 function은 무리없이 결과값이 나오지만
하단의 function은 무한루프가 반복된다.
같은이름의 변수를 중복해서 사용했지만 각각의 취지가 다를때 문제가 발생한다.

전역변수의 사용

  1. 하나의 객체를 전역변수로 만들고 객체의 속성으로 변수를 관리하는 방법
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());
  1. 익명함수를 사용
(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());
}())

MYAPP은 함수안에서 호출되기때문에 더이상 전역변수가 아니라 지역변수가 된다.
단 하나의 전역변수도 허용하고 싶지 않다면 이렇게 익명함수를 사용한다.

유효범위의 대상 (함수)

자바스크립트에서 지역변수를 허용하는것은 함수에 한해서이다.
많은 언어들이 블록단위의 유효범위를 지정하는것과는 조금 다르다.

for(var i = 0; i < 1; i++){
    var name = 'coding everybody';
}
alert(name);

해당 name변수는 for문 안의 중괄호 안에서만 유효한 변수가 아니고 for문 바깥에서도 유효한 변수이다.
자바스크립트에서는 함수 외 for문이나 if문 같은 곳에서는 중괄호 안에 쓰여진 변수는 지역변수로서의 의미를 갖지 않는다.

유효범위에 대해 조금 더 디테일한 정보

정적 유효범위

  • 함수가 선언된 시점에서의 유효범위를 갖는다.
  • 이러한 유효범위의 방식을 정적 유효범위(static scoping), 혹은 렉시컬 스코핑(lexical scoping) 이라고 한다. 
var i = 5;//전역변수
 
function a(){
    var i = 10;//지역변수
    b();
}

function b(){
    document.write(i);
}

a();

사용될때 가 아니고 정의될때 당시의 변수가 사용된다. --> 정적 유효범위 or lexicl scoping

섹션 14. 값으로서의 함수와 콜백

자바스크립트에서 함수는 값이다. 

//예제 1. 

var a = "value"; 
//변수 a에 "value"를 담을 수 있는 이유 :  "value"가 값이라서

//예제 2. 

function a(){}
var a = function(){}

//예제 3. 

a = {
    b:function(){
    }
    //b:key--> key가 어떠한 값을 저장하고있는 변수와 같은 역할을 한다.
    //프로퍼티안의 값이 함수이면 "메소드" 라고 한다
};
  • 결론적으로 함수는 변수, 매개변수, 함수의 리턴값등등에 사용될 수 있다
  • 이렇게 함수처럼 다양한 형태로 사용될 수 있는 데이터를 first-class object라고 부른다.

콜백

함수의 인자로 함수가 들어가는 경우 콜백이라고 한다.

콜백함수 사용 원칙

  1. 익명 함수 사용
let number = [1, 2, 3, 4, 5];
 
number.forEach(function(x) {
    console.log(x * 2);
});
  1. 함수의 이름(만) 넘기기
function whatYourName(name, callback) {
    console.log('name: ', name);
    callback();
}
 
function finishFunc() {
    console.log('finish function');
}
 
whatYourName('younu', finishFunc);

콜백함수 추가 정보

섹션 15. 클로저(closure)

클로저란? 외부함수(포함하고 있는)의 변수에 접근할 수 있는 내부 함수
개발자도구에 의해 변경되어서는 안되는 중요한 정보를 전역변수로 만들지 않고 지역변수로 만들어서 변수를 보호하는 기법.

function outter(){//외부함수
   var title = 'coding everybody';  //외부함수에서 선언된 지역변수
   function inner(){//내부함수  
       alert(title);
   }
   inner();
}
outter();

내부함수는 외부함수의 지역변수에 접근할 수 있다.

function outter(){
    var title = 'coding everybody';  
    return function(){        
        alert(title);
    }//내부함수를 리턴 (outer함수는 더이상 사용하지않는 함수이다.)
}
var inner = outter();
inner();//결과값 : 'coding everybody'

내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다.

클로저 함수의 활용

  1. 데이터를 보존할 수 있다.

    클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있다.
    클로저는 이처럼 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게하는 폐쇄성을 갖는다.

  2. 정보의 접근 제한 (캡슐화)
    ‘클로저 모듈 패턴’을 사용해 객체에 담아 여러 개의 함수를 리턴하도록 만든다.
    이러한 정보의 접근을 제한하는 것을 캡슐화라고 한다.

  3. 모듈화에 유리하다.
    클로저 함수를 각각의 변수에 할당하면 각자 독립적으로 값을 사용하고 보존할 수 있다.
    클로저를 통해 데이터와 메소드를 묶어다닐 수 있기에 클로저는 모듈화에 유리하다.

profile
유누윤
이전 포스트

[JS] 생활코딩 섹션 8-9

다음 포스트

[JS] 생활코딩 섹션 16, 17

0개의 댓글