맵(Map) - 맵은 딕셔너리 자료형과 같으며, 키(Key)와 값(Value)로 이루어진 자료형이다. 맵 프로퍼티 - new Map() - 맵을 생성한다. - map.set(key, value) - key를 이용해 value를 저장한다. - map.set(key) - key에 해당하는 값을 반환한다. - map.has(key) - 해당 key의 존재여부를 true, false로 반환한다. - map.delete(key) - key에 해당하는 값을 삭제한다. - map.clear() - 맵 안의 모든 요소를 제거한다. - map.size() - 요소의 개수를 반환한다. - map.keys() - 각 요소의 모든 key 반환 - map.values() - 각 요소의 모든 value 반환 - map.entri..

코딩테스트 알고리즘 문제를 풀다보면, array.sort() 함수를 자주 사용하게 되는데, 쓰다보면 매우 유용하고 다양하게 응용 가능한 걸 느낄 수 있다. 문득 제대로 알고 쓰기보단 "이러면 오름차순, 이러면 내림차순" 이렇게 암기식으로 사용하고 있다는 걸 느꼈다. 따라서 자바스크립트의 sort를 정리하는 글을 쓰려고 한다. 잘 정리 했으니 읽어보고 도움이 됐으면 좋겠는 바람이다!구문부터 보자compareFunction은 생략이 가능하며, 생략할 시에는 배열 각 요소를 string으로 처리하고, 각 문자의 유니코드 값에 따라 정렬된다. 다음 예시를 보면 바로 이해가 될 것이다. 만약, compareFunction을 넣어주면, 이 함수의 반환값에 따라 정렬된다. 분명 둘다 오름차순 정렬을 했는데 compa..

정규 표현식이란? 정규 표현식(regex)은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. 이를 선언하는데에는 두가지 방식이 있다. 1. 생성자 함수를 이용한 방식 //형식: new RegExp(표현식) const regex1 = new ReExp("^abc"); //형식: new RegExp(표현식, 플래그) const regex1 = new ReExp("^abc", "gi"); 2. 리터럴 방식 //형식: /표현식/ const regexp1 = /^abc/; //형식: /표현식/플래그 const regexp2 = /^abc/gi; 보다시피 정규식은 표현식과 플래그로 이루어진다. 정규 표현식을 이용하면 코드를 간단하게 구현할 수 있지만, 간단한 만큼 코드의 가독성이 떨어진다는 단점이 있기도 하다. ..

다음 4가지는 모두 리턴값을 가지고 있는 함수다. 1. 기본적인 리턴값이 있는 함수 function a() { return "i'm a!!!"; } 2. 화살표 함수 형식을 이용한 리턴값이 있는 함수 const a = () => { return "i'm a!!!"; }; 3. 중괄호를 적지 않으면 return문이 생략 된다. return문이 생략된 리턴값이 있는 함수. const a = () => "i'm a!!!"; 4. 소괄호를 이용해 객체를 리턴하는 함수. 소괄호를 이용하면 return문 없이 객체를 리턴할 수 있다. const a = () => ({ say: "i'm a!!!" });

1. 웹 스토리지란? 웹 스토리지란 서버를 따로 사용하지 않고 브라우저(크롬, 사파리.. 등등)를 통해 데이터를 저장하는 기술을 말한다. 이 웹 스토리지 공간을 두 개의 스토리지로 나눌 수 있다. 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)가 존재한다. 그리고 이러한 스토리지들은 모두 key - value 쌍으로 저장된다. 2. 로컬 스토리지와 세션 스토리지의 차이점 이름에서 알 수 있다! 로컬 스토리지는 세션이 종료되도 데이터가 유지되는 반면에 세션 스토리지는 세션이 종료되면 데이터도 사라진다. 3. 웹 스토리지 메소드 대게 사용하는 웹 스토리지의 메소드는 다음과 같다. setItem("key", "value") - 스토리지에 저장하기 getItem("key"..

왜? 얕은 복사와 깊은 복사를 알아야하는 이유는 불변객체를 만들기 위함이다. 우리는 참조형 데이터인 객체의 기본적 성질이 가변성인걸 알고 있다.(이전글 참고) 때문에 그 객체 자체를 생성해 불변객체를 만들 필요가 있다. 여기서 사용되는게 얕은복사, 깊은복사이다. 얕은 복사는 객체 안에 또 객체가 있을때는 우리가 마주한 문제에서 벗어날 수 없다. 하지만 깊은 복사는 객체 안에 있는 객체까지 그 객체 자체를 복사 시키기 때문에 완전한 불변 객체를 만들 수 있다. 불변객체를 만드는 방법에는 여러가지 도구, 프레임워크가 있다고 한다. 이번 포스팅에선 고전적으로 함수를 만들어 불변객체를 만들어 보려고한다. 얕은 복사 얕은 복사는 바로 아래 단계의 값만 복사하는 방법이다 코드는 다음과 같다. var = shallo..

당연? 다음의 결과가 false가 나오는 거는 당연하다. 그러면 객체일 때는? 왜 같다고 나오는 것일까? 불변성, 가변성 앞에서 불변성과 가변성을 공부했다. 기본형은 불변성을 지니기 때문에 주소에 대한 값이 변할 수 없다. 따라서 값이 변해야 한다면 새로운 주소를 할당한다. 참조형은 기본적으로 가변성을 지닌다. 이 말은 임의로 불변성을 지니게 할 수 있다는 말이다(다음에 알아보자). 아무튼 참조형은 값이 변해도 주소를 두번 거치기 때문에 새로운 주소를 할당하지 않는다. 기본형 타입의 복사 b = a 부분에서 b에 a의 값인 &5000을 복사한다. b = 15 부분에서 b는 15라는 데이터가 메모리상에 없다는 걸 알고 따로 만들며, 그 주소를 값으로 사용한다. 이게 a===b 가 false가 나오는 과정이..

0. 가변값과 불변값 성질, 변수와 상수 ⭐️자바스크립트 데이터 타입중 기본형은 모두 불변값 성질을 만족한다. 이 문장을 이해하기 전에 가변값 = 변수, 불변값 = 상수라는 개념으로 오해하면 안된다는게 가장 중요하다. 자바스크립트의 기본형에는 number, string, bool.. 등등이 있다. 그러면 이것들이 불변값이라는건 무슨 소리일까? 코드를 자바스크립트가 해석하고 메모리에 저장하는 과정을 보면 단번에 이해할 수 있다! 1. 불변값 이해해보기 자바스크립트는 데이터 영역 메모리와 변수영역 메모리를 따로 관리한다. 따라서 다음과 같은 코드를 실행하면 메모리에서는 다음과 같은 형상이 일어난다. var a = 'abc' 당연히 식별자와 값이 한번에 저장될 줄 알았지만 아니였다 데이터만 들어있는 영역을 따..