썸네일 JavaScript 배열 메소드로 차집합, 교집합, 합집합 구현하기 JavaScript에서 배열끼리 차집합, 교집합, 합집합 구현해 보기 (feat. filter, includes) 🚀 내가 이 글을 작성하는 것은 근래 코드를 짜면서 많이 찾아보고 사용했던 내용이라 따로 정리해 놓기 위함이다. 다음과 같은 두 배열이 있다고 해보자. const arr1 = [1, 3, 4, 6, 7]; const arr2 = [1, 2, 4, 9, 10]; about:blank의 콘솔에서 해보시길 바랍니다. 주로 사용하는 배열 메서드는 filter와 includes 입니다. filter filter는 콜백을 매개변수로 받습니다. 내부 콜백의 매개변수로는 배열 내부의 각각의 value들을 나타내는 element, 현재 처리하는 element의 index, filter를 호출한 배열을 담은 ..
썸네일 eval을 아시나요? 문자열로 돼있는 계산식이나 부호가 문자열인 경우에 계산은 어떻게 하는지 고민해본 경험이 있을 수 있다. 예시를 들어보자면 아래와 같은 경우가 있다. const stringFormula = '1 + 3'; 이것을 계산하기 위해서는 간단히 eval(stringFormula); 를 해주면 결과가 나오게 된다. 저는 split 해주고 map 돌려주고 별 짓을 다하다가 쉬운 방법이 있을 것 같아서 찾아보고 적용했습니다^^,,
썸네일 호이스팅, 스코프 체인 그리고 실행컨텍스트 실행컨텍스트를 통해 배우는 호이스팅, 스코프 체인, 클로저 1. 실행컨텍스트 실행컨텍스트를 통해 배우는 것이니까 실행컨텍스트가 무엇인지부터 알아야겠죠? 먼저 실행컨텍스트의 정의를 알아보면 코드를 실행하는데 필요한 환경을 제공하는 객체입니다. 사실 언제나 늘 그렇듯 정의만 들어서는 잘모르겠는게 당연합니다. 실행컨텍스트는 보다 효율적인 식별자 결정을 하기 위해 사용하는데요. 식별자 결정? 역시 생소한 언어입니다. 실행컨텍스트의 생성시가와 삭제되는 시기에 대해 알아보면서 시작해보겠습니다. 자바스크립트 코드를 실행시키면 자바스크립트 엔진은 콜 스택이라는 통에 전역 실행컨텍스트를 담습니다. 이 실행 컨텍스트 내부에는 Record와 Outer가 담겨있습니다. 사실 정확한 명칭으로는 Environment Record..
썸네일 한 박자 느린 박치 이벤트 keydown에 대하여 이 문제를 발견하게 된 것은 구글 폰트 사이트와 같이 인풋에서 타이핑을 치면 각 폰트 박스에 타이핑 치는 값이 출력되는 것을 만들어보고 싶었다. 만들어본 결과물이다. 처음에 만들때는 그저 인풋 값에 keydown 이벤트를 주고 리덕스(vanilla js에서 redux 사용해보기 연습 중이었음)를 사용해 값을 바꿔주면 될 것이라 생각했다. 하지만 동작은 내 기대와는 전혀 다르게 작동했다. 아니 뭔데요..저 6까지 쳤잖아요.. 근데 왜 5까지 밖에 안 나오냐고요;; 그래서 도대체 뭐가 문제인지 해결 방법을 찾던 중 setTimeout을 준다면 해결이 된다는 글을 봤다. setTimeout을 주니까 그제서야 박자를 맞추는 keydown 이벤트 후,,, 이 말고도 keydown 이벤트가 아닌 input 이벤트로..
썸네일 순수 함수와 비순수 함수 🚀 순수 함수? 비순수 함수? 함수라면 그냥 함수인 거지 순수 함수는 뭐고 비순수 함수는 뭐일까? 순수 함수와 비순수 함수에 대해 얘기하기 이전에 함수형 프로그래밍에 대해 얘기해보려고 한다. 자바스크립트는 주로 객체지향 프로그래밍과 함수형 프로그래밍으로 나뉘는데 객체가 기본이 되는 프로그래밍을 객체지향 프로그래밍이라고 하고, 함수형 프로그래밍은 말 그대로 함수가 기본이 되는 프로그래밍을 의미한다. 왜 갑자기 함수형 프로그래밍 이야기가 나왔느냐!? 궁금할 수 있다. 함수형 프로그래밍을 사용하는 이유가 순수 함수를 통해 부수 효과를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이기 위해 사용하기 때문이다. 그래서 순수 함수는 뭐고 부수효과는 뭔데? 바로 알아보자 순수 함수 & 비순수 함수(feat. ..
썸네일 프로토타입 체인 🚀 프로토타입 체인 스코프도 체인이 있듯 프로토타입 역시 체인이 있다. 프로토타입 체인에 대해 알아보자. 먼저 Person이라는 생성자 함수를 만들고, Person의 프로토타입 메서드 sayHi를 만든다. 이후 minseok을 new Person을 통해 생성한다. 이후 콘솔창에 minseok을 찍어보면 두개의 [[Prototype]]이 있는 것을 볼 수 있다. 이것이 프로토타입 체인이 이뤄진 것인데 아직은 이해하기 힘들 것이다. 잘 기억해두었다가 다시 살펴보자. 이제 콘솔 창에 Person.prototype을 쳐보면 Person이 갖고 있는 sayHi와 constructor 프로토타입 메서드와 또 [[Prototype]]이 있다. 어떤가?? 어디서 많이 본 것 같지 않나?? ㅎㅎ 이제 마지막으로 Obje..
라이브러리 브랜드 그룹 | 공대생의 개발자 도전기

티스토리툴바