4.4 가변인자목록 가변인자 목록 자바스크립트가 지닌 유연하고 강력한 기능 중 하나는 함수가 임의 개수의 인자를 받을 수 있다는 것이다. 몇 가지 예제를 통하여 유연한 인자 목록이 제공하는 장점을 알아보자. 임의 개수의 인자를 받는 함수에 여러 개의 인자를 제공하는 방법 함수 오버로딩을 구현하기 위해서 가변인자 목록을 활용하는 방법 인자 목록이 지닌 length 프로퍼티에 대해 이해하고 활용하는 방법 자바스크립트는 함수 오버로딩을 제공하지 않는다. 그렇기 때문에 오버로딩이 제공하는 장점과 유사한 장점을 얻으려면 인자 목록의 유연함이 필요하다. apply() 메서드를 이용해서 가변 길이의 인자를 전달하기 자바스크립트에서는 배열에서 최솟값이나 최댓값을 검색하는 기능이 없다. 유사한 기능으로..
프로그래밍 노트/JAVASCRIPT
1종객체(함수) 가지고 놀기_1자바스크립트에서 함수는 프로퍼티를 가질 수 있고, 메서드를 가질 수 있고, 변수나 프로퍼티에 할당이 가능하며 일반적으로 평범한 객체들이 할 수 있는 것을 모두 할 수 있다.var obj = {};var fn = function(){};=> 변수에 객체를 할당할 수 있듯이, 함수를 할당하는 것도 가능하다. 이 것은 함수를 객체의 프로퍼티에 할당해서 메서드를 만드는 데도 그대로 적용된다. var obj = {};var fn = function(){};obj.prop = “obj’s property”;fn.prop = “Fn’s property”;=> 일반적인 객체와 마찬가지로 함수에도 프로퍼티를 추가할 수 있다.함수 저장하기만약에 연관성을 지닌 함수들을 컬렉션에 저장하고 싶다고..
callee 프로퍼티재귀호출을 처리하는 방법 중 하나로 arguments 매개변수의 callee 프로퍼티라는 함수에 대해 알아보자. (Callee 프로퍼티는 앞으로 자바스크립트에서 제거될 부분이다. ECMAScript5 “strict” 모드에서 callee 프로퍼티 사용을 금지하고 있다.) 123456789101112131415161718 Document var ninja = { attack : function(n){ return n > 1 ? arguments.callee(n-1) + "-sword" : "sword"; } } console.log(ninja.attack(3)); // sword-sword-sword Colored by Color Scriptercsarguments매개변수는 암묵적으로 ..
익명함수 익명함수는 간단히 말해 이름을 가지고 있지 않는 함수이다.익명함수는 함수를 변수에 저장하거나, 어떤 객체의 메서드로 설정하기 위해, 콜백으로 활요하는 것과 같이 나중에 사용하기 위한 함수를 만들때 주로 사용한다. (함수를 참조하기 위한 용도로 함수의 이름을 가지고 있을 필요가 없다.)아래는 사용 예이다. 123456789101112131415161718192021222324 Document window.onload = function(){ console.log("onload!"); // 변수에 저장 } var ninja = { shout : function(){ console.log("shout!!"); // 메서드로 사용 } } setTimeout(function(){ alert("hi!");..
스타일(CSS) 다루기Style 속성 Style 속성은 엘리먼트의 중요한 속성이다. HTML DOM 엘리먼트에는 style 프로퍼티가 있기 때문에 엘리먼트의 스타일과 관련된 정보를 얻으려면 element.style.color와 같은 식으로 프로퍼티를 사용할 수 있다. 하지만 그 엘리먼트에 지정한 원본 style 스타일 문자열 값을 얻고 싶다면 다른 방법이 필요하다. Color:red 라는 원본 문자열을 얻고싶으면 어떻게 할까? IE => element.style.cssText // 테스트결과 다른 브라우저에서도 사용 가능 대부분의 브라우저 => getAttribute(“style”)를 사용한다. 내 스타일은 어디있지?아래 테스트 코드를 살펴보자1234567891011121314151617181920212..
속성(attribute)와 프로퍼티(property)의 차이속성(attribute)DOM을 어떻게 만들어낼 것인가에 대한 필수적인 항목 프로퍼티(property) 런타임 동안 엘리먼트 정보를 저장해두는 주요 수단이자 해당 정보에 어떤 방식으로 접근해야 하는지를 나타냄 DOM 속성과 프로퍼티엘리먼트의 속성 값에 접근할 때, 두 가지 방식이 존재한다. 하나는 전통적인 DOM메서드인 getAttribute와 setAttribute를 사용하는 방법 두번째는 접근하려는 속성과 대응하는 프로퍼티를 사용하는 방법 이다. test라는 변수를 통해 참조하고 있는 엘리먼트의 id값을 얻으려면 다음과 같은 방법을 사용할 수 있다. test.getAttribute(“id”) // 속성으로 얻어옴 test.id // 속성과 대..
apply()와 call() 메서드를 사용하여 호출하기 apply(), call() 메서드는 명시적으로 함수 컨텍스트를 지정할 수 있는 메서드이다. apply() 메서드 두 개의 매개변수를 전달한다. 하나는 함수 컨텍스트로 사용할 객체, 다른 하나는 인자 값을 담은 배열이다. call() 메서드apply()메서드와 비슷하지만, 인자를 배열로 전달하지 않고 인자 목록으로 직접 전달한다. 사용방법을 살펴보자12345678910111213141516function juggle(){ var result = 0; for(var n=0; n 함수 호출시 임의의 객체를 함수 컨텍스트로 지정할 수 있다. 콜백의 함수 컨텍스트를 강제로 지정하기함수 컨텍스트로 강제 지정하는 구체적인 예제를 살펴보자일반적인 명령형 프로그래..
생성자로 호출“생성자로” 함수를 호출하려면 함수 호출 앞에 new키워드를 붙인다. 생성자의 강력함생성자로 함수를 호출하는 것은 자바스크립트만의 강력한 기능이다. 특별한 행동이 일어나기 때문이다비어있는 객체가 새로 생성된다.새로 생성된 객체는 this 매개변수로 생성자 함수에 전달되고, 따라서 생성자의 함수 컨텍스트가 된다.어떤 명시적인 반환 값이 없다면, 새로 생성된 객체가 생성자의 값으로 반환된다. 생성자의 목적은 새로 생성한 객체의 내용을 설정하고, 새 객체를 생성자의 값으로 반환하는 것이다. 12345678function Ninja(){ this.skulk = function() { return this; };} var ninja1 = new Ninja();var ninja2 = new Ninja(..
메서드로 호출 함수를 객체의 프로퍼티로 할당하고, 그 프로퍼티를 사용하여 “참조에 의한 호출”이 일어나면, 함수는 그 객체의 메서드로 호출된다.123var o = {};o.whatever = function(){};o.whatever(); // 참조에 의한 호출cs우리가 어떤 객체의 메서드로 함수를 호출하면, 그 객체는 함수 컨텍스트가 되고 함수 내에서 this 매개변수로 참조할 수 있다. 앞에서 “함수로 호출”에서 함수는 window에 “속하고”, window는 함수 컨텍스트로 설정된다. 하지만 위의 예제에서는 객체 o가 함수 컨텍스트가 된다. 다음은 함수 호출과 메서드 호출의 차이점을 나타내는 코드이다.123456789101112131415function creep{ return this; }cree..
함수의 호출_1 (함수로의 호출) 함수가 호출되는 방식은 코드 작동 방식에 큰 영향을 미치는데, 특히 this 매개변수가 어떻게 설정되는지를 결정한다. (Javascript를 파고들면 정말 중요해진다.) 함수를 호출하는 데에는 실제로 네 가지 다른 방법이 있다. 함수로 호출. 복잡할 것 없이 익숙한 방식으로 함수를 호출한다. 메서드로 호출. 함수 호출과 객체는 서로 묶여있는데, 이는 객체 지향 프로그래밍을 가능케 한다. 생성자로 호출. 이는 새로운 객체를 생성한다.함수의 apply()나 call()메서드를 통해 호출한다. 함수로 호출 일반적인 호출 방법으로 다른 호출 메커니즘(메서드, 생성자, apply/call)과 구분하기 위한 것이다. 메서드, 생성자, apply/call를 통해 함수를 호출하지 않는..
