JavaScript

[ JS ] Destructuring

🔴 Object Destructuring ⚪ 큰 오브젝트에서 특정 변수나 그 안에 속한 작은 오브젝트에 접근할 수 있도록 하는 기법 const settings = { notifications: { follow: true, alerts: true, unfollow: false }, color: { theme: "dark" } }; // const 변수 생성 const { notifications: { follow }, color } = settings; console.log(follow); // true console.log(color); // {theme: "dark"} const settings = { notifications: { alerts: true, unfollow: false }, color:..

[ JS ] Array

🔴 Array.of ⚪ 배열 만들기 const friends = Array.of("a", "b", "c", "d"); console.log(friends); // ["a", "b", "c", "d"] 🟠 Array.from ⚪ Array-like object를 Array로 만들기 // 사전에 HTML에 btn이라는 class를 갖는 button 10개를 생성한다. const buttons = document.getElementByClass("btn"); Array.from(buttons).forEach(button => { button.addEventListener("click", () => console.log("I ve been clicked")); }; 🟡 Array.find && Array.fin..

[ JS ] Strings

🔴 Using BackQuote ⚪ ` `를 사용하여 문자열과 변수를 + 연산자 없이 표현할 수 있다. const add = (a, b) => a + b; console.log(`hello how are you ${add(6, 6)}`); 🟠 HTML Fragments const wrapper = document.querySelector(".wrapper"); const addWelcome = () => { const div = ` Hello `; wrapper.innerHTML = div; }; const wrapper = document.querySelector(".wrapper"); const friends = ["me", "lin", "hyun", "hun"]; const list = ` Peop..

[ JS ] Functions

🔴 Arrow Functions const names = ["Jeong", "Seung", "Ryong"]; // using normal function const array = names.map(function(item) { return item + " ❗"; }); // using array function const array = names.map(item => { return item + " ❗"; }); // using implicit return // 🔑 { }를 사용하면 안 됨. const array = names.map(item => item + " ❗"); 🟠 'this' in Arrow Functions ⚪ this를 사용하여 스코프 범위에 해당하는 객체를 얻어올 때는 Arrow fun..

[ JS ] Variables and Operator

🔴 Dead Zone ⚪ 자바스크립트는 var, let 계열의 변수가 선언되었을 경우, 스크립트의 최상단으로 끌어올리는 호이스팅을 진행한다. console.log(myName); var myName = "ryong"; 위와 같은 코드를 실행시키면 자바스크립트 내부에서는 호이스팅으로 인해 아래와 같이 해석한다. var myName; console.log(myName); // undefined myName = "ryong"; 하지만 var 대신 let을 사용할 경우 아래와 같이 에러를 발생시킨다. console.log(myName); // error let myName = "ryong"; ⚪ var는 앞으로 절대 사용하지 말자. 🟠 Block Scope ⚪ const와 let은 블록 스코프로 적용되는 변수다..