TIL no.17

손병진·2020년 8월 13일

TIL

목록 보기

17/22

함수의 유효 범위

전역변수와 지역변수

var vscope = 'global';// 전역변수
function fscope(){
  	var vscope = 'local';// 지역변수
    alert(vscope);
}
fscope();// local 출력
alert(vscope);// global 출력

// var 한번 사용
var vscope = 'global';
function fscope(){
    vscope = 'local';// 전역변수(vscope)를 지칭
}
fscope();
alert(vscope);// local

// var 두번 사용
var vscope = 'global';
function fscope(){
	var vscope = 'local';
    vscope = 'local';// 지역변수(vscope)를 지칭
}
fscope();
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++){
    a();// 전역변수 i 값을 계속 0으로 초기화시켜 버린다
    document.write(i);
}// 무한 루프

전역변수

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());

//전역변수를 사용하고싶지 않을때(익명 함수)
(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(var i = 0; i < 1; i++){
    var name = 'coding everybody';
}
alert(name);// coding everybody 출력됨. 왜일까?? 지역변수 아닌가??
// 함수 {} 에서 선언된 변수만이 지역변수이고, for / if 등의 {} 에서는 아니다

정적 유효범위

var i = 5;
 
function a(){
    var i = 10;
    b();// 함수 b가 사용되는 시점 i=10(지역변수)
}
 
function b(){
    document.write(i);// 함수 b가 정의되는 시점 i=5(전역변수)
}
 
a();// 5 출력, 정의되는 시점의 값이 활용된다(정적 유효범위)
// 사용되는 시점의 값이 활용된다면? 동적 유효범위

값으로서의 함수와 콜백

함수의 용도 1

변수에 담길 수 있다

// 동일한 표현
function a(){}
var a = function(){}

// 객체(용어 확인)
a = {//  변수
	b:function(){}// key(속성):value(메소드)
}

// 함수를 인자를 통해 전달 가능
function cal(func, num){// func: 함수를 인자로 활용
    return func(num)
}
function increase(num){
    return num+1
}
function decrease(num){
    return num-1
}
alert(cal(increase, 1));// 2
alert(cal(decrease, 1));// 0

함수의 용도 2

return 값으로 활용
배열의 값으로 활용

//return
function cal(mode){
    var funcs = {
        'plus' : function(left, right){return left + right},
        'minus' : function(left, right){return left - right}
    }
    return funcs[mode];
}
alert(cal('plus')(2,1));// 3
alert(cal('minus')(2,1));// 1

//array
var process = [
    function(input){ return input + 10;},
    function(input){ return input * input;},
    function(input){ return input / 2;}
];
var input = 1;
for(var i = 0; i < process.length; i++){
    input = process[i](input);
}
alert(input);/*
11 (1 + 10)
121 (1 * 11)
60.5 (121 / 2)
*/

콜백

기존 메소드의 원칙을 함수 인자를 통해서 변경할 수 있다

var numbers = [20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
console.log(numbers.sort());
// [1, 10, 2, 20, 3, 4, 5, 6, 7, 8, 9]

var numbers = [20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
var sortfunc = function(a,b){
  if (a>b){
  	return 1;
  }else if(a<b){
  	return -1;
  }else{
  	return 0;
  }
}
console.log(numbers.sort(sortfunc))
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20]

function sortNumber(a,b){
    return a-b;
}
var numbers = [20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
alert(numbers.sort(sortNumber)); 
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20]