Map 객체 Map 객체는 자바스크립트의 객체와 동일하게 'key-value' 값의 한 쌍으로 이루어진 집합이다. 우리가 알던 객체와는 다르게 메서드를 이용해서 객체의 프로퍼티에 접근한다. 사용 방법 const maps = new Map(); // Map 객체 생성 maps.set('name', 'shawn'); maps.set(123, 456); maps.set(true, 'true'); maps.get('name'); // 'shawn' maps.has('name'); // true maps.delete(123); // true maps.size(); // 2 maps.clear(); - map.set(key, value) : Map 객체에 key와 value값을 넣어준다. 이 때, 객체와 크게 다른..

URL 객체란? 자바스크립트에서 도메인에 대한 정보를 가지고 올 때, 주로 window.location.href를 사용했을 것이다. 이번 글에서 소개할 URL 객체를 이용하면 도메인 주소를 비롯한 프로토콜, 쿼리스트링 등 현재 페이지에 대한 모든 정보들을 쉽게 조회할 수 있다. 물론, URL 객체를 사용하지 않고 window.location을 이용해서도 똑같이 구현 가능하다. 하지만, 매번 변수에 저장하는 것보다는 하나의 객체로 만들어서 사용하면 편의성 측면에서 훨씬 더 효율적일 수 있다. 사용 방법 URL 객체 선언하기 const url = new URL(window.location.href); new URL('도메인 주소')를 통해 URL 객체를 선언해 준다. 파라미터(경로)와 쿼리스트링 조회하기 /..

복사에도 두 가지가 있다. 자바스크립트에서 변수에 객체나 배열을 할당할 때, 우리는 이것이 얕은 복사인지 깊은 복사인지 구별해야 한다. 물론, 아무것도 모를 때는 이게 복사면 복사지 얕고 깊은 정도가 따로 있나 싶지만 이게 무엇이냐에 따라서 원본 객체나 배열에도 영향이 가게 되고, 결국 코드 전체에도 영향을 줄 수 있는 문제이기 때문에 우리는 얕은 복사와 깊은 복사에 대해서 확실히 알고 가야 한다. 얕은 복사와 깊은 복사는 이름에서부터 얕고 깊다고 되어 있기 때문에, 우리는 대충 이게 어떤 것을 뜻하는지 알 수 있다. 얕은 복사는 말 그대로 얕다고 되어 있기 때문에 무언가를 복사하지만 확실히 복사되는 게 아닐 것 같다는 느낌이 들고, 깊은 복사는 얕은 복사와 다르게 확실하게 복사되는 느낌이겠구나라고 감을..

What every()와 some() 메서드는 둘 다 콜백함수를 인자로 두며, 콜백함수의 인자는 (값, 인덱스, 배열) 순으로 받는다. 반환값으로는 Boolean 타입을 반환하며 every()는 전부 참일 때, some()은 하나라도 참일 때 true를 반환한다. How every() let arr = [1, 2, 3]; let result = arr.every(val => val > 2); console.log(result); // false let arr = [3, 6, 9]; let result = arr.every(val => val % 3 === 0); console.log(result); // true every()는 배열 안에 있는 모든 값이 특정 조건을 만족하는 경우 true를 반환하는 메..

개념 간혹 웹 사이트를 들어가 보면, '다시 보지 않기' 버튼과 함께 있는 팝업창이 뜰 때가 있다. 그때마다 우리는 팝업이 거슬린다는 이유로 '다시 보지 않기' 버튼에 체크한 뒤 팝업창을 가볍게 무시했었다. 그리고 그 팝업창은 다음에 재방문했을 때 뜨지 않았다. 아무것도 몰랐을 때는 그냥 당연한 기능인 줄 알았는데, 지금 생각해 보니까 '팝업창을 다시 안 뜨게 하는 것은 누가 기억하는 걸까?'와 같은 궁금증이 생겼다. 우리가 웹을 만들고 경험해 봐서 알겠지만, HTTP로 작동되는 웹은 서버와 클라이언트의 통신이 끝나면 상태를 보존하지 않는다는 특징을 가진다. 이것은 HTTP의 단점이었고, 이를 극복하고자 쿠키, 세션, 로컬 스토리지와 같은 스토리지가 등장하였다. (세션은 세션 스토리지라고도 한다. 이 글..