Im Bay

DOM (Document Object Model, 문서 객체 모델) 웹 페이지의 컨텐츠, 구조, 스타일을 구조화시켜 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API 제공하는 것 JS 같은 스크립트 언어가 쉽게 웹페이지에 접근하여 조작할 수 있게 연결해주는 역할 DOM 문서의 트리 구조 document node → element node → text node, attribute node document node (문서 노드) 최상위 루트 노드이며 document 객체를 가리킨다. HTML 문서 전체를 나타내는 노드이기도 하다. (그래서 HTML 문서에 document node는 1개만 존재) window.document, document로 참조해 사용 가능 element node (요..

동기와 비동기 뜻 동기란 특정한 작업이 종료된 후 다음 줄의 작업을 실행하는 것 비동기란 특정한 작업을 종료되기 까지 기다리지 않고 실행되는 것 JS에서 대부분 작업들은 자동적으로 비동기적으로 실행되는 부분이 많다. 동기(Synchronous) vs 비동기(Asynchronous) Synchronous 한번에 하나의 함수만 실행, 실행되는 동안 blocking → Single Thread in Single Process Runtime → Execution Context → Execution Context Stack → Lexical Enviroment Asynchronous 한번에 하나의 함수만 실행 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행 I/O를 수행하는 비동기 함수는 ..

모듈(Module) 소스 코드를 작으면서 유지보수 하기 편하고 재사용성과 개발 효율성 극대화하는 조각으로 나누는 것 Module System의 종류 CommonJS, AMD, UMD, ESM, CJS, AMD, RequireJS ESM이 현재 표준 NodeJS에서는 CJS가 default NodeJS에서 ESM 사용 방법 package.json에 “type”: “module”, 추가 모든 file 확장자를 mjs로 inline node 실행 시 $> node --input-type=module --eval "import { sep } from 'path'; console.log(sep);" $> echo "import { sep } from 'path'; console.log(sep);" | node -..

padStart, padEnd startsWith, endsWith indexOf, includes, search substr, substring, slice toUpperCase, toLowerCase trim, trimStart, trimEnd Template Literal ex) const holiday = '한글날'; const month = 10, day = 9; `${holiday}은 ${month}월 ${day}일입니다.` // 한글날은 10월 9일입니다. function f(txts, a, b, c) { console.log('txts>>', txts); console.log('a>>', a); console.log('b>>', b); console.log('c>>', c); } f`${h..

Number new Number(n), Number(n) new Number()은 [[NumberData]]에 0 할당 Number.NaN / Number.EPSILON Number.Nan 숫자가 아니다. Number.EPSILON 부동 소수점 문제 해결 1과 1보다 큰 숫자 중 가장 작은 차이 값 Number.isFinite() / Number.isSafeInteger() Number.isFinite() isFinite()는 인수를 암묵적 숫자 형변환 Number.isSafeInteger() Number.prototype. Number.prototype.toExponential() Number.prototype.toFixed() 소수점 자리 지정: string Number.prototype.toPrec..

맵(map) new Map(), new Map([ [key1, value1], [key2, value2] ]) - 키: 값, 키는 객체도 가능 문자열이나 Symbol만 키로 가능하다. 객체나 비문자형은 키가 될 수 없다. 프로퍼티 순서 보장안된다. length랑 size 없다. iterator 반환하는 keys, values, entries 함수 없다. has, set, get, delete, clear 메소드도 없다. 위크맵(WeakMap) new WeakMap(), new WeakMap([ [key1, value1], [key2, value2] ]) - 키: 값, 키는 객체만 가능 key는 Object만 가능하다. iterator 안된다. keys, values, entries 메소드 없다. size..

이터레이터 (iterator) 반복 처리(iteration)가 가능한 객체를 말한다. iterator은 pointer! 현재 어디에 있고 다음엔 어디로 가는지 value, done, next()를 이용하여 더 쓸모있는 동작이 가능한 객체를 만든다. [Sysmbol.iterator]() 구현 → 실행하면 iterator literal 반환 제너레이터 (generator) function*(제너레이터 함수)의 실행을 제어하는 함수 generator를 호출하면 iterator를 얻는다. function* ~ yield - iterator를 return하고 일시정지한 상태로 시작

객체 지향 프로그래밍 (Object Oriented Programming) 원시(primitive) 타입을 제외한 모든 것이 객체(object) 특정 인스턴스에 종속되지 않는 함수를 클래스(정적) 메소드라고 한다. 은닉성 캡슐화, 내부(local) 변수 및 메소드 보호(private, protected, public) 상속성 확장성(extends, mixin, prototype), superclass & subclass 다형성 polymorphism, interface / super class 추상화 abstract class 정적 필드 / 메소드 - Class(Static) Field / Method 특정 인스턴스와 무관하고 Class에 존재하는 함수(method) static 영역에 생성 인스턴스 프..

객체(Object) key와 value로 구성된 프로퍼티 들의 집합 Object 생성 방법 {} 중괄호를 사용하여 생성 var obj = {}; var obj2 = { name: ‘Kim’, gender: ‘male’}; Object 생성자 함수 사용하여 생성 var obj3 = new Object(); Object 프로퍼티 추가 obj.key = value; 형식으로 프로퍼티 추가 obj.name = ‘Kim’; 프로퍼티 값 접근 obj.[’key이름’] 으로 접근 obj.key이름 으로 접근 갱신은 접근 후 = 새로운 값으로 값 갱신 프로퍼티 값 삭제 delete obj.key이름 으로 프로퍼티 삭제 프로퍼티 출력 for-in 문 사용 for (var prop in obj) { console.log(..

배열(Array) 배열은 순서가 있는! 데이터 집합 0으로 시작하는 숫자형 인덱스 - 배열의 각 요소는(element) 인덱스로 접근 length 프로퍼티를 가지며, length를 조정하여 배열의 길이를 조절할 수 있다. (줄이면 제거, 늘리면 empty) 배열 Class(static) Methods 순수 함수(pure functions) concat, join, values indexOf, lastIndexOf, includes, findIndex, findLastIndex slice, entries, flat find, findLast some, every, map, filter forEach, reduce 비 순수 함수(non-pure functions) push, pop, shift, unshif..