javascript 빌트인 object 이해하기(3) - Object
javascript 빌트인 object 이해하기(2-2) - String
javascript 빌트인 object 이해하기(2-1) - String
javascript 빌트인 object 이해하기(1) - Number
javascript 빌트인(Built-in) 이해하기
javascript 연산자(Operator) 이해하기
Prototype과__proto__
이해하기(1)
Prototype과__proto__
이해하기(2)
지금까지, Built-in object
가 무엇인지, 그리고 Built-in object
에 해당하는 Number object
, String object
, Object object
를 알아보았다.
이번엔 Function object
이다.
Function 이 object라고? 네! Function object도 프로퍼티를 갖는 object이다...
python만 해오던 나에게 매우 혼란스러운 일이지만, javascript
는 거의 모든것이 object인 형태로 존재한다해도 무방하다.
위와 같이, Function 또한 객체로 존재하며, 프로퍼티를 갖는다. 프로퍼티 하나씩 알아보자.
let obj = new Function("one","two","return one+two;"); // 파라미터2개와와 함수코드 작성
obj(100,3); // 103
obj = new Function("name","return name;"); //파라미터 1개와 함수코드 작성
obj("js");// js
obj = new Function("return 'hi!';"); // 함수코드 작성
obj(); // hi!
new Function()
과 파라미터 처리방법, 작성방법 같음( 단지 new
연산자를 사용하지 않은 케이스)❓ 그럼 왜 분리를 시켜놨을까?
매우 혼돈스러우므로 추후에 좀 더 정리하도록하겠다.
Function()
new Function()
function getBook(title){return title};
Function()
으로 만든 function object에 해당함)function getBook(title){
return title;
};
const result = getBook("JS북");
console.log(result);//JS북
getBook
함수 호출JS북
)을 넘겨줌javascript에서는 함수를 호출할 때 보내는 파라미터 수와 받는 파라미터 수가 다를 수 있다. 호출할때 100개의 파라미터를 보내고, 실제 function에서 2개의 파라미터만을 받는다고 할 때, 나머지 98개의 값이 없어지는 것이 아니라 어느곳에 저장된다.
❓ 굳이 왜? 어떤식으로 활용되나? 이후에 설명하겠다.
function add(one,two){
return one+two;
};
console.log(add(1,2,3)); // 3
console.log(add.length)); //2
function getBook(book){코드}
var getBook = function giveBook(book){코드}
var getBook = function (book){코드}
(함수 식별자 이름 생략 가능)var getBook = function inside(value){
if (value === 102){
return value;
};
console.log(value);
return inside(value+1);
};
getBook(100);
this
로 참조할 object, 일반적으로 this
를 사용하지만 다른 오브젝트 작성도 가능아래의 예시에서는 this가 파라미터로 넘어가지는 않는것을 보여준다.
function getTotal(one,two){
return one+two
};
var result = getTotal.call(this,10,20);
console.log(result);//30 (this가 파라미터로 넘어가지는 않음)
아래의 예시에서는 getTotal()에서 this가 value 오브젝트를 참조하여 this로 value 오브젝트에 접근이 가능함을 보여준다.
var value = {one:10, two:20};
function getTotal(){
return this.one+this.two
};
var result = getTotal.call(value);// getTotal()에서 this 가 value 오브젝트 참조
console.log(result);//30
call()
에서는 파라미터 수가 정해져있을 때, 사용했다면 파라미터 수가 정해져있지 않은 경우 apply()
를 사용한다.
function getTotal(one,two){
return one+two
};
var result = getTotal.apply(this,[10,20]);// 파라미터 수가 유동적이므로 배열을 사용한다.
console.log(result);//30
javascript object 이해하기(2-2) - String에서도 언급했다시피 모든 빌트인 오브젝트에는 toString()
이 존재하고, 오브젝트마다 반환되는 형태가 다르다.
function obejct
의 toString()
은 함수 코드를 문자열로 반환한다.함수가 호출되어 함수 안으로 이동했을 때 arguments이름으로 생성되는 object가 있다. object이므로 프로퍼티가 존재하며, javascript 빌트인(Built-in) 이해하기에서 언급한것처럼 함수가 호출되면 함수내에서 만들고, 함수를 빠져나오면 JS엔진이 자동적으로 지우는 native object
에 해당한다.
아까 위에서 말한것처럼 javascript
에서는 넘겨주는 파라미터 수와 받는 파라미터수가 달라도, 보내는 파라미터가 어딘가에 저장된다고 했는데 바로 이 arguments object
에 저장된다.
(python 같은 경우는 파라미터 수가 다르면 에러가 나지만, javascript는 항상 언급하지만, 에러를 최대한 내지 않으려 발악하는 언어(에러나는순간 웹 전체 에러)
arguments object
arguments object
에도 저장function getTotla(one){
return one + arguments[1]+ arguments[2];
};
var result = getTotal(10,20,30);
console.log(result);//60
arguments object
의 프로퍼티에
[0] : 10 , [1] : 20, [2] : 30
이 차례로 저장되어있을 테고, 함수 파라미터인 one에 첫번째 인자인 10이 넘겨졌을 것이다.
this도 활용하면서, 유동적인 파라미터에 대응하고 싶다면 아래와 같이 apply
와 arguments
를 동시에 활용하면 된다.
var value = {one :10};
function getTotal(){
var sum = this.one;
for (var arg of arguments) {
sum += arg;
}
return sum;
};
getTotal.apply(value,[20,30]); //60
함수는 파라미터를 넘겨주고 호출만 할 수 있을줄 알았지만, 다양한 프로퍼티와 메소드가 존재하는 것이었다...
이 다음장에선 5번째 Built-in object
인 Global object
에 대해 알아보겠다.