정규표현식(RegExp, Regular Expression) 정규표현식을 사용하여 문자를 검색(search)하거나 대체(replace), 추출(extract)할 수 있다. 만들기 // RegExp // 생성자 // new RegExp("표현", "플래그") const regExp1 = new RegExp("the", "gi"); // 리터럴 // /표현/플래그 const regExp2 = /the/gi; 메소드 // 정규식.test(문자열) : 일치 여부 반환 // 문자열.match(정규식) : 일치하는 문자의 배열 반환 // 문자열.replace(정규식, 대체문자) : 일치하는 문자를 대체 const str = ` 010-1234-5678 thesecon@gmail.com Hello world! htt..

자바스크립트 엔진 자바스크립트 엔진은 메모리 힙과 콜 스택으로 이루어져 있다. 엔진이 코드를 읽고 실행하면서 변수나 함수 객체 등을 담아놓는 공간(메모리 힙)과 실행할 코드를 저장할 공간(콜 스택)으로 나뉜다. 콜 스택에 대해 더 알아보자. Call Stack 브라우저에는 엔진뿐만 아니라 다양한 Web API가 존재한다. 이러한 API를 통제하기 위해 Task Queue와 Event Loop가 필요하다. 자바스크립트는 싱글 스레드 언어로, 한 번에 한 개의 일만 처리할 수 있다. 그렇다면 비동기적인 코드에 대해 어떻게 처리하는 것일까? setTimeout(() => { console.log(1); }, 0); console.log(2); 위와 같은 코드를 예시로 자바스크립트의 동작 원리를 이해해보자. 가..

메모리 누수(Memory Leak) 더 이상 필요하지 않은 데이터가 해제되지 못하고, 메모리를 계속 차지하는 현상 불필요한 전역 변수 사용 // ❌ window.hello = "hello"; window.user = { name: "iam454", age: 90 }; window라는 전역 객체는 항상 브라우저에 존재하기 때문에 사용하지 않더라도 가비지 컬렉션으로 데이터가 해제되지 않는다. 분리된 노드 참조 // ❌ const btn = document.querySelector("button"); const parent = document.querySelector(".parent"); btn.addEventListener("click", () => { console.log(parent); parent.re..

Closure 함수가 선언될 때의 유효 범위(렉시컬 범위)를 기억하고 있다가, 함수가 호출될 때 그 유효 범위의 특정 변수를 참조할 수 있는 개념을 의미한다. 쉽게 말하면, 자신이 선언될 당시의 환경을 기억하는 함수이다. 데이터를 보존하고, 접근을 제한하고, 모듈화에 유리하다는 장점이 있다. 그렇다면 클로저의 예시를 살펴보자. // Closure function createCount() { let cnt = 0; return function () { return (cnt += 1); }; } const c1 = createCount(); console.log(c1()); // 1 console.log(c1()); // 2 console.log(c1()); // 3 const c2 = createCount..

Garbage Collection(GC, 쓰레기 수집) 자바스크립트의 메모리 관리 방법 자바스크립트 엔진이 자동으로 데이터가 할당된 메모리에서 더 이상 사용되지 않는 데이터를 해제하는 것을 의미한다. 가비지 컬렉션은 개발자가 직접 강제 실행하거나 관리할 수 없다.

앝은 복사(Shallow Copy) - 참조형의 1차원 데이터만 복사 깊은 복사(Deep Copy) - 참조형의 모든 차원의 데이터를 복사 Object.assign(빈 객체, 복사하고 싶은 객체)이나 전개 연산자로 얕은 복사를 할 수 있다. 그러나 얕은 복사는 1차원의 데이터만 복사하기 때문에, 고차원의 데이터는 같은 주소를 참조하게 된다. 그렇기 때문에 깊은 복사를 하여 완전히 데이터를 분리해주어야한다. 깊은 복사는 고차원의 데이터도 다른 메모리 주소에 값을 저장하기 때문에, 완전하게 연결고리를 끊었다고 할 수 있다. 배열은 복사하고 싶은 배열.concat(빈 배열)이나 전개 연산자로 얕은 복사를 할 수 있다. 객체와 원리는 같다. 깊은 복사를 위해서는 lodash의 cloneDeep을 사용하자!

불변성(Immutability) : 생성된 데이터가 메모리에서 변경되지 않는다. 가변성(Mutability) : 생성된 데이터가 메모리에서 변경될 수 있다. 원시형(number, string, boolean, undefined, null, symbol)은 불변성을, 참조형(배열, 객체, 함수)은 가변성을 가지고 있다. 이와 같은 결과가 나오게 된 과정을 살펴보자. 8줄 - 객체 데이터가 M1에 저장되고, 그 중 숫자는 M2에 저장된다. 9줄 - b는 a가 참조하고 있는 주소 M1과 같은 주소를 참조한다. 11줄 - M3에 새로운 값이 할당되고 M1이 바라보고 있던 값도 M3로 변경된다. 13줄, 14줄 - a와 b 모두 같은 주소를 참조하고 있기 때문에 같은 값이 출력된다. 16줄 - M4에 새로운 값이..

Symbol // Symbol // 변경이 불가한 데이터 // 변수를 사용해야만 데이터를 조회하게 하여 데이터 보호의 용도로 사용 const sKey = Symbol("Hello"); const user = { key: "일반 정보", [sKey]: "민감한 정보", // 객체에서는 대괄호로 묶어 사용 }; console.log(user.key); // "일반 정보" console.log(user[sKey]); // "민감한 정보" console.log(user[Symbol("Hello")]); // undefined // 심볼은 생성될 때마다 고유의 값을 가지고 있기 때문에 // 같은 내용으로 생성하더라도 별개의 값을 가진다. BigInt // BigInt // 길이 제한이 없는 정수 // 숫자 데이터..