본문 바로가기

programming/Javascript

 (21)
자바스크립트의 형 변환(+ null & undefined 차이) 자바스크립트는 느슨한 타입언어, 동적 타입언어, 변수의 타입을 미리 선언할 필요가 없다. 프로그램이 처리되는 과정에서 자동으로 파악되고, 같은 변수라도 상황에 따라 타입이 바뀔 수도 있다. 자바스크립트는 컴파일 과정 없이 실행과 동시에 해석을 하는 인터프리터 언어 자바스크립트의 형변환은 2가지로 일어난다 (명시적형변환/암시적 형변환) 1. 명시적 형변환 string, number, boolean 타입으로 이루어진다 의도적으로 형태를 변형해서 사용하겠다는 것 String(123) String(NaN) Number('') //0 Number('123') //123 ParseInt('123a') //123 Boolean("") //false 2. 암시적 형변환 연산할 때 일어난다. 문자열이 하나라도 포함되면 ..
이벤트 버블링과 캡처링 캡처링과 버블링을 간단히 정의하면 다음과 같다. 캡처링 - window 로부터 이벤트가 발생한 요소까지 이벤트를 전파한다. 버블링 - 이벤트가 발생한 요소부터 window 까지 이벤트를 전파한다. 버블링 버블링과 캡처링 ko.javascript.info 버블링(bubbling)의 원리는 간단합니다. 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 3개의 요소가 FORM > DIV > P 형태로 중첩된 구조를 살펴봅시다. 요소 각각에 핸들러가 할당되어 있습니다. 사례) 테이블의 경우에 테이블 전체(event.currentTarget)에 이벤트를 ..
[Javascript] 실행 컨텍스트 실행하는 환경 실행되는 환경 실행되는 공간 컨텍스트의 원칙 먼저 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생깁니다. 컨텍스트 생성 시 컨텍스트 안에 변수객체(arguments, variable), scope chain, this가 생성됩니다. 컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수 객체 안에서 값을 찾고, 없다면 스코프 체인을 따라 올라가며 찾습니다. 함수 실행이 마무리되면 해당 컨텍스트는 사라집니다.(클로저 제외) 페이지가 종료되면 전역 컨텍스트가 사라집니다. '컨텍스트': { 변수객체: { arguments: [{ word : 'hello' }], variable: null, }, scopeChain: ['wow 변수객체', '전역 변수객체'], this: wi..
[Javascript] 스코프(Scope), 스코프체인, 렉시컬스코프 스코프 : 범위, 함수를 선언할 때 만들어진다. 전역변수 / 지역변수 스코프체인 : 찾는 변수가 내부에 없으면 외부로 -> 전역으로 이어서 찾아가는 것 내부에선 외부로 참조 가능, 외부에서 내부는 참조 불가 var globalName = 'globalName'; // 전역변수 function outer() { console.log('외부에서 전역호출', globalName);// 외부에서 전역호출 var outName = 'outName'; function inner() { console.log('내부에서 전역호출', globalName); //내부에서 전역호출 console.log('내부에서 외부호출', outName); var inName = 'inName'; } inner(); } outer(); ..
[Javascript] 함수선언문 & 함수표현식 & 화살표함수()=>{} 비교(호이스팅, this 관점에서) 호이스팅 관점에서의 차이 함수선언문은 함수 자체가 호이스팅 된다. 함수표현식은 함수 자체는 호이스팅 되지 않고, 변수가 호이스팅된다. 화살표함수는 함수표현식의 다른 표현(ES6에서 추가)으로 마찬가지로 함수는 호이스팅 되지 않고, 변수만 호이스팅된다. 선언하고, 사용하는게 정상적 로직이므로 함수표현식&화살표함수를 권장한다. case1) 함수 선언문은, 런타임 이전에 엔진에서 먼저 실행되어서 함수 자체를 호이스팅 한다. console.dir(plus) // output: ƒ plus(x, y) console.log(plus(2, 5)) // output: 7 // 함수 선언문 function plus(x, y) { return x+y } case2) 함수 표현식은 런타임 이전에 변수에 undefined라고..
[Javascript] 제너레이터 (Generator) 이터러블, 이터레이터와 비교 generator yield는 제너레이터 함수 안에 존재 next는 함수 밖에서 호출되는 메서드, yield를 순서대로 부름 function* generateSequence() { yield 1; yield 2; return 3; } let generator = generateSequence(); console.log(generator.next()); // {value: 1, done: false} console.log(generator.next()); console.log(generator.next()); console.log(generator.next()); [실행결과] 어디서 많이 봤다. 어디서? Symbol.iterator() 메소드가 반환하는 값 = interator const array = [..
[Javascript] (iterable 프로토콜, iterator 프로토콜) of [iteration 프로토콜] ES6에서 도입됨 이터러블은 데이터 공급자의 역할 다양한 이터러블이 각자의 순회방식을 갖는다면, 데이터 소비자는 모든 방식을 각각 지원해야한다. 효율성을 위해 프로토콜(규칙)을 정의 이터러블은 Lazy evaluation(지연평가)를 통해 값을 생성한다. 100개의 값이 필요할때 처음부터 100개를 만드는 것이아니고, 하나씩 next -> next-> next로 하나씩 만든다. 할당이 이루어지기 전까지는 데이터를 생성하지 않는다. iteration 프로토콜 데이터 컬렉션을 순회하기 위한 프로토콜(규칙) 이터레이션 프로토콜(규칙)을 준수한 객체는 for문으로 순회할 수 있고, spread문법으로 펼칠 수 있다. 이터레이션 프로토콜 (대분류) 안에 이터러블 프로토콜과 이터레이터 프로토콜이 있다. iterab..
[Javascript] Callback 과 Promise 와 async-await 폴더구조 data.json 파일 내용 { "hello" : "world" } package.json 만드는 방법 npm init --yes [index.js 작성] 파일을 읽는 javascript 파일 시스템 모듈 import fs from 'fs' // 프로미스를 리턴 import fsPromise from 'fs/promises' 콜백함수로 표현 import fs from 'fs'; fs.readFile('data.json', 'utf-8', (err, data) => { if(err) { console.log(err) return } console.log("callback", data) }); Promise로 표현 import fsPromise from 'fs/promises' fsPromise.r..
[Javascript] 엔진 구조와 동작 방식 자바스크립트 엔진의 구조 Heap : 메모리 할당을 담당 Stack : 1개의 stack = single Thread = 동기적 실행, 호출된 시점에 Stack 이 쌓인다. 실제 업무 수행 담당 Web API : 비동기적 task를 수행하는 곳, 비동기적 task 예시) setTimeout, AJAX, 이벤트리스터, Promise.then Callback Queue : 비동기 task 다 끝나면 들어가는 곳, microtask Q > animation Frame Q > task Q(event Q) 세가지의 Q가 내부에 존재하고, 순서대로 우선순위를 갖는다. Event Loop : Stack 의 상태를 계속 주시하다가, 비어있는 순간 콜백큐의 task를 stack으로 집어넣어준다. [실행 코드 예시] co..
[Javascript] 클로저란? private 변수, 메소드의 관점 여러가지 정의들 중에, 개인적으로 좀 더 직관적으로 받아들여 졌던 정의는, 다음과 같다 클로저란, 생성한 시점의 스코프체인을 기억하여, 비공개 변수를 가질수 있는 환경에 있는 함수이다. 이 외, 다른 정의들 MDN) 클로저는 독립적인 변수를 가리키는 함수이다. 또는 클로저 안에 정의된 함수는 만들어진 환경을 기억한다. 함수와 렉시컬 환경의 조합 함수가 생성될 당시의 외부변수를 기억하여 생성 이후에도 계속 참조가 가능한 것 생성한 시점의 스코프체인을 계속 들고있는 함수 일단 실무에서는 private 변수를 사용하기 위한 것으로 많이 쓰인다. 선행지식 스코프체인 스코프는 일단 범위라는 뜻인데, 간단하게 브라켓{}, 블록 안 저장소라고 생각하자. 블록별로 (if문, 함수선언문, while...등) 자기만의 스..

티스토리툴바