섹션 13. 함수지향 - 유효범위 (시즌2 시작)
1강. 전역변수와 지역변수
JavaScript : 함수형 언어, 함수가 매우 중요하다.
유효범위(Scope) : 변수의 수명
1) 지역(local) 변수와 전역(global) 변수
지역변수는 함수의 안( { 와 } 사이)에서 먼저 변수를 찾고, 없으면 밖에서 변수를 찾는다.
전역에서 접근할 수 있다는 의미로 전역변수라고 칭한다.
함수 안에서만 접근 가능한 변수가 지역변수이다.
로컬 변수를 만들 때 var이라는 키워드를 쓰게 되면 var 뒤에 따라오는 변수는 local 변수가 된다.
var를 사용하지 않으면 전역 변수로 인식하기 때문에 전역 변수로서의 결괏값이 출력된다.
var vscope = 'global';
function fscope() {
var vscope = 'local'; //var 사용한 경우 : global
}
fscope();
alert(vscope);
var vscope = 'global';
function fscope() {
vscope = 'local'; //var 제거하면 local 이 된다.
}
fscope();
alert(vscope);
2) 결론
- 전역변수를 왜 써야 하는지 명확하게 정의가 안되어 있다면, 지역변수를 써라!
- 프로그램은 작은 것에서 큰 것으로, 간단한 것에서 복잡한 것으로 만들어가기 때문이다.
- 같은 이름의 변수를 다른 의미로 사용하면 안 되기 때문에 지역변수를 쓰는 것이 맞다.
- 함수 안에서만 의미 있는 것을 써야 한다.
- 전역 변수는 금기시한다고 생각해도 된다.
- 변수를 선언할 때는 var 써라.
2강. 유효범위의 효용성
이름 충돌을 막기 위해서 지역변수를 사용하고, 지역변수 앞에 자신의 닉네임을 붙이기도 한다.
function a (){
var i = 0; //결과 01234
// i=0; // 결과 무한반복
}
for(var i = 0; i < 5; i++){
a();
document.write(i);
}var로 선언하지 않으면 i 가 전역변수이면서 지역변수가 되기 때문에 무한루프가 된다.
3강. 전역변수를 사용하는 법
불가피하게 전역변수를 사용해야 하는 경우는 하나의 객체를 전역변수로 만들고, 객체의 속성으로 변수를 관리한다.
var MYAPP = {} //{}는 객체를 의미
MYAPP.calculator //객체.calculator : 객체 안에 있는 속성을 의미
MYAPP.calculator.left : 객체 내의 속성의 속성이라 겹칠 가능성이 현저히 낮아진다.
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(){}())
(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());
}())
4강. 유효범위의 대상
지역변수를 선언할 수 있는 곳은 함수로 제한된다.
= 자바스크립트는 함수에 대한 유효범위만을 제공한다.
= 함수 밖으로 나가면 아무 것도 아니다.
많은 언어들이 블록(대체로 {,})에 대한 유효범위를 제공하는 것과는 다른 점이다.
5강. 정적 유효 범위
JavaScript는 함수가 선언된 시점에서의 유효범위를 갖는다.
이런 유효범위의 방식을 정적 유효범위(static scoping), 어휘적 유효범위 렉시컬(lexical scoping)이라고 한다.
사용될 때(X)
정의될 때(O) -- 정적인 것
섹션 14. 함수지향 - 값으로서의 함수와 콜백
1강. 함수의 용도 - 1
JavaScript에서는 함수도 객체이기 때문에 일종의 값이라고 볼 수 있다.
함수가 값이 될 수 있다는 점이 자바스크립트와 다른 언어의 차이점 중 하나이다.
함수 = 값
- 변수에 담을 수 있다.
var a = "value"
var a = function( ){ }
a라고 하는 객체 안에는 b라고 하는 속성이 담겨있음. 속성의 값은 함수. 이 함수를 메서드(method)라고 부름
- a = {
b:function () { //b: key, 값을 저장하는 그릇. function () : key 의 값(value)
}
}; - b는 변수와 같은 역할을 하고 있다. 어떤 값을 저장하고 있기 때문에
- key가 값을 저장하고 있다는 것은 변수의 역할을 한다는 것이고, 객체 안에서 변수 역할을 하는 것을 속성(property)이라고 함.
- 속성에 저장되어있는 값이 함수라고 한다면 이 함수를 메서드(method)라고 부름
- 그냥 정의되면 함수, 객체 안에서 정의되면 메소드!
함수는 값이기 때문에 다른 함수의 인자로 전달될 수도 있다.
2강. 값으로서의 함수와 콜백 - 함수의 용도 2
1) 함수는 함수의 리턴 값으로도 사용할 수 있다.
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));
alert(cal('minus')(2,1));
2) 함수는 배열로 사용이 가능하다.
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);
3) 함수의 사용
first-class citizen(object, entity, value) : 다양한 용도로 사용할 수 있는 데이터를 부르는 이름
- 변수
- 매개변수
- 리턴값
3강. 값으로서의 함수와 콜백 - 콜백이란?
콜백 : 어떠한 함수가 수신하는 인자가 함수인 경우
- members.sort(); 에서
members : 배열이 들어있는 객체
sort : 배열에 속한 함수 → 메서드
사용자 정의 함수(객체) vs 내장 함수
- 언어에서 기본으로 제공하는 항목은 알고 있어야 한다. (ex. sort)
var numbers = [3,4,5,6,7,89,9,7,5,4]
console.log(numbers.sort());
alert(numbers.sort());위와 같이 코드를 쓰면 정렬의 문제가 발생한다.
숫자를 크기 순으로 정렬한 것이 아니라 텍스트 형식으로 제일 앞의 문자열 기준으로 정렬한 것.
var numbers = [3,4,5,6,7,9,89,5,4];
var softfunc = function(a, b){
return a - b;
}
console.log(numbers.sort(softfunc));
alert(numbers.sort(softfunc));이와 같이 코드를 수정하면 오름차순으로 정렬된다.
내림차순으로 정렬하려면 return b-a; 로 코드만 바꿔주면 된다.
여기서 sortfunc 함수가 콜백함수가 된다.
sort라는 매소드가 인자로 sortfunc를 받는 것이다.
그게 가능한 이유는 JavaScript의 함수가 값이기 때문이다.
4강. 비동기 콜백과 Ajax
시간이 오래 걸리는 작업이 있을 때, 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 작업이 끝났을 때 미리 등록한 작업이 실행되도록 만들 수 있다.
1) 동기적 처리(Synchoronous)
위에서 아래로 순서대로 실행이 되는 것을 말한다. 지금 작업이 끝나면 다음 작업으로 넘어가고, 그 작업이 끝나면 또 다음 작업으로 넘어가는 방식이다.
- 예 : 파일 하나씩 받기
2) 비동기적 처리(Asynchronous)
순서대로 진행하는 것이 아니라 한 번에 여러 개가 진행되는 것을 말한다. API요청, 암호화, 파일 읽기, 복호화 등에서 자주 사용된다. callback 함수와 promise, async/await 문법 등이 이에 속한다.
- 예 : 파일 한번에 받기
동기 : sync
callback function
다른 함수의 실행이 끝난 뒤 실행되는 함수를 말한다.
전달인자로 다른 코드의 인수로서 넘겨주는 실행 가능한 코드
3) Ajax : JavaScript and XML
- 비동기적 웹 애플리케이션 제작을 위해 여러 조합을 이용하는 기법.
- 웹브라우저가 내부적으로 조용히 통신하는 기법을 말한다.
- 웹이 단순한 문서를 벗어나서 동작을 가능하게 하는 기법이 Ajax이다.
$ : jQuery의 객체
- 예 : $.get
