본문 바로가기

🍒공부/JS17

[JavaScript] JS의 반복문 그동안 배운 것들이 있었다... 그냥 for문을 써도 되는 상황에 굳이굳이 map을 사용한 나는 바보다 그래서 예전에 정리해둔 반복문을 가져왔다... 😎 두줄 요약 객체 순회 할 때 → Object.keys, Object.values, Object.entries 배열 순회 할 때 → forEach, map, filter, reduce 등등 ✔ for for (let i = 0; i < 10; i++) { console.log(i); } 너도알고 나도알고 모두가 아는 그 for문 ✔ for in const obj = { name: '김점프', age: '4' } for (const key in obj) { console.log(`${key} : ${obj[key]}`); } // name : 김점프 // .. 2021. 11. 21.

[JavaScript] 디바운스(Debounce) vs 스로틀(Throttle) ✅ 공통점 짧은 시간에 여러번 발생하는 이벤트를 그룹화해서, 과도한 이벤트 호출을 방지 엄청나게 빠른속도로 클릭을 여러번 하기 검색창에 키보드로 입력하기 스크롤바를 위아래로 쭉쭉 움직이기 창을 리사이징하기 등등... ✅ 디바운스 (Debounce) 요청이 들어오면 일정시간을 기다린 후 요청을 수행하는데, 기다리는 동안 같은 요청이 추가로 들어오면 이전 요청은 취소됨 연이어서 호출되는 함수 중 가장 마지막(또는 가장 처음)만 호출 되도록 함 쉼없이 계~~~속 클릭하면 클릭이 멈출때까지 기다렸다가 멈추면 실행함 그래서 만약 무한 입력을 하면 무한 기다림을 함 toggle 버튼 이벤트 등에 주면 좋음 function debounce(callback, limit = 100) { let timeout return.. 2021. 10. 12.

[JavaScript] var과 호이스팅 ✅ 호이스팅이란? catName("클로이"); function catName(name) { console.log("제 고양이의 이름은 " + name + "입니다"); } /* 결과: "제 고양이의 이름은 클로이입니다" */ 함수 안에 있는 선언들을 모두 끌어올려서, 해당 함수 유효 범위의 최상단에 선언하는 것 함수 선언만! 끌어올려짐 (할당은❌) //변수의 호이스팅 예시 console.log(name); // undefined var name = "김점프"; //------------------------------- var name; // name변수가 호이스팅 되어 상단으로 이동 console.log(name); name = "김점프"; //함수의 호이스팅 예시 foo(); foo2(); funct.. 2021. 10. 11.

[JavaScript] Callback vs Promise vs async-await promise는 이제 진짜 알 때도 되었다. #가보자고... ✅ Callback 콜백 지옥 = 콜백이 너무 길어지면 읽기 힘들고, 이해하기도 힘듬 에러처리하기도 힘듬 유지보수도 힘듬 그리고 실패했는지/성공했는지/대기중인지 알려주지 않음 (에러가 나야만 아 뭔가 잘못됐구나 라고 알수있음😰) → 그래서 promise가 등장 ✅ Promise promise는 객체임 new Promise()로 프로미스를 생성하고 종료할 때 까지 프로미스는 3가지 상태를 가짐 pending(대기) : 비동기처리 미완료 (생성 직후 === 기본상태) fulfilled(이행) : 비동기 처리 성공 → resolve 호출 rejected(실패) : 비동기 처리 실패 → reject 호출 Promise 후속 처리 메서드 then : 인.. 2021. 10. 10.

[JavaScript] 화살표함수 vs 일반함수 ✅ 일반 함수 this는 마지막으로 자신을 품고있는 scope로 항상 변함 (❌어디서 선언했느냐❌ ⭕어디서 호출했느냐⭕) const example = { name: "world", speak: function() { function getName() { return `${this.name}`; } return `Hello ${getName()}`; } }; example.speak(); // Hello //이를 해결하려면.. const example = { name: "world", speak: function() { //여기까지는 this에 객체 example이 bind돼있음 const self = this; // self를 선언해서 결합시킴 function getName() { return `${se.. 2021. 10. 9.

이전 1 2 3 4 다음

티스토리툴바