Study/JavaScript

[JavaScript_study] 바벨 (Babel)

* 바벨 (Babel) 바벨을 이용해 최신문법으로 작성하고 예전 버전으로 변환이 가능하다. react, node등 최신 프레임워크는 바벨과 같은 툴들이 전부다 들어있기 때문에 우리가 신경쓰지않고 최신문법으로 개발을 하면 나중에 프로젝트를 빌드해서 사용자에게 배포하는 코드에는 예전 자바스크립트 버전으로 변환해주는 기능이 포함되어 있다. 순수 자바스크립트로 프로젝트를 진행하다가 예전 브라우저를 사용하는 유저에게까지 지원을 해야한다면 babel을 사용해서 버전을 내려서 빌드해야한다. 타입스크립트 컴파일러는 TS를 JavaScript로 변환하는 용도로도 사용한다. // 하지만 최신 JS코드를 예전 JS코드로 변환하는데 사용할 수 있다. * 바벨 실습해보기 https://babeljs.io 사이트에 들어가서 상단..

[JavaScript_study] arrow function (화살표 함수)

* arrow function (화살표 함수)의 특징 문법이 깔끔함 생성자 함수로 사용이 불가능 (무거운 프로토타입을 만들지 말것) 함수 자체 arguments객체를 가지고 있지 않다. ex) console.log(arguments[0])이 되지 않는다. 일반함수에서는 arguments라는 객체가 있어서 전달된 인자에 대한 정보를 가지고 있다. 화살표함수에서는 arguments란 함수 외부의 argument를 참조만함 화살표함수는 node환경에서는 node에서 사용하고 있는 node를 실행할 때 전달받는 인자에 대한 정보를 출력 this에 대한 바인딩이 정적으로 결정된다. 함수에서 제일 근접한 상위 스코프의 this에 정적으로 바인딩됨 * arrow function을 사용하는 이유 - 객체안에서 함수표현..

[JavaScript_study] This바인딩

* This (이것) 문맥에 따라 이것(This)가 가리키는 것이 달리짐 생성자 함수 안, 객체 안, 클래스 안에서 this를 사용하였는데 this는 앞으로 만들어질 인스턴스 또는 지금 객체 자기 자신을 가리키는 용도로 사용하였다. 이렇게 this를 사용하면서 나 자신의 instance를 가리키는 것 즉, 특정한 객체와 이 this를 묶어두는 연결된 것을 this바인딩 이라고 한다. C++, C#, JAVA 코드상에서 this 바인딩은 정적으로 결정된다. 한번 instance를 가리키는 this가 결정이 되면 this는 계속 그 instance하나만 정적으로 꾸준히 가리킨다. JS와 TS는 런타임상에서 동적으로 this바인딩이 결정된다. 글로벌 컨텍스트의 this는 무엇을 가리키는가? 브라우저 : win..

[JavaScript_study] 클로저(Closure)

* 클로저 (Closures) 폐쇄, 닫히는 느낌 클로저란 함수와 렉시컬 환경의 조합이다. 클로저란 내부함수에서 외부함수에 있는 상태에 접근할 수 있는 권한을 주는것을 말한다. // 내부 블럭에서 외부 블럭으로 접근이 가능 따라서 func()함수 내부에 정의된 text는 외부 변수 text를 가져온다. // 하지만 내부에서 선언된 변수는 외부에서는 접근할 수 없다. const text = 'hello'; function func() { console.log(text); } func(); // 내부에서 외부를 가르킬 수 있다고 다 클로저가 아니다. // 중첩된 함수에서 내부에 있는 함수와 외부에 있는 함수의 상태(렉시컬 환경에)에 접근할 수 있는것을 클로저라고 한다. // 내부함수와 외부함수가 함께 묶여있..

[JavaScript_study] Mixin

* Mixin 오브젝트는 단 하나의 prototype을 가리킬 수 있다 (부모는 단 하나!) 하지만! 여러개의 함수들을 상속하고 싶다! Mixin을 이용해서 여러개의 객체를 재사용할때 유용하게 사용할 수 있다. * Mixin 예시 코드 const play = { play: function () { console.log(`${this.name} 놀아요!`); }, }; const sleep = { sleep: function () { console.log(`${this.name} 자요!`); }, }; function Dog(name) { this.name = name; } // assign을 이용해서 Mixin해준다. Object.assign(Dog.prototype, play, sleep); const..

[JavaScript_study] 상속(inheritance) // prototype, class

* 객체지향 프로그래밍의 가장 큰 특징 및 장점 상속을 통한 코드의 재사용성 * 요즘 최신 자바스크립트, 타입스크립트, 다른 객체 지향언어에서는 prototype를 베이스로 하지않고 Class를 이용해서 조금 더 간편하게 한다. * 브라우저, node환경에서는 최근 자바스크립트, 타입스크립트에서 제공하는 Class를 사용하기 때문에 prototype에 대해서 일일이 작성하지는 않는다. * 상속 예시 코드 프로토타입을 베이스로 한 객체지향 프로그래밍 // 프로토타입을 베이스로한 객체지향 프로그래밍 function Animal(name, emoji) { this.name = name; this.emoji = emoji; } Animal.prototype.printName = function () { cons..