죽이죽이

스프레드(...) 연산자 ※ 배열 스프레드 연산자 // 배열 합치기 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const combinedArray = [...arr1, ...arr2]; console.log(combinedArray); // [1, 2, 3, 4, 5, 6] // 배열 얕은 복사 const originalArray1 = [1, 2, 3]; const copiedArray = [...originalArray1]; console.log(copiedArray); // [1, 2, 3] // 새로운 요소 추가 const originalArray2 = [1, 2, 3]; const newArray = [...originalArray2, 4]; consol..

this의 용법 ※ this란? - 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. - 실행컨텍스트가 활성화 되었을 때 this의 바인딩이 일어나며, 함수 호출 방식에 의해 동적으로 결정이 된다. ※ 암시적 this 바인딩 정리 - 전역 상태 : 브라우저(window) / NodeJS({}) - 함수 선언식, 함수 표현식 : 브라우저(window) / NodeJS(global) - 화살표 함수 : 브라우저(window) / NodeJS({}) - 엄격 모드 + 전역 상태 : 브라우저(window) / NodeJS({}) - 엄격 모드 + 함수 선언식, 함수 표현식 : 브라우저(undefined) / NodeJS(undefined) - 엄격 모드 + 화살표 함수 : 브라우저(..

스코프란? - 어떠한 변수나 함수가 선언된 공간 또는 환경이다. - 특정 변수나 함수의 스코프는 해당 변수, 함수를 참조할 수 있는 범위를 뜻한다. 스코프 체이닝이란? - 스코프 체이닝은 코드에서 변수나 함수를 찾을 때 현재 스코프에서 시작하여 해당 변수 또는 함수를 찾을 때까지 상위 스코프로 이동하는 과정을 뜻한다. // name은 전역 스코프이기 때문에 어디에서든지 접근이 가능하다. const name = "daniel"; const firstFunction = () => { // human은 함수 스코프로 함수 내부에서 접근이 가능하다. const human = true; if(human) { // var로 선언된 변수는 함수 스코프로 if문 안에 있지만 호이스팅으로 인해 firstFunction ..

자바스크립트 언어의 특징 컴파일러 vs 인터프리터 ※ 컴파일러 - 전체 코드가 한 번에 머신 코드로 실행 - 바이너리 파일로 쓰여짐 - 컴파일 이후에 실행 가능 ※ 인터프리터 - 한 줄씩 소스 코드를 읽으면서 실행 - 컴파일러에 비해 속도가 느림 - 변경 사항을 빠르게 테스트 가능 자바스크립트는 어떤 언어일까? ※ 인터프리터 + 컴파일러(JIT 컴파일) - 자바스크립트는 인터프리터 언어였지만, V8 엔진이 나온 이후로 성능 최적화를 위해 컴파일도 같이 진행을 한다. ※ JIT 컴파일이란? (wikipedia 참고) - 컴퓨터 프로그램을 만드는 방법은 두 가지가 있는데, 인터프리트 방식과 정적 컴파일 방식으로 나눌 수 있다. - 이 중 인터프리트 방식은 실행 중 프로그래밍 언어를 읽어가면서 해당 기능에 대..

비동기 처리란? ※ 비동기 처리를 사용하는 이유 - 특정 작업이 완료될 때까지 대기하지 않고 다음 작업을 바로 처리할 수 있도록 하기위해 사용한다. - Javascript는 싱글스레드 기반이기 때문에 한번에 하나의 작업만 처리를 할 수 있지만, 이런 비동기 처리를 사용하여 블로킹이 되지 않고 리소스를 보다 효율적으로 사용할 수 있게 해준다. ※ 동기 / 비동기 그림 예시 ※ 자바스크립트가 한번에 하나의 처리만 가능한 이유 - 자바스크립트 엔진에 하나의 호출 스택(콜 스택)밖에 없기 때문이다. ※ 호출 스택(콜 스택)이란? (mdn) - 자바스크립트 엔진에서 실행 컨텍스트가 쌓여 있는 스택으로, 현재 어떤 함수가 실행중인지, 그 함수 내에서 어떤 함수가 호출되어야 하는지, 등을 제어한다. ※ 실행 컨텍스트..

함수 선언식 ※ 선언 방법 ※ 예시 // 함수 선언 전에 호출 가능 const sum = add(10, 5) console.log(sum) // 15 function add(a, b) { return a + b; } 함수 표현식 ※ 선언 방법 ※ 예시 // 함수 선언 전에 호출 불가능 add(10, 5); // ReferenceError 발생 const add = function(a, b) { return a + b; }; const sum = add(10, 5); console.log(sum); // 15​ 화살표 함수 (ES6) ※ 선언 방법 ※ 예시 // 함수 선언 전에 호출 불가능 add(10, 5); // ReferenceError 발생 const add = (a, b) => { return a..

연산자 ※ 연산자의 종류 ※ 사용 방법 - 할당 연산자 : 변수에 값을 할당하는 기본적인 연산자 let x = 10;​ - 비교 연산자 : 값이 동일한지 비교하는 연산자 let a = 5; let b = '5'; console.log(a == b); // true (값만 비교) console.log(a === b); // false (값과 타입 모두 비교) console.log(a != b); // false (값만 비교) console.log(a !== b); // true (값과 타입 모두 비교) - 산술 연산자 : number 타입 데이터를 이용한 계산에 사용되는 연산자 let num1 = 10; let num2 = 5; console.log(num1 + num2); // 15 (덧셈) consol..

Local Storage ※ 특징 - 사용자가 따로 삭제를 해주지 않는 이상 데이터를 영구적으로 저장할 수 있다. - 도메인 별로 지속된다. ※ 사용 방법 // 데이터 저장 localStorage.setItem('key', 'value'); // 데이터 조회 const storedValue = localStorage.getItem('key'); // 데이터 삭제 localStorage.removeItem('key'); Session Storage ※ 특징 - 세션이 종료(브라우저 창 닫기)될 때까지 데이터가 지속된다. ※ 사용 방법 // 데이터 저장 sessionStorage.setItem('key', 'value'); // 데이터 조회 const storedValue = sessionStorage.ge..