모던JS DeepDive 공부

모던 JS 딥다이브를 공부하며 요약 정리해보는 글입니다.프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다.=> 프로그래밍 하기 전 해결해야 할 문제를 명확히 이해하고 적절한 문제 해결 방안을 정의해야 한다.이를 위한 것이 문제 해결 능력 대부분의 문제는

넷스케이프 브라우저에서 동적 웹을 만들기 위해 개발됨.마이크로소프트에서는 자바스크립트 파생 버전인 "JScript"를 인터넷 익스플로러3.0(MS 브라우저)에 탑재.문제: 자바스크립트와 JScript 표준화 X 적당히 호환이로 인해 크로스 브라우징 이슈 발생그 결과 E

모든 브라우저와 Node.js는 자바스크립트 엔진을 내장함.주의 : 브라우저와 Node.js의 용도가 다름브라우저 : HTML, CSS, JS를 실행해 웹페이지를 브라우저 화면에 렌더링Node.js : 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적

애플리케이션은 데이터를 다루며 아무리 복잡한 APP이라도 데이터를 INPUT / OUTPUT 하는 것이 전부이다.변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념예) 10 + 20자바스크립트 엔진은 10과 20이라는 리터럴(literal)과 "+"라는 기호의

5.1_ 값 값(value)는 표현식이 평가되어 생성된 결과 5.2_ 리터럴 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법 리터럴은 소스코드 안에서 직접 만들어 낸 상수 값 자체이며 값을 구성하는 최소 단위이다. > 5.3

6장_ 데이터타입 데이터 타입은 값의 종류를 의미 총 7개의 타입 제공 크게 원시타입과 객체타입으로 분류 가능 > 딥다이브 표 6-1 6.1_ 숫자타입 자바스크립트는 모든 수를 하나의 숫자타입(실수)으로 표현한다. 6.2_ 문자열타입 6.3_ 템플릿리터럴 템플릿

연산자는 하나 이상의 표현식을 대상으로 연산을 통해 하나의 값을 만든다.이 때 연산의 대상을 피연산자라고 한다.산술 연산자5 \* 4 // 20문자열 연결 연산자'My ' + 'precious' // My precious할당 연산자a = 'b'비교 연산자3 < 5

제어문은 조건에 따라 코드 블록은 실행(조건문)하거나 반복 실행(반복문)할 때 사용블록문은 0개 이상의 문을 중괄호로 묶은 것.코드 블록, 블록이라고 함.JS는 블록문을 하나의 실행 단위로 취급.조건문은 주어진 조건식의 평가 결과에 따라 코드 블록의 실행을 결정if..

개발자에 의한 타입 변환 : 명시적 타입 변환 || 타입 캐스팅JS엔진에 의한 자동 변환 : 암묵적 타입 변환 || 타입 강제 변환false 값 falseundefinednull0, -0NaN’’ (빈문자열)new 연산자 없이 호출하는 방법빌트인 메소드 사용암묵적 타입

원시 타입을 제외한 나머지 값들(함수, 배열, 정규표현식 등)객체는 키와 값으로 구성된 프로퍼티의 집합. 프로퍼티의 값으로 자바스크립트에서 사용 가능한 모든 값 이용 가능.값으로 함수도 가능하고 이 때 일반 함수와 구분을 위하여 "메소드" 라고 부름.프로퍼티는 프로퍼티

모던 JS 딥다이브 공부 정리용 글입니다.

(p.154)함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것함수는 JS에서 가장 중요한 핵심 개념.JS의 핵심개념인 스코프, 실행 컨텍스트, 클로저, 생성자함수에의한 객체 생성, 메서드, this, 프로토타입, 모듈화 등이 모두

스코프는 모든 프로그래밍 언어의 기본적이며 중요한 개념스코프의 의미 1모든 식별자는 자신이 선언된 위치에 따라 다른 코드가 자신을 참조할 수 있는 유효 범위가 결정되며 유효범위가 곧 스코프를 의미한다.스코프의 의미 2위 코드에서는 식별자 x가 두 개 존재하며 JS엔진은

실행 컨텍스트는 JS의 동작원리를 담는 핵심 개념이다.이를 정확히 이해해야 JS가 스코프 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식과 호이스팅의 이유, 클로저 동작방식, 테스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을

전역 변수의 무분별한 사용은 위험하다.전역 변수를 반드시 사용해야 할 이유가 없다면 지역변수를 사용해야 한다.변수는 생성되고 소멸하는 생명 주기(life cycle)이 있다.변수에 생명 주기가 없다면 한 번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간

var키워드는 함수 코드 블록만 지역 스코프로 인정for문의 변수 선언문의 var도 전역 변수가 되버림.변수 선언 이전에 undefined로 참조 가능var는 선언과 초기화가 동시에 이루어지기 때문.이런 특성은 코드 흐름과 가독성을 안좋게 한다.변수 중복 syntax

내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다.< ECMAScript 사양에서 (\[...]) 이중 대괄호로 감싼 이름들>내부 슬롯과 내부 메서드는 JS엔진에서 실제

\*\*객체 리터럴(https://velog.io/@bigwave-cho/JS-%EA%B0%9D%EC%B2%B4new 연산자 + Object 생성자 함수 호출 -> 빈 객체 생성 후 반환이후 프로퍼티나 메서드를 추가하여 객체 완성 가능!new 연산자와 함께 호

무명의 리터럴로 생성 가능(런타임에 생성 가능)변수나 자료구조(객체, 배열)에 저장 가능함수의 매개변수에 전달 가능함수의 반환값으로 사용 가능함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용 가능하다는 의미.객체는 값! -> 함수 또한 값으로 취급 가능!즉, 변수

JS는 동기적으로 코드를 처리하기 때문에 비동기 처리를 위한 하나의 패턴으로 콜백함수를 사용함.But! 콜백함수의 단점전통적 콜백 패턴은 콜백 헬로 인해 가독성이 나쁨비동기 처리 중 발생한 에러의 처리가 곤란여러개의 비동기 처리르 한 번에 처리하는 데도 한계가 있음.그

es6의 제너레이트넌 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수 함수.나중에 정리제너레이터를 사용하여 비동기 처리를 동기 처리처럼 동작하도록 구현하면 코드가 길어지고 가독성이 나빠진다.ES8에서 더 간단하고 가독성 좋게 비동기 처리를 동기

에러가 발생하지 않는 코드 작성은 불가능만약 에러 발생을 대처하지 않으면 프로그램은 강제종료 됨이러한 에러에 대처하기 위해 try...catch 문 사용!직접적으로 에러를 발생하지 않는 예외적 상황이 때 에러 처리 방법 2가지"?." 옵셔널 체이닝 연산자 또는 if문으

모듈이란 애플리케이션을 구성하는 개별적 요소로 재사용 가능한 코드 조각을 의미.모듈은 기능을 기준으로 파일 단위로 분리모듈이 성립하기 위해선 자신만의 파일 스코프(모듈 스코프)를 가져야 한다.독자적 파일 스코프를 가진 모듈의 모든 자산(모듈에 포함된 변수, 함수, 객체

크롬, 사파리 등의 에버그린 브라우저의 ES6 지원율을 약 98%로 거의 ES6를 지원함.하지만 ES11의 경우 11%정도..따라서 ES6+와 ES.NEXT의 최신 ECMAScript 사양을 사용하여 프로젝트를 진행하려면 최신 사양으로 작성된 코드를 경우에 따라 IE를

for(var key작명 in obj){}obj 키 개수만큼 반복특징enumerable이 true인 것만 반복해줌 🧨enumerable(셀 수 있는, 열거 가능한)객체에는 눈에 보이는 프로퍼티 외에 더 많은 프로퍼티가 저장되어 있다. console.log(Obje

함수도 넣을 수 있다.파라미터 설정 해주면참고!! <a href='https://velog.io/@bigwave-cho/ES6-this-arrow-function상품 객체 찍어내기내부세()라는 함수를 컨스트럭터 내에 위치시켜서상품가격 \*10% 의 부가세

Deepdive 공부 정리용 글입니다. 25.1_ 클래스란 JS는 프로토타입 기반 객체지향 언어 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 언어! ES5의 함수와 프로토타입을 통한 객체지향 언어의 상속 구현 ES6에서 도입된 class는 클래스