모래블로그

1. Generator(제너레이터) Generator는 일반적인 함수가 끝까지 실행되고 return 되는 것과는 달리, 중간에 실행을 멈췄다가 다시 접근할 수 있는 특이한 형태의 함수이다. Generator 함수는 나중에 다시 접근하기 위해 context(즉 변수값)를 저장된 상태로 남겨둔다. Generator는 주로 Promise 와 결합하여 사용되며, 콜백 지옥 같은 비동기 프로그래밍의 문제점들을 많이 완화시켜준다. 2. Generator 함수 사용 Generator 함수는 function* 키워드를 사용한다. function* generator1() { ... } const generator2 = function* () { ... } Generator함수는 화살표 함수를 사용할 수 없다. 별표 * ..

구조 분해 할당(Destructuring Assignment) 구조 분해 할당 문법은 배열이나 객체의 속성을 분해하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 즉, 객체나 배열을 변수로 '분해'할 수 있게 해준다. 1. 기본 문법 // 이름과 성을 요소로 가진 배열 let arr = ["Soojin", "Park"] // 구조 분해 할당을 이용해 // firstName엔 arr[0]을 // lastName arr[1]을 할당 let [firstName, lastName] = arr; alert(firstName); // Soojin alert(lastName); // Park 위와 같이 인덱스를 이용해 배열에 접근하지 않아도 변수로 이름과 성을 사용할 수 있다. 1. 배열(arr..

Spread Operator(스프레드 연산자) ES6에는 Spread Operator 라는 새로운 기능이 추가되었다. 이 스프레드 연산자는 배열, 문자열 등 반복 가능한(iterable) 객체의 요소를 전개하거나 펼친다. 기본 문법 const arr1 = [1, 2, 3, 4, 5]; console.log(...arr1); // [ 1, 2, 3, 4, 5 ] 위 코드처럼 arr1 배열 앞 (...) 처럼 3개의 점을 이용한 문법이며, 이런 스프레드 연산자를 쓰면 arr1 배열의 원소를 풀어쓸 수 있다. 1. Spread Operator의 배열 복사 자바스크립트에서 배열을 새로운 변수에 할당하는 경우, 새로운 배열은 기존 배열을 참조한다. 따라서 새로운 배열을 변경하는 경우 원본 배열 역시 변경된다. /..

화살표 함수 (Arrow Function) ES6 문법인 화살표 함수(Arrow Function)는 function 키워드 대신 화살표(=>)를 사용하여 간단하게 함수를 표현할 수 있다. 그렇다고 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다. 1. 화살표 함수 기본 문법 // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 a => { ... } // 매개변수가 한 개인 경우, 소괄호 생략 가능 (a,b) => { ... } // 매개변수가 여러 개인 경우, 소괄호 생략 x // 객체 반환 시 () => ({ a : 1, b : 2 }) // 객체를 반환할 때는 소괄호를 사용 2. 화살표 함수의 호출 화살표함수는 익명함수로만 사용할 수 있다. 따라서 함수를 호출하기 위해서..

💡호이스팅 호이스팅(hoist)의 사전적 정의 : 끌어올리기 자바스크립트에서 호이스팅이란 ? 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 함수 내 변수 및 함수 선언을 각 해당 스코프의 최상단으로 끌어올려주는 것이다. (물리적으로 코드가 옮겨지는 것은 X) 컴파일 단계에서 코드 실행 전 함수와 변수 선언을 스캔하고, 모든 함수와 변수 선언들은 렉시컬 환경이라고 불리는 자바스크립트 데이터 구조 내의 메모리에 추가된다. 자바스크립트의 모든 선언에서는 호이스팅이 일어난다. 하지만 let, const, class를 이용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작한다. var와 달리 let 키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceErr..