본문 바로가기
반응형

js29

[js] 코드 최적화 - falsy값, 삼항 연산자, fallback값(nullish값 체크) falsy값 체크, 삼항 연산자, fallback값(nullish값 체크)의 코드 최적화 방법 (클린코드) 1. falsy값 체크 타입스크립트가 아니라 자바스크립트를 사용한다면 꼭 해야하는게 타입 체크이다. 특히, null ,undefined ,0 ,false ,NaN , "" 값을 체크해서 점검해야 할 때가 있다. 논리 부정연산자인 "!" 를 이용하면 쉽게 쓸 수 있다. const isFalsy = (value) => { if ( value === null || value === undefined || value === 0 || value === false || value === NaN || value === "" ) { return true; } return false; }; // 위 코드를 아래와 .. 2023. 3. 12.
[js] 무작위 날짜 생성하기, 무작위 숫자 생성하기 [Javascript] 무작위 날짜 생성하기, 무작위 숫자 생성하기 1. 무작위 숫자 생성함수(범위) function getRandomNumberRange(min, max) { if(min === max) return ('equal Number'); return Math.floor(Math.random() * (max - min + 1)) + min; } - min이상 max이하인 숫자 생성함수 - min = 1, max = 99일때, 1~99까지 무작위 숫자 반환 - min, max는 숫자(number)여야 하고 다른 값이어야 함 2. 무작위 숫자 생성함수(자리 수 이하) function getRandomNumberDigit(digit) { if(digit < 1) return ('parameter i.. 2023. 2. 21.
[js] Spread(전개 구문), apply(), Object.assign() JavaScript에서 Spread(전개 구문), apply(), Object.assign() 사용, 깊은 복사 사용법 2023.02.16 - [개발 용어 정리] - 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) A = 원본 B = 복사하려는 객체 얕은 복사 새로운 B객체를 생성 후 원본 A객체를 메모리 영역을 참조해서 원본에 종속된 객체를 생성하는 것이 얕은 복사 kfdd6630.tistory.com Spread(전개 구문) 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자들(iterable 객체) 예를 들어, 1. 0개 이상의 인수 .. 2023. 2. 16.
[js] Math (절댓값, 반올림, 올림, 내림, 랜덤 등등) JavaScript_Math 1. javascript에서 Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체이다. 2. javascript에서 Math는 함수 객체가 아니다. 3. Math는 Number 자료형만 지원하며 BigInt와는 사용할 수 없다. 4. 다른 전역 객체와 달리 Math는 생성자가 아니다. 5. Math의 모든 속성과 메서드는 정적이다. 6. 파이 상수는 Math.PI로 참조할 수 있고, 사인 함수는 매개변수 x에 대해 Math.sin(x)와 같이 호출할 수 있다. 7. 상수는 javascript에서 가능한 최대 실수 정밀도로 정의되어 있다. 속성 및 메소드 중 많이 사용한다고 생각되는 순서대로 나열 Math.abs(x) 숫자의 절댓값을 반환한다. Math.rou.. 2023. 2. 15.
영어, 숫자, 특수 문자, 글자 수 제한 정규식 모음 많이 쓰는 정규식 모음 const regExBook = { ONLY_ENG: /^[a-zA-Z]*$/, // 영어만 있는가? ONLY_NUM: /^[0-9]*$/, // 숫자만 있는가? ONLY_ENG_NUM: /^[a-zA-Z0-9]*$/, //영어와 숫자만 있는가? ENG: /[a-zA-Z]/gi, // 영어가 들어가 있는가? NUM: /[0-9]/gi, // 숫자가 들어가 있는가? ENG_NUM: /[a-zA-Z0-9]/gi, //영어, 숫자가 들어가 있는가? EX_MARK: /[\{\}\[\]\/?.,;:|\)*~`!^\-_+@\#$%&\\\=\(\'\"]/gi, // 특수문자가 들어가 있는가? UNDER_TEN: /^[\w\Wㄱ-ㅎㅏ-ㅣ가-힣]{1,9}$/, // 10글자 이하인가? }; 2023. 2. 13.
[js] history.back(), history.forward(), history.go() history.back()=뒤로가기, history.forward()=앞으로 가기, history.go()=특정위치로 가기 History.back()history.back();1. history.back() 메소드는 브라우저가 세션 기록의 바로 뒤 페이지로 이동하도록 지시한다.2. history.go(-1)와 같다.3. 이전 페이지가 없는 경우 아무것도 하지 않는다.4. 이 메소드는asynchronous(비동기)로 동작한다.5. popstate 이벤트 처리기를 통해 탐색 완료 시점을 알 수 있다. 다음 예제는 클릭했을 때 뒤로 가는 버튼을 생성한다.HTML뒤로 가기jsdocument.getElementById('goBack').addEventListener('click', () => { window.h.. 2023. 2. 12.
[js] 문자열 공백 제거 replace() 함수 replace() 함수와 정규식을 이용한 여러가지 문자열 공백 제거 let 변수 = " a b c "; 변수.replace('바꾸고싶은 이전 값', '바뀌는 이후 값'); x라는 앞, 중간, 뒤에 " "공백이 2자리씩 총 6자리의 공백이 있는 문자열이 있다고 하자. let x = ' aa aaaa '; console.log(x, x.length); 출력값 aa aaaa 12 x는 길이는 6개의 a와 공백 6개로 이루어진 12자리로 이루어진 문자이다. 첫 번째로 공백 하나 제거 = .replace(" ", "") /** * 첫 번째 공백제거 * @param str * @returns */ const trimOne = (str) => { const trimStr = str.replace(" ", ""); r.. 2023. 2. 11.
[js] Object(json)에서 key로 value찾기, value로 key 찾기 Object(json)에서 key로 value찾기=Object[key], value로 key 찾기=Object.keys() 활용 Object(json)에서 key값으로 value값 찾기 const objectO = { a:1, b:2, c:3, d:1, }; console.log(objectO["a"]) 출력값 1 Object(json)에서 value값으로 key값 찾기 /** * json에서 value로 key 값 찾기 * @param object * @param value * @returns keys[] */ const objectO = { a:1, b:2, c:3, d:1, }; const getKeyByValue = (object, value) => { const result = []; Objec.. 2023. 2. 10.
[js] hoisting(호이스팅) javascript_호이스팅(hoisting) 이란? = 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것이다. (var, 함수의 경우가 있다) 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것이다. 변수를 정의하는 코드보다 사용하는 코드가 먼저 선언될 수 있다. * 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태 function sayHello(name) { console.log("안녕하세요 제 이름은 " + name + "입니다"); } sayHello("홍길동"); 위의 코드가 일반적으로 코드를 작성하는 순서이다. 출력값 안녕하세요 제 이름은 홍길동입니다. 아래의 코드는 js에서 함수 호출이 함수 자체보다 앞서 존재하는 방식이다. say.. 2023. 2. 4.
반응형