본문 바로가기

갬발자의 프로그래밍/Javascript17

[Javascript] this 의미, 암시적바인딩 vs 명시적바인딩 (call, apply, bind, new, 화살표함수) this란 객체를 참조하는 키워드다. 하지만 다른 언어와 다르게 런타임 바인딩 되기때문에 this의 값은 함수를 호출한 위치에서 결정된다. [기본바인딩] function foo() { console.log(this); } foo(); //// window 기본바인딩은 global적으로 바인딩이 되는것을 말하며 브라우저 상에서는 window 객체를 가르킨다. [암시적 바인딩] window.a = 'window'; function foo() { console.log(this.a); } const obj = { a:1, foo: foo } obj.foo() // 1 foo() // window 함수가 f호출되는 위치에서 this가 바인딩 되어진다. 위의 경우 this가 { a: 1, foo: foo } 객체에.. 2021. 3. 11.
[Javascript] 프로토타입 언어 : prototype 과 객체 생성 자바스크립트는 프로토타입 언어라고 한다. 그런데 여기서 프로토타입이 뭘까? prototype을 알기위해서 우선 객체를 알아야 한다. 객체를 생성하는 대표적 방법은 2가지 종류가 있다. 객체 리터럴 방식과 생성자 함수 (이하 클래스)를 통한 방식이있다. 1.객체 리터럴(object literal) 방식 foo는 네임스페이스처럼 동작한다. 중괄호로 간단하게 생성할 수 있다. //리터럴 방식 const foo = {}; 객체 리터럴은 점표기법(.) 으로 값을 가져오거나 정의 할 수 있다. const foo = { name: 'foo' }; foo.number = 1; console.log(foo.name); // 'foo' console.log(foo.nomber); // 1 또한 괄호표기법(대괄호 [ ]) .. 2021. 2. 22.
유용팁 Number() 의 형변환은 숫자형태의 string만 가능 - 숫자와 문자열이 섞여 있다면 NaN 반환 parseInt() 의 형변환은 숫자형태로 시작하면 문자열이 나오기 전까지 의 숫자를 반환 - 문자열 시작이면 NaN 반환 문자열 -> 숫자 형변환 방법 + 연산자 를 붙인다 ex) +"1" Nunber() 객체 사용 ex)Number("1") parseInt() 메소드 사용 ex)parseInt("1"); 2020. 3. 26.
closure(클로저) 클로져는 내부 함수의 렉시컬 환경 컴포넌트에서 외부 렉시컬 환경 컴포넌트를 참조하고 있게 되면서 사용할 수 있을 것을 말하게 된다. function a(){ const name = 'a component'; function b(){ console.log(name); } return b; } const c = a(); console.log(c());//a component 위에서 보게 되면 내부 함수 b()가 외부 함수 a()의 변수 name을 참조해 사용된다. 이미 a()의 라이프 사이클은 c에게 b()를 반환하고 사라졌다. 하지만 c는 마치 함수 a()의 변수 name를 사용이라도 하듯 접근할수있다. 이것은 렉시컬 환경 스코프로인해서 함수가 정의된 곳에따라 상위 스코프의 참조가 가능해지기 때문이다. 클.. 2020. 1. 13.