이 글은 Joel Thoms의 "자바스크립트에 대한 애정을 언어의 90%를 쓰레기통에 버리면서 다시 발견했던 과정"을
 번역한 글을  보고, 번역이 안된 중요 부분을 추가 번역 한 것입니다.

[번역] 자바스크립트에서 for 루프를 다시 생각해보자 

JavaScript 의 for  루프는 나름 그 역할을 잘 해주었지만, 이제는 쓸모가 없어졌으며 새로운 함수형 프로그래밍 기술에 의해 은퇴 해야 할 때로 보입니다.걱정은 하지 마세요 굳이 함수형 프로그래밍 마스터가 될 필요는 없습니다. 그저 현재의 프로젝트에서 바로 시작 해 볼 수 있는 간단한 (하지만 쿨한) 녀석입니다.

JavaScript for loop의 문제점은 무엇일까요?

for 루프는 상태 변이와 부수효과을 조장합니다. 그 결과  각종 버그와 예측할 수없는 코드의 잠재적인 원인이 되곤 합니다. 우리는 모두 전역 상태가 나쁘다는 말을 들었습니다. (지역상태도 전역상태와 같이 악을 공유하고 있지만, 규모가 작기 때문에 큰 문제가 되진 않았습니다.) 하지만 우리는 실제로 문제를 해결하지 못했으며 단지 그것을 최소화 하는데 주력 하였지요.

가변적인 상태에서 - 알 수 없는 특정 시점에 - 변수가 알려지지 않은 이유로 - "변경" 되어, 그  값이 변경된 이유를 디버깅하고 검색하는 데 몇 시간을 소비하게됩니다. 뭐 머리 좀 쥐어 뜯으면 되겠지요. 하지만 머지않아..머리카락이 그리워질 거에요.

이제 그 부수효과에 대해 재빠르게  이야기해 보죠. 이 단어가 별로 와닿지 않는다면 그냥 끔찍한 부작용으로 생각하는게 좋을거 같습니다. 혹시 당신의 몸에 부작용이 생기길 바랍니까? 아니죠?  마찬가지로 프로그램에 부작용이 있기를 원하십니까? 역시 아니겠죠?  네 저는 제 프로그램에 부작용이 생기는 것을 원하지 않습니다! 따라서 이 문제에 대해서 좀 적극적으로 행동 했습니다.

그럼 부수효과가 무엇일까요?

함수가 함수 범위 밖의 어떤 것을 수정할 때 부수효과가 있는 것으로 간주합니다. 멤버 변수의 값을 변경하거나, 키보드 입력을 읽거나, API 호출을하거나, 디스크에 데이터를 쓰고, 콘솔에 로깅하는 등의 작업등이 그것 들이죠.

부수효과은 강력하고 효율적인것 처럼 보이기도 하지만  그 만큼 큰 책임이 따릅니다.  

자기도 모르게 떠 안을 수 있는 큰 책임을 줄이기 위한 방법은 가능한 경우 부수효과를 제거하거나 캡슐화하여 관리해야 합니다. 부수효과가 있는 기능은 테스트하기가 어렵고 추론하기도 더 어렵습니다. 가능한 한 제거 하십시요. 그렇다면 우리는 부작용에 대해 걱정하지 않게 될  것입니다.

좋습니다.  
썰은 그만 풀고 개발자 답게 코드로 봅시다. 아마 수천 번 이상 본 전형적인 for 루프를 살펴 보겠습니다.

const cats = [
  { name: 'Mojo',    months: 84 },
  { name: 'Mao-Mao', months: 34 },
  { name: 'Waffles', months: 4 },
  { name: 'Pickles', months: 6 }
]
var kittens = []

for (var i = 0; i < cats.length; i++) {
  if (cats[i].months < 7) {
    kittens.push(cats[i].name)
  }
}
console.log(kittens)

앞으로 이 코드를 단계별로 리팩터링하여 좀 더 아름답게 변형하는 것이 얼마나 쉬운지 확인 시켜 드릴 것입니다.

1. 첫 번째로 변경하고자 하는 것은 if 문을 자체 함수로 추출하는 것입니다.

const isKitten = cat => cat.months < 7
var kittens = []
for (var i = 0; i < cats.length; i++) {
  if (isKitten(cats[i])) {
    kittens.push(cats[i].name)
  }
}

일반적으로 if 문을 추출하는 것은 가독성에 매우 좋습니다. 즉 마법수 같은 느낌의 "7 개월 미만" 이라는  표현보다는 "새끼 고양이" 로 필터링을 변경하는 것은 생각보다 매우 중요한 일이죠. 이제 코드를 읽을 때 의도가 명확 해집니다. 왜 태어난지 7개월 미만의 고양이를 구하는거야? 우리의 의도는 새끼 고양이를 찾는 것입니다, 그래서 코드가 그렇게 말하게 만드십시오! 읽는 사람도 매우 편해 할 것입니다.

또 다른 이점은 isKitten이 이제 재사용이 가능하다는 것입니다.

코드를 재사용 가능하게 만드는 것이 항상 우리의 목표 중 하나가되어야합니다.

2. 다음 변경은 cat 형식의 개체에서 이름으로 변환하는 부분을 추출하는 것입니다. 이 변환의 목적은 나중에 자세히 이해할 수있게 될 것이므로 지금 당장은  그냥 믿어 봅시다.

const isKitten = cat => cat.months < 7
const getName = cat => cat.name
var kittens = []
for (var i = 0; i < cats.length; i++) {
  if (isKitten(cats[i])) {
    kittens.push(getName(cats[i]))
  }
}

필자는 filter 와 map의 메커니즘을 설명하기 위해 몇 단락을 작성하는 것을 고려했지만 그것들을 설명하지 않고서도 그냥 이 코드를 읽고 이해할 수 있다는 것을 보여 주기 위해 건너 뛸 것입니다. filter 문은 조건문과 매칭되고, map 은 변환과 매칭된다는것을 알 수 있을 것 입니다. 반복해서 보세요. 
많은 경우 이해 안되는것도 반복해서 보면 이해가 되기 마련입니다. 

const isKitten = cat => cat.months < 7
const getName = cat => cat.name
const kittens = cats.filter(isKitten).map(getName)

우리는 for 문과 kittens.push (...)를 제거했으며 더 이상 var이 사용되지 않게 됩니다. 
즉 상태의 변경이 없어 졌습니다. const 세상이 되었습니다.

const (var와 let보다)를 사용하는 코드는 섹시합니다.

3. 필자가 제안 할 마지막 리팩토링은 필터링과  매핑을 자체 함수로 추출하는 것입니다. 모두 함께 묶어 보시죠. (역주: for 문에서 i 변수를 쫒아가며 남이 짠 혹은 자신이 예전에 짠 코드를 이해할 필요가 없이 자연스럽게 소설 읽듯이 변화 되었습니다.)

const isKitten = cat => cat.months < 7
const getName = cat => cat.name
const getKittenNames = cats =>
  cats.filter(isKitten)
      .map(getName)
const cats = [
  { name: 'Mojo',    months: 84 },
  { name: 'Mao-Mao', months: 34 },
  { name: 'Waffles', months: 4 },
  { name: 'Pickles', months: 6 }
]
const kittens = getKittenNames(cats)
console.log(kittens)

추가 번역 예정 글 ) 

- if 문을 다시 생각해보자.  
- switch 문에게 마지막 인사를  
- 악의 축이던 this 없는 자바스크립트 프로그래밍  

안녕하세요 (_._)  

"프로 자바스크립트 테크닉" 과  "인사이드 자바스크립트"라는 책을 참조하여 문제를 만들었습니다.

언어를 공부하는 방법으로는  직접만들거나, 다른언어와의 비교를 통해서 습득하는 방법 말고도

문제를 풀면서 언어를 공부하는것도 지겨운 공부를 재밌게하는 방법중 하나라고 생각합니다 :-D

* 함수라 쓰고 객체라 읽는다.

* 함수안에 함수가 있는것이 모든 혼란의 근원이지만,  정수가 된다."

자 렛츠고~!!

1 번 .  다음 구문은 올바른 것인가?   (DOM)

html ====================================

<input id="input1" type="text" value="값" />  

javascript ================================

var inputTxt = document.getElementById('input1'); 

inputTxt.text("hi");   

2 번. 다음 구문은 올바른 것인가?  (DOM & Jquery)

 html ====================================

<input id="input1" type="text" value="hello" />  

javascript ================================

var t = $("#input1");

alert(t.text());

alert(t.html());

alert(t.val());

t.text("bye");

3번. 다음을 실행하면 결과는 ?    (객체 생성 방법)

 var People1 = { age : 44, name : 'brad' };

 function People2(name, age){

 	this.age = age;

 	this.name = name;

 };

var People3 = function (name, age){

 	this.age = age;

 	this.name = name;

 };

 var brad = new People3('brad', 30);

 console.log(brad.age);     // ??

4번. 다음을 실행하면 결과는 ?   (일급함수)

var foo = function(){
			return function(){

 				console.info("hi");

                    };

           };


var bar = foo();

bar();  // ??

5번. 다음을 실행하면 결과는 ?   (즉시실행함수)

(function(name){

	console.info("hello -> " + name);

})("brad");

6번. 다음을 실행하면 결과는 ?    (애매한 자바스크립트의 this) 

var name = "outside name";

var myObject = {

			name: "foo",

			sayName : function(){

					console.info(this.name);

			}

};


var otherObject = { name : "bar" };

otherObject.sayName = myObject.sayName;

myObject.sayName();  // ??

otherObject.sayName();  // ??

7번. 다음을 실행하면 결과는 ?    (애매한 자바스크립트의 this) 

var name = "outside name";

var myObject = {
		name: "foo",
		sayName : function(){	
				var name = "inside name";
				console.info(this.name);
		}
};

var otherObject = { name : "bar" };

otherObject.sayName = myObject.sayName;

myObject.sayName(); 
otherObject.sayName();

8번. 다음을 실행하면 결과는 ? (애매한 자바스크립트의 this) 

var value = 100;

var myObject={

	value : 1,

	func1 : function(){

			this.value +=1;

			console.log(" func1 this.value : "+ this.value);	

			func2 = function(){

				this.value += 1;

				console.log(" func2 this.value : " + this.value);

			}

			func2();

		}

}; 

myObject.func1();  // ??

9번. 다음을 실행하면 결과는 ? (애매한 자바스크립트의 this) 

name = "john";

var myObject = {

	name  : "foo",

    func1 : function(){

		 sayName =  function() {

				console.log("My name is " + this.name);     

				};

      	         sayName();  

            } 
};

myObject.func1();  // ??   

10번. 다음을 실행하면 결과는 ?   (클로저)

function outerFunc(){

	var x = 10;

	var innerFunc=function(){ console.log(x)};

	return innerFunc;

}

var inner = outerFunc();

inner();  // ? 

11번. 다음을 실행하면 결과는 ?     (모듈패턴)

var module = (function () {

    var privateKey = 0;

    function privateMethod() {

        return ++privateKey;

    }

    return {

        publickey : privateKey,

        publicMethod : function () {

            return privateMethod();

        }

    }


})();


console.log(module.publicMethod()); // ?

console.log(module.publicMethod()); // ?

console.log(module.publickey);          // ?

12번. 다음을 실행하면 결과는  참인가 거짓인가 ?    (객체 참조)

var items = new Array('one','two');

var itemsRef = items;

items.push('three');


alert (items.length == itemsRef.length);  // ??

13번. 다음을 실행하면 결과는  참인가 거짓인가 ?   (객체 참조) 

var items = new Array('one','two');

var itemsRef = items;

items = new Array("new");


alert (items == itemsRef); // ??

14번. 다음을 실행하면 결과는  참인가 거짓인가 ?   (문자열 과  참조) 

var item = "test";

var itemRef = item;

item += "ing";

alert(item == itemRef);  // ??

15번. 다음을 실행하면 결과는  참인가 거짓인가 ?   (스코프) 

var foo = "test"

if(true){

	var foo = "new test";

}

alert (foo == "new test");  // ??

function test(){

	var foo = "old test";

}

test();

alert( foo == "new test");  // ??

16번. 다음을 실행하면 결과는  참인가 거짓인가 ?     (커링) 

function addGenerator( num ) {

	return function ( toAdd) {

		return num + toAdd

	};

}

var addFive = addGenerator ( 5 );

alert (addFive ( 4 ) == 9 );

17번. 다음을 실행하면  thanks for your  다음에 어떤 단어가 출력되겠는가?     (클로저, 유효범위 )

var obj = document.getElementById("input1");

var items = ["click", "keypress"];

for(var i = 0; i < items.length; i++){

	(function(){

		obj[ "on" + items[i] ] = function(){

		  console.info("thanks for your " + items[i]);   // ??

		};

	})();

}

18번. 다음을 실행하면 결과는  참인가 거짓인가 ?   (컨텍스트)

var obj = {

	yes : function(){

		this.val = true;

	},

	no: function(){

		this.val = false;

	}

};

alert(obj.val != null);   // ??

obj.yes();

alert(obj.val == true);  // ??


window.no = obj.no;

window.no();

alert(obj.val == false);  // ??

19번. 다음을 실행하면 결과는  참인가 거짓인가 ?  (객체, Privileged 메소드)

function User ( name, age ) {

	var year = (new Date()).getFullYear() - age;

	this.getYearBorn = function(){

		return year;

	}

}


var user = new User('bob', 42);

alert(user.year == 42);  // ??

20번. 다음을 실행하면 결과는  참인가 거짓인가 ?  (프로토타입)

function Person(name) {

    this.name = name || "brad"; 

}


Person.prototype.getName = function(){

    return this.name;

};


function Korean(name){}

Korean.prototype = new Person();


var kor1 = new Korean();

console.log(kor1.getName() == "brad");  


var kor2 = new Korean("john");

console.log(kor2.getName() == "john");  

프로 자바스크립트 테크닉 (http://www.yes24.com/24/goods/3044388) 

인사이드 자바스크립트(http://www.yes24.com/24/Goods/11781589?Acode=101) 

1. 실행 컨텍스트

http://juheejin.tistory.com/48  펌 

■ Module Pattern

다음은 클로저를 이용해 모듈 패턴을 구현한 코드입니다.  

var module = (function () {

    /**
     * --------------------------------
     * 모듈 패턴을 구현한 클로저 코드
     * --------------------------------
     */

    // 은닉될 멤버 정의
    var privateKey = 0;

    function privateMethod() {
        return ++privateKey;
    }

    // 공개될 멤버 (특권 메소드) 정의
    return {
        publickey : privateKey,
        publicMethod : function () {
            return privateMethod();
        }
    }

})();

console.log(module.publicMethod()); // 1

                                                                           (코드 - 1)

모듈 패턴은 반환값이 함수가 아니라 객체이며, 자동 호출된다는 점만 제외하고 클로저와 유사합니다.
(잘못된 설명으로 생각함. 함수를 반환하는게 클로저는 아니기 때문)
그리고 인스턴스를 여러 개 만들어 낼 수 있는 구조라는 점에서 싱글톤 패턴과 차이가 있습니다. 위의 코드를 실행하면 익명함수가 자동으로 호출되어 익명함수가 반환하는 객체가 Module 변수에 할당되게 됩니다. 따라서 위와 같이 module.publicMethod() 호출할 수 있습니다. 위의 코드는 하나의 인스턴스 객체만을 생성하고 있어서 싱글톤과 유사합니다.하지만 아래와 같이 자동으로 호출(self-invoking) 되는  구조를 없애면 여러 개의 인스턴스를 생성하여 사용할 수 있습니다.

자동 호출 구조를 없앤 코드입니다.

    /**
     * --------------------------------
     * 모듈 패턴을 구현한 클로저 코드
     * --------------------------------
     */

    // 은닉될 멤버 정의
    var privateKey = 0;

    function privateMethod() {
        return ++privateKey;
    }

    // 공개될 멤버 (특권 메소드) 정의
    return {
        publickey : privateKey,
        publicMethod : function () {
            return privateMethod();
        }
    }

};

// 두 개의 인스턴스 생성
var obj1 = Module();
obj1.publicMethod(); // 1 출력
obj1.publicMethod(); // 2 출력

var obj2 = Module();
obj2.publicMethod(); // 1 출력
obj2.publicMethod(); // 2 출력

 (코드 -2)

위와 같이 Module 함수를 정의(즉시실행 X) 하여 함수를 호출하면 여러 개의 인스턴스인 객체를 생성하여 사용할 수 있습니다. 클로저 인스턴스와 유사하지만 한가지 차이점은 내부의 익명함수에서 반환값이 함수가 아니라 객체를 반환한다는 점입니다.

위에까지의 내용은 http://e-rooms.tistory.com/5 에서 퍼왔구요.

그럼 코드 - 1 에서 

console.log(module.publicMethod()); // 1

console.log(module.publicMethod()); // 2 

이거 아래에 

console.log(module.publickey);  를 넣으면  몇이 나올까요? 

답은 0 입니다. 

.

어떻게 이렇게 어려운(직관적이지않은) 언어가 세상을 지배하게 됬는지 정말 불가사의하다.

자바스크립트에서 함수

C/JAVA/C# 등에서 보통 함수는 특정기능을 제공하고 결과값을 얻는 행위 only     

                                                  VS

자바스크립트에서의  함수는 위에것 + 모듈화 처리 + 클로저 + 객체생성등등 JS의 근간이 되는 많은 기능이 추가되어있다. 

“자바스크립트 공부에서 가장 중요한것은  함수의 기능에 대한 기존 프레임에서 알을 깨고 나오는것” 그리고 this 에 대한 감각.

1. 함수안에 함수가 들어가서 c++/java 의  멤버함수 (js에서는 메소드) 역할을 할 뿐 아니라 

2.변수에 할당이 가능하고 매개변수로도 넘길수있고,리턴값 및 배열의 값으로 사용 

3.결정적으로 클래스 역할도 한다. 

함수 정의의 3가지 방법 

함수 선언문 

“반드시 함수명이 정의되어야 한다” 

“function 이라는 키워드를 명시적으로 사용한다”

“ 리턴값과 매개변수로 넘기는값에 변수 타입을 기술하지 않는다”

함수 표현식 (1)

함수 선언문 방식과 거의 유사하다.

유일한 차이점은 함수이름이 선택사항, 보통 사용하지 않음. 

위의 add와 plus 는 동일한 값(익명함수) 을 참조한다. 

관례적으로 함수뒤에 ; 를 넣는다. 

함수 표현식 (2) 

어떻게 될까? 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management  펌

개요

C 언어같은 저급 언어는 메모리 관리를 위해 malloc() 과 free()를 사용한다. 반면, 자바스크립트는 무언가가 생성되었을 때(오브젝트나 문자열 등) 메모리를 할당하고 쓸모 없어졌을 때 '자동으로' free 한다. '자동으로' 라는 말에는 혼란의 여지가 있다. 이는 자바스크립트를 포함한 여러 고급 언어 개발자들에게 메모리 관리가 불가능하다는 인상을 준다. 하지만 실상은 그렇지 않다.  

메모리 생존주기

메모리 생존주기는 프로그래밍 언어와 관계없이 비슷하다.

1. 필요할때 할당한다.
2. 사용한다. (읽기, 쓰기)
3. 필요없어지면 해제한다. 

첫 번째 부분과 두 번째 부분은 모든 언어에서 분명하게 기술되지만 마지막 부분은 조금 다르다. 저급 언어에서는 분명히 기술되지만 자바스크립트 같은 고급 언어에서는 분명하게 기술되지 않는다(역자: 명시적으로 free를 하지 않는다는 의미). 

자바스크립트에서 메모리 할당

값 초기화

자바스크립트에서는 프로그래머들이 일일히 메모리 할당을 하는 수고를 덜어주기위해 값을 선언할 때 메모리를 할당한다. 

var n = 123; // 정수를 담기 위한 메모리 할당
var s = "azerty"; // 문자열을 담기 위한 메모리 할당

var o = {
  a: 1,
  b: null
}; // 오브젝트와 그 오브젝트에 포함된 값들을 담기 위한 메모리 할당

var a = [1, null, "abra"]; // (오브젝트 처럼) 배열과 배열에 담긴 값들을 위한 메모리 할당

function f(a){
  return a + 2;
} // 함수를 위한 할당(함수는 '호출가능한' 오브젝트이다)

// 함수식 또한 오브젝트를 담기위한 메모리를 할당한다. 
someElement.addEventListener('click', function(){
  someElement.style.backgroundColor = 'blue';
}, false);

함수 호출을 통한 할당

몇 가지 함수에서도 메모리 할당이 일어난다. 

var d = new Date();
var e = document.createElement('div'); // DOM 엘리먼트를 위해 메모리를 할당한다.

몇 가지 메쏘드도 새로운 값이나 오브젝트를 담기 위해 메모리 할당이 일어난다.

var s = "azerty";
var s2 = s.substr(0, 3); // s2는 새로운 문자열
// 자바스크립트에서 문자열은 immutable 값이기 때문에 메모리를 새로 할당하지 않고 단순히 [0, 3] 이라는 범위만 저장한다. 

var a = ["ouais ouais", "nan nan"];
var a2 = ["generation", "nan nan"];
var a3 = a.concat(a2); // 4개의 원소를 가진 새로운 배열

값 사용

값 사용이란 기본적으로는 할당된 메모리를 읽고 쓰는 것을 의미한다. 변수나 오브젝트 속성 값을 읽고 쓸때 값 사용이 일어난다. 또 함수 호출시 함수에 인수를 넘길때도 일어난다. 

할당된 메모리가 더 이상 필요없을 때 해제하기

이 단계에서 대부분의 문제가 발생한다. "할당된 메모리가 더 이상 필요없을 때"를 알아내기가 힘들기 때문이다. 이제까지는 개발자들이 메모리가 필요없어질 때를 정하고 free하곤 했다. 

고급 언어 인터프리터는 "가비지 콜렉터"라는 소프트웨어를 가지고 있다. 가비지 콜렉터란 메모리 할당을 추적하고 할당된 메모리가 더 이상 필요 없어졌을 때 해제하는 작업을 한다. 이 작업은 근사적인 작업이다. 왜냐하면 일반적인 경우에 어떤 메모리가 필요없는지 알아내는 것은 알고리즘으로 풀 수 없는 비결정적인 문제이기 때문이다. (역자: 세상에 존재하는 모든 가비지 콜렉터는 안전하지만 완전하지 않다. 가비지 콜렉터는 항상 필요없어진 메모리만을 해제하지만 모든 필요없어진 메모리를 해제하는건 아니다)

가비지 콜렉션

위에서 언급한 것처럼 "더 이상 필요없는" 모든 메모리를 찾는건 비결정적이다. 따라서 몇 가지 제한을 두어 "더 이상 필요없는 모든 메모리"가 아니라 "더 이상 필요없는 몇몇 메모리"를 찾아보자. 몇 개의 가비지 콜렉션 알고리즘을 소개하고 한계점을 알아볼 것이다.

참조

가비지 콜렉션 알고리즘의 핵심 개념은 참조이다. A라는 메모리를 통해 (명시적이든 암시적이든) B라는 메모리에 접근할 수 있다면 "B는 A에 참조된다" 라고 한다. 예를 들어 모든 자바스크립트 오브젝트는 prototype 을 암시적으로 참조하고 그 오브젝트의 속성을 명시적으로 참조한다.

앞으로 "오브젝트"라는 어휘의 의미를 넓혀서 기존의 자바스크립트 오브젝트뿐만 아니라 함수 스코프도 포괄하자.

참조-세기(Reference-counting) 가비지 콜렉션

참조-세기 알고리즘은 가장 무난한 알고리즘이다. 이 알고리즘은 "더 이상 필요없는 오브젝트"를 "어떤 다른 오브젝트도 참조하지 않는 오브젝트"라고 정의한다. 어떤 오브젝트를 참조하는 다른 오브젝트가 하나도 없다면 그 오브젝트에 대해 가비지 콜렉션을 수행한다.

예제

var o = { 
  a: {
    b:2
  }
}; // 2개의 오브젝트가 생성되었다. 하나의 오브젝트는 다른 오브젝트의 속성으로 참조된다.
// 나머지 하나는 'o' 변수에 할당되었다.
// 명백하게 가비지 콜렉션 수행될 메모리는 하나도 없다.


var o2 = o; // 'o2' 변수는 위의 오브젝트를 참조하는 두 번째 변수이다.
o = 1; // 이제 'o2' 변수가 위의 오브젝트를 참조하는 유일한 변수가 되었다.

var oa = o2.a; // 위의 오브젝트의 'a' 속성을 참조했다.
// 이제 'o2.a'는 두 개의 참조를 가진다. 'o2'가 속성으로 참조하고 'oa'라는 변수가 참조한다.

o2 = "yo"; // 이제 맨 처음 'o' 변수가 참조했던 오브젝트를 참조하는 오브젝트는 없다(역자: 참조하는 유일한 변수였던 o2에 다른 값을 대입했다)
// 이제 오브젝트에 가비지 콜렉션이 수행될 수 있을까?
// 아니다. 오브젝트의 'a' 속성이 여전히 'oa' 변수에 의해 참조되므로 메모리를 해제할 수 없다.

oa = null; // 'oa' 변수에 다른 값을 할당했다. 이제 맨 처음 'o' 변수가 참조했던 오브젝트를 참조하는 다른 변수는 없으므로 가비지 콜렉션이 수행된다.

한계: 순환

이 알고리즘은 두 오브젝트가 서로를 참조하면 문제가 발생한다. 두 오브젝트 모두 필요 없어졌더라도 가비지 콜렉션을 수행할 수 없다.

function f(){
  var o = {};
  var o2 = {};
  o.a = o2; // o는 o2를 참조한다.
  o2.a = o; // o2는 o를 참조한다.

  return "azerty";
}

f();
// 두 오브젝트가 만들어지고 서로를 참조해서 순환이 일어났다.
// 함수가 종료되고 나면 사실상 두 오브젝트는 의미가 없어지므로 가비지 콜렉션이 수행되어야 한다.
// 그러나 위의 참조-세기 알고리즘에서는 두 오브젝트 모두 참조를 가지고 있기 때문에 둘 다 가비지 콜렉션이 일어나지 않는다.

실제 예제

인터넷 익스플로러 6, 7 은 DOM 오브젝트에 대해 참조-세기 알고리즘으로 가비지 콜렉션을 수행한다. 흔히, 이 두 브라우저에서는 다음과 같은 패턴의 메모리 누수가 발생한다. 

var div = document.createElement("div");
div.onclick = function(){
  doSomething();
}; // div 오브젝트는 이벤트 핸들러를 'onclick' 속성을 통해 참조한다.
// 이벤트 핸들러의 스코프에도 div 오브젝트가 있으므로 div 오브젝트에 접근할 수 있다. 따라서 이벤트 핸들러도 div 오브젝트를 참조한다.
// 순환이 발생했고 메모리 누수가 일어난다.

표시하고-쓸기(Mark-and-sweep) 알고리즘

이 알고리즘은 "더 이상 필요없는 오브젝트"를 "닿을 수 없는 오브젝트"로 정의한다.

이 알고리즘은 roots 라는 오브젝트의 집합을 가지고 있다(자바스크립트에서는 전역 변수들을 의미한다). 주기적으로 가비지 콜렉터는 roots로 부터 시작하여 roots가 참조하는 오브젝트들, roots가 참조하는 오브젝트가 참조하는 오브젝트들... 을 닿을 수 있는 오브젝트라고 표시한다. 그리고 닿을 수 있는 오브젝트가 아닌 닿을 수 없는 오브젝트에 대해 가비지 콜렉션을 수행한다.

이 알고리즘은 위에서 설명한 참조-세기 알고리즘보다 효율적이다. 왜냐하면 "참조되지 않는 오브젝트"는 모두 "닿을 수 없는 오브젝트" 이지만 역은 성립하지 않기 때문이다. 위에서 반례인 순환 참조하는 오브젝트들을 설명했다.

2012년 기준으로 모든 최신 브라우저들은 가비지 콜렉션에서 표시하고-쓸기 알고리즘을 사용한다. 지난 몇 년간 연구된 자바스크립트 가비지 콜렉션 알고리즘의 개선들은 모두 이 알고리즘에 대한 것이다. 개선된 알고리즘도 여전히 "더 이상 필요없는 오브젝트"를 "닿을 수 없는 오브젝트"로 정의하고 있다.

순환 참조는 이제 문제가 되지 않는다.

첫 번째 예제에서 함수가 리턴되고 나서 두 오브젝트는 닿을 수 없다. 따라서 가비지 콜렉션이 일어난다.

두 번째 예제에서도 마찬가지다. div 변수와 이벤트 핸들러가 roots로 부터 닿을 수 없어지면 순환 참조가 일어났음에도 불구하고 가비지 콜렉션이 일어난다.

한계: 오브젝트들은 명시적으로 닿을 수 없어져야 한다.

이 한계가 지적되었지만 실제로는 사람들은 이 문제를 비롯한 가비지 콜렉션에 별 관심이 없다.

더 보기

• IBM article on "Memory leak patterns in JavaScript" (2007)
• Kangax article on how to register event handler and avoid memory leaks (2010)

1. $(셀렉).each(function(){
2.     //루프돌기
3. });

이런 구문을 많이 쓴다. 특히나 플러그인 제작시

1. var public = {
2.     fn : function(){
3.         return this.each(function(){
4.             //메소드
5.         });
6.     }//END fn
7. };

이런식으로 오브젝트 포인터에 대해서 return을 해주는데, 여기서 this와 $(this)의 사용이 매번 헷갈린다.

더욱이! public.fn.call(this); 라고 콜을 하는 순간! this에 대한 포인터는 안드로메다로 빠져버린다~~~ 쓩!~

애매한건 딱 정리해서 적어둬야겠다.

결론은!

each 루프 내에서 this의 포인터는 jQuery 오브젝트가 아닌 DOM 오브젝트이다.

때문에 each내에서 jQuery의 메소드를 사용하고 싶다면,

$(this)로 jQuery오브젝드로 콜을 해야 한다.

간단한 예로,

1. (function($){
2.     var public = {
3.         init : function(options){
4.             var opt = $.extend({set:1}, options);
5.             return this.each(function(){
6.                 // each 루프
7.                 // this는 DOM 오브젝트
8.                 // $(this)가 jQuery 오브젝트
9.                 this.hide() // ERROR!!
10.                 $(this).hide() // GOOD~
11.             };
12.         } //END init()
13.     }; //END public
14.     $.fn.plugin = function(method){
15.         return public.init.apply(this, arguments);
16.     };//END plugin
17. })(jQuery);

이렇게 플러그인을 만들때,

최초 $.fn.plugin에서의 this는 jQuery객체 즉, $(this)를 의미한다. 그래서 jQuery의 메소드들을 사용할 수 있다.

플러그인에서 public.init.apply를 이용해 this로 콜을 했으니 this를 받은 public.init() 에서 this는 다시금 $(this)가 된다.

그래서 this.each() 와 같은 jQuery메서드를 쓸 수 있는데,

이제 each안으로 들어오면 this는 DOM오브젝트가 된다. 그래서 여기서는 this가 jQuery의 메서드를 못쓴다.

한가지 팁은 DOM객체, 여기선 HTMLElement 객체의 기본 속성값은 jQuery 객체로 변환해 사용하는 것보단, 그냥 그 자체로 사용하는게 더 빠르다. 때문에 id값이나 offset, title등의 기본 속성값은 $(this).attr(‘id’)가 아닌 this.id 등으로 사용 해 주자.

출처:http://asrahi.me/20194512596

jQuery .each() Syntax