🙄파싱이 뭔가요? 파싱이란 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고 토큰에 문법적 의미와 구조를 반영하여 트리구조의 자료구조인 파스트리를 생성하는 일련의 과정을 말합니다. 일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간언어인 바이트 코드를 생성하고 실행합니다. 🙄브라우저가 렌더링 하는 과정 1. 브라우저는 html, css, 자바스크립트, 이미지, 폰트파일 등 렌더링에 필요한 리소스를 요청하며 서버로부터 응답을 받습니다. 2. 브라우저의 렌더링 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성합니다. 3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자..
🙄이터러블? 이터레이션 프로토콜? ES6에서 도입된 이터레이션 프로토콜은 순회가능한 데이터 컬렉션을 만들기 위해 약속한 규칙입니다. ES6 이전에는 통일된 규약 없이 다양한 방법으로 순회할 수 있었지만 ES6에서는 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for...of 문, 스프레드 문법, 배열디스트럭처링 할당의 대상으로 사용할 수 있게 일원화 했습니다. 이 이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이 있습니다. 이터레이션프로토콜 이터러블프로토콜 이터레이터프로토콜 for...of문으로 순회 가능 스프레드 문법 배열 디스트럭처링 할당 대상으로 사용가능 이터레이터는 이터러블의 요 소를 탐색하기 위한 포인터 역할을 합니다. 🙄for of 문? for in 문? for of 문과 ..
🙄정규표현식이 뭔가요? 정규표현식(regular expression)은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어(formal language)입니다. 정규표현식은 문자열을 대상으로 패턴 매칭 기능을 제공합니다. 정규표현식을 사용하면 반복문과 조건문 없이 패턴을 정의하고 테스트할 수 있습니다. 하지만 가독성이 좋지 않다는 문제도 있어요 🙄정규표현식의 생성 /regexp/i / regexp / i 시작기호 패턴 종료기호 플래그 시작기호 , 패턴 , 종료기호 ,플래그로 이루어집니다. 🙄RegExp 플래그 플래그는 정규 표현식의 검색 방식을 설정하기 위해서 사용합니다. 플래그 의미 설명 i Ignore Case 대소문자를 구별하지 않고 패턴을 검색한다. g Global 대상 문자열 ..
🙄배열이란? 배열은 여러개의 값을 순차적으로 나열한 자료구조입니다. 배열이 가지고 있는 값을 요소(element)라고 부르며 자바스크립트의 모든 값은 배열의 요소가 될 수 있습니다. 배열은 자신의 위치를 나타내는 정수 index를 가지며 보통 index는 0부터 시작합니다. 🙄배열은 객체지만 일반 객체와 구별된다. 구분 객체 배열 구조 프로퍼티 키와 프로퍼티 값 인덱스와 요소 값의 참조 프로퍼티 키 인덱스 값의 순서 X O length property X O 🙄자바스크립트의 배열은 배열이 아니다? 자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조이며 배열의 요소는 하나의 데이터 타입으로 통일되어 있고 서로 연속적으로 인접해있습니다. 이러한 배열을 밀집 배열이라고 ..
🙄 함수의 구분 ES6 이전의 모든 함수는 일반함수로서 호출 할 수 있는 것은 물론 생성자 함수로서 호출할 수 있었습니다, 즉 모든 함수가 callable 하면서 constructor였습니다. 이런 경우 객체에 바인딩 된 함수를 생성자 함수로 호출할 수도 있고 콜백 함수도 생성자 함수로 만들수도 있는 등 함수의 사용 목적에 따른 구분이 없다보니 실수를 유발할 수 있고 성능에도 좋지 않았습니다. 따라서 ES6에서는 함수의 사용 목적에 따라 세가지 종류로 구분했습니다. ES6 함수의 구분 constructor prototype super arguments 일반 함수(normal) O O X O 메서드(method) X X O O 화살표 함수(Arrow) X X X X ** ES6사양에서 메서드는 메서드 축약..
🙄클래스는 프로토타입의 문법적 설탕일까요? 자바스크립트는 프로토타입 기반의 객체지향 언어이고 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 언어입니다. 자바스크립트의 클래스는 사실 함수이고 기존의 프로토타입 기반의 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 해주는 문법적 설탕이라고 볼수도 있습니다. 다만 자바스크립트에서의 클래스는 생성자 함수 기반의 객체 생성보다 명료하다는 장점이 있습니다. 따라서 클래스는 단순 문법적 설탕이라기보다는 새로운 객체 생성 메커니즘으로 보는게 좀 더 합당하다네요 🙄클래스와 생성자 함수의 차이에 대해 말해주세요 구분 클래스 생성자 함수 new연산자 new 연산자 없이 호출 시 에러 new 연산자 없이 호출하면 일반 함수로 호출 됨 에러 안남 상속키워드 ext..
⚡실행컨텍스트가 뭔가요? 실행컨텍스트는 소스코드를 실행하는데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리합니다. 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘이며 모든 코드는 실행 컨텍스트를 통해 실행되고 관리됩니다. ⚡렉시컬 환경이 뭔가요? 렉시컬 환경은 식별자와 식별자에 바인딩 된 값, 상위 스코프에 대한 참조를 기록하는 자료구조입니다. 실행 컨텍스트를 구성하는 컴포넌트라고 할 수 있습니다. 자바스크립트는 함수를 어디서 호출했는지가 아닌 함수를 정의한 위치에 따라 상위 스코프를 결정하는 정적 스코프를 채택합니다. ⚡일시적 사각지대(TDZ)가 뭔가요? TDZ는 let,const 키워드로 선언한 변수는 런타임에 실행 흐름이 변수 선언문에 도달하기 전까지 일시적..
⚡this는 뭔가요? this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this가 가리키는 값 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정됩니다. 또한 strict mode 역시 this 바인딩에 영향을 줍니다. ⚡렉시컬 스코프와 this 바인딩은 결정 시기가 다른가요? 네. 함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프는 함수 정의가 평가되어 함수 객체가 생성되는 시점에 상위 스코프를 결정합니다. 하지만 this 바인딩은 함수 호출 시점에 결정됩니다. ⚡함수를 호출하는 방식은 어떻게 되나요? 1. 일반 함수 호출 2. 메서드 호출 3. 생성자..
