Front-End/JS

JS 정규식

정규식 정규식은 문자열에서 특정 내용을 찾거나 대체할 때 사용됩니다. 문장이 필터링 되어야 하는 경우 정규표현식을 이용하면 간편하게 처리할 수 있어 유용합니다. JS에서 주로 search(), replace(), match(), split() 등과 같은 메서드에 쓰입니다. 문자열.search(정규표현식) 문자열.replace(정규표현식, 치환문자열) 문자열.match(정규표현식) 문자열.split(정규표현식) 정규표현식.exec(문자열): 패턴과 일치하는 문자열을 배열로 반환 정규표현식.test(문자열): 패턴과 일치하는 문자열이 있는지 여부를 반환 정규식 규칙: /패턴/수정자 패턴 패턴 부분 정규식 규칙을 대부분 비슷합니다. 정규식 규칙 정규식 규칙 기호 | OR a|b [문자] 대괄호 내에 지정된 문..

JS Map과 Set

Map Key(키)와 Value(값)을 쌍으로 이루어진 컬렉션입니다. // Map 생성 및 선언 const map = new Map(); const map = new Map([ ['Apple', 1200], ['Banan', 1500], ['Orange', 2500] ]); // Map 값 추가 map.set('Apple', 1200); map.set('Banana', 1500); map.set('Orange', 2500); // Map 값 삭제 map.delete('Apple') // Map 값 가져오기 map.get('Apple'); // Map 값 존재하는지 확인 map.has('Apple'); // true or false // Map 크기 map.size; // Map 모든 값 삭제 map.cl..

JS 자바스크립트 반복문(Loop) / for in, for of 차이점

반복문 종류 for: 코드 블록을 반복 forEach: 배열의 각 요소에 대해 콜백함수를 호출 for in: 객체의 속성을 순회할 때사용 for of: 반복 가능한(iterable) 객체를 순회할 때 사용 for문: 가장 기본적인 순회 방법입니다. for (let i = 0; i { console.log(value); }); array.forEach((value, index) => { console.log("index: " + i..

JS 내장 객체: String, Date, Math, Array, 정규식 객체 등

내장 객체 내장 객체는 JS 엔진에 내장되어 있어 필요시에 사용할 수 있습니다. 내장 객체는 다음과 같은 방법으로 선언할 수 있습니다. 참조 변수 = new 생성 함수(); 내장 객체 종류는 대표적으로 아래와 같이 있습니다. 문자열 내장 객체 (Click) 날짜 내장 객체 (아래 설명) 수학 내장 객체 (아래 설명) 배열 내장 객체 (Click) 정규식 객체 (Click) 날짜 정보 객체: Date 날짜 객체 생성 const date = new Date(); new Date() // 현재 날짜와 시간 new Date(date string) // 날짜 문자열에서 날짜 객체 생성 // 연도, 월, 일, 시, 분, 초, 밀리초 (순서) new Date(ms) new Date(year,month) new Dat..

JS 자바스크립트 배열(Array) + 배열을 다루는 내장 API들 소개

배열(Array) 배열(Array)은 순서가 있는 데이터 집합을 다루기 위한 데이터 구조입니다. JS에서 배열은 다른 프로그래밍 언어와 다른 점이 있습니다. 바로 JS에서 배열은 특수한 형태의 객체로 다룬다는 점입니다. 또한 JS는 변수의 타입이 런타임에 결정되는 동적 타입 언어이기 때문에 배열에 담기는 데이터타입이 동일하지 않아도됩니다. var arr = []; console.log(typeof arr); // Object 출력 const mixedArr = [1, "two", true, {age: 4}, [5, 6, 7]]; 배열 선언 방식: const 배열을 선언할 때 const 키워드를 사용하는 것이 일반적입니다. 배열을 const로 선언하는 이유는 배열 변수가 재할당되지 않도록 하기 위해서입니다..

JS 문자열 메서드

let text = "ABCDEFGHI"; 문자열 길이 let length = text.length; //9 문자열 부분 자르기 slice(start, end) let str = text.slice(2, 5); // CDE let str = text.slice(2); // CDEFGHI let str = text.slice(-4); // FGHI let str = text.slice(-4, -2); // FG substring(start, end) let str = text.substring(2, 5); // CDE let str = text.substring(2); // CDEFGHI substr(start, length) let str = text.substr(2, 5); // CDEFG let st..

JS 자료형과 타입 변환 모음

자료형 변수에 저장할 수 있는 자료형은 다음과 같습니다. 문자열: String 숫자형: Number 논리형: Boolean 빈 데이터: undefined 자료형 구하기: typeof 지정한 테이너 또는 변수에 저장된 자료형을 알고 싶을 때 typeof를 이용하면 구할 수 있습니다. let num = 5; let str = "문자열"; let obj = {name: 'kim', age: 25}; console.log(typeof num); // numver console.log(typeof str); // string console.log(typeof obj); // object 문자열 문자열 → 숫자 Number(): Number("100"), Number(" ") 빈 문자열인 경우 0 반환 단항 + 연..

JS 호이스팅과 var, let, const 차이점

호이스팅 호이스팅(hoisting) JavaScript의 인터프리터가 함수나 변수 선언을 선언들이 속해 있는 스코프의 최상단으로 끌어올리는 동작을 의미합니다. 즉, 함수나 변수를 선언하기 전에도 사용할 수 있다는 것을 의미합니다. 코드 실행 전, 자바스크립트 엔진이 해당 스코프에서 선언된 함수와 변수를 모두 찾고, 함수 선언문을 가장 최상단에 끌어올리고 그 다음으로 변수 선언을 올립니다. 아래 예제들을 보면서 설명하도록 하겠습니다. console.log(value); var value = "hello"; // undefined 여기서 변수 value 선언이 끌어 올려지기 때문에 다음과 같이 해석됩니다. var value; // 변수 value 호이스팅 console.log(value); // value ..