Js 문법 함수. ft. 클로저

클로저

(i) 내부함수에서 외부함수의 변수에 접근이 가능하다.

(현재 실행컨텍스트의 변수가 없으면 계속해서 상위 컨텍스트의 변수를 찾아간다.)

(그래서 우선순위는 해당 변수에 대한 우선순위는 현재 실행컨텍스트, 내부 함수의 변수가 높다.)

 

 

밖에서는 보이지 않는 유리창,

 

(ii). 외부함수가 생을 마감할 지라도 내부 함수의 동작은 자기스스로 생을 마감할때 까지 계속된다.

도마뱀 다리 잘린거나,, 목이 잘린 닭을 생각 해보자

 

 

var swCho = {name: 'sw.Cho'
    , age: 99
    , size: {tall: 200, weight: 100}
    , hobby: 'show Youtube'
    , future: 'to be chicken King'};

 

Object를 deepCopy하는 함수. 책과는 다르게 짜 보았다.

 

testO = {
  a : {aa: 'hello'}
}

var recursiveF = (obj) => {
  //var가 있고 없고에 따라 완전히 달라진다.
  (var) r  = 5;
  if(typeof obj !== 'object' || obj === null)
     return;
  r+=100;
  recursiveF();
  return r;
}

console.log(recursiveF(testO));

 

재귀 함수는 함수내에 함수가 하나씩 더 만들어진다고 생각하면 좋다.

​

var가 있으면... 컨텍스트가 함수*2(재귀한번)의 r이 실행된다. 답 : 105

var가 없으면 같은 컨텍스트의 변수r이 없으니 상위 컨텍스트의 r이 실행된다. 답: 5

 

function outer() {
  var inner = function() {
    console.log('hi');
  }
  return inner;
}

outer()();

// 신기하쥬?? ㅎ

 

자스에서는 이런 것도 된다!! 자.. 차차 더 알아보도록 하자!

​

​

외부 함수에서 함수 혹은 객체를 반환 할 때를 보자.

 

1) 함수를 반환할 때

var outer = () => {
    return ()=>{
        console.log(`hi`);
    }
}
outer()(); // hi

 

var fn_a = () => {
    var fn_b = () => {
        return {
            q : ()=>console.log(`hi`);
        }
    }
}

fn_a. // 이 밑으로 함수를 호출하지 못하는 것으로 보인다.. 이렇게 활용하는 게 가능한지..

 

2) 객체를 반환할 때

 

var outer = () => {
    return {
        a : ()=>console.log(`hi`)
    }
}

outer().a(); // hi

outer함수를 호출 한 다음, a속성의 값에 해당하는 함수를 호출하면 된다.

호출한다는 것은 ()를 붙이는 것이다!

 

 

var fn_aa = ()=>{
    return {
        q: ()=> console.log('><'),   
        w: 3,
        e: '><'
    }
}
   
typeof fn_aa; // fn
typeof fn_aa(); // obj

참고!

 

 

---

 

 

 

참고... 근데 이게 내가 알기론 함수가 저장되기 떄문에,

호출시 최종 전역변수 값인 5가 출력돼야 한다.

또, let과 var이 다르다..

너무 깊게 파면 안 될 것같다... 아직은 안됀다.. 기초 문법만 좀 판단 생각으로 하자! ㅠㅠ

 

var outer = () => 
{
    console.log(`outer함수 호출`);
    var i=1;
  
    var inner = ()=> 
    {
        if(i===1)
            console.log(`inner 최초 호출`);
        if (i>=5)
            return;
        setTimeout( ()=>{
        console.log(`${i++} : 아직 inner는 살아 있어!`);
        inner();
    }, 750)
    }
    console.log('outer 함수는 종료되었습니다.');
    return inner();
}

outer();
// 만일 return inner라면 outer()()로 호출해야 한다.

 

클로저 (ii)에 해당하는 것, 자바에서도 이런 현상이 나타나는 지 확인해보도록 하자

​

함수 안에 함수

 

package youSoCute;

public class jsClosure {
	public static void main(String[] args) {
		outer();
	}
	static int outer() {
		System.out.println("나는 outer야, 그리고 종료돼.");
		return inner();
	}
	static int inner() {
		for(int i=1; i<=4; i++) {
			delay(1000);
			System.out.println("나는 inner야 아직 살아있어!");
		}
		return 0;
	}
	
	static void delay(int ms) {
		try {
			Thread.sleep(ms);
		} catch (InterruptedException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
}

/*
나는 outer야, 그리고 종료돼.
나는 inner야 아직 살아있어!
나는 inner야 아직 살아있어!
나는 inner야 아직 살아있어!
나는 inner야 아직 살아있어!
*/

 

클래스 안에 클래스

 

package youSoCute;

public class jsClosure {
	public static void main(String[] args) {
		Outer o = new Outer();
		o.print();
	}
}

class Outer {
	int print() {
		System.out.println("나는 outer야, 그리고 종료돼.");
		Inner i = new Inner();
		return i.print();
	}
}

class Inner {
	int print() {
		for(int i=1; i<=4; i++) {
			delay(1000);
			System.out.println("나는 inner야 아직 살아있어!");
		}
		return 0;
	}
	
	static void delay(int ms) {
		try {
			Thread.sleep(ms);
		} catch (InterruptedException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
}

 

자바에서도 위와같이 비슷하게 해 보았는데.. 클로져 (ii)처럼 동작한다.

 

 

---

 

기타(1)

 

function facMovie(title) {
    return {
        getTitle : ()=> title,
        setTitle: (_title) => {title = _title}
        }
}

ghost = facMovie('Ghost in the shell');
matrix = facMovie('Matrix');
 
console.log(ghost.getTitle()); console.log(matrix.getTitle());
 
ghost.setTitle('공각기동대');
 
console.log(ghost.getTitle()); console.log(matrix.getTitle());

 

egoing님의 코드를 arrowFunc으로 한것...

기타 (2) :  ..JS의 옛 문법의 잔재..

 

if (true) {
    var a=5;
}
console.log(a); // 5

if (true) {
    let a=5;
}
console.log(a); // Uncaught ReferenceError: b is not defined

 

정말 쌉막장이다..

​

​

var 변수가 안좋은 것.

* var hoisting이 일어난다 -> 선언부와 할당부가 나뉘어 .. 컴파일하기 힘들고 예측하기도 힘들어.

* 내부에서 선언되어 소멸할 변수가 외부에서도 보인다.. 클로져랑은 다른 현상처럼 보인다.. 해괴하다.

이것은 ES6에 와서

let이 나오고, 'use strict'를 통해서 원천적으로 막을 수 있다.

또한 함수에 대한것은 함수 변수표현식으로 사용하면 hoisting을 막을 수 있다.

변수 타입이 너무 자연스러워서 type script가 나왔다 한다.

​

** 결론.. 옛 JS는 너무나도 자유로워서 규칙을 제한하는 느낌으로.. 질서정연한 방식으로 가고 있다.

느낌 : 언어들간에 서로 닮아가는 것 같다. 옛날에는 자바에 for(i in arr)이런 구문이 없던게 python?등의 영향으로 생기고.. js에도 생기고, 자바에는 람다가 있다면 js에는 arrow function 이 있다.