profile
frontend developer
post-thumbnail

[Effective JavaScript] 인스턴스의 상태는 인스턴스 객체에만 저장하자

javascript 객체를 잘못 구현하는 방법 중 하나는 인스턴스마다 저장해야할 데이터를 실수로 프로토타입에 저장하는 것이다.만약 트리 데이터 구조를 구현하는 클래스는 아마도 각 노드마다 자식들의 배열을 포함할 것이다. 근데 자식 배열을 프로토타입에 저장한다면 어떻게

2023년 7월 19일
·
1개의 댓글
·
post-thumbnail

[Effective JavaScript] 비공개 데이터를 저장하기 위해 클로저를 사용하자

자바스크립트의 객체시스템은 정보를 은닉을 권장하지 않는다! 프로퍼티의 이름은 문자열이고, 프로그램 내에서 그 이름을 통해 어디서라도 접근할 수 있고, 다음과 같은 함수들을 사용할 수 도 있다!for… inObject.keys()Object.getOwnPropertyNa

2023년 7월 19일
·
1개의 댓글
·
post-thumbnail

[Effective JavaScript] 메서드를 프로토타입에 저장하자

자바스크립트에서 프로토타입을 쓰지 않고 프로그램을 작성하는것은 얼마든지 가능하다. 다음과 같이 작성해도 사실 문제는 없다. 하지만 여러 인스턴스를 만든다면 이야기는 달라진다. toString과 checkPassword 메서드를 프로토타입으로 공유하는 대신, 각 인스턴스

2023년 7월 18일
·
1개의 댓글
·
post-thumbnail

[Effective JavaScript] 생성자가 new와 관계없이 동작하게 만들자

User 함수와 같은 생성자를 만들 때, 호출자는 반듣시 new 연산자를 통해 호출해야 한다. 함수의 수신자 객체는 전역 객체가 되버린다. 함수가 undefined를 반환할 뿐만 아니라 전역변수에 name과 age가 이미 존재한다면 수정하게 된다. “use strict

2023년 7월 17일
·
0개의 댓글
·
post-thumbnail

[Effective JavaScript] __ proto __ 를 절대 수정하지 말자

\_\_proto\_\_ 는 Object.getPrototypeOf가 가지지 않은 추가적인 기능이 있다. 그것은 \_\_ proto \_\_로 객체의 prototype링크를 수정할 수 있다는것이다. 이 기능은 크게 잘못되어 보이지 않는데, 결과적으로는 아주 큰 영향을

2023년 7월 17일
·
0개의 댓글
·
post-thumbnail

[Effective JavaScript] __ proto __ 보다 Object.getPrototypeOf()를 사용하자

두가지 모두 javascript에서 프로토 타입에 접근하는데 사용되는 메커니즘이다. 하지만 사용 방법과 결과적인 동작에 차이가 있는데 아래 코드를 통해 차이점을 알아보자 예시 1 두 가지 모두 자신이 바라보고있는 프로토타입을 가리킨다. 예시 2\_\_proto\_\_

2023년 7월 14일
·
0개의 댓글
·
post-thumbnail

[Effective JavaScript] prototype, getPrototypeOf, _ _ proto _ _의 차이점을 이해하자

javascript에서 모든 것은 객체이다. 속성과 메서드를 가질 수 있다.키 - 값 쌍으로 이루어진 속성을 포함, 객체의 상태를 나타낸다.{} 또는 new Object() 를 통해 생성할 수 있다.프로토타입은 객체의 부모 역할을 하는 객체이다. 다른 객체들이 상속을

2023년 7월 13일
·
0개의 댓글
·
post-thumbnail

[Effective JavaScript] 비표준 스택 검사 프로퍼티를 사용하지 마라

javascript에서 사용되는 특별한 속성이다. 이 속성은 arguments 객체 내에서 현재 실행중인 함수에 대한 참조를 제공한다. 예를 들어 다음과 같은 재귀함수를 작성하다고 가정해보자 위 코드에서 factorial 함수 내부에 arguments.callee 를

2023년 7월 10일
·
0개의 댓글
·
post-thumbnail

[Effective JavaScript] 함수의 toString메서드에 의존하지 말자

javascript 함수는 toString 메서드를 통해 그 소스코드를 문자열로 재생산 할 수 있다. 방법1방법2해커들은 다음과 같은 방법을 이용하기도 한다. 하지만 함수의 toString() 메서드에는 몇가지 제약이 있다. 이말이 무슨소리냐 하면 자바스크립트 엔진에

2023년 7월 7일
·
0개의 댓글
·
post-thumbnail

[Effective JavaScript] 코드를 캡슐화 하기 위해 문자열보다 클로저를 사용하자

우리는 eval을 사용하여 문자열로 함수를 표현할 수 있다. 그렇다면 코드를 함수로 표현해야 할까 문자열로 표현해야할까? 만약 이런 의심이 들었다면 함수로 표현하는 것이 좋다. 바로 문자열은 클로저가 아니기 때문이다. 다음과 같은 함수가 있다고 가정해보자문자열로 입력

2023년 7월 7일
·
0개의 댓글
·
post-thumbnail

IIFE 패턴과 클로저

즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression) 은 정의되지마자 즉시 실행되는 javascript function을 말한다.()로 둘러싸인 익명함수, 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을

2023년 7월 7일
·
0개의 댓글
·
post-thumbnail

[Effective JavaScript] 커링 함수에 bind를 사용하자

simpleURL()위의 매서드는 다음과 같이 사용할 수 있습니다. map의 각 반복에서 익명함수가 동일한 프로토콜 문자열 http와 사이트 도메인 문자열 siteDomain 즉 처음 두인자는 매번 반복됩니다. 때문에 bind를 사용해 다음과 같이 정의할 수 있습니다.

2023년 7월 6일
·
0개의 댓글
·

[Effective JavaScript] 고정된 수신자 객체로 메서드를 추출하기 위해 bind를 사용하자

다음과 같은 함수가 있다고 가정해보자 forEach 메서드를 사용하면 적용할 대상 배열의 각 요소에 대해 반복 호출하여 문자열로 된 배열을 buffer로 복사할 수 있을 지도 모른다여기서 buffer.add를 사용하긴 하지만 해당 함수의 수신자 객체는 buffer가 아

2023년 7월 6일
·
0개의 댓글
·
post-thumbnail

[Effective javascript] 변수를 사용하여 argumentes의 참조를 저장하자

반복 가능한 객체를 다루기 위해 사용되는 iterator(반복자) 입니다. iterator는 일련의 값을 순차적으로 반환할 수 있는 객체입니다. 이 객체는 next() 메소드를 가지며, 각 호출마다 값을 가진 객체를 반환합니다. 반환되는 객체는 {value, done

2023년 7월 6일
·
0개의 댓글
·
post-thumbnail

ES6 비동기 함수, 디바운스, 스로틀

디바운스와 스로틀은 ES6문법은 아닙니다. 하지만 지연 처리를 효율적으로 구현할 수 있습니다. 어떤 내용을 입력하다가 일정 시간동안 입력이 없으면 마지막에 입력된 내용을 바탕으로 한번만 서버요청을 하는 방법입니다. 네이버의 추천 검색어, 연관 검색어의 창을 생각하면 이

2023년 7월 5일
·
0개의 댓글
·
post-thumbnail

ES6 문법 정리!

"ECMAScript"의 약자. ECMAScript는 JavaScript 언어의 표준화된 버전을 말합니다.. JavaScript는 웹 개발에서 널리 사용되는 프로그래밍 언어이며, ECMAScript는 이 JavaScript 언어의 규격을 정의한 문서입니다. 비교적 최근

2023년 7월 4일
·
0개의 댓글
·
post-thumbnail

[Effective JavaScript] 절대 arguments 객체를 수정하지 마자

arguments 객체가 배열과 비슷해 보일수 있으나 배열처럼 동작하지 않는다. 예를 들어 shift() 라는 함수가 있는데, 이 메서드는 배열의 첫번째 요소를 젝하고 뒤이은 모든 요소들을 하나씩 이동시킨다. arguments에서는 이 shift() 를 사용할 수 없다

2023년 7월 4일
·
0개의 댓글
·
post-thumbnail

[Effective JavaScript] 가변 인자 함수를 생성하기 위해 arguments를 사용하자

javascript 함수 내에서 사용할 수 있는 특별한 객체, 함수가 호출될 때 전달된 모든 인자들을 포함하고 있다. 다음과 같은 속성을 사용할 수 있다. length: arguments 객체에 전달된 인자들의 개수callee : 현재 실행중인 함수에 대한 참조 반환i

2023년 7월 3일
·
0개의 댓글
·
post-thumbnail

[Effective JavaScript] 다른 개수의 인자로 함수를 호출하기 위해 apply를 사용하자

자바스크립트의 함수 객체 메서드로, 다른 객체의 컨텍스트에서 함수를 호출하는 방법이다.function : apply() 를 호출하는 함수 객체thisArg : 함수 내에서 this의 값으로 사용됨argsArray : 함수를 호출할 때 전달할 인자들의 배열두 메서드 모두

2023년 7월 3일
·
0개의 댓글
·
post-thumbnail

[Effective JavaScript] 지정된 수신자 객체로 함수를 호출하기 위해 call 메서드를 사용하자

call() 메서드는 함수를 호출하는 방법 중 하나로, 특정 객체에서 함수를 호출하면서 this 값을 설정할 수 있다. call() 메서드는 함수와 함께 사용되며, 함수의 첫번째 인자로 객체를 받는다. 이렇게 하므로써 함수 내부에 this를 지정된 객체로 설정할 수 있

2023년 6월 29일
·
0개의 댓글
·