도리쓰에러쓰

1. 자바스크립트 엔진이 코드를 계산하기 위해 알아야 하는 부분 10 + 20 - 10, 20, + 기호의 의미를 알고 있어야 한다. - 10 + 20이라는 표현식의 의미도 해석할 수 있어야 한다. 자바스크립트 엔진은 피연산자인 10(좌변)과 20(우변)을 메모리에 기억하고, CPU를 사용해 연산한다. 2. 메모리(Memory) - 메모리(Memory): 데이터를 저장할 수 있는 메모리 셀(Memory Cell)의 집합체 - 메모리 셀 하나의 크기는 1바이트(8비트)이며, 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽는다. - 각 셀은 고유의 메모리 주소(Memory Address)를 가진다. 메모리 주소는 메모리 공간의 위치를 나타내며 메모리의 크기만큼 정수로 표현된다. - 컴..

splice()와 slice() 메서드는 이름이 비슷해서 매일 헷갈리는 메서드 중 하나여서 글로 정리해보고자 한다. 우선 어떻게 사용하는지 알아보자. 1️⃣ splice() 사용 방법: arr.splice(start, deleteCount, items); - start: 배열의 변경을 시작할 index, 음수인 경우 배열 끝에서 시작한다. - deleteCount[option]: 배열 요소를 삭제할 갯수, 0이나 값을 작성하지 않은 경우 요소를 삭제하지 않으며, 값이 arr.length - start 보다 많은 경우 start부터 모든 요소를 제거한다. - items[option]: 배열에 추가할 요소, 값을 작성하지 않은 경우 배열의 요소를 삭제하기만 한다. 우선 splice()의 매개변수에 start..

배열에 요소를 더할 때 push(), unshift() 그리고 스프레드 문법 총 3가지의 방법을 통해 배열에 요소를 추가할 수 있다. 1️⃣ push() 메서드 const arr = [1, 2, 3]; arr.push(4, 5); console.log(arr); // [1, 2, 3, 4, 5] 2️⃣ unshift() 메서드 const arr = [1, 2, 3]; arr.unshift(4, 5); console.log(arr); // [4, 5, 1, 2, 3] 3️⃣ 스프레드 문법 const arr = [1, 2, 3]; const spreadArr = [...arr, 4, 5]; console.log(spreadArr); // [1, 2, 3, 4, 5] 배열 요소를 추가할 때 push()나 un..

1️⃣ delete 명령어 const obj = { a: 1, b: 2, c: 3}; delete obj.b; console.log(obj); // { a: 1, c: 3 } 2️⃣ 구조 분해 할당 (Destructuring Assignment) const obj = { a: 1, b: 2, c: 3}; const { b, ...objWithoutB } = obj; console.log(objWithoutB); // { a: 1, c: 3 }

💡 비동기적이란? 먼저 실행된 코드의 작업이 끝나기 전에 더 나중에 실행된 코드의 작업이 끝날 수 있음을 말한다. 즉, 동시성을 가지고 있는 코드들을 의미한다. 자바스크립트 V8 엔진은 싱글 스레드를 가지고 있어서 stack이 하나만 존재한다. 그런데 자바스크립트는 어떻게 비동기적으로 실행되는걸까? 1. 단일 호출 스택(Call Stack) '자바스크립트 엔진이 싱글 스레드를 가지고 있다'는 의미를 해석해보자. 자바스크립트 엔진은 하나의 Memory Heap과 단일 호출 스택(Call Stack)을 가지고 있다. Memory Heap: 메모리 할당이 일어나는 곳 단일 호출 스택(Call Stack): 코드 실행에 따라 호출 스택이 쌓이는 곳 이 말은 즉슨, 엔진 구조 상 한번에 하나의 함수만 동기적으로 ..

비동기 처리는 결과가 언제 반환되는지 알 수 없어서 동기식으로 처리하는 기법들을 사용해야 하는데 대표적으로 setTimeout, callback, promise가 있다. 그 외에도 사용법이 간단해진 비동기 처리 방법이 있는데 바로 async와 await이다. 우선 몰라도 좋으니 아래 코드를 참고하여 얼마나 간단해졌는지 확인만 해보자. // Promise const p1 = () => { return new Promise((resolve, reject) => { resolve('성공'); }); }; //async async function p2 () { return '성공'; }; p2.then((value) => console.log(value)); 1. async와 await async와 await는..

자바스크립트의 Promise를 알아보기 전에 동기와 비동기의 차이에 대해 알아보자. 1. 동기(Synchronous)와 비동기(Asynchronous) 1️⃣ 동기(Synchronous) - 1번부터 4번까지의 명령이 있을 때 순차적으로 명령이 진행 - 앞의 명령이 끝날 때까지 뒤의 명령은 먼저 실행되지 않는다. 2️⃣ 비동기(Asynchronous) - 명령의 순서와 상관없이 동시에 명령 실행 2. Promise 자바스크립트는 비동기 처리를 위해 콜백 함수를 사용한다. 하지만 콜백 중첩, 즉 콜벡 헬로 인해 코드의 가독성이 떨어지고, 비동기 처리 중 발생한 에러의 처리가 곤란한 등의 문제가 발생할 수 있다. async(1, () => { async(2, () => { async(3, () => { as..

1. 실행 컨텍스트(Execution Context)란? 자바스크립트 엔진은 코드를 실행하기 위해 실행에 필요한 여러가지 정보(전역변수, 매개변수, 유효범위, this 등)들을 알고 있어야 한다. 어떤 실행 컨텍스트가 활성화될 때, 자바스크립트 엔진은 해당 컨텍스트의 코드를 실행하는데 필요한 환경 정보들을 수집해서 실행 컨텍스트에 저장한다. 다시 말해, 코드가 실행되기 위해 필요한 정보들을 가진 범위를 추상화하기 위해 객체 형태로 나타낸 것이다. 자바스크립트에서 실행 컨텍스트(Execution Context)를 만들 수 있는 방법은 총 4가지이다. 1️⃣ 전역 코드: 전역 영역에 존재하는 코드 2️⃣ Eval 코드: eval() 함수로 실행되는 코드 3️⃣ 함수 코드: 함수 내에 존재하는 코드 4️⃣ (..