에이미의 성장기록

🌟 자바스크립트 배열의 특징 타입이 없어서 배열 하나에 여러 타입이 섞여있어도 괜찮음 0으로 시작하는 32비트 인덱스를 사용해서, 최대 2의32승 -2 (32비트) 까지 커질 수 있다. 배열은 **성긴 배열(sparse)**이라 인덱스가 이어지지 않아도 됨! 모두 length 프로퍼티가 있다. 자바스크립트 실행 환경은 배열을 최적화하므로 일반적인 객체 프로퍼티보다 상당히 빠르게 접근 가능하다. Tip! 배열을 사용할때는 리터럴 형식으로 객체를 생성하고 push() 메서드보다 접근자를 사용해 데이터를 추가하는것이 최적화된 사용법이다. * 자바스크립트 배열에서의 성능 우위 문법 * let arr = new Array(); (X) let arr = []; (O) arr.push("안녕"); (X) a[2] =..

1. 객체 생성 객체 리터럴, new, Object.create() 함수를 사용 리터럴: 데이터(값) 그 자체. 변수에 넣는 변하지 않는 데이터를 의미 객체 리터럴: 중괄호 안에 프로퍼티를 정의하여 객체를 생성 new: 새 객체를 생성하고 초기화 new Object(), new Array(), new Date(), new Map() 프로토타입 객체 거의 대부분은 자신과 연결된 두번째 객체를 갖는다. 두번째 객체 = 프로토타입 객체 리터럴의 프로토타입 객체는 Obejct.prototype, new Array()로 만들어진 객체의 프로토타입은 Array.protype, new Date()로 만들어진 객체 프로토타입은 Date.protytype 이다. 프로토타입 체인: 특정 객체의 프로퍼티나 메소드 접근시 만..

4.1 기본 표현식 상수, 리터럴 값, 일부 키워드, 변수 참조 4.2 객체와 배열 초기화 표현식 그 값이 새로 생성된 객체나 배열인 표현식. 객체 리터럴 혹은 배열 리터럴이라고 부른다 4.3 함수 정의 표현식 함수 리터럴 4.4 프로퍼티 접근 표현식 점 표기법, 대괄호 표기법 점 표기법은 접근하고자 하는 이름이 유효한 식별자이고, 그 이름을 알고 있을때만 사용 프로퍼티 이름에 스페이스나 구두점, 숫자인 경우, 변수일 때에는 대괄호 표기법을 써야한다. expression.identifier expression[expression] 조건부 프로퍼티 접근(옵셔널 체이닝) → undefined, null 일때 종료(undefined로 평가) ⇒ TypeError 방지 4.5 호출 표현식 함수나 메서드를 호출하..

자료구조에 대해 공부해보고자 한다. 솔직히 제일 먼저 개념을 정확히 짚고 넘어갔어야 했는데 실무 하려면 꼭 알아야하는 중요 개념!!! 🙂 Object(객체) mdn문서 일단 mdn을 읽고 시작 자바스크립트에서 원시 타입을 제외한 모든 데이터 타입은 객체이다. 객체는 여러가지 값 혹은 함수도 가능하다. 객체가 보유한 값을 "프로퍼티"라고 하며, 객체가 보유한 함수는 "메서드"라고 한다. key, value 구조의 자료구조이다. 객체의 프로퍼티와 메서드들은 "키값"으로 구분된다. 🌼 객체의 생성 1) 객체 리터럴 let obj = {key:value, key2: value2, ...} 변수처럼 객체를 생성하는 방식으로 중괄호 {} 안에 key:value를 쉼표로 구분 2) 생성자 함수 new 연산자를 통해 ..

this와 화살표 함수(arrow function) ES6에서 도입된 화살표함수는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했다. 나는 화살표 함수가 단순히 함수를 "짧게" 쓰기 위한 용도인 줄 알았는데, 화살표 함수와 this는 밀접한 관련이 있다. 화살표 함수는(arrow function expression)은 function 표현에 비해 구문이 짧고, 자신의 this, arguments, super 또는 new.taget을 바인딩하지 않는다. 화살표 함수는 항상 익명이다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합하다. 그래서 생성자로 사용할 수 없다. (mdn) 여기서 우리는 화살표 함수의 arguments와 super, new.target을 바인딩하는 것은 다음에 알아..

실행컨텍스트(EC)는 자바스크립트 코드가 실행되는 환경을 의미한다. 크게 2가지 타입의 EC가 있다. 1) Global Execution context - 자바스크립트 엔진이 처음 코드를 실행할 때 Global Execution context 가 생성이 된다. 생성 과정에서 전역객체인 Window Object를 생성하고, this는 Window 객체를 가리킨다. 즉, 아무런 코드가 없어도 자바스크립트 엔진은 파일을 실행시키는 시점에서 Global Execution context를 생성한다. 2) Function Execution context - 자바스크립트 엔진은 함수가 호출 될 때마다 호출된 함수를 위한 Execution Context를 생성한다. 모든 함수는 호출되는 시점에 자신만의 Executio..

1.3.2 클래스가 구체적인 데이터를 지니지 않게 하는 방법 - 클래스(prototype)가 구체적인 데이터를 지니지 않게 하는 방법 => 프로퍼티를 일일이 지우고 더는 새로운 프로퍼티를 추가할 수 없게 한다. delete Square.prototype.width; delete Square.prototype.height; Object.freeze(Square.prototype); 왼쪽에서 Square의 prototype은 height와 width가 있지만, 오른쪽에서 width와 height가 삭제되었다. ✨Object.freeze() - 객체를 동결한다. 동결된 객체는 더 이상 변경될 수 없다. 즉 동결된 객체는 새로운 속성을 추가하거나 존재하는 속성을 제거하는 것을 방지하며, 존재하는 속성의 값이 변..

1.1 클래스의 개념 - 자바스크립트는 프로토타입 기반 언어라 "상속" 개념이 존재하지 않는다. 클래스와 비슷하게 흉내내는 여러 기법(프로토타입) 등을 사용하다 결국 🔥ES6에서 클래스 문법이 추가 되었다. - 클래스는 공통 요소를 지니는 집단을 분류하기 위한 개념이다. - 클래스의 속성을 지니는 실존하는 개체를 인스턴스(instance)라고 한다. 어떤 클래스에 속한 개체는 그 클래스의 조건을 모두 만족하므로 그 클래스의 구체적인 예시, 즉 인스턴스가 된다. - 프로그래밍에서는 클래스를 바탕으로 인스턴스를 만들 때, 비로소 어떤 개체가 클래스의 속성을 지니게 된다. 또한 한 인스턴스는 하나의 클래스만을 바탕으로 만들어진다. * 즉 클래스가 먼저 정의돼야만 그로부터 공통적인 요소를 지니는 개체를 생성할 ..

2.1 메서드 오버라이드 - prototype 객체를 참조하는 __proto__를 생략하면 인스턴스는 prototype에 정의된 프로퍼티나 메서드를 마치 자신의 것처럼 사용할 수 있다. 만약 인스턴스가 동일한 이름의 프로퍼티 또는 메서드를 가지고 있다면 원본이 그대로 있는 상태에서 다른 대상을 그 위에 얹는다(덮어씌운다). 이것이 메서드 오버라이드! - 자바스크립트 엔진이 getName이라는 메서드를 찾는 방식은 가장 가까운 대상인 자기 자신의 프로퍼티를 검색하고, 없으면 그 다음 가까운 대상인 __proto__를 검색하는 순서로 진행된다. __proto__에 있는 메서드는 검색 순서에서 밀려 호출되지 않는다. let Person = function(name) { this.name = name; }; P..

1. 프로토타입의 개념 - 자바스크립트는 프로토타입 기반 언어다. 클래스 기반 언어에서는 "상속"을 사용하지만, 프로토타입 기반 언어에서는 어떤 객체를 원형(prototype)으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다. 1.1 constructor, prototype, instance var instance = new Constructor(); 어떤 생성자 함수(Constructor)를 new 연산자와 함께 호출하면 Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스(instance)가 생성된다. 이때 instance에는 __proto__ 라는 프로퍼티가 자동으로 부여되는데, 이 프로퍼티는 Constructor의 prototype이라는 프로퍼티를 참조한다. ⭐ proto..