⏳ 2023. 5. 15. - 2023. 5. 21. Prototype js는 프로토타입 기반 언어이다. js에서, 원시형 타입을 제외한 모든 것은 객체이고, 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 객체 지향 언어의 상속처럼, 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 프로토타입이라고 한다. // Prototype function User(first, last) { this.firstName = first; this.lastName = last; } const user1 = new User("user", "1"); const user2 = new User("user", "2"); console.log(user1); con..

⏳ 2023. 5. 15. - 2023. 5.21. 호이스팅(Hoisting) // 호이스팅(Hoisting) hello1(); // "hello1" // hello2(); // ❌ error // 함수 선언문(Declaration) function hello1() { console.log("hello1"); } // 함수 표현식(Expression) const hello2 = function () { console.log("hello2"); }; 호이스팅은 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상을 말한다. 선언문만 호이스팅된다. 즉시 실행 함수 // 즉시 실행 함수(IIFE, Immediately-Invoked Function Expression) // (F)() (() => { conso..

스크립트 코드 보기 js에서 html을 불러오는 방법은? -> documentElement document에서 가장 최상위 요소인 html을 불러올 수 있다. 검색 포커스 및 값 비우기 코드 보기 transition을 적용했을 때 아직 보이지 않은 요소에 대해 함수를 실행하면 함수가 제대로 동작하지 않을 수 있다. 그럴 때 사용하는 setTimeout()

화살표 박스 만들기 코드 보기 .container { margin: 200px; width: 200px; height: 200px; border: 4px solid; position: relative; } .item { width: 40px; height: 20px; overflow: hidden; position: absolute; top: -20px; right: 20px; } .item::before { content:""; width: 20px; height: 20px; border: 4px solid; position: absolute; top: 0; left: 50%; background-color: #fff; transform: rotate(45deg); transform-origin: 0 ..

⏳ 2023. 5. 8. - 2023. 5. 14. for 반복문 for of // for of const fruits = ["Apple", "Banana", "Cherry"]; for (const fruit of fruits) { console.log(fruit); } for of를 사용하면 배열에서 코드를 우아하게 작성할 수 있다. for in // for in const user = { name: "iam454", age: 90, isValid: true, email: "realseogy@gmail.com", }; for (const key in user) { console.log(key); console.log(user[key]); } for in을 사용하면 객체에서 코드를 우아하게 작성할 수 있..

⏳ 2023. 5. 8. - 2023. 5. 14. // 선택적 체이닝(Optional Chaining) const obj = {}; console.log(obj.name); // undefined const isNull = null; const isUndefined = undefined; // console.log(isNull.name); ❌ error // console.log(isUndefined.name); ❌ error console.log(isNull?.name); // undefined console.log(isUndefined?.name); // undefined 객체 데이터의 없는 속성을 점 표기법으로 불러오면 undefined이다. 그러나 null이나 undefined는 점 표기법을 사..

⏳ 2023. 5. 8. - 2023. 5. 14. 구조 분해 할당(Destructing assignment) 배열에서 const arr = [1, 2, 3]; const [a, b, c] = arr; // const a = arr[0]; // const b = arr[1]; // const c = arr[2]; console.log(a, b, c); // 1 2 3 불필요한 코드를 줄일 수 있다! const arr = [1, 2, 3]; // 할당하고 싶지 않은 값에 대해서는 순서에 맞춰 ,로 구분해서 작성해야 한다. let [, b, c] = arr; console.log(b, c); // 2 3 // 전개 연산자를 사용할 수 있다. let [a, ...rest] = arr; console.log(a..

⏳ 2023. 5. 8. - 2023. 5. 14. 연산자 산술 // 산술(Arithmetic) console.log(1 + 2); // 3 console.log(3 - 5); // -2 console.log(3 * 4); // 12 console.log(10 / 2); // 5 console.log(7 % 5); // 2 할당 // 할당(Assignment) const a = 1; let b = 3; b = b + 1; b += 1; b -= 1; b *= 4; b /= 2; b %= 3; 증감 // 증감(Increment & Decrement) let a = 5; console.log(a++); // 5 console.log(a); // 6 console.log(++a); // 7 console.lo..