Javascript/모던 자바스크립트 DeepDive (24) 썸네일형 리스트형 [모던 자바스크립트 Deep Dive] 16 프로퍼티 어트리뷰트 내부 슬롯과 내부 메서드 내부 슬롯 internal slot과 내부 메서드 internal method는 자바스크립트 엔지의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에 사용하는 의사 프로퍼티 pseudo property와 의사 메서드 pseudo method ECMASciprt 사양에 등장하는 이중 대괄호([[...]])로 감싼 이름에 해당 자바스크립트의 내부 로직이므로 원칙적으로 내부 슬롯과 내부 메서드에 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지는 않음 (일부에 한하여 간접적으로 접근 가능) const o = {}; // 내부 슬롯은 직접 접근 불가능 o.[[Prototype]] // SyntaxError // 일부에 한해 간접적으로 접근 가능 o.__proto__; // O.. [모던 자바스크립트 Deep Dive] 15 let, const 키워드와 블록 레벨 스코프 var 키워드로 선언한 변수의 문제점 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언 가능 선언한 변수를 중복 선언하면 초기화문이 있는 변수 선언문은 var 키워드가 없는 것처럼 동작 초기화문이 없는 변수 선언문은 무시되고 에러 발생되지 않음 var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언 허용 // 초기화문이 있는 경우: var 키워드가 없는 것처럼 동작 var x = 100; console.log(x); // 100 // 초기화문이 없는 경우: 변수 선언문 무시 var y; console.log(y); // 1 함수 레벨 스코프 var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정 var x = 1; //.. [모던 자바스크립트 Deep Dive] 14 전역 변수의 문제점 전역 변수의 무분별한 사용은 위험 전역 변수를 반드시 사용해야할 이유를 찾기 못한다면 지역 변수를 사용해야 함 변수의 생명 주기 지역 변수의 생명 주기 일반적으로 지역 변수의 생명 주기는 함수의 생명 주기와 일치 변수의 생명 주기는 메모리 공간이 확보 allocate된 시점부터 메모리 공간이 해체 release되어 가용 메모리 풀 memory pool에 반환되는 시점 지역 변수의 스코프가 함수 종료 이후에도 참조되고 있다면 스코프는 해체되지 않고 생존, 지역 변수는 함수가 생성한 스코프에 등록되므로 해당 경우에는 함수가 종료되더라도 지역 변수가 생존할 수 있음 호이스팅은 스코프 단위로 동작. 변수 선언이 스코프의 선두로 올려진 것처럼 동작하게 됨 function foo() { var x = "local".. [모던 자바스크립트 Deep Dive] 13 스코프 스코프란? 스코프 scope (유효범위): 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정, 식별자가 유효한 범위 식별자를 검색할 때 사용하는 규칙 네임스페이스 식별자 결정 identifier resolution: 자바스크립트 엔진이 이름이 같은 두 개의 변수 중에서 어떤 변수를 참조해야할 것인지 결정 식별자는 어떤 값을 구별할 수 있으므로 유일 unique 해야함, 즉 하나의 값은 유일한 식별자에 연결 name binding 되어야 함 var var1 = 1; // 코드의 가장 바깥에서 선언한 변수 if (true) { var var2 = 2; // 코드 블록 내에서 선언한 변수 if (true) { var.. [모던 자바스크립트 Deep Dive] 12 함수 수학의 함수: 입력을 받아 출력을 내보내는 일련의 과정 프로그래밍의 함수: 일련의 과정을 문 statement로 구현하고, 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것 함수의 구성 요소 매개변수 parameter: 함수 내부로 입력을 전달받는 변수 인수 argument: 입력 출력 return value: 출력 함수는 함수 정의 function definition을 통해 생성 함수 호출 function call/invoke: 인수를 매개 변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시 // 함수 정의 function add(x, y) { return x + y; } // 함수 호출 add(2, 5); 함수를 사용하는 이유 코드의 재사용 유지보수의 편의성 코드의 신뢰성 코드의 가독성 함.. [모던 자바스크립트 Deep Dive] 11 원시 값과 객체의 비교 원시 타입의 값, 즉 원시 값은 변경 불가능한 값 / 객체(참조) 타입의 값은 변경 가능한 값 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값 저장 / 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장 값에 의한 전달: 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달 참조에 의한 전달: 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달 원시 값 변경 불가능한 값 원시 타입 primitive type의 값, 즉 원시 값은 변경 불가능한 값 immutable value 한번 생성된 원시 값은 읽기 전용 read only 값으로서 변경할 수 없음. 이는 데이터의 신뢰성을 보장 변경 불가능하다는 것은 변수가 아니라 값에.. [모던 자바스크립트 Deep Dive] 10 객체 리터럴 객체란? 자바스크립트는 객체 object기반의 프로그래밍 언어 원시 값을 제외한 나머지 값(함수, 배열 , 정규 표현식 등)은 모두 객체 객체 타입 object/reference type은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조 date structure 객체 타입의 값은 변경 가능한 값 mutable value / 원시 값은 변경 불가능한 값 immutable value 객체는 0개 이상의 프로퍼티로 구성된 집합이며 프로퍼티는 키 key와 값 value로 구성 자바스크립트에서 사용하는 모든 값은 프로퍼티가 될 수 있음 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있음 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드 method라고 .. [모던 자바스크립트 Deep Dive] 09 타입 변환과 단축 평가 타입 변환이란? 자바스크립트의 모든 값은 타입이 존재 값의 타입은 개발자의 의도에 따라서 다른 타입으로 변경될 수 있음 개발자가 의도적으로 값의 타입을 변경하는 것을 명시적 타입 변환 explicit coercion 또는 타입 캐스팅 type casting이라고 함 개발자의 의도와 상관 없이 표현식을 평가하는 도중 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변경되는 것을 암묵적 타입 변환 implicit coercion 또는 타입 강제 변환 type coercion이라고 함 중요한 것은 예측 가능한 코드 // 명시적 타입 변환 var x = 10; var str = x.toString(); console.log(typeof str, str); // string 10 // 변수 x 값이 변경된 것.. 이전 1 2 3 다음
