JavaScript/JavaScript
-
Array.prototype.flatMap()JavaScript/JavaScript 2019. 9. 10. 18:54
flatMap()에 대해서 알아보자. 얘를 설명하고 있는 MDN을 보면 '먼저 매핑함수를 사용해서 각 요소에 map을 수행한 후, 결과를 새로운 배열로 평평화한다.' 평평화가 뭔 말이냐... 그래서 직접 써봤다. 위의 결과는 map()을 사용했을 때와 결과가 똑같다. 그러나 진가는 이제부터 발휘된다. map()에 들어가는 함수에서 리턴을 배열을 할 경우 어떻게 될까? 요소에 2를 곱한 후 그 결과를 배열로 리턴하면 map()의 경우 리턴되는 각각의 배열 요소를 배열로 감싸서 리턴한다. [ [ 2 ], [ 4 ], [ 5 ], [ 6 ], [ 7 ] ] 하지만 flatMap()이 출동하면 어떻게될까? 일련의 처리를 수행하는 함수에서 각각의 요소를 배열로 리턴해도 리턴하는 요소의 배열을 제거하여 순수한 값을..
-
Array.prototype.map()JavaScript/JavaScript 2019. 9. 10. 18:44
그동안 Javascript의 쓰고 싶었으나 몰라서 못썼던 기능들을 학습해보자. 가장 먼저 map()함수다. 해당 함수는 배열에 사용할 수 있다. map() 인자로 함수를 넣어서 배열의 모든 요소들에 동일한 로직을 수행할 수 있다. map()의 인자로 익명함수를 넣었고 x는 arr1의 요소들이다. 요소에 곱하기 2를 하여 리턴하여 새로운 배열을 반환한다. 여기서 중요한건 기존 arr1변수에 값이 변경되는 것이 아니라 새로운 배열을 생성한다는 것이다!! 잊지말자! 위의 기능을 풀어보면 다음과 같다. const arr = [1, 2, 3, 4, 5]; function myMap(array) { const tempArray = []; for(let i = 0; i < array.length; i += 1) { ..
-
변수명으로 사용할 수 없는 예약어JavaScript/JavaScript 2019. 1. 1. 18:53
변수명으로 사용할 수 없는 예약어변수명은 하나의 문자나 그 뒤를 이어서 하나 이상의 문자. 숫자, _(언더바)가 붙는 문자열로 문장, 변수, 매개변수, 속성명, 연산자, 라벨 등에 사용한다.아래의 예약어들은 변수명으로 사용할 수 없는 리스트이다. A abstract B boolean, break, byte C case, catch, char, class, const, continue D debugger, default, delete, do, double E else, enum, export, extends F false, final, finally, float, for, function G goto I if, implements, import, in, instanceof, int, interface, l..
-
XMLHttpRequest 객체JavaScript/JavaScript 2018. 12. 14. 20:54
XMLHttpRequest 객체비동기 통신을 위한 XMLHttpRequest 객체 사용방법을 적어보려한다.지금까지 jQuery 플러그인의 $.ajax()로만 비동기 통신을 처리하다시피해서 XMLHttpRequest 객체를 사용하는 방법을 잊었다.최근 다시 순수 Javascript문법으로 코드를 짜려고 노력하고 있다. XMLHttpRequest 객체 생성가장먼저 비동기 통신을 위해서는 XMLHttpRequest객체를 사용해야하는데, 이 객체를 사용하기 위해서는 브라우저별로 객체 생성처리를 다르게 해야한다.XMLHttpRequest는 브라우저를 통해 객체를 가져올 수 있는데, MS사의 IE 브라우저와 타 크롬, 파이어폭스, 오페라 등의 브라우저에서 제공하는 XMLRequest객체를 생성하는 방법이 다르다.1..
-
추상적 같음 비교(==), 엄격한 같음 비교(===)JavaScript/JavaScript 2018. 2. 4. 16:57
추상적 같음 비교(==)는 value간 비교를 할 때 내부적으로 자동 형변환이 발생한다. 형변환이 된 후에 비교처리를 하기 때문에 값에 대한 정확한 boolean값을 리턴받기 어려울 경우가 있다. 반대로 엄격한 같음 비교(===)는 추상적 같음 비교에 비하여 내부적으로 자동 형변환을 진행하지 않기 때문에 값 비교에 대한 정확한 boolean값을 리턴받을 수 있다. 참고 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness
-
정규식JavaScript/JavaScript 2018. 2. 4. 16:35
1. 만들기 1)1var re=/패턴/플래그;cs 2)1var re=new RegExp("패턴","플래그");cs 3)차이 - new로 만들때에는 이스케이프문자는 \는 \\로 해주어야 한다.12var re=/\w/;var re=new RegExp("\\w");cs 2. 플래그(flag) g (Global 찾기) - 패턴에 맞는 모든문자 찾기i (Ignore Case) - 대소문자 무시m (Multiline) - 여러줄 3. ^ - 문자열의 시작을 의미 ,m 플래그를 사용할경우 경우는 각 문자열의 시작$ - 문자열의 끝을 의미 ,m 플래그를 사용할경우 경우는 각 문자열의 끝. - 모든 한문자 4.[문자들] - 괄호안의 문자 하나와 매치 예) [abc] - 는 a나 b나 c중 하나를 의미 [^문자들] - 괄..
-
parseInt()함수와 Number()함수의 차이JavaScript/JavaScript 2018. 2. 4. 16:06
우선 두 개의 함수 모두 문자열 타입의 숫자를 ‘Number’ 타입으로 바꿔주는 역할을 한다. 가장 흔한 목적은 연산을 위해서이다. 예를 들어서 폼을 통해 사용자로부터 입력받은 숫자 타입의 값은 문자열로 되어 있어 자바스크립트 코드 내에서 산술 연산을 적용할 수가 없다. 그러므로 형 변환(Type Casting)이 필요한 것이다. 이때 사용하는 자바스크립트 내장 함수가 ‘parseInt()’와 ‘Number()’ 함수이다. 그렇다면 두 개의 함수는 정말로 차이가 없는 것일까? 결론적으로 말한다면 쓰임새가 일반적이지 않지만 태생적인 차이가 있다. 일단 parseInt() 함수는 함수 이름에서 보듯히 문자열을 파싱해서 숫자를 찾는 기능이 있다. 매개 변수 값으로 어떠한 문자열을 넘겨주면 다양한 방법으로 문자..