JS에 기본적으로 내장되어 있는 생성자들을 이야기한다. primitive type의 데이터들은 해당 생성자로 생성할 경우 object로 생성됨에 주의하고, 정규표현식 같은 경우에는 생성자를 이용할 때 escaping을 해줘야 한다는 점에 주의하도록 하자. 또한, 해당 생성자들을 이용할 경우 시간이 더 오래 걸린다고 한다. // String const name1 = "jian"; const name2 = new String("jian"); // name2.foo = "bar"; console.log(name2); console.log(typeof name1); // String console.log(typeof name2); // Object if (name2 === "jian") { // No, beca..

Hoisting 직역하면 끌어올림이다. js 작업을 할 때 이런 식으로 작성된 코드를 본 적이 있을 것이다. foo(); function foo() { console.log("Hello"); } 함수의 선언이 호출보다 밑에 있음에도 불구하고 위의 코드는 정상적으로 작동하는데 이 모습이 마치 아래의 선언을 호출 위로 끌어올리는 것과 같아 Hoisting이라 부르는 것 같다. 정확히는 해당 코드를 메모리에 저장할 때도 순서를 바꾸는 로직은 없다고 한다. 또한 선언 부분은 Hoisting이 가능하지만 초기화는 Hoisting이 되지 않는다고 한다. var x = 1; // x 초기화 console.log(x + " " + y); // '1 undefined' var y = 2; 더 깊이있는 내용은 mdn을 참..

Math.floor(Math.random() * (max - min + 1) + min) 나름대로의 원리 나올 수 있는 최소값이 min 이니까 Math.random()에 무슨 짓을 하든 max - min과 같은 정수를 갖는 최대값이 나와야 함(ex. 2~100 일 경우 98.99999... 까지이다., 여기에 최소값 2를 더하고 버림하면 100이 나오니까). 그러려면 max-min 값에 + 1을 해줘야 하기 때문에 위와 같은 공식이 성립된다.

Number Number("3만");// NaN Number("만 3세");// NaN Number(null);// 0 Number(undefined);// NaN Number(" ");// 0 Number();// 0 parseInt parseInt("3만"); // 3 (숫자로 시작할 경우에만 적용됨) parseInt("만 3세"); // NaN parseInt(null);// NaN parseInt(undefined);// NaN parseInt(" ");// NaN parseInt();// NaN

Local Storage key value pair 이며 String으로만 저장 가능하다. 따라서 배열이나 객체 등은 JSON.stringify 메서드를 이용해 문자열로 변경후 저장한다. 데이터를 삭제하려면 수동으로 지워야 한다. (세션이 종료되어도 데이터가 남아있음) Session Storage Local Storage와 비슷하나 다른점은 세션이 종료될 때 데이터가 없어진다는 점이다. // set local storage item // localStorage.setItem("name", "John"); // localStorage.setItem("age", "30"); // set session storage item // sessionStorage.setItem("name", "Beth"); // r..

Event Bubbling 어떤 요소의 이벤트 핸들러가 동작할 때 그 요소의 상위, 더 나아가 최상단 요소의 핸들러까지 동작해버리는 현상을 이야기 한다. // Event Bubbling card-title을 클릭했지만 아래 모든 핸들러가 전부 동작해버림 document.querySelector(".card-title").addEventListener("click", function(e) { console.log("card title"); }); document.querySelector(".card-content").addEventListener("click", function(e) { console.log("card content"); }); document.querySelector(".card").ad..

const form = document.querySelector("form"); const taskInput = document.getElementById("task"); const heading = document.querySelector("h5"); const select = document.querySelector("select"); // Clear input taskInput.value = ""; // form.addEventListener("submit", runEvent); // Keydown // taskInput.addEventListener("keydown", runEvent); // Keyup // taskInput.addEventListener("keyup", runEvent); //..

mouseover, mouseout과 mouseenter,mouseleave의 차이를 확실히 알자 const clearBtn = document.querySelector(".clear-tasks"); const card = document.querySelector(".card"); const heading = document.querySelector("h5"); // Click // clearBtn.addEventListener("click", runEvent); // Double Click // clearBtn.addEventListener("dblclick", runEvent); // Mousedown => 마우스를 누른 순간(떼는 동작은 따로 있음) // clearBtn.addEventListene..

Replace // Create Element const newHeading = document.createElement("h2"); // Add an id newHeading.id = "task-title"; // New text node newHeading.appendChild(document.createTextNode("Task List")); // Get the old Heading const oldHeading = document.querySelector("#task-title"); // Parent const cardAction = document.querySelector(".card-action"); // Replace cardAction.replaceChild(newHeading, oldH..

// Create element const li = document.createElement("li"); // Add class li.className = "collection-item"; // Add id li.id = "new-item"; // Add attribute li.setAttribute("title", "New Item"); // Create text node and append li.appendChild(document.createTextNode("Hello World")); // Create new link element const link = document.createElement("a"); // Add classes link.className = "delete-item second..