자바스크립트 객체의 property name은 string이거나 Symbol이다. 그러므로 string이나 Symbol이 아닌 다른 value로 객체의 property에 접근한다면 string으로 강제형변환된다. let object = {}; object['1'] = 'value'; console.log(object[1]); // 'value' 위에서 bracket notation으로 object[1]로 접근할 때, 1은 number 타입이므로 string으로 강제형변환된다. 즉 object['1'] 을 호출한 것과 동일하게 되어 'value' 를 출력한다. (참고) bracket notation이 아닌 dot notation으로 접근할 때는 syntax error가 발생한다. (e.g. object.1..
자바스크립트로 알고리즘을 풀다가 tc 하나가 계속 시간 초과가 나와서, 정말 혹시나 하고 양수를 내림하는 부분에 parseInt 대신 Math.floor로 고쳤더니 바로 통과가 되었다. 자바스크립트로 positive decimal number를 내림할 때 Math.floor랑 parseInt 를 사용할 수 있는데, 둘 중에 하나를 택해야 한다면 Math.floor 를 사용하자. 왜냐면 얘가 훨씬 더 빠르다. 그리고 Math.floor 보다는 ~~ 라는 연산자를 사용하면 더 빠르다. 이 사이트 에서 퍼포먼스 테스트를 해볼 수 있는데, Math.floor가 parseInt보다 훨씬 빠르고, ~~ 연산자가 Math.floor 보다 조금 더 빠르다. 참고로 ~ tilde 연산자는 Bitwise NOT 이라는 자..
현상 var mySet = new Set(); ['bar', 'baz'].forEach(mySet.add); 이 현상은 꼭 Set이어야 하는 것은 아니고, 콜백 내부에서 this를 사용하고 있는 케이스에서 문제가 된다. forEach문이나 map에는 첫번째 인자로 콜백을 넘겨주고 두 번째인자로 this를 넘겨주도록 되어있는데, 만약 값을 넘겨주지 않으면 두 경우 모두 undefined 로 설정된다. 그러므로 콜백으로 넘겨준 메서드 내에서 this가 사용되고 있는 경우, 참조하는 this가 undefined가 되어 정상적으로 실행되지 않는다. 해결 방법 명시적인 바인딩 var mySet = new Set(); ['bar', 'baz'].forEach(mySet.add.bind(mySet)); Arrow 함..
회사에서 redux, rxjs, redux-observable을 사용하고 있는데 처음엔 왜 이런 복잡한 걸 쓰나 싶었지만 쓰다보니 또 편리한 점도 있고 해서, 한 번 정리하고 넘어가려고 쓰는 포스팅. 리덕스란 리덕스는 예측 가능한 상태 컨테이너다. (라고 공식 도큐먼트에 써있다) 여기서 예측 가능하다는 것이 중요하다. 상태가 앱의 여기저기에서 변화하고, side effect가 발생하다보면 상태가 어떻게 될지 예측하기 힘들어진다. 리덕스는 action과 reducer를 통해서 일정한 단방향으로 변화를 전달함으로써 상태 흐름을 예측할 수 있게 해준다. action이란 일어난 일 또는 일어나야만 하는 일(액션)을 묘사한 것이다. 예를 들어 TODO앱을 만들 때 가장 기본적인 기능이 TODO를 추가하는 것이므로..
렌더링이란 제너럴한 의미에서 렌더링이란 이미지를 나타내는 과정을 의미하고, 리액트에서의 렌더링이란 클래스 컴포넌트의 경우 render 함수의 실행을 말하고 함수형 컴포넌트의 경우는 함수 전체의 실행을 의미한다. (이하 render 함수를 실행한다고 표현하겠다) 참고로 함수형 컴포넌트는 진짜 함수라서 이렇게 쓰지 않고 {Component()} 라고 호출하는 것도 가능하다. 하지만 이렇게 하지 않기를 권장하고 있다. (Don't call function components. Render them.) 다시 말하자면 리액트의 렌더링 = render 함수 실행(혹은 함수형 컴포넌트 실행)이고, render 함수 실행의 결과로 react element tree가 산출된다. React element tree는..
자바스크립트는 싱글 스레드 언어다. 즉 콜 스택이 한 개고, 한 번에 한 가지 일밖에 처리하지 못한다는 뜻이다. one thread == one call stack == one thing at a time 콜스택 function square(n) { return n * n; } function printSquare(n) { var squared = square(n); console.log(squared); } printSquare(4); 콜 스택은 프로그램의 어디가 실행되고 있는지 기록하는 자료 구조다. 만약 함수를 실행하게 되면 그 함수의 실행 컨텍스트를 기록하고(콜 스택에 푸시하고), 그 함수가 반환되면 콜 스택에서 팝한다. 이건 어디까지 했더라? 랑 비슷한 느낌이다. 위 예시처럼 함수 안에 함수가 ..
this를 이미 한 차례 정리하긴 했지만(https://developer-alle.tistory.com/327) 이번에는 this 바인딩 예시 위주의 포스팅을 해보려고 한다. this의 개념 객체지향 프로그래밍에서 객체는 상태(state)를 나타내는 프로퍼티와 동작(behavior)을 나타내는 메서드를 하나의 단위로 묶은 자료 구조다. 동작을 나타내는 메서드는 자기 자신이 속한 객체의 상태를 참조하고 변경할 수도 있어야 한다. 이 때, 자기 자신이 속한 객체를 참조하기 위한 식별자가 this다. 즉 this 는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 식별자다. this의 결정 방식 다른 언어들과는 다르게 자바스크립트에서 this는 함수가 호출되는 방식에 따라 동적으로 결정된다..
const obj = { log: ['a', 'b', 'c'], // 메서드 latest() { if (this.log.length === 0) { return undefined; } return this.log[this.log.length - 1]; } }; console.log(obj.latest()); // c const obj = { log: ['a', 'b', 'c'], // getter get latest() { if (this.log.length === 0) { return undefined; } return this.log[this.log.length - 1]; } }; console.log(obj.latest()); // Uncaught TypeError: obj.latest is not..
- Total
- Today
- Yesterday
- JavaScript
- getter
- CSS
- react
- Redux
- oracle
- package.json
- Prefix Sums
- 리덕스
- 자바
- youtube data api
- Session
- Conflict
- Data Structure
- 포인터 변수
- 깃
- useEffect
- 제네릭스
- 개발 공부
- 인스턴스
- 알고리즘
- c언어
- this
- linkedlist
- til
- jQuery
- Java
- GIT
- SQL
- rxjs
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |