Frontend/Modern Javascript Deep Dive

일급객체 무명의 리터럴로 생성가능 → 런타임에 생성 가능 변수나 자료구조에 저장할 수 있음 함수의 매개변수에 전달할 수 있음 함수의 반환값으로 사용 가능함 함수와 객체를 동일하게 사용할 수 있음 즉, 함수는 값을 사용하는 곳에는 어디든 리터럴로 정의할 수 있고, 이를 런타임에 함수객체로 평가하게 됨 가장 큰 특징 매개변수에 전달할 수 있음 함수의 반환값으로 사용가능 함수 객체의 프로퍼티 Object.getOwnPropertyDescriptors(f); {length: {…}, name: {…}, arguments: {…}, caller: {…}, prototype: {…}} arguments: {value: null, writable: false, enumerable: false, configurable..

Object 생성자 함수 new와 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 후에 프로퍼티나 메서드를 추가하여 완성할 수 있다. Object 외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수를 제공한다. 생성자 함수 객체 리터럴로 객체 생성하는 것의 문제점 하나의 객체만 생성하므로 동일한 프로퍼티를 갖는 객체를 여러개 갖는 경우 매번 같은 프로퍼티를 기술하기 때문에 비효율적이다. 생성자 함수에 의한 객체 생성 방식의 장점 프로퍼티, 메서드 구조가 같은 객체 여러개를 간편하게 생성할 수 있다. function Circle(radius){ this.radius=radius..

내부 슬롯과 내부 메서드 자바스크립트 에진의 구현 알고리즘을 설명하기 위해 ECMAScript사양에서 사용하는 의사 프로퍼티(내부 슬롯)와 의사 메서드(내부 메서드)이다. 정의된 대로 구현되어 JS 엔진에서 실제로 동작하지만, 개발자가 직접 접근할 수 있도록 공개된 프로퍼티는 아니다. 원칙적으로는 내부슬롯과 내부 메서드에 직접 접근하거나 호출할 수 있는 방법을 제공하지 않는다. 다만, 일부 는 제공한다. 모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는다. 이를 .proto를 통해 간접적으로 접근할 수 있다. const o={}; o.__proto__; 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 JS엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동..

var 키워드로 선언한 변수의 문제점 변수 중복 선언 허용 var x=1; var y =1; var x=100; var y; console.log(x); //100 console.log(y); //1 함수 레벨 스코프 var 키워드로 선언한 변수는 오로지 함수의 코드블록만을 지역스코프로 인정한다. 함수 외부에서 var 키워드를 선언하면 코드 블록 내에서 선언해도 모두 전역 변수가 된다. var x=1; if(true){ var x=10; } console.log(x); //10 변수 호이스팅 var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어올려져서 동작한다. 따라서 할당문 이전에 참조가 가능하며, undefined를 반환한다. 이런 코드가 문제 없이 작동하게 된다...

변수의 생명주기 ⇒ 메모리 공간이 확보된 시점부터 메모리 공간이 해제되어 가용 메모리 풀에 반환되는 시점까지 지역변수의 생명주기 변수는 생명주기가 있다. 변수는 자신이 선언된 위치에서 생성되고 소멸한다. 함수 내부 지역변수는 함수가 호출되면 생성되고, 종료되면 소멸하게 된다. → 지역변수의 생명주기는 함수의 생명주기(해당 스코프의 생명주기)와 일치한다. 해당 스코프와 변수가 외부에서 참조되는 경우는 스코프는 소멸하지 않고 생존하게 된다. 전역변수는 어플리케이션과 동일한 생명주기를 갖는다. 또한, 호이스팅은 스코프 단위로 동작한다. var x = "global"; function foo(){ console.log(x); //undefined var x = "local"; } foo(); console.lo..

스코프 식별자가 유효한 범위 식별자는 자신이 선언된 위치에 의해 자신이 유효한 범위, 즉 다른 코드가 식별자 자신을 참조할 수 있는 범위가 결정된다. 렉시컬 환경 코드가 어디서 실행되며 주변에 어떤 코드가 있는가? 코드의 문맥(context)는 렉시컬 환경으로 이뤄진다. 이를 구현한 것이 실행컨텍스트로, 모든 코드는 실행 컨텍스트에서 평가되고 실행된다. 네임스페이스 스코프는 네임스페이스이다. 식별자의 이름은 스코프 내에서 유일해야한다. 즉, 다른 스코프에서는 동일한 이름의 식별자를 사용할 수 있다. var x='global'; function foo(){ var x='local'; console.log(x); } foo(); 전역 컨텍스트와 foo의 실행컨텍스트가 달라 이름이 동일한 식별자인 x에 대해 ..

함수란? 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행단위로 정의한 것 함수는 JS에서 호출할 수 있는 객체이다. 함수의 구성요소 매개변수, 인수, 반환값 function add(x,y){ return x+y; } add(1,5); add가 함수이름, (x,y)가 매개변수 x+y가 반환값 {…}이 몸체이다. add(1,5)를 통해 호출했고 1,5가 인수이다. 함수를 사용하는 이유 편의성 코드의 중복을 낮추고 재사용성을 높힘 신뢰성 코드 실수가 줄어듦 가독성 적절한 함수이름을 통해 내부 코드 이해 없이도 함수의 역할 파악이 가능해짐 함수리터럴 JS함수는 객체 타입의 값이므로, 리터럴으로 생성할 수 있다. var f=function(x,y){ return x+y; }; 함수 리터럴의 구성 ..

원시값 변경 불가능한 값 원시타입의 값은 변경 불가능한 값이다. 한번 생성된 원시값은 읽기전용이라 변경이 불가능하다. 값과 변수 변수는 변할 수 있지만, 값은 그렇지 않을 수 있다. 변수가 가르키는 원시값의 주소가 바뀌는 것이다. var p; var p; p=10; undefined는 가비지 컬렉터가 제거하기 전까지는 메모리 어딘가에 계속해서 존재하게 된다. 불변성을 갖는 원시값을 할당한 변수는 재할당 이외에 변수값을 변경할 수 있는 방법이 없다. 문자열과 불변성 문자열 타입은 1글자당 2바이트의 메모리 공간이 필요하다. 숫자는 8바이트로 고정이다. 따라서 10000은 8바이트이지만, ‘10000’은 10바이트가 필요하다. 문자열의 내용이 바뀌는 경우에도 불변성이 적용된다. var str='Hello';..

객체란? JS는 객체기반의 프로그래밍언어 원시값을 제외한 모든 것들은 객체임 객체타입 객체타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조로 변경가능한 값임 원시타입 변경 불가능한 값임 객체의 구조 0개 이상의 프로퍼티로 구성된 집합 프로퍼티 key-value 쌍으로 구성됨 JS에서 사용하는 모든 값은 프로퍼티 값이 될 수 있음 객체의 상태를 나타내는 값 메서드 js의 함수는 일급 객체이므로 값으로 취급할 수 있음 따라서 함수역시 프로퍼티로 사용이 가능하며, 이를 메서드라고 부름 프로퍼티를 참조하고 조작하는 동작을 말함 객체의 생성 객체 생성의 방법 객체리터럴 Object 생성자 함수 생성자 함수 Object.create 메서드 클래스(ES6) 객체 리터럴에 의한 생성 가장 일반적인 방법..

타입변환이란? 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 명시적 타입 변환(타입 캐스팅) 개발자가 의도적으로 값의 타입을 변환하는 것 암묵적 타입 변환(타입 강제변환) 개발자의 의도와 관계없이 표현식 평가 도중에 자바스크립트 엔진에 의해 암묵적으로 변환되는 경우 둘다 기존 원시값을 직접 변경시키는 것이 아니다. 원시값은 변경불가능 값으로 변경시킬 수 없다. 암묵적 타입 변환 예시 var x=10; var str=x+''; console.log(typeof str, str); //string, 10 console.log(typeof x, x); // number, 10 암묵적 타입 변환은 원래 것을 건들이지 않고, 새로운 것을 만들어 낸다. 암묵적 타입 변환 JS엔진은 표현식을 평가..