728x90 개발/javascript9 22장 this - 바인딩 call, apply, bind 일반 함수와 콜백 함수에서 this에 대해 알아보겠습니다. Function.prototype.call, apply, bind 로 콜백함수에 this를 바인딩해보겠습니다. 목차 📑 콜백 함수의 this 소개 this 바인딩 하기 Function.prototype call, apply 차이 Function.prototype bind 콜백함수의 this 소개 콜백 함수가 일반 함수로 호출된다면 콜백 함수 내부의 this에도 전역 객체가 바인딩됩니다. 어떠한 함수라도 일반 함수로 호출되면 this에 전역 객체가 바인딩됩니다. var value = 1; const obj = { value: 100, foo() { console.log('foo this: ', this); // { value: 100, foo: f.. 2023. 12. 13. 25장 클래스 - 클래스 정의, 클래스와 생성자 함수 비교 클래스와 생성자 함수의 차이에 대해 알아 보겠습니다. 목차 📑 클래스 정의 클래스와 생성자 함수의 차이 클래스 정의 // 클래스 선언문 class Person { // 생성자 constructor(name){ // 인스턴스 생성 및 초기화 this.name = name; // pulic } // 프로토타입 메서드 sayHi(){ console.log(`Hi! My name is ${this.name}`); } // 정적 메서드 static sayHello() { console.log('Hello!'); } } // 인스턴스 생성 const me = new Person('Jeon'); // 인스턴스의 프로퍼티 참조 console.log(me.name); // 프로토타입의 메서드 호출 me.sayHi(); .. 2023. 12. 7. 19장 프로토타입 - __proto__와 prototype __proto__와 prototype에 대해 알아 보겠습니다. 목차 📑 __proto__ 소개 prototype 소개 __proto__ 소개 __proto__ 모든 객체는 __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입에 간접적으로 접근할 수 있습니다. __proto__는 접근자 프로퍼티 입니다. __proto__ 접근자 프로퍼티는 객체가 직접 소유하는 프로퍼티가 아니라 Object.prototype의 프로퍼티입니다. 모든 객체는 상속을 통해 Object.prototype.__propto__ 접근자 프로퍼티를 사용할 수 있습니다. const person = { name : 'jeon'} // person 객체는 __proto__ 프로퍼티를 소유하지 않습니다. // person.__proto__.. 2023. 12. 5. 19장 프로토타입 - 생성자 함수 인스턴스 생성시, 불필요한 중복을 프로토타입으로 제거하고, 오버라이딩과 프로퍼티 새도잉에 대해 알아 보겠습니다. 목차 📑 생성자 함수의 프로토타입 생성자 함수로 인스턴스 생성 인스턴스 오버라이딩과 프로퍼티 섀도잉 생성자 함수의 프로토타입 function Circle(r){ this.r = r; this.getArea = function () { return Math.PI * this.r ** 2; } } const circle1 = new Circle(1); const circle2 = new Circle(2); console.log(circle1.getArea === circle2.getArea) // false 인스턴스를 생성할 때마다 메서드를 중복 생성하고 모든 인스턴스가 중복 소유합니다. 모든 인.. 2023. 11. 30. 19장 프로토타입 - hasOwnProperty, Object.create Object의 property가 있는지 확인하기 위해 .hasOwnProperty()를 사용합니다. Eslint를 사용하면 밑줄이 그어지는데, 그 원인을 알아 보겠습니다. 그리고 대안도 함께 알아 보겠습니다. 목차 📑 Object.create() 란? 해결방법1 해결방법2 Object.create() 란? Object를 생성할 때, prototype을 인자로 받아 객체를 생성해주는 함수입니다. 즉 객체를 생성하면서 직접적으로 상속을 구현하는 것입니다. 장점은 new 연산자 없이도 객체를 생성할 수 있습니다. 프로토타입을 지정하면서 객체를 생성할 수 있습니다. 객체 리터럴에 의해 생성된 객체도 상속받을 수 있습니다. obj.hasOwnProperty() 사용시 문제점 const obj1 = { a : 1 .. 2023. 11. 28. 21장 빌트인 전역 함수 - encodeURI, decodeURI, encodeURIComponent, decodeComponent 빌트인 전역 함수 중 encodeURI/encodeURIComponent의 차이를 알아보고, URI와 그 하위개념인 URL과 URN을 살펴보겠습니다. 목차 📑 URI 소개 인코딩이란? encodeURI/decodeURI 소개 encodeURI/decodeURI 사용해보기 encodeURIComponent/decodeURIComponent 소개 encodeURIComponent/decodeURIComponent 사용해보기 URI 소개 URI는 인터넷에 있는 자원을 나타내는 유일한 주소를 말합니다. URI의 하위 개념으로 URL, URN이 있습니다. URL이 URI의 하위 개념인데 https:// 부터 #Intro까지 동일하게 보는 것 같습니다. 인코딩이란? 인코딩이란 URI의 문자들을 이스케이프 처리하는 .. 2023. 11. 24. 단축 평가, 옵셔널 체이닝, 함수 인자 초기화 목차 📑 연산자 개요 || OR 연산자 && AND 연산자 ?? null 병합 연산자 ?. 옵셔널 체이닝 연산자 function (a = ‘test’) function(인자) 초기화 || ( OR 연산자 ) 왼쪽이 falsly 값이면 오른쪽 값을 취합니다. const or1 = "Dog" || "Cat"; // 'Dog' const or2 = "" || "Cat"; // 'Cat' const or3 = "Dog" || ""; // 'Dog' && ( AND 연산자 ) 왼쪽이 falsly 값이면 왼쪽 값을 취합니다. const and1 = "Dog" && "Cat"; // 'Cat' const and2 = "" && "Cat"; // '' const and3 = "Cat" && ""; // '' ?? ( .. 2023. 11. 20. lodash Array, Collection, Object 메서드 모음 목차 📑 lodash 정리 lodash 정리 Array, Collection, Object 별 메서드를 정리하겠습니다. initial Array Collection Object a ---------- --------- _.assign _.assignIn _.assignInWith _.assignWith _.at b ---------- --------- --------- c _.chunk _.compact _concat _.countBy _.create d _.difference _.differenceBy _.differenceWith _.drop _.dropRight _.dropRightWhile _.dropWhile --------- _.defaults _.defaultsDeep e ----------.. 2023. 11. 8. lodash Array 메서드 a to z - ( return Array ) 목차 📑 lodash Array 메서드 소개 lodash Array 메서드 a to z lodash Array 메서드 소개 Lodash Array 메서드를 한번씩 사용해보겠습니다. lodash 공식 홈페이지 lodash 연습장 lodash Array 메서드 a to z c _.chunk(array, [size=1]) 원본 배열을 size만큼 잘라 새로운 배열을 반환합니다. Creates an array of elements split into groups the length of size. If array can’t be split evenly, the final chunk will be the remaining elements. const chunk1 = _.chunk(["a", "b", "c", "d.. 2023. 10. 31. 이전 1 다음 728x90