JavaScript/코드

[JS] URL parameter 가져오기

기초 URL 중 파라미터 값만 JavaScript로 추출해야 할 경우가 생깁니다. location.href를 이용하여 현재 페이지 전체 URL을 가져올 수 있습니다. location.search를 이용하여 현재 페이지 URL의 Parameter를 얻을 수 있습니다. 모든 값 가져오기 const searchParams = new URLSearchParams(location.search); for (const param of searchParams) { console.log(param); } new URLSearchParams 함수를 사용하면 location.search 안에 존재하는 [key, value] 형식으로 묶여있는 파라미터를 얻을 수 있게됩니다. 특정 값만 가져오기 const urlParams =..

[JS] 코드 실행시간 측정하기

코드 const start = new Date() ... 실행 코드 ... console.log((new Date() - start) / 1000) 코드가 끝난 시간 - 코드를 실행한 시간 수식을 사용하면 코드 실행에 걸린 밀리 초가 나오는데, 나누기 1000을 해주면 밀리초 단위를 초로 바꿔줄 수 있습니다. 예시 코드 const start = new Date() // 시작 시간 기록 // 실행 코드 let str = 0; for (let i = 0; i < 100000; i++) { str += i; } console.log((new Date() - start) / 1000) // 현재의 시간에서 시작 시간 뺀 값 출력 See the Pen Untitled by hyukson (@hyukson) on ..

[JS] 객체 길이 구하기

코드 자바스크립트에서 배열(Array), 문자(String)를 사용하는 경우에는 length 속성으로 쉽게 길이를 구할 수 있습니다. 하지만 객체(Object)에서는 그것이 불가능합니다. 객체의 길이를 알기 위해서는 객체에 몇 개의 아이템 즉 "KEY"가 몇 개 존재하는 지를 파악하면 됩니다. const obj = { a: "AA", b: "BB", c: "CC", d: "DD", e: "EE" }; Object.keys(obj); // 출력 - ["a", "b", "c", "d", "e"] JS에는 Object.keys라는 메서드가 존재합니다. 해당 메서드는 객체의 key들을 모아 배열로 반환하는 메서드입니다. key들을 모은 배열을 파악했습니다. 그럼 이에 따른 길이도 구할 수 있게 됩니다. cons..

[JS] 반복문 (for, forEach 등) 속도 비교

JavaScript의 반복문으로 for loop 문, forEach 메서드, map 메서드, reduce 메서드, $.each (Jquery) 등 정말 많은 종류의 반복문이 존재합니다. 비교 해볼 반복문 for loop forEach map reduce $.each 속도 비교에 사용할 코드 const start = new Date() ... 실행 코드 ... console.log((new Date() - start) / 1000) 먼저 비교 코드를 실행 전 시간을 저장한 다음에 비교할 코드를 실행, 그 후 현재의 시간과 코드를 시작한 시간을 비교하여 걸린 시간을 구할 수 있습니다. 코드가 끝난 시간 - 코드를 실행한 시간 수식을 사용하면 코드 실행에 걸린 밀리 초가 나오는데, 나누기 1000을 해주면 밀..

[JS] 반복문 정리 (for, while, forEach 등...)

for 문 for 문은 조건식이 참일 경우에 증감식 구문을 거쳐 명령문 구문을 반복하여 실행합니다. for (초기값; 조건식; 증감식) { 조건이 참인 동안 실행할 명령문 } // 예시 for (let i = 0; i < 10; i++) { console.log(i); } for in 문 for in 문은 객체의 모든 문자열로 된 키를 반복하여 열거합니다. 하지만 해당 문법은 자주 사용되지 않고 아래에 소개드릴 for of, forEach의 사용을 추천드립니다. const object = { a: 1, b: 2, c: 3 }; for (const key in object) { console.log(`${key}: ${object[key]}`); } for of 문 for of 문은 반복 가능한 객체 ( ..

[JS] 두 날짜 사이의 일수 구하기

코드 const getDateDiff = (d1, d2) => { const date1 = new Date(d1); const date2 = new Date(d2); const diffDate = date1.getTime() - date2.getTime(); return Math.abs(diffDate / (1000 * 60 * 60 * 24)); // 밀리세컨 * 초 * 분 * 시 = 일 } getDateDiff("2021-09-01", "2021-10-01"); // 30 코드 풀이 두 날짜의 밀리초의 차이(date1 - date2 수식)를 통해서 두 날짜의 차이 값을 계산해 주는 방법입니다. 차이 값을 하루의 밀리초인(1000 * 60 * 60 * 24)으로 나눠주면 밀리초가 아닌 일 단위 값을 얻..

[JS] 연속된 순서를 가진 숫자, 영문 체크하기

A가 3번 들어간 문자를 찾는 방법은 정규식을 이용하면 간단한 코드로 체크할 수 있습니다. const a = "AAAbbCC"; a.match(/[A-z]{3}/); // AAA 하지만 ABC 처럼 연속되는 순서를 가진 영문을 체크할 수 없습니다. const str = "1234"; // 예시 const chrStr = [...str].map(v => v.charCodeAt()); let preStr = 0; let chr = 0; chrStr.forEach(s => { if (Math.abs(preStr - s) == 1) { chr++; } preStr = s; }) console.log(chr); // 3 문자의 unicode 코드로 이전의 문자값의 차로 구분하는 코드입니다. 함수화 시킨 코드 파라..

[JS] 체크박스 전체 선택 , 해제

코드 See the Pen Untitled by 장혁수 (@hyukson) on CodePen. 코드 풀이 전체 선택, 해제 기능을 추가할 input에 change 이벤트를 걸어 해당 element를 받아옵니다. target으로 받아온 input element의 체크상태를 checked로 접근이 가능합니다. 리스트에 있는 input들을 모두 해당 checked 속성 값과 같게 만들어 주면 됩니다.

[JS] 개행문자 제거하기

코드 // 줄바꿈 제거 str.replace(/\n/g, ""); // 엔터 제거 str.replace(/\r/g, ""); // 공백 제거 str.replace(/\s*/g, ""); // 개행문자 모두 제거 str.replace(/\n|\r|\s*/g, "");

[JS] 줄바꿈, 공백 제거하기

replace로 제거 const str = `aa bb cc dd ee ff`; // 줄바꿈 제거 str.replace(/\n/g, ""); // 공백 제거 str.replace(/\s*/g, ""); str.replaceAll(" ", ""); 개행 문자를 사용하여 제거하는 방법과 replaceAll 메서드를 이용하는 방법입니다. split 메서드로 제거 const str = `aa bb cc dd ee ff`; // 줄바꿈 제거 str.split("\n").join(""); // 공백 제거 str.split(" ").join(""); 줄 바꿈은 개행 문자 \n을 기준으로 자르는 방식을 사용했습니다.

[JS] 대문자, 소문자로 변환하기

const str = "abcDEF"; // 대문자 const upper = str.toUpperCase(); // ABCDEF // 소문자 const lower = str.toLowerCase(); // abcdef 대문자와 소문자로 변환시키는 메서드는 각 toUpperCase과 toLowerCase입니다. 문자열 -> 대문자는 String.toUpperCase메서드를 사용하며, 문자열 -> 소문자는 String.toLowerCase메서드를 사용하여 변환 할 수 있습니다.

[JS] 소수 판별하기

소수란? 소수란 1과 자신만으로 나누어 떨어지는 1보다 큰 양의 정수를 뜻합니다. 2, 3, 5, 7, 11, 13... 와 같은 수는 소수가 됩니다. 소수를 구하는 3가지의 방법을 알아보겠습니다. n까지 모두 판별하기 1이 아닌 2부터 n사이의 모든 정수를 다 나누어 떨어지는 수가 있는지 확인하는 방법입니다. const isPrime = (n) => { for (let i = 2; i < n; i++) { if (n % i === 0) { return false; } } return true; } n의 제곱근 (√n) 까지만 계산하기 n의 제곱근 (√n) 값으로 나누어 떨어지면 √n의 배수라는 뜻이므로 소수가 아니게 됩니다. 예를 들어보자면 25의 제곱근은 √25(5) 입니다. 이때 5까지만 반복문이 ..