[javascript] apply(), call() ⭐⭐ / arguments / bind()

[javascript] apply(), call() ⭐⭐ / arguments / bind()

---

✔️ apply()

: 주어진 this 값과 배열로 제공되는 arguments 로 함수를 호출한다.

 

📓 형식

: fun.apply(thisArg, [argsArray])

: thisArg : fun 을 호출하는데 제공될 this 의 값이다. 메소드가 비엄격 모드 코드 내의 함수일 경우 null과 undefined 는 전역 객체로 대체된다.

: argsArray : fun 이 호출되어야 하는 인수를 지정하는 유사 배열 객체. 함수에 제공된 인수가 없을 경우 null 또는 undefined

var sum = function(a, b, c) {
	return a+b+c;
}

// 1) 일반적인 방법으로 함수 호출
s = sum(1,2,3);
console.log(s);

 

1) apply() 함수를 이용하여 sum() 함수를 호출

	s = sum.apply(null, [ 1, 2, 3 ]); // apply는 함수에 전달할 인자를 배열로 넘긴다.
	console.log(s);

💡 결과 : 6
apply는 함수에 전달할 인자를 배열로 넘긴다. [] 속에 넣어서

 

 

✔️ call()

: 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출한다.

: apply 와 유사하며, 차이점은 call()은  함수에 전달될 인수 리스트를 받는데, apply() 는 인수 배열 하나를 받는다는 점! 

 

2) call() 함수를 이용하여 sum() 함수를 호출

s = sum.call(null, 1,2,3); // 함수에 전달할 인자는 함수와 동일하게 넘긴다.
	console.log(s);

 

🔒 최대값 구하기

배열로 넘겨야 최대값 비교가 가능할 때, apply 사용하면 된다!

	var nn = [5,6,2,3,7];
	//s = Math.max(nn); // NaN
	//s = Math.max(5,6,2,3,7); // 7 저렇게 넘겨야 max 가 나옴 
	console.log(s);
	
	//apply 는 배열값 인자로 주니까 apply 로!
	s = Math.max.apply(null, nn); //7 
	console.log(s);
	
	s = Math.min.apply(null, nn); //2 
	console.log(s);

 

🔒 예시

배열로 넘겨야 최대값

//객체
var obj = {
	name : '자바',
	sayName : function() {
		console.log(this.name);
	}
};

var obj2 = {
		name : '스프링'
};

obj.sayName(); // 자바
obj.sayName.call(null); // this 가 null 이된 것. 출력안함
obj.sayName.call(obj); // 자바 

obj.sayName.call(obj2); // 스프링. obj 의 sayname 인데 obj2 를 this 로주니까 스프링이 나옴

💡 obj.sayName.call(null); : sayName 의 this 인자를 null 값을 준 것이다. 그래서 출력안함
obj.sayName.call(obj2); // 스프링. obj 의 sayname 인데 obj2 를 this 로주니까 스프링이 나옴

 

 

✔️ arguments

: 자바스크립트 arguments 프로퍼티는 함수를 호출할 때 전달된 인자 값을 나타낸다.

function sub() {
	//arguments 는 배열과 유사하게 인덱스로 접근 가능하지만 배열은 아니다.
	//즉, 배열을 다루는 메소드는 없다. (소트 조인 등..)
	for(let i=0; i<arguments.length; i++){
		console.log(arguments[i]);
	}
}

sub(1, '자바', true);

💡 arguments 는 배열과 유사하게 인덱스 접근은 되지만, 배열은 아니다. 소트 조인 같은걸 사용 못한다.

 

 

✔️ apply 를 써야하는 이유 - 2차원 배열

: 배열에 배열을 추가하면 어떻게 될까? 배열1과 배열2의 값을 합치고 싶은데, 배열에 배열을 추가하면 2차원 배열이 된다. 이런 일이 없도록 apply 를 써야한다.

var aa = ['a' , 'b'];
var bb = [1,2,3];

aa.push(bb);
console.log(aa.join());

 

- apply 사용하기

 let aa1 = ['a' , 'b'];
 let bb1 = [1,2,3];
 
 aa1.push.apply(aa1, bb1); // this 는 aa 이고, 인자는 bb
 console.log(aa1.length); // 5
 console.log(aa1.join());

 

 

✔️ bind()

: 호출될 때 this 를 제공된 값으로 설정하는 새로운 함수를 만든다.

var obj = {
		name: '자바',
		sayName:function(){
			console.log(this.name);
		}
	
};

var obj2 = {
		name : '스프링'
};

var fun = obj.sayName.bind(obj2); // 함수를 호출하지 않으며 this 가 obj에서 obj2로 변경
fun(); // 스프링

💡 bind() 는 this 를 인자로 넘긴 값으로 설정하는 새로운 함수를 만든다.
: 실행은 따로 시켜줘야함 call 과 다르다. (fun(); )