자바스크립트
-
[Javascript] ES12 ES2021?Front-end/Javascript 2020. 12. 8. 00:08
Preface Taran의 codeburst 포스팅 공유를 위한 번역 겸... 겸사겸사 쓰게 되었다. 잠깐의 미국에서 외국인 노동자 생활을 했으나, 전문가들처럼 번역이 매끄럽지 않을 수 있음에 양해를 부탁드립니다. 🙏 ++ 직역이 어색한 경우, 그대로 영어 단어로 썼습니다. codeburst.io/exciting-features-of-javascript-es2021-es12-1de8adf6550b JavaScript ES2021 Exciting Features Looking at the top new features of ECMAScript 2021 (ES12) codeburst.io Javascript 그리고 ES{{n}} ES{{n}}을 보고 풉 했다면, 그렇다 당신도... Geeky 한 사람이거나 ..
-
[Javascript] 프로토타입(Prototype)?Front-end/Javascript 2020. 7. 19. 21:33
들어가기 전에, prototype 자바스크립트로 개발을 해보았다면, 대부분의 개발자들은 prototype이라는 것을 마주쳤을 것이다. Prototype의 존재와 역할이 무엇인지 궁금하지 않을 수도 있지만, 대부분 이직 또는 취업 준비할 때 다시 만나게 될 것이다. 흐릿해진... 아주 흐릿해진 개념을 살리기 위해 다시 공부하기로 했다. (잠깐!) 자바스크립트는 객체지향인가? 나 또한, 이번 공부를 하기 전에는 자신있게 누군가에게 설명해줄 수는 없었다. 자바스크립트는 흔히 프로토타입 기반 프로그래밍이라고 한다. 위키백과에 따르면 프로토타입 기반 프로그래밍은 객체지향 프로그래밍의 한 형태의 갈래로 클래스가 없고, 클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 객체를 원형(프로토타입)으로 하여 복제의 과..
-
[Javascript] call, apply, bind?Front-end/Javascript 2020. 6. 16. 21:32
들어가기 전에, this call, applly, bind를 알기 전에 꼭 알아야할 개념 this JS에서는 몰라서는 안 될 존재이다. 정.말.로 우리는 망각의 동물이기에 까먹었거나, 처음 들어보는 개념이라는 아래 이 링크를 참고할 것을 권장한다. 요약해보자면, Javascript에서 this는 객체가 속해 있는 곳을 가르킨다. Scope를 공부하시면 더 잘 이해할 수 있다. case1: 아래에서처럼 Object의 method에서의 person 객체를 가르킨다. var person = { firstName: "Daniel", lastName : "Park", id : 1, fullName : function() { return this.firstName + " " + this.lastName; } }; ..
-
[Javascript] sort() 함수의 함정Front-end/Javascript 2020. 5. 17. 23:38
Array.sort() 프로그래머스 알고리즘을 풀던 중 한 가지 사실을 알게 되었다. const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); 다음 코드의 결과는 [1, 4, 21, 30, 100000] 일 것 같았다. 하지만 [1, 100000, 21, 30, 4]를 리턴하게 된다. 그 이유는 javascript의 sort 함수는 아스키 코드를 기준으로 정렬하기 때문에 위와 같은 결과가 나오게 된다. Compare Function MDN 설명에 따르면, compare function을 제공하지 않으면 위에서 언급했던 것처럼, 아스키코드를 기준으로 정렬한다. 따라서 원하는 정렬을 위해서는 compare function을 제공해야..
-
[Alogorithm] 프로그래머스 - k번째수 (정렬 - sort)Alogorithm 2020. 5. 17. 20:39
프로그래머스 문제입니다. [문제설명] 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요. [제한사항] array의 길이는 ..
-
[Javascript] es6 함수들 도중 break?Front-end/Javascript 2020. 5. 5. 18:03
Javascript와 es6 최근 node.js와 Vuex기반 프로젝트 기능을 개발하고 테스트 하던 중, 생각하지도 못한 버그가 발생하였다. es6의 Array.map, Array.filter, Array.reduce 등의 함수들은 많은 개발자들의 수고를 덜어주고 있다. for loop으로 했어야 할 코드가 훨씬 가독성 있고, 깔끔해지기 때문에 나 또한 선호하는 편이다. 이 함수들이 어떻게 만들어졌는지 보지 않고 쓰다가 결국 삽질을 하게 되었다. 시작된 삽질 다음과 같은 코드를 작성하면 어떤 결과를 보여줄까? const testArray = [{"A": "a"}, {"B": "b"}, {"C": "c"}] //Case1 testArray.map(item => { const key = Object.keys..
-
[Javascript] var, let, const 차이는?Front-end/Javascript 2020. 5. 4. 13:51
var 변수 선언시 사용되는 var는 아래 링크에서 설명하였다. https://daniel-park.tistory.com/5 [Javascript] Hoisting(호이스팅) Hoisting이란? 요즘 웹 개발하는 환경은 bolierplate를 쓰는 경우가 많다. 내장된 eslint와 같은 syntax 검사 모듈의 도움을 받기 때문에, 개발자는 var 대신 let, const를 쓰면서 hoisting의 개념을 알기 쉽지.. daniel-park.tistory.com 요약하자면, var을 통해 변수를 선언 및 초기화 할 수 있다. function scope에서 조건에 따라 hoisting이 이루어진다. es2015 사용 환경에서는 var 대신 let과 const를 사용한다. (추가) 아래 코드처럼 변수를 ..
-
[Javascript] Hoisting(호이스팅)이란?Front-end/Javascript 2020. 5. 4. 12:16
Hoisting이란? 요즘 웹 개발하는 환경은 bolierplate를 쓰는 경우가 많다. 내장된 eslint와 같은 syntax 검사 모듈의 도움을 받기 때문에, 개발자는 var 대신 let, const를 쓰면서 hoisting의 개념을 알기 쉽지 않다. eslint가 엄격할 때는 성가실 때가 많지만 경고 또는 에러를 내주는 이유는 바로 hoisting 때문이지 않을까 생각이 된다. Hoisting(호이 스팅)이란, 함수 또는 변수의 선언을 각각의 유효 범위의 최상단에 선언해주는 것을 말한다. - 유효 범위란 함수 블록{}을 말한다. - JS Parser가 유효 범위 내의 코드를 SSG 훑은 후, 이를 기억했다가 실행시킨다. - 함수와 변수의 선언과 초기화를 분리하는 과정이라고 생각할 수 있다. - 메모..