javascript69 JS Tail recursion 오늘은 재귀함수의 활용 방법중 하나인 Tail Recursion에 대해 알아보자 Tail Recursion Tail recursion is a type of recursive function when the last thing executed is a recursive call. Tail recursion은 사실 그렇게 큰 의미를 가지는 용어는 아니다. 단순히 꼬리부분에서 재귀함수가 호출되는 형태를 말한다. 연습문제를 풀 때 head tail로 나누어 푸는 방식이라고 보면 된다. 따라서 꼬리부분에서 재귀함수가 호출되어 계산값이 반복해서 중첩되는 경우라면 Tail Recursion을 사용한 케이스라고 볼 수 있다. 그렇다면 Tail Recursion의 장점은 무엇일까? This type requires f.. 2021. 11. 10. JS Recursion memory leak 재귀함수를 연습하다 보면 가끔 이상한 코드를 작성해서 동작하면 스택을 초과했다는 경고메세지가 나오면서 작동이 중지되는 경험을 다들 한번씩은 해 보았을 것이다. 이것은 재귀함수를 실행하면서 재귀깊이(Recursion Depth)를 초과하는 상황이 발생했기 때문이다. 정확히는 Memory Leak가 발생하면서 execution context stack에 저장되는 중첩호출이 허용량을 넘겨버린 것이다. 오늘은 Memory Leak가 어떤것인지 한번 알아보자 Memory Leak A Memory leak can be defined as a piece of memory that is no longer being used or required by an application but for some reason is .. 2021. 11. 10. JS this 바인딩 오늘은 Javascript의 객체 지향에 대해 공부 했다. 객체 지향을 공부하면서 본격적으로 'this'를 사용하기 시작했는데, 금일 설명중에 아래와 같은 설명이 있었다. 메소드 호출 방식을 이용할 때에는 화살표 함수를 쓰지 않습니다. 왜 메소드 호출 방식을 이용할 때에는 화살표 함수를 쓰지 않는 것일까? 이유는 바로 this의 바인딩 이슈 때문이다. This this에 대한 설명은 아래와 같다. Technically, JavaScript this refers to the object that the function belongs to. And the value of this depends on how the function is called, something known as runtime bindin.. 2021. 11. 8. JS Array.prototype.sort() 오늘 문제를 푸는 와중에 객체로 이루어진 배열을 크기에 따라 배열로 나열해야하는 작업이 필요했다. if 문을 남발하면 뭔가 될 것 같기도 했지만... 이제는 코딩을 시작한지도 좀 되었으니 더 깔끔한 방법이 있을까 찾아보니 Array.prototype.sort()라는 메소드가 있었다. 오늘은 sort메소드에 대해 알아보자. 사실 이전에 몇번 sort 메소드를 사용해 본적은 있었다. const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort(); 위와 같이 배열을 sort하면 알아서 크기에 맞춰서 배열의 순서가 바뀐다. 객체로 이루어진 배열의 크기를 비교할 때는 sort안에 argument값을 아래와 같이 넣어주면 된다. var items = [ { name: .. 2021. 11. 5. React Array.prototype.map() React를 공부하다보니 새삼 map매소드의 강력함과 편리함을 느끼게 된다. 처음 map메소드를 배울 때는 왜 개발자들은 이런 요상한걸 만들었을까.. 하고 생각했지만, 학습을 진행하면서 필요성을 절실하게 느끼게 된다. 오늘은 React 실습 중에 "Delete" 버튼 구현에 꽤나 애를 먹었다. 데이터를 컴포넌트끼리 주고받는 것은 이해를 했지만 "Delete" 버튼은 특별히 "어떤" 데이터를 지우고 싶은지 그 정보를 특정할 수 있어야 했는데 아무리 생각해도 방법이 생각나지 않는 것이다. (구글링을 해도 전부 Class props를 이용한 방법들 뿐이었다.) 결국 처음으로 GG를 외치고 Reference 코드를 살펴보니 이럴수가..! map 메소드에는 매핑되는 각 엘리먼트에 인덱스를 부여할 수 있는 방법이 .. 2021. 11. 3. JS Import 무지성으로 import를 남발하던 어느날... 문득 궁금해 졌다. 왜 어떤 import는 { }를 섞어서 쓰는 걸까?! 오늘은 그 이유를 알아보자. import {Something} from somelib 우선 Curly Bracket은 라이브러리 내에 특정 모듈 혹은 무언가를 불러온다는 의미가 있다. 예를들어 'somelib' 라이브러리 안에, 'Something', 'Anything'이라는 모듈이 있다면 위의 경우 그 중 'Something'만을 import한다는 의미다. 만약 둘 다 불러오고 싶다면, import {Something, Anything} from somelib이라고 하면 된다. 이 때 export하는 스크립트에서는 export Something() 혹은 export Anyhting().. 2021. 11. 1. JS Async vs Defer 자바스크립트를 HTML로 연동하기 위해서는 태그의 맨 끝 부분에 태그를 넣어야 한다. 왜 그럴까? 이유는 브라우저가 태그를 만나는 순간 코드를 해석(parsing)하는 과정을 중단하고 자바스크립트 코드를 해석해서 실행하기 때문이다. 그렇다면, 모든 HTML 문서는 위와같은 과정으로만 해석되고 실행되는 것일까? 답은 아니다. 오늘 알아볼 Async와 Defer 스크립트를 이용하면, HTML의 해석방식에 약간의 변형을 가할 수 있다. With async, the file gets downloaded asynchronously and then executed as soon as it’s downloaded. async 옵션은 DOM트리 생성을 자바스크립트를 만나자마자 중단을 하지 않고, 다운로드가 끝나고 실행.. 2021. 10. 27. JS Regular Expressions 오늘은 Regular Expressions에 대해 알아보자. Regular Expressions란? A regular expression (shortened as regex or regexp; also referred to as rational expression) is a sequence of characters that specifies a search pattern. Usually such patterns are used by string-searching algorithms for "find" or "find and replace" operations on strings, or for input validation. It is a technique developed in theoretical co.. 2021. 10. 26. JS 심화개념 - MapReduce, Currying, Function composition, Declarative Programming 자바스크립트를 공부하면 공부할수록 컴퓨터 언어의 세계는 정말... 심오한 것 같다. 컴퓨터공학은 인간이 만든 공학이기 때문에 다른 공학에 비해 간단할 것이라 생각했던 과거의 내가 부끄러워 진다. 오늘은 훌륭한 개발자가 되기위해 알아둬야 할 몇가지 개념들에 대해 알아보자 MapReduce Model MapReduce 모델은 대량의 데이터를 처리할 때 사용 하는 프레임워크이다. 이름에서 유추 할 수 있듯이 Map과 Reduce를 혼용해 대량의 정보를 병렬처리하며 점차 가지수를 줄여나가는 방법이다. 아래의 이미지를 보면 이해가 빠를 것이다. 잘은 모르겠지만 위와같은 모델을 사용하면 대량의 대이터를 분산시켜 병렬처리를 하기 때문에 좀더 효율적인 데이터 처리가 가능하다고 한다. Currying 커링의 Curry는.. 2021. 10. 25. JS Shallow Copy 브래들리 쿠퍼와 레이디 가가가 주연으로 나왔던 영화 Star is born에서 shallow라는 곡을 참 좋아한다. 근데 자바스크립트의 shallow 개념은 정말 거지같다. 오늘은 Shallow Copy (얕은 복사)에 대해 공부해 보자 Shallow Copy란? Shallow copy는 단어의 의미에서 유추 할 수 있듯이, 얇게 복사를 한다는 개념이다. 다음과 같은 객체가 둘 있다고 가정해 보자. const obj = { mastermind: 'Joker', henchwoman: 'Harley', relations: ['Anarky', 'Duela Dent', 'Lucy'], twins: { 'Jared Leto': 'Suicide Squad', 'Joaquin Phoenix': 'Joker', 'He.. 2021. 10. 25. JS 내장 고차함수 자바스크립트에서는 기본적으로 제공하는 고차함수들이 있다. 그 중 배열 메소드 중 아래 고차함수들이 자주 사용된다. forEach find filter map reduce sort some every 오늘은 이 내장 고차함수들에 대해 공부해 보자. 사용법은 다른 메소드들과는 약간 다르다. 변수하나만 넣어주면 되던 다른 메소드들과는 달리, 내장 고차함수들은 찾고자 하는 혹은 원하는 논리식을 함수 형태로 넣어주어야 한다. 뭔 말이지? 하겠지만 아래 예제를 통해 감을 잡아보자. forEach "배열".forEach(배열의 한 요소씩 꺼낼때 마다 실행하고픈 함수); forEach는 배열을 한번씩 순환하며 파라미터값(함수)를 실행한다. forEach가 처음에는 쓰기 어렵지만, 익숙해지면 for문 노가다에서 해방될 .. 2021. 10. 24. JS Reduce 메소드 Rest에 관한 내용을 공부하면서 오늘은 Rest에 관한 내용정리를 해야겠다고 생각을 하던 와중, 아래와 같은 예문을 만나게 되었다. function sum(...theArgs) { return theArgs.reduce((previous, current) => { return previous + current; }); } sum(1,2,3) // 질문: 어떤 값을 리턴하나요? sum(1,2,3,4) // 질문: 어떤 값을 리턴하나요? 도대체 이게 뭐람... reduce메소드 이후로 계산이 도대체 어떻게 진행되는 것인지 도통 이해가 되질 않는다. 사실 공부할게 산더미라 그냥 대충 이해하고 넘어갈까... 하다가 그냥 오늘 공부하기로한 Rest개념은 잠시 접어두고 reduce 메소드에 대해 한번 파보려고 한.. 2021. 10. 21. 이전 1 2 3 4 5 6 다음
