210102 자바스크립트 콜백, 클로져 등

전역변수(global var) 지역변수(local var)

다른 js파일(모듈)을 불러와서 함수 사용하는 법

<script src="hello_module.js"></script> <!-- 파일을 불러오는 효과-->

콜백

함수는 함수의 리턴 값으로도 사용할 수 있다.

값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있다.

클로져

외부함수의 지역변수를 따로 정의한 뒤 내부함수의 변수와 이어줌으로써
전역변수와 내부함수의 변수와의 연결고리를 끊어주고
내부함수의 변수가 외부함수의 지역변수를 참조하게 한다.

 

* 생활코딩 - 준바이님 댓글 참조

 

[코드 원본]

var arr = []
for(var i = 0; i < 5; i++){
arr[i] = function(){
return i;
}
}

for(var index in arr) {
console.log(arr[index]());
}

[ 위의 원본에서 반복을 벗겨낸, 사실 상 동일한 코드 ]

var arr = [ ] ;

var i = 0 ;

arr[i] = function() { return i }; // 이 시점에서 arr속의 i 는 0 입니다.
i = i + 1; // i 는 1이 됩니다.

arr[i] = function() { return i }; // 이 시점에서 arr속의 i 는 1 입니다.
i = i + 1; // i 는 2가 됩니다.

arr[i] = function() { return i }; // 이 시점에서 arr속의 i 는 2 입니다.
i = i + 1; // i는 3이 됩니다.

arr[i] = function() { return i }; // 이 시점에서 arr속의 i 는 3 입니다.
i = i + 1; // i는 4가 됩니다.

arr[i] = function() { return i }; // 이 시점에서 arr의 i 는 4 입니다.
i = i + 1; // 바로 이 문장 때문입니다. 반복문에서는 4번째 반복을 마친 후 i++을 한번 더 실행해서 그 다음 조건을 체크 할 때 i가 5보다 작음을 판단하게 되는데 이 코드로써 i 는 5가 됩니다. 계속 보시죠.

// for(var index in arr) 이라는 문법은 기본적으로 index에 arr의 길이만큼을 0에서 부터 대입시킵니다. 즉, 우리 arr의 길이는 5개니까 index에는 순차적으로 0 1 2 3 4 가 대입이 되겠죠. 그래서 반복문을 벗겨내면요,

console.log(arr[0]()); // 5
console.log(arr[1]()); // 5
console.log(arr[2]()); // 5
console.log(arr[3]()); // 5
console.log(arr[4]()); // 5

// 이렇게 되는데요, 이 과정에서 각각 함수를 호출할 때(arr[0]() ~ arr[4])처럼)는 function() {return i}에서 그 i는 그냥 단순히 var i라는 전역변수를 참조하게 됩니다. 그래서 위에서 마지막으로 증가한 값인 가장 최신의 i값인 5가 5번 출력되는 것이죠.

# 참고로, 제가 확인해보니 이런 식으로 사용할 때는 배열을 쓰면 구글 개발자 도구가 버그를 뱉더군요. 그래서 var arr = [ ] 이 아니라 var arr = { }라 해줘야 버그가 안나더라고요.
# 아참 var도 요즘 안씁니다. ( let 에 대해 구글링해서 공부해주세요, block scope와 global scope, function scope 개념 잡으시는 거 선택이 아니라 필수에염)

2. 클로저가 적용된 코드.

[ 코드 원본 ]

var arr = [ ]
for(var i = 0; i < 5; i++){
arr[i] = function(id) {
return function(){
return id;
}
}(i);
}
for(var index in arr) {
console.log(arr[index]());
}

[ 위의 원본에서 반복을 벗겨낸 코드 ]

위의 설명을 통해 똑같이 유추할 수 있는 부분은 설명을 생략합니다.

var arr = [ ]

var i = 0 ;

arr[i] = function(id){
return function( ){
return id;
}
}(i); // 가독성을 위해 이거만 들여쓰기를 할게요. 자자 이게 1번의 문제가 되는 코드와의 차이점은 외부함수와 내부함수를 적용해서 함수안에 함수를 만든 점과, IIFE(https://sseambong.tistory.com/250 , 참고하세요 읽는데 얼마 안걸림)라는 개념을 적용하여서 함수를 즉시 호출하는 방식을 썼다는 점 입니다. 여기서 id를 주목해주세요. i라는 매개변수를 function(id)가 받습니다. 그와 동시에 그 밑에 바로 var id = 전달받은 i라는 값; 라는 문장이 추가 된다고 보셔도 좋아요. ( 더 자세한 메커니즘을 알고 싶다면 '함수 매개변수 전달 과정에서 메모리 복사와 참조' 라는 주제로 공부해보시는 걸 추천합니다. ) 그러면 사실상 함수안에 지역변수를 만든 꼴이 되는거죠 !! 이로써 코드 마지막에 arr[i]()라는 함수는 전역변수인 var i를 리턴하는 함수가 아니라 var id라는 지역변수를 리턴하는 함수가 된 것 이겠죠.

i = i +1;

arr[i] = function(id){ return function( ){ return id; }}(i); // var id는 1
i = i +1;

arr[i] = function(id){ return function( ){ return id; }}(i); // var id는 2
i = i +1;

arr[i] = function(id){ return function( ){ return id; }}(i); // var id는 3
i = i +1;

arr[i] = function(id){ return function( ){ return id; }}(i); // var id는 4
i = i +1; // 아까와의 차이점 이제 아시겠죠? 여전히 이 i는 5겠지만 앞으로 출력할 내용에는 전혀 영향을 미치지 않습니다.

console.log(arr[0]()); // 0
console.log(arr[1]()); // 1
console.log(arr[2]()); // 2
console.log(arr[3]()); // 3
console.log(arr[4]()); // 4

 

Arguments

함수의 정의부분에서 인자에 대한 구현이 없음에도 인자를 전달 할 수 있게 해준다. (유사 배열)

* arguments는 사실 배열은 아니다. 실제로는 arguments 객체의 인스턴스다.

 

상속

객체의 로직을 그대로 물려 받는 또 다른 객체를 만들 수 있는 기능

 

function Ultra(){

    this.name = 'song';

}

function Super(){

    this.gender = 'male';

}

Super.prototype = new Ultra();

var o = new Super();

var k = new Ultra();

console.log(o.name,o.gender); // 결과 : song male

console.log(k.name,k.gender); // 결과 : song undefined

 

Prototype

객체의 원형을 가르킨다.

[Javascript ] 프로토타입 이해하기. 자바스크립트는 프로토타입 기반 언어라고 불립니다. 자바스크립트 개발을… | by 오승환 | Medium

[Javascript ] 프로토타입 이해하기

Call, Apply, This

[자바스크립트] API - call, apply 함수 (tistory.com)

[자바스크립트] API - call, apply 함수

[자바스크립트] this 객체의 정체 (tistory.com)

[자바스크립트] this 객체의 정체

this | PoiemaWeb

this | PoiemaWeb

 

**링크 참조

 

  function Person(name, gender) {

    a = name;

    b = gender;

  }//생성자

  

  var me  = new Person('Lee', 'male');

  console.dir(me);

  var you = new Person('Kim', 'female');

  console.dir(you);

-> 이 경우 me,you 객체에는 아무 것도 없게된다.

 

this.a = name;

this.b = gender; 로 바꾸어 주어야 각각 객체에 입력값이 들어간다.