Language/JavaScript (28) 썸네일형 리스트형 [JavaScript] 정규 표현식(Regular Expression) 플래그와 패턴 정규 표현식 or 정규식 정규 표현식(Regular Expression)은 문자열을 다루기 위한 패턴을 정의하는 문자열입니다. 이 패턴은 문자열에서 특정한 문자를 검색하거나 변환하는데 사용된다. 정규식 활용 정규 표현식은 다양한 상황에서 유용하게 쓸 수 있다. 문자열 검증: 사용자로부터 입력받은 데이터가 특정한 형식에 부합하는지를 확인할 때 사용한다. ex. 이메일 주소, 전화번호, 비밀번호 등의 형식 검증 문자열 검색: 특정 패턴이나 문자열을 찾거나 추출할 때 사용한다. ex. 로그 파일에서 특정 이벤트를 찾거나 URL에서 쿼리 매개변수를 추출 문자열 대체: 특정 패턴이나 문자열을 다른 문자열로 대체할 때 사용한다. 마스킹 처리할 때 주민등록번호나 신용카드 번호의 일부분 숨기기 정규식 구성 정규식 플래.. [JavaScript] Array.from()으로 배열 만들기 Array.from() Array.from() 함수는 알고리즘 문제를 풀면서 보통 두 가지 기능이 필요할 때 사용한다. 1. 문자열이나 정수 값을 배열로 반환할 때 2. 순회할 때 구문 Array.from(arrayLike) Array.from(arrayLike, mapFn) Array.from(arrayLike, mapFn, thisArg) arrayLike - 배열로 변환할 객체 mapFn - 배열에 각 요소를 생성하는 함수 (두 개의 매개변수 배열의 각 요소, 현재 요소의 인덱스를 받는다.) thisArg - mapFn 실행시 this로 사용할 값 Array.from(obj, mapFn, thisArg)는 Array.from(obj).map(mapFn, thisArg)와 동일한 결과를 가져올 수 있.. [JavaScript] 전개 연산자(...) 이해하기, 예제코드 프로그래머스 문제를 풀던 중 for문을 통해 반복적으로 반환된 배열들을 하나의 배열로 합치는 작업이 필요했다. 구글링으로 전개 연산자 (...)를 알게 되어 예제코드와 함께 내용을 정리해본다. 전개 연산자(Spread Operator) 전개 연산자 (...)는 배열이나 객체의 요소를 개별로 분리하거나 함수의 인수로 전달하는 등 다양한 상황에서 사용할 수 있으며 기존 배열이나 객체를 변경하지 않고 새로운 배열이나 객체를 생성한다. 간결하고 가독성이 좋은 반면 매번 새로운 배열을 생성하므로 대량의 요소가 있는 경우 메모리 사용량이 늘어날 수 있다. 배열 요소 분리 function solution(my_string) { const myStr = [...my_string] return myStr } consol.. [JavaScript] Array.reduce() 배열의 합계, 평균 코딩테스트 문제를 풀면서 reduce() 함수를 자주 사용한다. 이 함수는 주로 배열의 합계나 곱셈, 평균 등을 구할 때 유용하게 쓸 수 있다. 배열의 합계 const array = [1, 2, 3, 4]; // 0 + 1 + 2 + 3 + 4 const sum = array.reduce((a, c) => a + c, 0); console.log(sum); // Output: 10 해당 코드에서 a: 누적값(accumulator) c: 현재값(current value) 0: 초기값(initial value) 이다. 더 쉬운 설명을 위해 array가 어떻게 동작하는지 살펴보자. 초기값 a는 0이다. 1. 첫번째 반복에서 a + c는 0 + 1이 되어 현재까지 누적값은 1이다. 2. 두번째 반복에서 1 + .. [JavaScript] Math.trunc()와 Math.floor()의 차이 Math.trunc()와 Math.floor()는 둘 다 소수를 다룰 때 사용되는 메서드이다. 그러나 이 두 메서드는 동작의 차이가 있다. Math.trunc() Math.trunc() 메서드는 주어진 숫자의 소수점 이하를 제거하고 정수 부분만 반환한다. console.log(Math.trunc(5.05)); // Expected output: 5 console.log(Math.trunc(-5.99)); // Expected output: -5 양수, 음수 상관없이 정수를 반환한다. 예를 들어, Math.trunc(5.05)는 5를 반환하고, Math.trunc(-5.99)는 -5를 반환한다. Math.floor() Math.floor() 메서드는 주어진 숫자의 소수를 버리고 그 숫자보다 작거나 같은 가.. [JavaScript] Callback Function｜콜백함수 동기,비동기 콜백함수 함수를 전달해서 두 가지의 함수(printYes, printNo)가 if 상황이 맞으면 전달된 함수를 호출한다. 간단히 정의하면 다른 함수에 입력값으로 전달되서 다른 함수에 의해서 호출된다는 것이다. 예제) 정답이면 yes! 정답이 아니면 no! 반환 function quiz(answer, printYes, printNo) { if (answer === 'like it') { printYes(); } else { printNo(); } } const printYes = function() { console.log('yes!'); }; const printNo = function() { console.log('no!'); }; quiz('hate it', printYes, printNo); //n.. [JavaScript] for문을 이용해서 배열로 변환 for문을 이용해서 배열의 형태로 변환할 수 있다. 1. ...(rest parameters) function printAll(...args) { for (let i = 0; i < args.length; i++) { console.log(args[i]); } } printAll('apple', 'banana', 'mango') /* apple banana mango */ 2. for of function printAll(...args) { for (const arg of args) { console.log(arg); } } printAll('apple', 'banana', 'mango') args 모든 값들이 하나씩 차례로 지정되면서 arg를 출력 3. forEach function printAll(... [JavaScript] 논리 연산 logical operators 주의할 점 2023.07.04 - [💻/JS] - [Javascript] 연산자 종류와 if 조건문 [Javascript] 연산자 종류와 if 조건문 if 조건문에 비교 연산자를 사용할 수 있다. 연산자 종류 종류 기호 문법 의미 비교 연산자 == A==B A와 B가 같은가? != A!=B A와 B가 다른가? === A===B A와 B가 일치하는가? !== A!==B A와 B가 일치하지 않는 built.tistory.com 연산자의 종류는 이전글을 참고해주세요 논리 연산(logical operators) 사용시 주의할 점을 정리합니다. || (or) const value1 = false; const value2 = 4 < 2; function check() { for (let i = 0; i < 3; i++) { .. [JavaScript] canvas 자체를 가운데 정렬하는 법(CSS로 가져오기) canvas로 게임 만들기를 하던 중 canvas 자체를 가운데 정렬을 하고 싶어 별의 별의 별의 x100 방법을 시도하다가 성공하였다! 코드가 완벽하진 않지만 일단 구현된 것에 만족한다. JS에 CSS에서 설정한 style을 적용하는 것인데 2번째 방법으로 진행하였다. 1. canvas에 css 적용 2. canvas class에 css 적용 먼저 HTML 요점 코드만 가져왔다. canvas 태그로 JS에서 불러올 id를 설정하고 CSS에서 적용될 class를 부여한다. CSS .background { width: 890px; height: 550px; filter: brightness(80%); background: url(../ghostRain/img/background.PNG) no-repeat .. [JavaScript] for...in vs for...of for in - 객체의 속성들을 반복적으로 열거하는데 사용한다. - 주로 특정 값을 가진 키를 구현할 때 사용한다. - 배열이 아닌 객체의 반복문이므로 일관된 순서로 요소를 방문하지 않을 수 있으니 순서가 중요한 반복문을 구현할 경우 for...of나 forEach()문을 권장한다. for in의 구문 for (const 변수 in 반복할 객체) { 실행문 } - 변수는 반복할 때마다 다른 이름을 지정한다. - 객체는 열거형 속성을 가진 반복을 수행할 객체를 지정한다. ex const obj = {a: 1, b: 2, c: 3} for (const i in obj) { console.log(i + ':' + obj[i]); } /* a:1 b:2 c:3 */ ex. 학점 계산하기 const getExam.. 이전 1 2 3 다음
