개인 공부/JavaScript
-
[자바스크립트 ES6+ 기본] Spread, Rest, Destruncting, Number, String개인 공부/JavaScript 2022. 1. 27. 23:39
Spread, Rest Spread const list = [21, 22]; log([11, ...list, 12]); // [11, 21, 22, 12] [...Iterable] [...]처럼 [] 안에 . 3개를 작성하고 이어서 이터러블 오브젝트를 작성한다. 이터러블 오브젝트를 하나씩 전개한다. {key: value}의 Object가 이터러블 오브젝트는 아니지만 전개할 수 있다. Array Spread const one = [21, 22]; const two = [31, 32]; const result = [11, ...one, 12, ...two]; log(result); // [11, 21, 22, 12, 31, 32] log(result.length); // 6 result = [11, 12, ..
-
[자바스크립트 ES6+ 기본] 이터레이션개인 공부/JavaScript 2022. 1. 20. 23:19
이터레이션(Iteration)과 for()문의 반복 개념은 차이가 있다. 이터레이션을 위한 프로토콜(protocol)이 필요하다. 즉, 이터레이션은 프로토콜을 갖고 있으며 프로토콜에 따라 이터레이션이 수행된다. 프로토콜이 구문과 빌트인이 아니므로 프로토콜에 맞으면 이터레이션이 가능하다. 이터레이션 프로토콜 오브젝트가 이터레이션할 수 있는 구조여야 한다. 예: [10, 20]은 가능, 100은 불가능 이터레이션 함수를 갖고 있어야 한다. 이터레이션 프로토콜은 이터러블(Iterable) 프로토콜과 이터레이터(Iterator) 프로토콜로 구분된다. 개발자 코드로 프로토콜을 맞추면 이터레이션 할 수 없는 오브젝트를 이터레이션할 수 있도록 만들 수 있다. 이터러블 프로토콜 오브젝트가 반복할 수 있는 구조이어야 하..
-
[자바스크립트 ES6+ 기본] Arrow Function개인 공부/JavaScript 2022. 1. 20. 23:19
Arrow Function 코드 형태: (param) => {함수 코드} function(){} 의 축약 형태이지만 고려할 사항이 있다. this 참조가 다르다. 함수 블록 사용 함수 블록과 return 작성 생략 ⇒ 앞에서 줄을 분리하면 에러가 나지만 뒤에서는 줄을 분리할 수 있다. const total = (one, two) => one + two; log(total(1, 2)); // 3 함수 블록{}만 작성한 형태 undefined 를 반환한다. 함수 블록에 return을 작성하지 않은 것과 같다. return을 작성하지 않으면 디폴트로 undefined 를 반환한다. (JS 문법) const total = (one) => {}; log(total(1)); // undefined {key: val..
-
[자바스크립트 ES6+ 기본] let 변수, const 변수개인 공부/JavaScript 2022. 1. 20. 23:18
변수 구분 로컬(지역) 변수, 글로벌(전역) 변수 변수를 구분하는 이유는 기능과 목적이 다르기 때문이다. 글로벌 변수의 기능, 목적 다른 js 파일에서 변숫값을 공유할 수 있다. 파일에서 공통 변수 개념으로 사용한다. 의도는 좋으나 처리 속도가 떨어진다. 로컬 변수의 기능, 목적 빠르게 식별자를 해결하기 위해 가까운 스코프의 변수를 사용하려는 것이다. 글로벌 변수 오해 글로벌 변수는 글로벌 오브젝트의 로컬 변수이다. var 키워드를 사용하는 것이 정상 그러나 var 키워드를 작성하지 않으면 글로벌 변수로 간주한다. use strict 사용 함수 안에서 var 키워드를 사용하지 않으면 에러가 발생한다. ES5에서 도입했으나 근본적인 접근은 아니다. ES6+에서는 전체는 아니지만 “use strict”가 디..
-
[자바스크립트 중고급] this, 논리적 정리개인 공부/JavaScript 2022. 1. 13. 23:49
this this 개요 키워드 obj.name() 형태로 호출한 함수(메소드)에서 this로 인스턴스(오브젝트)를 참조한다. this와 글로벌 오브젝트 글로벌 오브젝트에서 this는 글로벌 오브젝트를 참조한다. window는 JS에서 만든 것이 아니며, 글로벌 오브젝트의 스코프가 아니다. 그러나 window와 글로벌 오브젝트를 같은 선상에서 사용한다. 이는 Host 오브젝트 개념이 적용되었기 때문이다. window 오브젝트와 같이 다른 오브젝트를 마치 내것처럼 사용하는 개념을 Host 오브젝트라고 한다. DOM 오브젝트도 Host 오브젝트이다. this 참조 범위 this와 strict 모드 오브젝트.함수이름() 형태로 함수 호출 글로벌 오브젝트는 오브젝트 이름이 없으므로 함수 이름만 작성하여 호출한다...
-
[자바스크립트 중고급] function instance개인 공부/JavaScript 2022. 1. 13. 23:49
생성자 함수 new 연산자와 함께 인스턴스를 생성하는 함수 new Book()에서 Book()이 생성자 함수이다. new 연산자 인스턴스 생성을 제어한다. 생성자 함수를 호출한다. 생성자 함수 인스턴스를 생성하고 반환한다. 인스턴스에 초깃값을 설정한다. 코딩 관례로 생성자 함수의 첫 문자는 대문자를 쓴다. 생성자 함수 실행 과정 new 연산자로 인스턴스 생성을 제어하고 생성자 함수인 Book()으로 인스턴스를 생성하여 반환한다. constructor 프로퍼티 Book function 오브젝트: { prototype: { constructor: Book } } 생성하는 function 오브젝트를 참조한다. function 오브젝트를 생성할 때 설정한다. prototype에 연결되어 있다. construct..
-
[자바스크립트 중고급] Execution Context개인 공부/JavaScript 2022. 1. 5. 10:03
Execution Context 함수가 실행되는 영역, 묶음 함수 코드를 실행하고 실행 결과를 저장한다. 스펙상의 사양이다. 함수를 호출하면 엔진은 실행 콘텍스트를 생성하고 실행 콘텍스트 안은로 이동한다. 실행 콘텍스트 실행 단계 준비 단계 초기화 단계 코드 실행 단계 Execution Context 생성 시점 실행 가능한 코드를 만났을 때 여기서 실행 가능한 코드란 함수 코드, 글로벌 코드, eval 코드를 가리킨다. 코드 유형을 분리한 이유 실행 콘텍스트에서 처리 방법과 실행 환경이 다르기 때문이다. 함수 코드: 렉시컬 환경 글로벌 코드: 글로벌 환경 eval 코드: 동적 환경 실행 콘텍스트의 상태 컴포넌트 실행 콘텍스트 상태를 위한 오브젝트이다. 실행 콘텍스트 안에 생성된다. 상태 컴포넌트 유형 L..
-
[자바스크립트 중고급] Argument, 스코프개인 공부/JavaScript 2022. 1. 5. 10:02
Argument 처리 매커니즘 Argument 처리 구조 function get() { return arguments; }; console.log(get{"A", "B")); // {0: A, 1: B} 파라미터를 {key: value} 형태로 저장한다. 파라미터 수만큼 0부터 인덱스를 부여한다. key로 사용한다. 파라미터로 받은 값을 value에 설정한다. {0: param1, 1: param2} 이러한 형태를 Array-like라고 한다. key값이 0부터 1씩 증가해야 한다. length 프로퍼티가 있어야 한다. 엔진의 파라미터 처리 function get(one) { return one; }; get(77, 100); get() 함수를 호출하면서 77과 100을 파라미터 값으로 넘겨준다. 넘겨받..