자바스크립트에는 어떤 값을 문자열로 변환시켜주는 toString()이라는 것이 존재한다. toString의 인자로는 진법을 넣을 수 있다. (3).toString(2) // '11' 인자로 아무것도 넘겨주지 않으면 그대로 문자열이 된다. 아무 평범한 함수처럼 보이지만, class에서 유용하게 사용할 수 있는 방법을 습득했다. class User { constructor(name) { this.name = name; } toString() { return this.name; } } console.log(`Hi ${new User("Dobby")}`); 위 코드를 실행시키면 어떻게 될까? 'Hi Dobby'가 출력되게 된다. 백틱안의 객체가 문자열화 되면서 자동으로 .toString()을 호출했기 때문이다.

자바스크립트에는 Not a Number를 체크할 수 있는 방법이 있는데, Number.isNaN(1) // true Number.isNaN('1') // false 바로 Number.isNaN이다. 인수로 숫자가 아닌값이 들어오면 false를 리턴한다. 여기서 숫자는 integer 값이다. 다음과 같이 실수가 들어와도 false를 리턴한다. Number.isNaN(10.1) // false 다음과 같은 재미있는 특성도 있다. (자기자신이 다르다는데 맞다고 하는게 NaN이다.) var a = NaN; a !== a; // true var b = "foo"; b !== b; // false var c = undefined; c !== c; // false var d = {}; d !== d; // false..

- 액션 규칙 액션은 어떤 형태의 액션이 행해질지 가리키는 type 필드를 가져야 함 타입은 상수로 정의되고 다른 모듈에서 불러와질수 있음. 문자열은 직렬화될 수 있기 때문에 타입으로 Symbols 보다는 문자열을 쓰는 것이 좋음 액션 객체에서 type외의 다른 부분은 마음대로. - 리듀서 규칙 식별되지 않은 모든 상태에 대해서는 첫 인수로 주어진 state를 그대로 반환해야함 state가 undefined로 주어지면 반드시 해당 리듀서의 초기 상태를 반환해야함 반드시 리듀서가 undefined를 상태로 받더라도 제대로 작동하는지 확인필요 리듀서에서 Object.assign(state, newData) 같은 것을 반환하는 대신 Object.assign({}, state, newData)를 반환하기 (이를..

function todoApp(state=initialState, action){ switch(action.type){ case SET_VISIBILITY_FILTER: return Object.assign({}, state, { visibilityFilter: action.filter }) default: return state } } const ADD_TODO = 'ADD_TODO' // action의 type을 정의 function addTodo(text){ // action creator return{ type: ADD_TODO, text } } 출처 리덕스는 javacript app을 위한 예측가능한 state container이다. React 뿐만 아니라 Angular등등 다양한 프레임워크와도..

출처 위 글에 따르면 Set()을 Array로 만들때 Array.from 보다 spread 방식으로 만드는 것이 좀더 빠른 것을 알 수 있다.

documentFragment는 라이브 DOM 트리 외부에 경량화된 DOM 객체를 만들 수 있다. 마치 라이브 DOM 트리 처럼 동작하나, 메모리상에서만 존재하는 빈 문서이다. 주로, documentFragment의 자식노드를 메모리상에서 쉽게 조작한 후 라이브 DOM에 추가하는 용도로 사용된다. (appendChild, insertBefore) 그럼 createElement와 차이는 무엇인가? 1) documentFragment는 어떤 종류의 노드도 가질 수 있지만, element는 그렇지 않다. 2) documentFragment는 DOM에 추가해도 documentFragment 자체는 추가되지 않으며 documentFragment의 내용만 추가되지만, element는 그 자체가 추가된다. 3) do..

어떤 엘리먼트 안에 새로운 엘리먼트를 추가해야할 때, innerHTML과 appendChild 중 어느것을 사용하는 갓이 좋을까? 일단 각각의 특징부터 정리해보자. innerHTML은 일단 string을 파싱하는 작업이 추가된다. 그리고 노드들을 생성 및 직렬화(?)하여, DOM 객체 안의 html에 단 1번 할당하는 방식이다. appendChild는 만들어진 노드를 타겟 엘리먼트의 자식으로 할당하는 역할을한다. 단, DOM 객체에 접근이 필요하다. 이러한 관점으로 볼때, 추가해야할 노드가 많다면 innerHTML를 사용하여 한번에 주는게 낫고, 추가해야할 노드가 적다면 appendChild으로 문자열 파싱없이 주는게 낫다. 하지만 잘 생각해보면, 노드가 적든말든 DOM 객체에 1번만 접근하고, 문자열 ..

javascript의 전역 변수는 스코프 체인의 마지막에 오게되어서, 태그 탐색 등의 일을 하게 되면 n^2의 비용이 발생된다. document는 javascript의 전역변수이다. 즉, document라는 전역 객체에 지속적으로 접근하는 것은 javascript의 성능저하를 일으킨다. document에 접근할 일이 많다면, 미리 변수에 담아서 캐싱하는 것이 좀더 나은 방법이다. const doc = window.document; doc.querySelector('div');