인프런 자바스크립트 강의

HTML 파일 작성 확장자 : html 인코딩 : utf-8 HTML 파일에 JS 파일 작성 방법 1) or 의 에 js 파일 작성 2) defer 속성 작성 rendering 하다가 hello.js 만나면 서버에서 hello.js 가져와서 코드 실행하는데 그 코드에서 body의 element에 접근하면 아직 body를 렌더링하지 않았기 ...

할당 연산자 1. 단일 할당 연산자 = 하나만 사용 var result = 1 + 2; 2. 복합 할당 연산자 = 앞에 연산자 작성 3. 먼저 = 앞을 연산한 후 할당 --- 해석, 실행 순서 해석이란? JS 코드를 기계어로 바꾸는 것. Compile 엔진이 해석하고 실행 실행 순서 = 왼쪽의 표현식 평가 = 오른쪽의 표현식 평...

문장, 화이트 스페이스, 세미콜론 자동 삽입, 블록 문장 형태 : ;(세미콜론) 문장을 끝나게 하는 역할 화이트 스페이스(White Space) 사람 눈에 보이지 않는 문자 가독성을 위한 것 문자마다 기능을 갖고 있음 e.g. 스페이스, 엔터, 탭, NBSP, Line Feed, Carriage Return 등 세미콜...

함수 구성 요소, 함수 이름 규칙과 관례 함수(function) 특정 기능을 처리하는 자바스크립트 코드 묶음 함수 구성 요소 function 키워드 함수 이름 파라미터(매개 변수, 인자, 아규먼트) // 작성은 선택 함수 Body(함수 코드, 소스 텍스트) : 중괄호{} 안에 작성한 코드 // 작성은 선택 함수 이름 규칙 첫 문자 : 영문...

Object Property {name: value} 형태 name에 property 이름/키를 작성 (따옴표 생략) value에 JS에서 지원하는 타입 작성 {a: 123, b: "ABC", c: true, d: {}} {book: function(){코드}} Object와 객체 구분 Property 추가, 변경 오브젝트에 프로퍼티 추가, 변경 ...

빌트인 오브젝트네이티브 오브젝트호스트 오브젝트사전에 만들어 놓은 오브젝트빌트인 Number 오브젝트, 빌트인 String 오브젝트JS 스펙에서 정의한 오브젝트빌트인 오브젝트 포함JS 코드를 실행할 때 만드는 오브젝트예: Argument 오브젝트빌트인, 네이티브 오브젝트

빌트인 오브젝트Array 형태123, "ABC", "가나다"배열 엘리먼트123, "ABC" 각각을 엘리먼트 또는 요소라고 부름2의 32승 (4,294,967,296) - 1개 인덱스엘리먼트 위치를 인덱스라고 부름왼쪽부터 0번 인덱스, 1번 인덱스배열 특징엘리먼트 작성이

빌트인 오브젝트true와 false 처리값이 있으면 true로 인식false 인식 기준undefined, null, NaN빈 문자열, 숫자 타입의 0숫자 값 변환 기준true를 1로, false를 0으로 변환Boolean 인스턴스 생성파라미터 값을 true 또는 fal

강좌 방향 : 자바스크립트(ES5) 엔진 처리 중심 > 엔진 관점의 핵심 키워드: Execution Context, Identifier Resolution Execution Context 형태 book() 함수가 호출되면 show Function 오브젝트

Built-in Function 오브젝트Function.prototype.call()function 오브젝트function book(){...}var book = function(){...}인스턴스이지만, new 연산자로 생성한 인스턴스와 구분하기 위해 강좌에서는 fu

파라미터를 {key: value} 형태로 저장파라미터 수만큼 0부터 인덱스 부여key로 사용파라미터로 받은 값을 value에 설정{0: param1, 1: param2}Array-likekey 값이 0부터 1씩 증가length 프로퍼티가 있어야 함get() 함수를 호출

범위를 제한하여 식별자를 해결하려는 것스코프에서 식별자를 해결식별자 해결(Identifier Resolution)변수 이름, 함수 이름을 찾는 것이때 스코프를 사용이름을 찾게 되면 값을 구할 수 있음크게는 이름을 설정하는 것도 식별자 해결스코프는 식별자 해결을 위한 것

실행 콘텍스트 Exeuction Context 함수가 실행되는 영역, 묶음 함수 코드를 실행하고 실행 결과를 저장 스펙상의 사양 music("음악")으로 함수를 호출하면 엔진은 실행 콘텍스트를 생성하고 실행 콘텍스트 안으로

function 인스턴스 기준 function 구분 빌트인 Function 오브젝트 function 오브젝트: function 키워드로 생성 function 인스턴스: new 연산자로 생성 function 오브젝트도 인스턴스 빌트인

키워드obj.name() 형태로 호출한 함수(메소드)에서 this로 인스턴스(오브젝트)를 참조실행 콘텍스트의 this 바인딩 컴포넌트에 바인딩글로벌 오브젝트에서 this는 글로벌 오브젝트 참조this와 window 오브젝트window는 JS에서 만든 것이 아니며 글로벌

Object에 Object를 할당하면 프로퍼티 값이 연동됨배열도 마찬가지로 연동됨연동 방지: 프로퍼티 단위로 할당Recursive Function 함수 안에서 자신 함수를 호출하는 형태사용 사례 {name: {name: {name: value}}}\[1, 2, 3, 4

기본 문법let 변수, const 변수, 화살표 함수Spread, Rest, Destructing, default value연산자, getter/setter, Template오브젝트에 추가된 함수Number, String, ObjectArray, Math, RegExp

로컬(지역) 변수, 글로벌(전역) 변수변수를 구분하는 이유는?기능과 목적이 다르기 때문글로벌 변수의 기능, 목적다른 js 파일에서 변수값 공유파일에서 공통 변수 개념으로 사용의도는 좋으나 처리 속도가 떨어짐로컬 변수의 기능, 목적빠르게 식별자를 해결하기 위해 가까운 스

코드 형태(param) => {함수 코드}function(){}의 축약 형태지만 고려할 사항도 있음(this 참조가 다름)강좌에서 화살표 함수와 전통적인 함수의 구분이 필요할 때전통적인 형태를 일반 함수라고 부름함수 블록과 return 작성 생략함수 블록{}만 작성한

과정 중간에 이터레이션 개념 이해가 필요하므로먼저 다루며이 장에서는 이터레이션 개념만 다루고자세한 것은 Symbol 오브젝트에서 다룸이터레이션의 사전적 의미: 반복for() 문의 반복 개념과 차이 있음강좌에서는 이터레이션과 반복을 같이 사용이터레이션을 위한 프로토콜(p

강좌의 let, const 변수 사용 기준let: 변경할 수 있다const: 변경할 수 없다let, const 변수의 시맨틱을 우선하여 사용값이 변경되면 let초기값이 변경되지 않으면 constSyntax: ...iterable...iterable...처럼 \[]안에

Destructuring Assignment작성 형태사전적 의미~구조를 파괴하다파괴, 해체는 있는 것이 없어지는 뉘앙스원 데이터는 변경되지 않음강좌 기준이 관점에서 보면 분할/분리가 더 가까움강좌에서는 "분할 할당"으로 표기배열의 엘리먼트를 분할하여 할당인덱스에 해당하

Syntax: for (variable of iterable){ }이터러블 오브젝트를 반복iterable이터러블 오브젝트를 작성표현식을 작성하면 평가 결과를 사용variable변수 이름 작성이터러블 오브젝트를 반복할 때마다 variable에 값이 할당됨배열배열을 반복하

Object 끝에 콤마 사용} 앞에 콤마 사용 가능배열 끝에 콤마 사용] 앞에 콤마 사용 가능좌결합성왼쪽에서 오른쪽으로 계산1 + 2 + 3은 (1 + 2) + 3으로 계산우결합성오른쪽에서 왼쪽으로 계산A B C에서 A (B C)로 계산try-catch의 cat

getter로 선언된 함수를 자동으로 호출값을 반환하는 시맨틱을 갖고 있으므로 getter 함수에서 값을 반환해야 함ES5 형태ES6 형태ES6 장점ES5처럼 프로퍼티의 속성 구조가 아님작성 편리다수의 getter 사용 가능프로퍼티에 값을 할당하면setter로 선언된

IEEE 754 자바스크립트는 IEEE 754에 정의된 64비트 부동 소수점으로 수를 처리 double-precision floating-point format numbers 64비트로 최소값과 최대값을 처리 정수와 실수를 구분하지 않음

유니코드는 U+0031 형태코드 포인트(code point)0031이 코드 포인트문자 코드라고도 부름코드 포인트로 문자/이모지 등을 표현4자리 이상의 UTF-16 진수 형태110만개 정도 표현U+0000 ~ U+10FFFFplane(평면)코드 포인트 전체를 17개 pl

두 개의 파라미터 값과 값 타입을 비교같으면 true, 아니면 false 반환오브젝트 비교 목적이 아님\[]와 \[] 비교, {}와 {} 비교는 falseJS 값 비교 방법값과 타입까지 모두 비교: ===타입은 비교하지 않고 값만 비교: ==Object.is()와 ==

Template Literal문자열 처리를 위한 리터럴표현식을 포함할 수 있음강좌에서는 템플릿으로 표기backtick 안에 표현식 작성표현식을 ${표현식} 형태로 작성tagged Template호출되는 함수를 태그 함수(tag function)라고 부름show() 함수

첫 번째 파라미터의 오브젝트를 Array 오브젝트로 변환두 번째 파라미터에 함수 작성opt이터러블 오브젝트를 전개할 때마다 호출세 번째 파라미터에 오브젝트 작성opt호출된 함수에서 this로 참조파라미터 값을 Array로 변환, 반환파라미터에 변환 대상 값을 작성콤마로

ES5까지는 수학 계산 처리에 부족했으나ES6에서 수학 계4산용 함수가 많이 추가됨특히, 머신러닝/딥러닝에 대응할 수 있게 됨일반적으로 수학 계산을 사용하지 않으므로 개요 중심으로 다룸Math.trunc()소수를 제외한 정수 반환Math.sign()값의 부호에 해당하는

정규 표현식 사용 형태매치 시작 위치를 lastIndex 프로퍼티에 설정디폴트 값: 0g 플래그를 사용하면lastIndex 프로퍼티 위치부터 매치const value = "ABABA", obj = /B/gg 플래그를 사용하지 않으면 lastIndex 프로퍼티 값이 바뀌

Generator functionfunction\* 키워드를 사용한 함수제너레이터 함수 형태function 선언문, function 표현식, GeneratorFunction작성 방법function\* 다음에 소괄호() 작성. 이어서 작성해도 되고 하나 이상 띄워도 됨f

자바스크립트에서 Primitive 값은오브젝트가 아니라 값이며 함수를 갖고 있지 않음const num = 100;을 할당하면num 변수에 100만 할당되며 아무것도 첨부되지 않음100이 primitive 값ES5의 primitive 값 타입string, number,

ES2019 스펙에서 @@iterator 형태를 볼 수 있음@@는Well-Known Symbol을 나타내는 기호@@match와 Symbol.match가 같음스펙에서는 @@match 형태를 사용하고개발자는 Symbol.match 형태를 사용ES2019 기준: 12개 We

글로벌 Symbol 레지스트리(registry)에{key: value} 형태로 Symbol에 저장파라미터()의 문자열이 key가 되고 Symbol()로 생성한 값이 value가 됨registry의 사전적 의미: 등록, 기록글로벌 Symbol 레지스트리는 공유 영역다른

key와 value의 컬렉션Map 오브젝트 형태key, value 형태처럼대괄호 안에 key와 value를 작성다양한 타입을 key로 사용할 수 있음Map의 key 처리for-of 문에서 작성한 순서대로 읽혀짐Map 인스턴스를 생성하여 반환파라미터에 이터러블 오브젝트

WeakMap은 object만 key로 사용 가능number 등의 프리미티브 타입 사용 불가value는 제한 없음Map에서 key로 참조한 object를 삭제하면object를 사용할 수 없게 되지만Map에 object가 남음메모리 릭(memory leak) 발생Weak

Set 오브젝트는value(값)의 컬렉션value1,,, valueN 형태로 작성Set은 대괄호\[]가 하나작성한 순서로 전개 됨Set 인스턴스 생성, 반환파라미터에 값을 작성프리미티브, 오브젝트 타입 사용 가능size 프로퍼티Set 인스턴스의 엘리먼트 수를 반환Set

Set 오브젝트와 차이오브젝트만 value 값으로 사용할 수 있음number 등의 프리미티브 타입 사용 불가개념은 WeakMap과 같음value만 작성하는 것이 다름value의 참조가 바뀌면 GC 대상지원 메소드has(), add(), delete()WeakSet 인스

자바스크립트 바이블 강좌의 마지막 강좌개설된 "자바스크립트 ES6+ 기본" 강좌와 함께 ES6+ 스펙의 95% 이상을 다룸특히, 비동기 통신과 비동기 프로세스를 망라하여프레임워크를 만드는 개념으로 접근11단계로 나누어 단계별로 코드 구현비동기 통신과 비동기 처리를 정리

1. 객체 지향 프로그래밍 자바스크립트는 객체 지향 프로그래밍 언어 OOP: Object Oriented Programming ECMAScript 스펙에 OOP라고 작성되어 있음 ECMAScript is an object-oriented pro