전체 글 204

[모던 자바스크립트 Deep Dive] 17. 생성자 함수에 의한 객체 생성

Object 생성자 함수 객체는 객체 리터럴 이외에도 다양한 방법으로 생성 가능 그 중 하나가 생성자 함수 new 키워드를 사용하여 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환 빈 객체 생성 후 프로퍼티나 메서드를 추가하여 객체 완성 const person = new Object(); person.name = 'Lee'; person.sayHello = function() { console.log(this.name); } 생성자 함수에 의해 생기는 객체 = 인스턴스 생성자 함수 자바스크립트 빌트인 생성자 함수 Object, String, Number, Boolean, Function, Array, Date, RegExp, Promise 등 const strObj = new String('..

[모던 자바스크립트 Deep Dive] 16. 프로퍼티 어트리뷰트

내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드 : 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ESMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 X (외부로 공개된 객체의 프로퍼티가 아님) but 일부 내부 슬롯과 내부 메서드는 간접적으로 접근할 수 있음 [[prototype]] : 모든 객체가 가지고 있는 내부 슬롯으로, **proto**를 통해 간접적으로 접근 가능 const o = {}; o.__proto__ 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티 생성할 때 프로퍼티 어트리뷰트를 기본 값으로 자동 정의 프로퍼티 어트리뷰트 : 프로퍼티 상태를 나타내는 것 프로퍼티 상태 : 프로..

[모던 자바스크립트 Deep Dive] 15. let, const 키워드와 블록 레벨 스코프

var 키워드로 선언한 변수의 문제점 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언 가능 초기화문 (변수 선언과 동시에 초깃값 할당) 유무에 따라 다르게 동작 초기화문이 없는 변수 선언문은 무시됨 ⇒ 동일한 이름의 변수가 있는지 모르고 중복 선언하며 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이 변경됨 함수 레벨 스코프 var 키워드로 선언한 변수는 오로지 **함수의 코드 블록**만을 지역 스코프로 인정 ⇒ 함수 레벨 스코프 함수 내부에서 선언한 변수라도 전역 변수가 되어 함수 외부에 이름이 같은 변수가 있다면 중복 선언되어 변수 값이 의도치 않게 바뀔 수 있음 var x = 1; if (true) { var x = 10; } console.log(x); // 10 함수 레벨 스코..

[모던 자바스크립트 Deep Dive] 14. 전역 변수의 문제점

변수의 생명 주기 지역 변수의 생명 주기 변수는 선언에 의해 생성되고 할당을 통해 값을 받으며, 언젠간 소멸함 ⇒ 변수는 생성되고 소멸되는 생명 주기 (life cycle)가 있음 변수에 생명주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간 점유 전역 변수의 생명 주기 : 애플리케이션 생명 주기와 같음 전역 변수 선언은 런타임 이전 단계에서 자바스크립트 엔진에 의해 먼저 실행 지역 변수 생명 주기 : 함수 호출 시 생성되고, 함수 종료 시 소멸 지역 변수 선언은 함수 몸체 실행 이전에 자바스크립트 엔진에 의해 먼저 실행 fcuntion foo() { var x = 'local'; console.log(x); // local return x; } foo(); console...

[모던 자바스크립트 Deep Dive] 13. 스코프

스코프란? 스코프 : 식별자가 유효한 범위 var 키워드와 const, let 키워드로 선언한 변수의 스코프는 다르게 동작함 함수의 매개변수는 함수 몸체 내부에서만 참조 가능 ⇒ 함수의 매개변수의 스코프는 함수 몸체 내부 변수는 자신이 선언된 위치에 의해 자신이 유효한 범위가 결정됨 = 다른 코드가 변수 자신을 참조할 수 있는 범위가 결정됨 ⇒ 스코프 자바스크립트 엔진은 어떤 변수를 참조해야 할 것인지 결정함 = 식별자 결정 스코프란 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이기도 함 자바스크립트 엔진은 코드를 실행할 때 코드의 문맥을 고려함 코드의 문맥은 렉시컬 환경으로 이루어지고, 이를 구현한 것이 실행 컨텍스트 var x = 'global'; function foo() { var x = ..

[모던 자바스크립트 Deep Dive] 12. 함수

함수란? 일련의 과정을 **문**으로 구현하고 **코드 블록**으로 감싸서 **하나의 실행 단위**로 정의한 것 입력을 전달받는 변수 : 매개변수 입력 : 인수 출력 : 반환값 함수는 함수 정의를 통해 생성됨 정의만으로 실행되는 것은 아님 → **함수 호출**을 해야됨 함수를 사용하는 이유 **재사용** 가능 함수 재사용 시 유지보수의 편의성을 높이고 코드의 신뢰성을 높임 함수는 객체 타입의 값이라 이름(식별자)을 붙일 수 있음 ⇒ 코드의 가독성 형상 함수 리터럴 함수는 객체 타입의 값이라 함수 리터럴을 통해 생성 가능 함수 리터럴 : **function** 키워드, **함수 이름**, **매개변수** 목록, **함수** 몸체로 구성 함수 이름 식별자 (식별자 네이밍 규칙에 준수) 이름 생략 가능 (기명..

[모던 자바스크립트 Deep Dive] 11. 원시 값과 객체의 비교

원시 값 변경 불가능한 값 원시 값은 변경 불가능한 값 ⇒ 한번 생성된 원시 값은 **읽기 전용** 값으로서 변경할 수 X 원시 값을 할당한 변수에 새로운 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값 저장 후 그 메모리 공간을 참조함 ⇒ 불변성 (immutability) 불면성 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값 변경할 수 있는 방법 X 문자열의 불변성 원시 값을 저장하려면 확보해야 하는 메모리 공간의 크기 결정해야 됨 숫자 값은 크기와 상관없이 무조건 8바이트 필요 문자열은 문자 개수 * 2바이트 문자열은 유사 배열 객체여서 인덱스로 접근 가능하지만, 읽기 전용이므로 인덱스로 접근하여 값을 변경하는 것은 불가능 그러나 변수에 새로운 문자열을 재할당하는 것은 가능 값..

[모던 자바스크립트 Deep Dive] 10. 객체 리터럴

객체란? 객체 타입 : 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조 원시 타입의 값 : 변경 불가능한 값 객체 타입의 값 : 변경 가능한 값 객체 : 0개 이상의 프로퍼티로 구성된 집합 프로퍼티 : key와 value으로 구성 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티의 value가 될 수 있는데, **프로퍼티의 값이 함수**일 경우 이를 일반 함수와 구분하기 위해 메서드 (method)라고 부름 ⇒ 객체는 프로퍼티와 메서드로 구성된 집합체 프로퍼티 : 객체의 상태를 나타내는 값 메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작 (behavior) ⇒ **상태**(프로퍼티)와 **동작**(메서드)을 **하나의 단위로 구조화** 가능 객체 리터럴에 의한 객체 생성 자바스크립트는 프..

[모던 자바스크립트 Deep Dive] 09. 타입 변환과 단축 평가

타입 변환이란? 타입 변환 : 의도적인 타입 변환, 암묵적인 타입 변환 개발자가 **의도적**으로 타입 변환 : 의도적 타입 변환, 타입 캐스팅 표현식 평가 도중 **자바스크립트 엔진**에 의한 타입 변환 : 암묵적 타입 변환, 타입 강제 변환 타입 변환을 통해 기존 원시 값을 변경하는 것이 아니라, 다른 타입의 새로운 원시 값 생성 암묵적 타입 변환은 피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 단 한 번 사용하고 버림 암묵적 타입 변환 표현식 평가 시 코드의 문맥에 부합하지 않는 상황이 발생하는 경우, 자바스크립트는 가급적 에러를 발생시키지 않도록 암묵적 타입 변환을 통해 표현식 평가 암묵적 타입 변환 발생 시 문자열, 숫자, boolean과 같은 원시 타입 중 하나로 타입을 자동 ..

[모던 자바스크립트 Deep Dive] 08. 제어문

블록문 블록문 : 0개 이상의 문을 중괄호로 묶은 것 언제나 문의 종료를 의미하는 자체 종결성을 가지고 있어 블록문의 끝에는 세미콜론 붙이지 X 조건문 주어진 조건식의 평과 결과에 따라 블록문의 실행을 결정 boolean 값으로 평가될 수 있는 표현식 자바스크립트 조건문 : if esls 문, switch 문 if else 문 논리적 참, 거짓에 따라 실행할 코드 블록 결정 조건식 평가 결과 true → if 문의 코드 블록 실행 / 조건식 평가 결과 false → else 문의 코드 블록 실행 다양한 조건 추가 시 else if 문 사용 if 문과 else 문은 한 번씩, else if 문은 여러 번 사용 가능 대부분의 if else 문은 삼항 연산자로 바꿔쓸 수 있음 if (true 되는 조건) {t..