본문 바로가기

JavaScript19

forEach에서 continue 기능 사용하는 방법 forEach는 {for ... of} 나 {for문} 과는 다르게 continue를 지원하지 않음 → 이유는 forEach는 반복문이 아닌 배열의 메서드 이기 때문! 하지만, 프로젝트를 진행하면 forEach로 짜여진 코드에 continue와 같이 현재 반복을 중단하고 다음 반복을 이동하는 코드를 이용해야 할 경우가 있음 forEach는 메서드 이므로 해당 함수를 return 하는 콜백함수 개념을 이용하면 됨. 그러면 continue와 같이 반복문에서 만 사용할 수 있는 기능과 비슷하게 기능 구현 가능! // 예시 const array = [1, 2, 3, 4, 5]; array.forEach(element => { if (element === 3) { return; // 현재 반복 건너뛰기 } con.. 2023. 5. 31.
자주 쓰이는 배열 APIs array.push('값') 배열 끝에 새로운 값을 붙여줌 array.pop() 배열 끝에 있는 값을 빼줌 array.shift() 배열 가장 앞에 값을 빼줌 array.unshift('값') 배열 가장 앞에 값을 붙여줌 array.splice(a,b) 배열의 a index 부터 b만큼 제거 array.concat(array2) array와 array2 를 결합 array.includes('값') array 안에 값이 있다면 true 없다면 false array.join() 배열을 문자열로 합침 string.split('기준') 문자열을 기준을 기준점으로 배열로 변환함 array.slice(st, ed) 배열의 st index 부터 ed -1 index 까지 지닌 새로운 배열을 생성 array.find(.. 2023. 5. 12.
async-await async 란 promise를 더 깔끔하게 제작하기 위해 존재한다 // 1. async // 따로 promise object로 선언하지 않아도 promise 형태로 출력됨 async function fetchUser() { return 'ellie'; } const user = fetchUser() user.then(console.log(user)) await란 비동기 동작하는 promise object를 동기처럼 보이게 하여, 순서를 만들어줌 //2. await function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function getApple() { await delay(1000); return '사과.. 2023. 5. 11.
promise promise란 비동기를 간편하게 처리할 수 있도록 도와주는 js에 있는 Object 정상적으로 기능이 수행 되어졌다면, 처리된 결과값을 전달한다 문제가 발생했다면 에러를 전달한다 promise에 중요한 2가지 1. state 2. producer, consumers state는 3가지로 나뉜다. 1. pending: promise가 만들어져서 지정한 동작이 수행중일때 상태 2. fulfilled: 동작이 성공적으로 끝난 상태 3. rejected: file을 찾을 수 없거나 network에 문제가 생긴 상태 예제를 통해 보는게 더욱 편리할 수 있음 아래는 예제 1. promise 생성하기 // 1. producer (promise 생성하기) // promise는 생성한 순간, executor 가 자동적.. 2023. 5. 10.
js 동작원리 와 eventLoop javascript를 처리하는 웹 브라우저 내부 구조부터 먼저 알아야한다. memory heap: 메모리 할당이 일어나는 곳 callstack: 실행될 코드가 한줄 한줄 단위로 할당되는곳 web api: 비동기 처리를 할당한다 callback queue: 비동기 처리가 끝난 후, 실행되어야 할 callback 함수가 차례로 할당된다 event loop: queue에 할당된 함수를 순서에 맞춰 call stack에 할당해준다 동작원리를 나만의 로직으로 정리해보자면.. 1. 우선 call stack은 하나이므로, 코드가 한줄 한줄 처리된다. -> 그렇기에 js는 single threaded 언어라고 한다 2. 그렇게 코드를 한줄 한줄 처리하는 중, 비동기 처리되는 코드를 만나게 된다면.. 비동기 코드는 st.. 2023. 5. 9.
동기와 비동기 동기란 hoisting이 이루어진 뒤 함수나 동작이 차례대로 되는것 hoisting이란? var 나 함수선언 등 특정 무언갈 선언하는걸 뜻함 비동기란 언제 코드가 실행될지 예측할 수 없는것 ex) setTimeout() 이란 web API 지정한 시간이 지나면 우리가 전달한 함수, callback 함수를 호출 callback 함수란? 전달한 함수를 나중에 처리된 뒤 혹은, 특정 시간 뒤 응답받는 개념 ex) console.log(1) setTimeout(function() { console.log(2) },1000); console.log(3) // 결과값 1 3 2 //동작원리 js는 동기로 동작하므로 위에서 차례대로 실행 1. 1 출력 2. webAPI 요청보냄 (setTimeout) 3. 응답을 기.. 2023. 5. 8.