Frontend

JavaScript 2차원 배열 소개 자바스크립트는 진정한 2차원 배열이라는 것이 존재하지 않는다. Java처럼 [][] 이런식으로 선언이 불가능하다는 의미이다. 그러나 간단한 트릭을 이용하여 2차원 배열과 비슷한 배열을 만들수는 있다. 반복문을 사용 let arr = new Array(5); for(let i = 0; i new Array(5).fill(0)); Array.from() 유사 배열 객체나 반복 가능한 객체를 얕은 복사로 객체를 만드는 함수 Array.fill() 배열 안에 값을 채워 넣는 함수

Array.every() & Array.some() Array.every() every() 함수란? 특정 조건이 배열의 모든 요소와 부함하는지 확인하는 함수 array.every(callback(element[, index[, array]])[, thisArg]) callback : 함수 element : 배열 요소 중 처리되고 있는 요소 index : 배열 요소 중 처리되고 있는 인덱스 (Option) array : 배열 (Option) thisArg : callback이 실행될 때 this 값으로 사용 예제 배열 내 모든 요소가 홀수일 경우 true를 반환 const array = [1, 3, 5]; console.log(array.every((element) => element % 2 === 1))..

간단하게 2진수, 8진수, 10진수, 16진수로 변환하기 Number.toString() Number.prototype.toString() Number 객체를 문자열로 변환해서 반환하는 메서드입니다. 매개변수 중 Optional로 redix를 입력할 수 있습니다. 수의 값을 나타내기 위한 사용되기 위한 기준을 정하는 2 ~ 36사이의 정수라고 하는데, 즉 진수를 나타내는 기수의 값이라고 생각하면 될거 같습니다. redix 값을 지정하지 않는다면 10진수가 defualt로 설정되게 됩니다. 10진수를 2진수로 변환하기 const dec = 123; console.log(dec.toString(2)); // 1111011 10진수를 8진수로 변환하기 const dec = 123; console.log(dec..

배열 내 특정 값 삭제하기 Array.prototype.indexOf() 배열 내의 특정 값의 인덱스를 찾는 메서드로 해당 값이 존재하지 않으면 -1을 반환합니다. 여기서 특징은 엄격한 동등성(===)을 사용하여 값을 찾아냅니다. 예를들어 배열에 "1"이라는 문자열이 있는데 1이라는 숫자형을 찾으려고 하면 찾을수가 없습니다. const arr = [4,3,2,1]; arr.indexOf(4) // 1 Array.prototype.splice() 배열의 기존 요소를 삭제,변경 또는 새 요소를 추가하여 배열 내용을 변경합니다. const arr = [4,3,2,1]; arr.splice(1, 1); // [3] console.log(arr); // [4, 2, 1] 첫번째 인자는 배열 변경을 시작할 인덱스이..

배열 내의 최대값 최소값 찾기(Math.min.apply(), Math.max.apply()) Math.min() 인자로 들어온 값 중에서 가장 작은 값을 반환하는 함수 Math.min(10, 20); // 10 Math.max() 인자로 들어온 값 중에서 가장 작은 값을 반환하는 함수 Math.max(10,20); // 20 Function.prototype.apply() 함수가 실행될 때 내부 콘텍스트의 this는 객체 자신 또는 window 객체를 가르킨다. 이때 this가 가리키는 대상 바꾸는 방법 중 하나입니다. apply()는 인자로 배열(또는 유사 배열 객체)로 제공되는 arguments로 함수를 호출한다. 최소값과 최대값 찾기 const arr = [4,3,2,1]; const minNum..

코딩을 할 때 컨벤션이 굉장히 중요하다는 것은 다들 알고 있을 것이다. 이번에는 JavaScript 컨벤션 및 컨벤션을 편안하게 지킬 수 있는 방법(자동화)을 소개해보려고 한다. 유명한 자바스크립트 컨벤션 종류 NHN Ent - Toast UI Airbnb Google eslint 여기서 lint란 소스 코드에 문제가 있는지 탐색하는 작업을 의미하고, linter는 이 작업을 도와주는 소프트웨어이다. 자바스크립트는 컴파일 과정이 없는 인터프리터 언어로 런타임 에러가 발생할 확률이 높기 때문에 사전에 에러를 최대한 잡아주는 것이 중요하다. 이때 자바스크립트진영의 오픈소스로 정적 분석 도구로 eslint를 많이 사용된다. 정적 분석 도구란 코드를 분석해서 문법 오류, 안티 패턴 등을 찾아 일관된 코드 스타일..

arrayobj.sort(sortFunction) sorrtFunction을 생략하면 ASCII 문자 순서로 정렬된다. 예를들어 4, 11, 2, 10, 3, 1이 있다면 [1,10,11,2,3,4]로 정렬이 된다. 즉, 문자열 정렬 방식을 따르게 된다. 그렇다면 숫자를 원하는 오름차순과 내림차순으로 정렬하려면 어떻게 해야 할까? sortFunction 인수에 함수를 지정하면 (a, b) ⇒ a > b : -값 (a,b) ⇒ a = b : 0 (a,b) ⇒ a a - b); console.log(sortedNumbers); // ..

자바스크립트에서 원하는 날짜의 요일 포맷으로 추출해보자. 자바스크립트에는 요일을 따로 추출하는 함수가 존재하지 않는다. 따라서 Date 객체를 통해 직접 구현해야 한다. function getWeek(a, b) { const date = new Date(2016, a - 1, b); const week = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']; return week[date.getDay()]; } 위의 코드로 원하는 날짜의 요일을 가져올 수 있다. 이때 date.getDay()가 요일을 반환하는데 이때 일요일(0) ~ 토요일(6)의 순서대로 반환하기 때문..

함수 명칭과 같이 조건을 설정하여 조건에 맞는 값을 가지고 새로운 배열을 만드는 것입니다. 새로운 배열을 만드는 것이기 때문에 원래 배열을 전혀 변경하지 않는다. 함수 구문 array.filter(callbackFunction(element, index, array), thisArg); array.filter((element, index, array) ⇒ 조건, thisArg); 매개변수 element : 배열에 있는 값 Index : 배열 인덱스 array : 사용되는 배열 thisArg : filter에서 사용될 this 값(선택적으로 사용하지 않는다면 undefined) Callback 함수 실행 시 this로 사용되는 값 즉, 호출될 때 그 값은 callback의 this 값으로 전달됩니다. 그 ..