eval() 사용과 문제점 : #eval() is evil

eval() is evil 코드에서 eval() 을 발견하면 'eval() 은 사악하다(eval() is evil)'라는 주문을 기억하라! 이 함수는 임의의 문자열을 받아 자바스크립트 코드로 실행합니다. 만약 문제의 코드를 사전에 알 수 있다면(즉 런타임에 결정되는 게 아니라면) eval()을 쓸 필요가 없습니다. 코드가 런타임에 동적으로 생성된다면 대개 eval() 없이 목표를 달성할 수 있는 더 나은 방법이 존재합니다. eval() 피하기 예컨대 동적인 프로퍼티에 접근하려고 할때는 대괄호 표기법이 더 간단하고 좋은 방법이 될 것입니다. JavaScript // 안티 패턴 var property = 'name'; console.log(eval('obj.' + property)); // 권장 패턴 var..
JavaScript/JS 활용 & etc.. 2016. 10. 10. 07:00

for-in 문과 hasOwnProperty()

for-in 루프와 열거for-in 루프는 배열이 아닌 객체를 순회할 때만 사용해야 합니다.for-in 으로 루프를 도는 것을 열거(enumeration)라고도 합니다.자바스크립트에서 배열은 곧 객체이기 때문에 기술적으로는 배열을 순회할 때에도 fon-in 루프를 사용할 수 있지만 권장사항은 아닙니다.배열 객체에 사용자가 정의한 기능이 추가되었다면 논리적인 오류가 발생할 수 있는 여지가 있습니다.또한 for-in 에서는 프로퍼티를 열거하는 순서가 정해져 있지 않습니다.따라서 배열에는 일반적인 for 문을 사용하고 객체에만 for-in 문을 사용하는 것이 바람직합니다. 객체의 프로퍼티 순회하기객체의 프로퍼티를 순회할 때는 프로토타입 체인을 따라 상속되는 프로퍼티들을 걸러내기 위해 hasOwnProperty..
JavaScript/연산자ㆍ메서드ㆍ프로퍼티 2016. 10. 8. 10:55

JavaScript Hoisting (호이스팅, 끌어올리기)

호이스팅(hoisting): 분산된 var 선언의 문제점 자바스크립트에서는 함수 내 여기저기서 여러 개의 var 선언을 사용할 수 있지만, 실제로는 모두 함수 상단에서 변수가 선언된 것과 동일하게 동작하게 됩니다. 이러한 동작 방식을 '호이스팅(hoisting, 끌어올리기)'이라고 합니다. 때문에 함수 안에서 변수를 사용한 다음에 선언하면 로직상의 로직상의 오류를 일으킬 수 있습니다. 자바스크립트는 동일한 유효범위(즉, 동일한 함수) 안에 있는 변수는 var 선언 전에 사용해도 이미 선언된 것으로 간주합니다. 다음의 예제를 살펴보도록 합니다. javascript // 안티 패턴 name = 'global'; // 전역 변수 function func() { console.log(name); // 'unde..
JavaScript/Core & 개념ㆍ용어 2016. 10. 7. 08:50

함수의 프로토타입(prototype) 핵심 정리

프로토타입 체인 자바스크립트는 Function() 인스턴스에 자동으로 prototype 이라는 속성을 만듭니다. 구체적으로 말하자면 prototype 속성은 new 키워드와 생성자 함수를 같이 사용해서 만든 객체에 연결됩니다. 인스턴스들은 생성자 함수의 prototype 속성을 통해 공통의 메소드와 속성을 공유하고 상속합니다. 중요한 사실은 이러한 공유가 속성을 검색하는 동안 일어난다는 것입니다. 즉, 어떤 객체의 속성을 찾거나 접근하면 자바스크립트는 그때마다 해당 객체는 물론 프로토타입 체인에서도 그 속성을 찾는다는 것입니다. 함수는 모두 prototype 객체를 포함하고 있다. 심지어 생성자 함수로 사용할 생각이 전혀 없는 함수도 prototype 객체를 자동으로 포함합니다. 다음은 Array() 생..
JavaScript/JS 객체지향 프로그래밍 2016. 10. 5. 12:54

call/apply & this 값 설정

call() 또는 apply()를 사용한 this 값 설정하기 this의 값은 함수가 호출된 컨텍스트에 따라 보통 달라집니다.(new 키워드를 사용한 경우는 예외) 하지만 apply()나 call()을 사용해 함수를 호출할 때 this가 참조할 객체를 정해주는 방식으로 this의 값을 조작(제어)할 수 있습니다. 말하자면, 이 방식은 자바스크립트에게 "JS야~ X함수를 호출해. 하지만 X함수에는 this 값으로 Z객체를 사용하라고 일러줘~!!!"라고 말하는 셈과 같습니다. 이 방식을 사용하면 바로 자바스크립트에서 설정한 this의 값을 재정의 할 수 있습니다. call() & this 값 설정 다음의 코드는 하나의 객체와 하나의 함수를 정의한 후 call()을 사용해 함수를 호출하며, 함수 내부의 thi..
JavaScript/this 키워드 2016. 10. 4. 08:57

call/apply 가 생성자에서 사용될 경우

call/apply 와 생성자 call / apply 가 생성자에 사용되면 다른 생성자에 정의된 인스턴스 멤버를 가져와서 정의할 수 있습니다. 다음과 같은 Person, Korean 생성자가 있다고 가정합니다. JavaScript function Person(name) { this.name = name; } function Korean(city) { this.city = city; } Korean 에서 Person 에 정의되어 있는 인스턴스 멤버를 가져오고 싶은 경우에 call/apply 를 사용할 수 있다는 것입니다. JavaScript function Korean(city) { // 생성자 Person 에 대해 call/apply 를 호출한다. Person.call(this, name) // Pers..
JavaScript/this 키워드 2016. 10. 4. 08:56

this 총정리

this 란? this 는 일반적으로 메서드가 호출한 객체의 속성(프로퍼티)입니다. this 는 객체를 생성하는 동시에 자동 생성됩니다. JavaScript function MyClass(){ this.property1 = "value1"; } MyClass.prototype.method1 = function(){ console.log(this.property1); } var my1 = new MyClass(); my1.method1(); this 가 만들어지는 경우는 일반적으로 다음과 같습니다.1) 일반 함수에서의 this 2) 중첩 함수에서의 this 3) 이벤트에서의 this 4) 메서드에서의 this 5) 메서드 내부의 중첩함수에서의 this 일반 함수에서 this 일반 함수에서서의 this 는 ..
JavaScript/this 키워드 2016. 10. 4. 08:56

bind()와 this

bind 메소드 함수를 호출하면 바로 실행되지만 bind 메소드는 Function 객체를 생성하여 반환한다. bind 메소드는 새로운 Function 객체를 생성하는 단계와 생성한 Function 객체를 함수로 호출하는 단계로 나뉘어진다. 그리고 ES5에서 지원한다. 첫번째 파라미터에 bind 메소드로 생성한 Function 객체를 함수로 호출할 때 this로 참조할 오브젝트를 지정한다. 만약 지정하지 않는다면 글로벌 객체로 간주한다. 두번째 파라미터에 bind 메소드로 생성한 Function 객체를 함수로 호출할 때 사용할 파라미터를 지정한다. 생성한 Function 객체를 함수로 호출할 때도 파라미터를 지정할 수가 있다. bind 메소드에 지정한 파라미터와 생성한 Function 객체를 함수로 호출할..
JavaScript/this 키워드 2016. 10. 4. 08:56

apply()와 this

apply 메소드 apply 메소드는 call 메소드와 같이 함수를 호출하며 기능도 같다. 한 가지 다른점이 두번째 파라미터를 배열로 작성하는 것이 다른 점이다. 일반적으로 call 메소드는 파라미터의 수가 변하지 않을 때 사용하며 apply 메소드는 파라미터가 유동적일 때 사용한다. 두 번째 파라미터 값이 null 또는 undefined 이면 빈 배열로 간주한다. 두 번째 파라미터 값의 데이터 타입이 객체가 아니라면 에러가 발생한다. 123과 같이 숫자 타입을 지정할 수 없는 것이다. {one: 10} 형태로 지정하면 에러가 발생하지는 않지만 arguments 객체에 값이 설정되지 않는다. 파라미터에 함수를 지정하면 먼저 함수를 실행하고 실행한 함수에서 반환한 결과를 파라미터 값으로 사용한다. 호출받는..
JavaScript/this 키워드 2016. 10. 4. 08:52

call()과 this

call 메소드 call 메소드의 첫 번째 파라미터에는 작성(넘겨준)한 객체를 this가 참조하게 된다. 따라서 this.propertyName 형태로 접근하여 값을 구할 수 있다. 이 점이 call 메소드의 목적이고 특징이다. 구 분 타 입 데이터(값) object Function 호출할 함수 파라미터 Object 첫번째 파라미터 : this 로 참조하게 될 객체 두번째 파라미터 : 호출된 함수에 넘줄 파라미터(옵션값) 반환 호출된 함수에서 반환한 값 첫 번째 파라미터에 this로 참조할 오브젝트를 작성한다. ES3에서 첫 번째 파라미터를 작성하지 않거나 null을 작성하면 글로벌 객체(브라우저기준으로 window)를 사용한다. 반명 ES5는 파라미터 값을 그대로 사용한다. 그런데 ES5 에서도 에러가..
JavaScript/this 키워드 2016. 10. 4. 08:51

this 키워드의 주된 목적(인스턴스 설정)

this 주요 목적new 연산자와 생성자 함수로 인스턴스를 만드는 목적 중에서 가장 주된 목적은 생성된 인스턴스마다 다른 값을 설정,유지하기 위해서이다. this 키워드를 사용해서 인스턴스마다 값을 설정하고 유지하는 예제 코드 JavaScript var title = function(opt) { this.opt = opt; }; title.prototype = { getValue: function() { return this.opt; } } // 인스턴스 생성 var one = new title(100); var two = new title([200,300]); one.opt = 77; console.log(one.getValue()); // 77 console.log(two.getValue()); //..
JavaScript/this 키워드 2016. 10. 4. 08:51

this와 호출 오브젝트

this 와 Object 객체가 구조적(계층적)으로 연결된 형태에서 함수를 호출했을 때 this가 참조하는 객체를 좀 더 구체적으로 살펴보도록 하자. 다음의 코드를 살펴보자. JavaScript var cody = { foo: 123, bar: { foo: 456, func: function() { console.log(this === cody.bar) // true console.log(this.foo) // 456 } } }; cody.bar.func(); 계층적인 객체에서 func를 호출하면 cody.bar.func()를 호출한다. 여기서 cody는 네임스페이스 역할을 하며 func앞에 작성한 bar객체를 this가 참조하게 된다. 즉, 함수를 호출할 때는 함수 바로 앞에 작성한 객체를 this가 ..
JavaScript/this 키워드 2016. 10. 4. 08:50

사용자 정의 생성자 함수 내에서 this 키워드

생성자 함수와 this new 키워드를 사용해 함수를 실행할 때 생성자 함수 내에 코딩된 this의 값은 생성자의 인스턴스를 가리킨다. 다시 말해, 생성자 함수 내에서 우리는 실제로 객체가 만들어지기 전에도 this를 통해 인스턴스를 참조할 수 있다는 것이다.이때 this의 기본값이 변경되는 방식은 call(),apply()를 사용한 것과 크게 다르지 않다. 다음 코드에서 Person이라는 사용자 정의 생성자 함수를 만들고, 생성자 내에서 this를 사용하여 만들어질 객체를 참조하게 한다. Person의 인스턴스가 만들어질 때 this.name은 새로 생성되는 객체 및 이 객체의 name이라는 속성을 참조한다.결과적으로 생성자 함수에 전달된 매개변수(name)의 값을 새로 생성되는 객체의 name 속성에..
JavaScript/this 키워드 2016. 10. 4. 08:50

중첩된 함수의 this는 글로벌 객체(브라우저에서는 window)를 참조한다

중첩 함수의 this this 키워드에 대한 기본적인 사용법에 대해서 앞서 알아보았습니다. 그렇다면 함수 내에 있는 함수에서는 this값이 어떻게 참조될까? 다음 코드에서 func2과 func3의 this는 obj객체가 아닌 글로벌 객체를 참조한다. 아래 코드를 살펴보도록 하자. JavaScript var obj = { func1 : function(){ console.log(this); // obj가 기록된다 // 중첩된 내부 함수정의 var func2 = function() { console.log(this); // window 가 기록되며, 여기서부터는 this의 값이 계속 window이다. // 중첩된 함수를 또 정의 var func3 = function() { console.log(this); ..
JavaScript/this 키워드 2016. 10. 4. 08:49

this 키워드

this 알아보기 함수를 만들 때는 함수를 실행하는 객체와 연결되는 this라는 키워드도 같이 자동으로 만들어진다. 즉, 함수를 호출할 때 자바스크립트가 자동으로 만들어 삽입하는 객체인 것입니다. this라는 키워드는 함수의 스코프 안에서 사용할 수 있으며 함수를 속성 또는 메소드로 포함하고 있는 객체를 참조합니다. 다음의 코드를 살펴보자. JavaScript var cody = { living : true, age : 30, gender: 'male', getGender : function() { return this.gender; } }; // 객체내의 메소드를 호출 console.log(cody.getGender()); // male이 기록된다. 위 코드에서 this.gender의 this는 현재 ..
JavaScript/this 키워드 2016. 10. 4. 08:49