예방이의 개발일기

📚 단축속성명이란? 단축 속성명(Shorthand Property Names)은 ES6에서 도입된 JavaScript 객체를 더 간단하게 정의할 수 있는 문법 // 기존 방식const name = "철수";const age = 20;const obj1 = { name: name, age: age};// 단축 속성명 사용const obj2 = { name, age};위와 같이 단축해서 잘 사용은 하고 있었는데, 해당 기능의 명칭을 몰랐었다"단축 속성명" 이라는 문법이라고 한다. 단축 속성명은 객체의 키(key)와 값(value)이 동일한 경우, 한 번만 작성하여 객체를 생성할 수 있게 해준다. 변수 사용 조건단축 속성명은 변수가 미리 선언되어 있는 경우에만 사용 가능문자열, 객체, ..

JavaScript의 break와 continue는 반복문(for, while, do...while)이나 switch문 등에서 자주 사용되는 제어문 🔥 1. break 문break 문은 현재의 반복문이나 switch문을 즉시 종료하는 역할반복문이 중간에 조건에 따라 종료되어야 할 때 자주 사용 📘 적용 가능한 위치반복문 (for, while, do...while)switch 문📘 동작 방식반복문: 조건에 따라 반복을 즉시 종료하고, 반복문 바깥의 코드로 실행이 이동합니다.switch 문: 조건이 일치하는 case 블록을 실행한 후, break가 있으면 switch문을 종료합니다.for (let i = 0; i  🚀 2. continue 문continue 문은 반복문의 현재 실행을 중단하고, 다음 ..

const array = [ { id: 1, type: "사과", dueDate: "20241215", price: 11369, }, { id: 2, type: "바나나", dueDate: "20241215", price: 19194, }, { id: 3, type: "사과", dueDate: "20241215", price: 9010, }, { id: 4, type: "사과", dueDate: "20241208", price: 19517, }, { id: 5, type: "바나나", dueDate: "20241208", price: 18910, }, { id: 6, ..

function a(x, y, z) { console.log(`this =`, this, `\nx = ${x}\ny = ${y}\nz = ${z}`);}a(1, 2, 3);const obj = { a: "hi", b: "hello",};console.log("%ccall", "background-color: aqua;");a.call(obj, 1, 2, 3);console.log("%capply", "background-color: pink;");a.apply(obj, [1, 2, 3]);console.log("%capply", "background-color: orange;");const bindTest = a.bind(obj);bindTest(5, 6, 7);const bindTest2 = a...

This Binding 언제할까?? 어떤 값이 this에 바인딩 되는거지??  this 바인딩은 실행 컨텍스트가 생성되는 순간에 된다.실행 컨텍스트는 함수가 실행되는 순간에 생성이 된다. 그래서 함수를 어떤식 (how)으로 호출했냐에 따라 this의 값이 바뀔 수 있다.(호출하는 방식에 따라 this에 바인딩 되는 값이 달라진다!!) 1. 전역 공간> window : 브라우저에서 > global : Node.js 환경에서 2. 함수 호출시> window : 브라우저에서> global : Node.js 환경에서 3. 메서드 호출시- 누가 호출했느냐 => 메소드 명의 '점' 바로 앞에 있는 것이 this가 된다.** 참고🙋‍♀️ c 함수의 this가 전역객체가 아니라 obj를 바라보게 하려면 어떻게 해야하..

JS엔진은 식별자들을 '최상단'으로 끌어올려 놓은 다음 코드를 실행한다. Hoisting 호이스팅:  '끌어올리다' 변수 정보를 수집하는 과정을 뜻한다.함수 선언문, 함수 표현식 등 함수 작성 방식에 따라 호이스팅이 되는 규칙이 바뀐다.  함수 선언문은 함수 선언문 전체를 끌어올린다.선언된 식별자만 끌어올려진다.위에 끌어올려진 내용 전체를 environmentRecord 라고 부른다. 그래서 결과를 보면, a는 정상출력되지만, b에서 아래와 같은 에러가 난다. 실행컨텍스트에 대해서 알아보자!-----------------------------------------------------------| inner || ..

💡 null과 undefined 개념 잡기 "둘다 없음"을 나타내는 값이지만 정확히 따져보면 없음의 기준이 다르다! 🔎 undefind: 비어있는 상태 (무시해도됨) -> 없다고 생각사용자가 undefined을 일부러 부여하는 행위는 생각보다 많지 않은것 같다. > 직접 undefined을 할당하지 말자!!자바스크립트 엔진이 부여하는 케이스는 존재한다.👉 값을 대입하지 않은 변수에 접근하고자 할 때 JS 엔진이 반환해주는 값 👈1. 값을 대입하지 않은 변수let a;console.log(a); // undefined 2. 객체 내부 존재하지 않은 프로퍼티 접근하려고 할 때let person = { name : "jane",}person.age // undefined 3. return 문이 없..

console 100% 활용하기!! 1. console.log 에 색상 입히기const err = "hihi";console.log(`%c error : ${err}`, "background: #ff0;color: red;font-weight: bold")const err = "hihi";console.log(`%c error : ${err}` + `%c error : ${err}`, "background: #ff0;color: red;font-weight: bold", "background: aqua;color: green;font-weight: bold")console.log(`%c error : ${err} %c error : ${err}`, "background: #ff0;color: red;fo..

Form Submit하는건 프론트엔드 하면서 많이 하는 일 중에 하나일 것이다. 일단 Form Submit하는 방식은 여러가지가 있는데 내가 아는 것만 적자면... 1. form태그 안에 submit 버튼을 이용한 방식 2. 스크립트를 이용한 form.submit() 3. 비동기 통신을 이용한 submit 방식 그 외 등등 다양한 방식으로 form submit을 할 수 있다. 내가 짜는 코드에 맞게 적절한 방식으로 사용하면된다. 1번과 2번 케이스 경우에는 알아서 name과 value값을 백단으로 넘겨주지만 비동기 통신을 이용했을 때는 내가 직접 데이터를 말아서(?) 보내줘야한다. 어떻게 데이터를 말아서 보내야할까? 그것도 다양한 방식이 있지만 오늘은 FormData를 이용해서 데이터를 말아보겠다. Fo..