개발에 도움이 되는/JavaScript (8) 썸네일형 리스트형 원시 자료형, 참조 자료형 - 원시 자료형 데이터 타입 중 변경이 불가능한 값(immutable value)을 말하며, 자료형 Type으로는 string, number, boolean, undefined, null, symbol 이렇게 6가지가 있다. 원시 자료형은 stack에 생성되고 변수가 할당될 때, 메모리의 고정 크기로 값을 저장하고 해당 주소를 직접 참조한다. immutable value기 때문에 메모리 영역에서의 변경이 불가능하며, 재할당은 가능하다. ex) let str = "Hello"; str = "World"; 처음 str에는 메모리에 "Hello"가 생성되고 식별자 str은 메모리에 생성된 문자열 "Hello"의 메모리 주소를 가리킨다. 그리고 다음 구문에서 str은 메모리에 있는 "Hello"를 수정하는 것이.. this - this 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이며 this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있다. 즉, 실행한 주체를 가리키며, 호출되는 방식에 따라 동적으로 결정된다. - this의 여러 case this는 전역 객체로 window를 기본적으로 참조하고 있다. 일반 함수 호출의 경우 this는 window를 참조한다. (호출 주체가 window기 때문에) 화살표 함수 호출의 경우 상위 객체를 참조한다. var obj = { name: 'B', print: function () { var inner1 = function () {console.log(this.name, name)}; inner1(); var inn.. 클로저(Closure) - 클로저 (Clousure) MDN에서의 정의 : "함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합" 모던 자바스크립트 Deep Dive에서의 정의 : "반환된 내부 함수가 자신이 선언됐을 때의 환경(렉시컬 환경)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수" 즉, 자신이 생성될 때의 렉시컬 환경을 기억하는 함수 내 나름대로의 정의 : 외부 변수를 품고 있는 함수, 함수는 원래 호출 후 실행 완료되면 CallStack에서 Pop되고, 선언된 변수 메모리는 GC에 의해 제거되어야 하지만 참조하고 있는 변수가 있어 제거되지 못한 상태라고 생각한다. function outerFunc() { var x = 10; var innerFun.. 스코프(Scope) - 스코프 (Scope) : 선언한 상수나 변수들의 허용된 영역, 접근할 수 있는 범위 - Scope Type : 스코프 타입은 크게 두 가지로 나뉜다. 1. Global Scope : 어디서든 접근할 수 있는 변수들이 있는 범위 (전역 변수) 2. Local Scope : 해당 지역 범위에서만 접근할 수 있는 변수들이 있는 범위 (지역 변수), Local Scope는 또 아래와 같이 나뉜다. 1) Function Scope : function로 선언한 함수 지역변수로 어떠한 변수(var, let, const)도 외부에서 접근 불가능, Arrow function은 Block scope이다. 2) Block Scope : {} 안이 scope로 적용되며 If 문, for 문, while 문, try / c.. 실행 컨텍스트(Execution Context) - 실행 컨텍스트 (Execution Context) : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 자바스크립트는 실행 컨텍스트가 활성화되는 시점에 다음과 같은 현상이 발생한다. - 호이스팅 발생 (호이스팅이 궁금하다면 보러 가기) - 외부 환경 정보를 구성 - this 값을 설정 실행 컨텍스트를 Call Stack에 쌓는 경우는 아래와 같다. 1. 전역 코드 : 전역 영역에 존재하는 코드 2. Eval 코드 : eval 함수로 실행되는 코드 (eval은 현재는 안 쓰는 것을 권장하며, 오히려 evil이라는 소리를 들음) 3. 함수 코드 : 함수 내에 존재하는 코드 4. 블록 문 : { } 안에 있는 코드 (ES6 이후) - 실행 컨텍스트 구성 - Variable Environment : 현재 컨.. 호이스팅(Hoisting) - 호이스팅 (Hoisting) : 코드가 실행하기 전 변수/함수 선언을 실행 컨텍스트 내부 메모리에 저장시킴으로써, 해당 스코프의 최상단으로 끌어 올린 것처럼 처리하는 것 자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정 즉, 실행 컨텍스트를 위한 과정을 거친다. 실행 컨텍스트를 위한 과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다. - 실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아 놓은 객체 코드 실행 전 이미 변수/함수 선언이 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다. (단, let과 const 등은 참조할 수 없다는 error 메세지가 뜨지만 호이스팅이 안된게 아님.. Node.js - Node.js 1. 자바스크립트를 브라우저 밖에서도 실행시킬 수 있게 만든 자바스크립트 런타임(실행 환경) 2. Single Thread Non-Blocking Model 3. SIngle Thread지만 비동기 I/O 작업을 통해 요청들을 서로 Blocking 하지 않음 4. 동시에 많은 요청들을 비동기로 수행함으로써 Single Thread지만 Non-Blocking이 가능 5. 이벤트 기반으로 동작 - 이벤트 기반 : 이벤트가 발생할 때 미리 지정해둔 작업을 처리하는 방식, Node.js는 이벤트 리스너에 등록해둔 콜백 함수를 실행하는 방식으로 동작(이벤트 루프가 이를 가능하게 해줌) 6. Clustering을 통해 프로세스를 fork하여 Multi Thread 처럼 사용 가능하여 서버의 확정성.. JavaScript - 정의 : 웹페이지에 생동감을 불어 넣기 위해 만들어진 프로그래밍 언어. 객체 기반의 스크립트 언어. - 특징 1. 인터프리터 언어지만, 실행하는 플랫폼에 따라 인터프리팅과 컴파일이 혼합되어 사용하여 성능을 크게 향상 시킴 자바스크립트 엔진 내부에서 실행 중 컴파일이 필요한 경우 내부에서 컴파일을 한다. 2. 동적 타입 언어 : 변수 타입이 없으며, 프로그램 실행 도중에도 변수 타입이 변경될 수 있음 3. 프로토타입 기반의 객체 지향 언어 : 클래스 기반(상속, 캡슐화 등)의 언어가 아닌 프로토타입 기반의 객체지향 언어 - 프로토타입 : 어떤 객체의 원본 / 원형이 되는 객체 4. 일급 객체 함수 : 고차 함수를 구현할 수 있어 함수형 프로그래밍이 가능 - 일급 객체 조건 1. 무명의 리터럴로 생성할 .. 이전 1 다음
