분류 전체보기

[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..

[JavaScript_study] freeze (불변성을 추구할 때)

* Object.freeze Object의 불변성을 추구해야할때 사용한다. 동결! Object.freeze 추가 ❌, 삭제 ❌, 쓰기 ❌, 속성 재정의 ❌ (단, 얕은 꽁꽁 얼림!) // shallow copy를 해준다. 꽁꽁얼려도 특정한 객체에서 다른 객체를 참조하고 있다면 그 참조하는 객체까지는 얼려주지않는다. * Object.seal 밀봉! Object.seal 값의 수정 ✅, 추가 ❌, 삭제 ❌, 속성 재정의 ❌ * Object.preventExtensions 확장 금지 preventExtensions 추가 ❌ 값 수정 가능, 값 삭제 가능, 값 추가 안됨 * Object.isFrozen 객체가 동결되었는지 안되었는지 확인이 가능하다. * Object.isSealed 밀봉되었는지 안되었는지 확인 ..

[JavaScript_study] 프로퍼티(property)

* 프로퍼티(property) 프로퍼티는 프로퍼티 키(이름)와 프로퍼티 값으로 구성된다. 프로퍼티는 프로퍼티 키로 유일하게 식별할 수 있다. 즉, 프로퍼티 키는 프로퍼티를 식별하기 위한 식별자(identifier)다. 프로퍼티 키의 명명 규칙과 프로퍼티 값으로 사용할 수 있는 값은 아래와 같다. 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값 프로퍼티 값 : 모든 값 const dog = { name: '와우', emoji: '강아지' }; console.log(Object.keys(dog)); console.log(Object.values(dog)); // [key, value] 쌍의 배열을 반환 console.log(Object.entries(dog)); // 특정 오브젝트에 ..