[JavaScript] 콜백함수/ 객체 생성 / 클로져

Callback 함수(콜백함수)

이름 그대로 나중에 호출되는 함수이며, 파라미터나 변수에 참조되어서 특정한 시점에 호출되는 함수이다. 문법적인 특징을 가지고 있는 것이 아니라, 호출방식에 의한 구분이다.

function kiaCar(roll,control){
	roll();
	control();
	roll();
}

 

---

Object

객체 생성 및 초기화는 여러가지 방법으로 가능하다. (아래 코드 참고)

//1. 객체 생성 후 변수 초기화
var hong = { }; //객체 생성
hong.name = "홍길동"; //멤버 변수 초기화 : key-value 형태로 선언 (value는 문자열)


//2. 객체와 동시에 변수 초기화
var lee = {
	"name" : "이순신",
	"age" : 30,
	"score" : 100
};
hong.name; //객체 속성 접근
hong["age"]; //객체 속성 접근


//4. function을 이용하여 객체 생성 ==> function 안에 객체를 생성하면 된다!
var studentFunc = function(name,age,score){
	var student = {
		"name" : name,
		"age" : age,
		"score" : score
    }
	return student;
};

var s = studentFunc("신사임당",30,100);
s.name;


//5. 생성자를 이용하여 객체 생성 ==> 생성자 함수 작성시에는 첫글자는 대문자로 작성해야 하며, 함수호출과 잘 구분해서 사용해야한다!!)
function Student(name,age,score){
	this.name = name;
	this.age = age;
	this.score = score
	this.getScore = function(){
	return score;}
};
var s1 = new Student("유관순",17,100);
console.log(s1.name);

---

Closure (클로저)

자바스크립트는 함수 안에 또 다른 함수(내부 함수)를 선언할 수 있으며, 내부 함수는 외부 함수 지역변수에 접근할 수 있다. 이때, 외부 함수의 실행이 끝나 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근할 수 있다. 이러한 메커니즘을 클로저라고 한다. 

우리가 배운 예제에서 내부 함수의 리턴을 return printName; 이와 같이 표현 하는데, 이것은 객체 자체를 반환한다는 의미이다. 만약에 return printName(); 로 실행을 한다면 함수자체가 반환되는 것이 아니라, 해당 메소드가 실행되어버린다. 즉, 해당 함수의 리턴값이 없다면 해당 함수가 실행만될뿐이다. 두개는 비슷해 보이지만 다른의미이므로 주의해서 사용해야 한다.

문제점

Closure로 인해, 핸들러가 변수 i를 출력시 i의 최종값만 가지고 출력한다. 

핸들러가 나중에 실행되기 때문이다

 

해결방법
사용하는 변수 부분을 고정값으로 만들어 주면된다 ⇒ 즉시 실행함수
즉시실행함수 : 함수를 호출할때 기초자료형에 대한 값은 값복사가 일어난다 (call by value)

for(var i=1;i<=4;i++){
	(function(m){
	var btn = document.getElementById("btn"+i);
	btn.onclick = function(){
	alert(m +"버튼을 눌렀습니다!")}})(i)
};