일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 프론트엔드
- 버블정렬
- input class
- 코드스테이츠
- next/Image
- primitive type
- CSS
- 유데미
- 자바스크립트
- 백준
- nodejs
- react js
- OSI 7계층
- MUI
- 알고리즘
- 코딩테스트
- 이벤트 루프
- 재귀함수
- 자료구조
- kakao map api
- 코드스테이츠 메인프로젝트
- sort
- 페이지네이션
- 배열
- Node js
- Native select
- javascript
- 정규표현식
- JavaScript Deep Dive
- 백준 nodeJS
- Today
- Total
목록책읽기/Javascript Deep Dive (8)
신입 개발자에서 시니어 개발자가 되기까지
1. 자바스크립트 엔진 a. 자바스크립트 엔진이란? - Javascript로 작성한 코드를 해석하고 실행하는 인터프리터이며, 싱글 스레드로 동작한다. - 싱글 스레드로 동작한다는 것은 한 번에 하나의 태스크만을 처리할 수 있다는 뜻이다. 하지만, 비동기 함수, 애니메이션 등은 다른 코드들과 동시에 동작하는데, 이러한 자바스크립트의 동시성을 처리해주는 것이 브라우저의 이벤트 루프다.b. 엔진을 이루는 두 영역 i. 콜 스택 - 자바스크립트는 단 하나의 호출 스택(call stack)만을 이용하고, 하나의 함수가 실행되고 종료되어야 다른 task를 수행할 수 있다. - 함수가 실행되면 콜스택에 push되고 실행이 끝나면 콜스택에서 pop되어 제거된다. ii. 힙 - 동적으로 생성된 객체는 heap에 할당된다..

미루고 미뤄왔던.. this 바인딩이다. 오랜만에 deep dive 책을 펼쳐 읽었다. 역시나 정리를 하면서 읽으면 시간이 아주 오래 걸린다. 포스팅까지 하면 더더욱.. 하지만 미뤄왔던 일을 하나 해치우고 나니 뿌듯하다~!~! 함수 호출 방식에 따른 this 바인딩 - 렉시컬 스코프와 this 바인딩은 결정의 시기가 다르다. 렉시컬 스코프는 함수 정의가 평가되어 함수 객체가 생성 되는 시점에 상위 스코프를 결정한다. 이에 반해 this 바인딩은 함수 호출 시점에 결정된다. ① 일반 함수 호출할 때 내부에 있는 this -전역함수, 전역함수 내 중첩함수 전부 일반함수로 호출하면 함수 내부의 this에는 전역 객체가 바인딩된다. 그러나 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로..

1. Var와 let의 차이 a. 이제서야 선언단계 / 초기화 단계를 이해했다. Var는 자바스크립트 엔진에 의해 코드가 실행되기 이전(런타임 이전)에 이미 선언단계와 초기화단계를 완료한다. 초기화 단계는 선언된 변수에 undefined를 할당하는 것이다.b. 이에 반해 let은 변수 선언과 초기화 단계를 동시에 진행하지 않는다. 런타임 이전에 변수의 선언은 암묵적으로 진행하지만, 초기화 단계는 런타임 시점에 변수 선언문에 도달 했을 때 실행한다.c. var의 재선언은 에러가 나지 않지만, let의 재선언은 에러가 난다. d. const, let : 블록레벨 스코프 / var : 함수레벨 스코프 var let const scope(유효범위) 함수레벨 블록레벨, 함수레벨 좌동 변수 선언과 초기화 단계 함께..
1. 개념 a. MDN A closure is the combination of a function and the lexical environment within which that function was declared. 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.b. 함수가 선언된 렉시컬 환경 i. 자바스크립트에서 함수는 함수가 정의된 환경(위치)에 따라 스코프가 결정되는 렉시컬 환경을 가진다는 의미. ii. 함수 객체의 내부 슬롯 [[Environment]] 1) 함수가 정의된 위치와 호출되는 위치가 다를 때 렉시컬 스코프를 따르기 위해 상위 스코프를 저장해두는 슬롯. 2) outer함수와 그 안에 inner함수가 있을 때, outer 함수가 실행 컨텍스트에서 팝되어 제거되어도(생명..
1. 개념 - 모든 식별자(변수, 함수, 클래스의 이름)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정 됨. 스코프는 식별자가 유효한 범위를 의미한다. 2. 스코프 종류 a. 전역스코프 b. 지역스코프 1) 블록 레벨 스코프 i. 화살표 함수는 블록 스코프로 취급된다. ii. for 반복문. iii. 중괄호 블록. 2) 함수 레벨 스코프 i. 함수레벨 스코프를 따른다는 말의 의미는, 함수의 코드 블록만을 지역 스코프로 인정한다는 것이다. 그래서 함수가 아닌 코드 블록 내에서 var로 선언을 해도 지역변수가 아니라 전역 변수가 됨. Let과 const는 블록 레벨 스코프를 따른다. 함수, if문, for문, while문 등을 지역 스코프로 인정한다. 그러나 var..

1. 객체의 프로퍼티 키에 문자열이나 심벌 값 외의 값은 암묵적으로 문자열로 변환된다. 2. 객체 프로퍼티 접근법 a. 대괄호 접근법의 주의사항 - 반드시 따옴표로 감싼 문자열일 것. - 그렇지 않은 경우 해당 키를 식별자로 인식하고, referenceError가 발생한다. 참고로 객체에 존재하지 않는 프로퍼티에 접근하면, undefined를 반환하고 에러가 발생하지 않는다. - key가 변수라면, 대괄호 접근법을 사용해야 한다. b. 식별자 네이밍 규칙을 준수하지 않은 경우, 대괄호 표기법만을 사용해야한다. - 브라우저 환경에서 person.last-name이 NaN이 출력되는 이유 : person.last를 먼저 평가함. => undefined출력. Name은 브라우저 환경에서 전역변수로서 기본값이 ..
Javascript Deep Dive를 다 읽고 미리 필기해둔 것들을 코드스테이츠 내용과 합쳐서 올리다보니 해당 게시판은 텅텅 비어있다. 중복되는 내용을 올리기는 싫어서 골라서 올리려고 하다보니 계속 미루기만 했다. 1. 암묵적 타입의 변환 a. 문자열타입으로 변환 - Number + string = string - 표현식의 피연산자가 아닌, 표현식의 평가 결과가 문자열 타입으로 변환 되는 경우도 있음.(템플릿 리터럴을 삽입했을 때) b. 숫자타입으로 변환 i. 산술연산자 - -, *, / 의 경우. ii. 비교연산자 - '1' > 0 의 경우 '1'을 숫자타입으로 변환. iii. +단항연산자 주의 : 빈 객체는 NaN, 빈 배열은 0이다. Undefined는 nan이다. 배열안에 숫자가 있어도 nan이..

개념 a. 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어. b. 반복문과 조건문 없이 원하는 패턴을 검사할 수 있다.(ex 전화번호 형식 확인) 숫자 3자리 - 숫자 4자리 - 숫자 4자리의 형식으로 패턴을 정의한 것. 이렇게 정의한 후 test메서드에 검사하고자 하는 문자열을 인자로 전달하면 패턴과 맞는지 확인하고 boolean값을 반환한다.생성 a. /is/i i. /는 시작과 종료기호, / /사이에는 패턴, i는 플래그를 의미한다. b. new RegExp(/is/i)메서드 a. RegExp.prototype.exec : 매칭결과를 배열로 반환 b. RegExp.prototype.test : 매칭결과를 불리언값으로 반환 c. RegExp.prototype.match : 매칭 ..