본문 바로가기

Programming

 (477)
9. Javascript에서의 함수 리턴 지금까지 함수의 선언과 실행, this 바인딩을 살펴보면서 산발적으로 Javascript 함수의 리턴 규칙에 대해서 함께 배워왔습니다. 하지만 함수의 리턴 규칙은 코드 작성에 있어서 무엇보다도 중요한 영역입니다. 이번 아티클에서는 함수의 리턴 규칙에 대해 다시 한번 정리해 보도록 하겠습니다. 일반 함수, 메서드 - 리턴 값 미지정 시 undefined 리턴 일반적인 함수 또는 메서드 상에서, 특정 값이나 객체를 리턴하지 않을 경우에는 undefined가 리턴됩니다. 간단한 원칙이지만, 아래 예제를 통해서 특정 변수에 이런 형식의 함수를 대입하여 직접 살펴보도록 하겠습니다. var noReturn = function() { console.log("got no return"); }; var result = ..
8. Javascript 함수 호출 (5) - call, apply 메서드와 this 바인딩 지금까지 우리는 Javascript 함수 호출(즉, 함수를 실행하는 것을 의미합니다) 과정에서 다양한 this 바인딩 규칙을 살펴보았습니다. 현재까지 메서드, 함수, new 연산자를 통한 함수 호출 과정에서 this 바인딩이 일어나는 것들은 규칙에 의한 묵시적(implicit)인 바인딩이었습니다. 하지만 지금부터는 어떤 객체를 this에 명시적(explicit)으로 바인딩 하는 방법을 살펴보고자 합니다. this 바인딩을 명시적으로 진행하기 위해서는 call과 apply 메서드를 사용해야 합니다. 이 중apply 메서드를 우선 살펴보도록 하겠습니다. apply 메서드는 기본적으로 모든 함수의 [[Prototype]] 객체인 Function.prototype에 정의된 함수이기 때문에, 모든 함수가 호출할 ..
8. Javascript 함수 호출 (4) - 생성자 함수 호출 시 this 바인딩 2 객체 리터럴 VS 생성자 함수 우리가 지금까지 사용해왔던 객체 리터럴을 통해 객체를 생성해 직접 객체를 선언하는 방식과 생성자 함수를 이용해 객체를 생성하는데 어떤 차이가 있을까요? 결론부터 이야기하자면, 프로토타입 객체에 있어서 차이가 발생하게 됩니다. Javascript에서의 객체 생성 기본 규칙은 "자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 [[Prototype]] 객체로 설정한다."입니다. 생성자 함수에서 강조했던 규칙이지만, 역시 객체 리터럴 방식의 객체 선언의 경우에도 적용되는 기본 규칙이죠. 여기서 생성자 함수의 경우는 알겠는데 객체 리터럴 방식일 경우에는 무엇이 생성자 함수가 될까요? 객체 리터럴 방식으로 객체를 생성할 때 이를 만들어내는 생성자 함수는..
8. Javascript 함수 호출 (4) - 생성자 함수 호출 시 this 바인딩 1 Javascript에서의 생성자 함수 동작 Javascript에서 객체를 생성하는 방법 중, 리터럴 방식을 제외하면 생성자 함수를 이용하는 방법이 있습니다. 일단 생성자 함수 생성에 있어서 C# 또는 JAVA에서의 생성자 개념은 (언뜻 비슷하지만) 그대로 적용시키기는 어려운 부분이 있습니다. 일단, 함수의 종류를 구분하지 않고 new 키워드를 사용하면 함수를 생성자 함수로 동작할 수 있게 됩니다. 그렇기 때문에 통상적으로 생성자 함수로 사용할 것을 의도하여 선언한 함수라면, 함수명 첫 문자를 대문자로 사용해줘야 합니다(문법적으로 강제된 것은 아닙니다). 그리고 this 키워드의 경우 이러한 생성자 함수 내부에서 사용될 때는 앞서 살펴본 메서드 / 함수 호출에서의 this 바인딩과는 다르게 사용됩니다. 생..
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. 단,..

티스토리툴바