Im Bay

함수(Function) 함수는 하나의 단위로 실행되는 문(statement)들의 묶음. 함수도 객체(Object) 호출 당시에 평가되고 실행된다. 함수 생성 방식 함수 선언문 function f() {…} (function() {…} 익명 함수 표현식) 함수 표현식 const f1 = function ff() {…} const f2 = function() {…} 즉시 호출 함수(IIFE, Immediately Invoked Function Expression) (function() { … }) (); 불필요한 전역 변수와 메모리 낭비를 줄일 수 있다. 화살표 함수(Arrow Function) non-constructor, 함수를 반환하는 고차 함수에 사용하기 좋다. const f3 = () ⇒ {…}; ..

Global Object (전역 객체) JS engine process 생성(시작) 시 맨 먼저 생성 BuiltIn(standard) propertoes & functions host object(browser, node API) 및 var/function object도 보유 전역 변수는 전역 객체에 영원히(process 종료시까지) 존재한다. 직접 생성(컨트롤) 못하고 window(globalThis) 키워드 생략 가능 const/let은 전역 객체가 아닌 Declarative Enviroment Record에 별도 생성 선언이 없는 식별자는 암묵적 전역으로 전역 객체에 등록된다. (ex. ig = 1;) encode/decode URI encodeURI(), decodeURI() 서버가 인식할 수 있..

할당 ex) let x, y; x = y = 9; x +=y; x %= y; x &= y; x ^= y; object ex) const u = {id: 1, name: ‘hong’, age: 29}; let {id, name, addr} = u; let {id, …info} = u; ({id, name} = u); const arr = [1, 2, 3, 4, 5]; let [a, b, …c] = arr; [a, b] = [b, a]; 구조 분해 할당(destructuring) Object Destructuring const {id, name} = {id:1, name:’Hong’}; Array / Iterator Destructuring const [a, b] = [1, 2]; Default Value ..

연산자의 종류 산술 연산자 이항 연산자: +, -, *, /, %, 부호 단항 연산자: ++, — 하지만 증감 연산자는 풀어쓰자 할당 연산자 let {id} = user; 문자열 연결(병합) 연산자 ex) s + ‘bc’; 비교 연산자 === typeof, instanceof, isArray 논리 비교 연산자 ! ==, isNaN() 삼항조건 연산자 ex) n > 0 ? n : s; 쉼표 연산자, 그룹 연산자 ex) q = (p = x = 1, y = 2, z = 3); 지수 연산자 ex) 2 ** 3; ⇒ 8 옵셔널체이닝 연산자 ex) arr?.length; ⇒ 0 Null 병합 연산자 ex) arr = arr ?? []; (null이거나 undefined면 [] 할당, 출력) 비트 연산자 나머지 연산..

형 변환 (Type Conversion/Casting) 문자열 병합 연산자 병합 연산자 5 + ‘30’; ⇒ 문자열로 형 변한되어 530 으로 출력 산술 연산자 5 * '30'; 같이 실행해도 형 변환되어 150으로 출력 암묵적(강제) 형변환 (Implicit coercion, Type coercion) 해당 라인 (문, statement)에서만 형 변환되고 다시 원복 예로 i = 100; 선언 후 i.toString(); 하면 ‘100’ 으로 출력한다. 하지만 다음 줄에서 typeof i 를 적으면 i는 number type으로 나온다! 이렇게 해당 라인에서만 형 변환되고 원복된다. Hoisting(호이스팅, scope: 전역, 함수, 블럭, 모듈, …) JS 함수는 실행되기 전에 함수 안에 필요한 변..

JavaScript HTML, CSS와 함께 웹을 구성하는 요소 중 하나 인 스크립트 언어 웹 페이지에서 동작하는 것을 담당한다. parameter, argument argument(인자) 어떤 함수가 호출될 때 전달하는 값 parameter(매개변수) 전달된 값을 받아들이는 변수 primitive(call-by-value) vs object(call-by-reference) call by value 값에 의한 호출 (값을 복사) 숫자, 문자열, boolean, null, undefined 같은 기본형(원시형)을 인자로 매개변수에게 넘길 때 사용 방식 값을 복사, 보존. 하지만 메모리 사용량 늘어남 call by reference 참조에 의한 호출 (주소를 복사) 배열, 객체, 함수, 날짜, 정규표현식 ..

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

JavaScript - 모듈(Module) ESM을 써야하는 이유(nodejs) require시에 destructuring(구조 해제)가 된다. → module의 변수 값을 변경할 수 있다. (보안 취약) tree-shaking & bundling Tree shaking (ESM) 죽은 코드 제거의 한 형태 (사용하지 않는 코드 제거) 정적(구문) 분석을 통해 대상 선별 가능 대상: 최상위 코드, 함수 내부와 동적 import에서 사용되지 않는 코드 Bundling : Babel + Webpack/Rollup Bundling 여러 개로 흩어져 있는 파일들을 하나의 파일로 모아주는 역할 Babel JS의 컴파일러이며, 최신 버전의 JS가 실행되지 않는 구 버전의 브라우저에서 정상적으로 실행되도록 변환해준다..

JavaScript - 문자열과 정규 표현식 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); conso..

JavaScript - 객체 지향 프로그램 정적 필드 / 메소드 - Class(Static) Field / Method 특정 인스턴스와 무관하고 Class에 존재하는 함수(method) static 영역에 생성 인스턴스 프로퍼티를 참조할 수 없다. JavaScript는 public, private 만 있다! proctected 없음 Singleton Pattern 싱글톤 패턴 클래스 가져올 때 new 사용하지 말고 const 변수 = 클래스.getInstance(); 형식으로 가져온다. getInstance() static getInstace() { return this.#_instance || new this(); } Overriding 부모(super)의 함수(method)를 재정의 Accessor ..