본문 바로가기

Javascript

(47)
[모던 자바스크립트 Deep Dive] 15. 함수와 일급 객체 일급 객체 무명의 리터럴로 생성 (런타임 생성 가능) 변수나 자료구조 (객체, 배열 등)에 저장 가능 함수의 매개변수에 전달 가능 함수의 반환값으로 사용 가능 // 1. 함수는 무명 리터럴로 생성 가능 // 2. 함수는 변수에 저장 가능 // 런타임 시점에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당 const increase = function (num) { return ++num; }; const decrease = function (num) { return --num; }; // 2. 함수는 객체에 저장할 수 있다. const auxs = { increase, decrease }; // 3. 함수는 매개변수에 전달 가능 // 4. 함수는 함수의 반환 값으로 사용 가능 function a..
[모던 자바스크립트 Deep Dive] 14. 생성자 함수에 의한 객체 생성 Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체 완성 가능 // 빈 객체의 생성 const 객체명 = new Object(); // 프로퍼티 추가 Obj.프로퍼티키 = 프로퍼티 값; 생성자 함수 : 연산자와 함께 호출하여 객체 (인스턴스) 를 생성하는 함수 자바스크립트는 Object 생성자 함수 외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수 제공 생성자 함수 1. 객체 리터럴에 의한 객체 생성 방식의 문제점 하나의 객체만 생성하여 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우..
[모던 자바스크립트 Deep Dive] 13. 프로퍼티 어트리뷰트 내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 ECMA Script 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아님 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단 제공 [[prototype]] 내부 슬롯의 경우 __proto__를 통해 간접적으로 접근 가능 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본 값으로 자동 정의 프로퍼티 상태 : 프로퍼티의 값, 값의 갱신 가능 여부, 열거 가능 여부, 정의 가능 여부를 말함 프로퍼티 어트리뷰트 : 자..
[모던 자바스크립트 Deep Dive] 12. let, const 키워드와 블록 레벨 스코프 var 키워드로 선언한 변수의 문제점 1. 변수 중복 선언 허용 만약 동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 변수를 중복 선언하면서 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용 발생 2. 함수 레벨 스코프 var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정 → 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역변수가 됨 var x = 1; // x는 전역 변수 // 이미 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언됨 // 의도치 않게 변수값이 변경되는 부작용 발생 { var x = 10; } console.log(x); // 10 3. 변수 호이스팅 변수 호이스팅에 의해 var 키워드로 선언한 변수는..
[모던 자바스크립트 Deep Dive] 11. 전역 변수의 문제점 변수의 생명 주기 전역변수의 생명주기 = 애플리케이션의 생명 주기 지역변수의 생명주기 = 함수가 호출되면 생성되고 함수가 종료되면 소멸 function foo() {// 변수x 생성 : 호이스팅에 의해 undefined로 초기화 var x = "local";// 변수x 값 할당 console.log(x); // local return x; }// 변수x 소멸 foo(); console.log(x); // ReferenceError: x is not defined 지역변수의 생명 주기는 함수의 생명 주기와 일치 변수의 생명 주기는 메모리 공간이 확보된 시점부터 메모리 공간이 해제되어 가용 메모리 풀에 반환되는 시점까지 var x = "global"; function foo() { console.log(x)..
[모던 자바스크립트 Deep Dive] 10. 스코프 스코프 식별자가 유효한 범위 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙 네임스페이스 스코프 의미 1 : 식별자가 유효한 범위 모든 식별자 (변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됨 var var1 = 1; // 코드의 가장 바깥 영역에서 선언한 변수 if (true) { var var2 = 2; // 코드 블록 내에서 선언한 변수 if (true) { var var3 = 3; // 중첩된 코드 블록 내에서 선언한 변수 } } function foo() { var var4 = 4; // 함수 내에서 선언한 변수 function bar() { var var5 = 5; // 중첩된 함수 내에서 선언한 변수..
[모던 자바스크립트 Deep Dive] 09. 함수 함수란 함수 : 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것 // add : 함수이름 function add(x, y){ // x, y : 매개변수 return x + y; // x + y : 반환값 } // 함수 호출 var result = add(2, 5) // 2, 5 : 인수 함수를 사용하는 이유 코드의 재사용 : 동일한 작업을 반복적으로 수행해야 한다면 정의된 함수를 재사용하는 것이 효율적 유지보수의 편의성과 코드의 신뢰성 증대 : 중복된 코드 수정에 걸리는 시간과 실수 가능성 ↓ 재사용성 증대 ↑ 코드의 가독성 향상 : 함수 내부 코드를 이해하지 않고도 함수의 역할을 파악할 수 있게 도움 함수 리터럴 함수는 객체 타입의 값으로 객체를 객체 리터럴로 생성하는..
[모던 자바스크립트 Deep Dive] 08. 원시 값과 객체의 비교 데이터 타입을 원시 타입과 객체 타입으로 구분하는 이유 원시 타입 (=원시 값) 객체(참조)의 값 (=객체) 변경 불가능한 값 변경 가능한 값 변수에 할당하면 변수 (확보된 메모리 공간)에는 실제 값이 저장됨 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장됨 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달 (= 값에 의한 전달) 객체를 가르키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달 (= 참조에 의한 전달) 원시 값 변경 불가능한 값 : 읽기 전용 값으로서 변경 불가 변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 공간을 식별하기 위해 붙인 이름 값 : 변수에 저장된 데이터로 표현식이 평가되어 생성된 결과 변경 불가능한..