즐겁게, 코드

ES6부터는 for...of 라는 새로운 문법으로 배열을 순회할 수 있게 되었습니다. const student = ["찬민", "연주"]; for (let i of student) { console.log(i); } // 찬민 // 연주 이렇게 for...of 등 "반복 가능" 한 동작을 수행할 수 있는 객체*를 반복 가능한(iterable)한 객체 라고 부르는데요, 오늘은 이터러블한 객체를 생성하는 방법을 소개하려 합니다. (* 배열 역시 Array 객체이므로 객체 라는 표현을 사용했습니다.) 이터레이터 프로토콜 / 이터러블 프로토콜 이터러블한 객체를 만들기 전에 먼저 이터러블과 이터레이터를 정확히 구분해야만 합니다. 둘을 구분하기 위한 규칙 역시 아래와 같이 존재합니다. 이터레이터 프로토콜 - 반복의..

자바스크립트의 객체의 속성은 문자형과 심볼형을 허용하는데, 심볼형이란 무엇일까? 심볼(Symbol)은 ES6에서 새롭게 추가된 타입으로 심볼로 생성되는 값은 언제나 고유하다는 특징이 있다. [심볼 사용법] // new 키워드 없이 선언함에 유의한다. const symbol1 = Symbol(); // 심볼의 인자는 심볼을 설명하는 역할에 불과하다. const symbol2 = Symbol("name"); 심볼은 인자를 해시화하는 개념이 아니라 심볼마다 완전히 고유한 값이 할당되는데 코드를 통해 살펴보자. Symbol("name") == Symbol("name"); // false 동일한 "name" 인자를 받았다 하더라도 인자는 심볼값의 고유 여부를 결정할때 영향을 미치지 않으며, 심볼은 언제나 고유한 ..

이벤트는 화면에 커서를 올리거나 클릭, 키보드를 조작하는 등 사용자가 행하는 모든 동작을 의미한다. 오늘은 버블링과 캡처링으로 대표되는 이벤트의 동작 흐름에 대해 알아보자. [사용할 예제 파일] const parent = document.querySelector(".parent"); parent.addEventListener("click", (e) => { parent.style.backgroundColor = "black"; }); 위 코드는 parent 클래스명을 가진 요소를 클릭하는 이벤트가 발생할 시 배경을 검정색으로 변경한다. addEventListener로 이벤트 리스너를 추가하는 것은 대부분 알고 있겠지만 앞으로 소개할 내용들은 꽤나 생소한 개념일 것이다. 1. 이벤트의 버블링 const g..

브라우저는 간단한 데이터를 위한 작은 저장소를 제공하는데, 쿠키와 로컬 스토리지(Local storage), 세션 스토리지(Session Storage) 가 바로 그것입니다. 쿠키에 대해서는 나중에 더 자세히 다뤄 보도록 하고, 오늘은 로컬 스토리지와 세션 스토리지에 대해 정리해보기로 하겠습니다. 1. 공통적인 특징 두 브라우저 저장소의 공통적인 특징으로는 쿠키와 달리 웹 서버로부터 고립되어 있다는 점입니다. 오리진에 종속되는 특징으로 인해 서버로부터의 영향을 절대 받지 않으며, 쿠키보다 더 많은 정보를 저장할 수 있다는 이점이 있습니다. [LocalStorage & SessionStorage 사용하기] localStorage.setItem("name", "Chanmin"); localStorage.re..