본문 바로가기

Programming

 (465)
8. Javascript 함수 호출 (3) - 함수를 호출할 때 this 바인딩 전역 객체의 이해 이번에는 지난 아티클인 [객체 메서드]와 다른 개념인, 함수 호출 시의 this 바인딩에 대해서 살펴보려고 합니다. 이를 이해하기 위해서는 Javascript에서의 전역 객체에 대한 이해가 우선 필요합니다. 우선 Javascript를 브라우저에서 실행하게 될 때, 기본적으로 전역 객체는 window 객체가 됩니다. (Node.js의 경우 global이 전역 객체) 특별히 명시되지 않는다고 하더라도, 기본적으로 Javascript에서 선언되는 전역 변수들은 모두 이 전역 객체의 프로퍼티가 됩니다. 아래 예제 코드를 통해 전역 객체를 살펴보겠습니다. var testValue = "Test String"; console.log(testValue); console.log(window.testV..
8. Javascript 함수 호출 (2) - 객체 메서드 호출 시 this 바인딩 객체의 메서드 호출 시 this 바인딩 우선, 기본적인 내용이라고 생각하실 수도 있겠지만 Javascript에서 칭하는 메서드는 무엇인지 짚고 넘어가야 할 필요성이 있습니다. 기본적으로 객체의 프로퍼티가 함수일 경우, 이를 메서드로 칭합니다. 그리고, 함수 호출과 this 바인딩 과정에서 이 메서드 내부 코드에 사용된 this 키워드는 해당 메서드를 호출한 객체에 바인딩됩니다. 아래의 예제 코드를 살펴보도록 하겠습니다. var mainObj = { name : 'Giriboy', printName : function() { console.log(this.name); } }; var newObj = { name : 'Dean' }; // newObj에 새로운 printName 메서드 선언 newObj.pr..
8. Javascript 함수 호출 (1) - arguments 객체 함수의 호출과 arguments 객체 기본적으로 C 등의 프로그래밍 언어에서는, 함수를 호출할 때 인자를 정확하게 할당해야 합니다. 예를 들어 함수에서 정의된 파라미터가 2개라면, 인자는 반드시 2개가 전달되어야 에러가 발생하지 않습니다. 하지만, Javascript에서는 이러한 규칙이 유연하게 적용됩니다. 선언된 함수에서 필요로 하는 인자의 개수와 무관하게 함수는 나름대로의 규칙을 통해 전달된 인자를 처리하게 됩니다. 예를 들어 파라미터가 2개인데 이보다 적게 인자가 전달된다면, undefined로 처리합니다. 반대로 2개 이상의 인자가 전달된다면, 초과된 인수를 무시하고 앞의 2개 만을 처리합니다. function func(arg1, arg2){ console.log(arg1, arg2); } fun..
7. Javascript 함수 (6) - 내부 함수 + 스코프와 클로저 맛보기 내부 함수(inner function)의 정의는 사실 특별할 것이 없습니다. Javascript 함수 코드 내부에서, 다시 함수를 정의하는 것이 가능하기 때문에 함수 내부에 정의된 또 다른 함수를 내부 함수라고 칭합니다. 기본적인 내부 함수 특성 내부 함수는 아래 박스안의 내용과 같은 속성을 갖게 됩니다. 이 특성들과 연계된 Javascript의 주요 개념들도 존재하니 우선 예제 코드들과 함께 이러한 속성에 익숙해져야 합니다. 지금은 아주 간단하게 보일지 몰라도 향후 복잡한 코드에서는 이러한 성질들을 순간적으로 잊어버리는 경우가 있기 때문이죠. 1. 내부 함수는 일반적으로 자신을 선언한 부모 함수 내부에서만 호출이 가능하다. 2. 내부 함수는 자신을 선언한 부모 함수의 변수에 접근이 가능하다. 3. 단,..
7. Javascript 함수 (5) - 즉시 실행 함수란 즉시 실행 함수의 사용법 즉시 실행 함수(immediate function)는 함수를 정의하는 동시에, 바로 실행하는 함수입니다. 함수를 정의(선언)한 다음 해당 함수에 필요한 인자 값을 통해 호출하는 절차를 거치지 않는다는 이야기죠. 우선은 이 즉시 실행 함수의 작성 방법을 살펴보도록 하겠습니다. (function (name) { // 익명, 기명함수 모두 가능 console.log(name); // 선언문 })('John'); // 인자 값의 전달 name 파라미터를 받아 출력하는 임의의 익명함수를 선언해 보았습니다. 그리고 즉시 실행 함수 형태로 선언 즉시 출력하였습니다. 자세히 살펴보면 함수 리터럴 양 옆에 또 하나의 괄호 '( )'가 추가되었습니다. 그리고 맨 마지막에는 일반적인 함수의 호출 때..
7. Javascript 함수 (4) - 콜백 함수란 콜백 함수(call-back function) 드디어 문제의 콜백 함수를 다룰 때가 왔습니다. 우선, 콜백 함수는 단 한 문장으로 쉽게 정의하기보다는 여러 가지 개념이 한데 어우러져 이해해야 하는 개념이니, 차근차근 아티클을 읽고 다른 코드 예시나 구글링을 통해 여러 개념을 반복해서 접해봅시다. 끈기 있게 공부하는 것이 중요합니다. 우선, 콜백 함수를 사용한다는 것은 입출력 모델(I/O model)의 관점에서 봤을 때 Event Driven, Non-Blocking을 사용한다는 특징을 갖습니다. 콜백 함수라는 것이 "어떤 형식으로 코드를 작성하면 콜백 함수다!"라고 정의하기 보다는, 이러한 특성을 갖는 함수라고 이해해야 합니다. Event Driven Function Event Driven 함수로서의 성..
7. Javascript 함수 (3) - 함수 프로퍼티 2 이번 아티클에서는 함수의 프로퍼티 중 표준 프로퍼티를 자세히 살펴보도록 하겠습니다. 함수의 length 프로퍼티 함수 객체가 갖는 표준 프로퍼티인 length는 [함수가 정상적으로 실행될 때 기대되는 인자의 개수]를 의미합니다. 아래 예제와 같이 함수 정의 시 선언된 파라미터의 개수를 각각 다르게 하여 각 함수의 length를 출력해 봅시다. function func0() { } function func1(x) { return x; } function func2(x, y) { return x + y; } function func3(x, y, z) { return x + y + z; } console.log(func0.length);// 0 console.log(func1.length);// 1 conso..
7. Javascript 함수 (3) - 함수 프로퍼티 1 함수 객체의 표준 프로퍼티 함수는 다시 한 번 말하지만 '객체'입니다. 객체로서의 속성을 갖되, 함수로서 기능하기 위한 선언문이 작동하는 기능을 갖고 있습니다. 더불어 함수 객체로서 갖게되는 표준(여기서는 생성 시 자동으로 부여되는 속성으로 이해합시다) 프로퍼티를 갖게 됩니다. 아래 간단한 함수를 생성해 살펴보겠습니다. function plus(a, b){ return a + b; } console.dir(plus); 꽤 많은 내용이 출력되었습니다. 중요 프로퍼티와 관련된 사항은 후속 아티클에서 계속 디테일하게 살펴볼 예정이니, 우선 간단하게 각각의 프로퍼티들을 짚어보도록 하겠습니다. length 프로퍼티[표준] 정상 실행되었을 때 가져야 하는 인자의 개수. 추후 디테일하게 살펴보겠습니다. prototy..

티스토리툴바