1. JavaScript Engine 웹페이지에 JavaScript 파일을 로드하고 각각의 코드를 파싱해 실행하는 프로그램(인터프리터)으로, 크롬의 V8, 파이어폭스의 라이노, 사파리의 웹킷이 대표적인 자바스크립트 엔진. A. Call Stack 실행 중인 함수, 해당 함수의 지역 변수와 arguments 등 정적 데이터를 담고 있는 메모리 공간으로 가장 나중에 들어온 작업이 가장 처음에 나가는 방식(Last in, Fisrt out)으로 작동함. function foo(b) { let a = 10; return a + b + 11; } function bar(x) { let y = 3; return foo(x * y); } const baz = bar(7); bar() 함수가 실행되면 함수 bar()..
localStorage SessionStorage 특징 데이터를 브라우저 상에 저장해 새로고침을 해도 데이터가 보존됨 데이터 유지 조건 동일한 PC, 브라우저, 프로토콜 하나의 탭 key, value 저장 형태 문자열(DOMString) 문자열(DOMString) window.localStorage https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage localStorage.setItem('key', 'value'); // key - value 쌍 저장 방법 주의할 점 localStorage, sessionStorage 모두 key, value 쌍을 문자열로 저장하므로 객체를 저장하면 객체의 프로토타입이 모두 손실됨 const arr = [..
2022.03.24 - [Javascript] - (2022. 3. 24.) 유사 배열(Array-like) const divs = document.querySelectorAll('div'); let arr = [] Array.prototype.forEach.call(divs, (element, index) => { arr.push(element.innerText) }) console.log(arr) // ["내용1", "내용2", "내용3", ... ] Function.prototype.call() 메서드를 이용해서 유사 배열에서 배열의 메서드를 사용할 수 있음. 하지만 Array.prototype.forEach() 메서드에도 this를 매개변수(thisArg)로 넣을 수 있는데 두 방법의 차이에 대해..
1. This Javascript는 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체를 동적으로 결정함. 동일한 함수라 하더라도 함수를 호출할 때마다 달라질 수 있음. this 비고 전역에서 선언된 변수 window 함수 window 내부함수 지정되지 않음 외부함수가 일반, 메서드, 콜백이든 상관없이 객체 메서드 해당 객체 new를 이용한 생성자 함수 호출 생성자 함수로 생성된 객체 화살표 함수 상위 스코프의 this A. 일반 함수, 객체 메서드 var age = 100; let ken = { age: 35, foo: function bar() { console.log(this.age); } }; let wan = { age: 31, foo: ken.foo } let foo ..
① 배열은 아니지만: 배열의 메서드를 사용할 수 없음 ② 배열의 특성을 갖는 객체 - 숫자로 인덱싱이 되어 있고(0, 1, 2, ...) - length 프로퍼티를 가지고 있음: length 프로퍼티가 없다면 유사 배열로 인식하지 않음 const arrLike = { // 유사배열의 예 0: "내용1" 1: "내용2" 2: "내용3" 3: "내용4" length: 4 } document.querySelectorAll 메서드를 이용해 결과로 얻은 객체는 [[Prototype]]이 Array가 아닌 것에서 알 수 있듯이 유사 배열이므로 Array의 매서드를 사용할 수 없음. ES6부터 NodeList에 forEach 메서드가 추가되었기 때문에 forEach 사용이 가능하지만 IE에서는 NodeList.pro..
2022.03.07 - [HTML, CSS] - (2022. 3. 7.) document.addEventListener() 위 글에서 document.addEventListener는 document 내부에 있는 모든 요소에 대해 반응함을 알 수 있음. document 이벤트가 내부의 요소와 요소의 이벤트에 반응했던 이유는 이벤트 위임(Event Delegation) 때문. 1. 이벤트의 발생 단계 1. 캡처링 단계(Capture Phase): 이벤트가 DOM tree 하위 노드로 전파되는 단계 ※ addEventListener의 capture 옵션 기본값이 false이므로 캡처링 단계에서는 이벤트 발생되지 않음 2. 타겟 단계(Target Phase): 이벤트가 실제 타겟 노드에 전달되는 단계 * 타겟 ..
1. 클로저(Closure) 선언된 당시의 환경(lexical environment)을 기억하여 그 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수들의 조합. 즉, 1. 어떠한 함수에 내부 함수가 존재하면서, (외부함수에 의해 return된 함수일 필요는 없음) 2. 그 내부함수가 호출된 위치가 아닌, 자신이 선언된 위치에서의 scope를 참조하는 함수가 존재 (자신의 scope + 외부함수의 scope를 가짐) 2022.03.09 - [Javascript] - 변수의 선언(const, let, var)과 Scope // 1. 클로저의 예시 function outer1() { let x = 1; return function (y) { return y + x }; } // 2. 클로저가 아님! fu..
1. 스코프(Scope) 참조의 대상이 되는 식별자(변수, 함수 등)를 찾기 위한 규칙으로, 변수 접근의 유효 범위를 나타냄. - 전역에서 선언된 변수는 코드 블럭 어디에서든 참조가 가능함. - 함수 내부에서 선언된 변수는 함수 내부에서만 참조할 수 있고, 함수 외부에서는 참조가 불가능함. - 함수 내부에서 선언된 변수는 해당 함수의 내부 함수에서 참조할 수 있음. ① 지역 스코프: 함수 및 해당 함수의 내부 함수 코드 블럭에서만 참조할 수 있는 것 ② 전역 스코프: 모든 코드 블럭에서 참조할 수 있는 것 A. Lexical Scope( = Static Scope) 함수, 변수가 '선언'된 위치에 따라 상위 scope가 결정되는 방식. ① Function Scope: 함수 내부에서 선언된 변수는 해당 함..
event.currentTarget 메서드를 사용할 때 왜 HTML 텍스트 입력에 대해서는 event.currentTarget.value를 쓰고, 드롭다운 목록에 대해서는 event.currentTarget.options를 쓰는가? 1 2 3 HTML 로 드롭다운 목록을 선택하는 이벤트가 발생할 때 event.currentTarget은 HTML Select Element을 가리킴. 특히, HTML Select Element의 property 중에서 options는 HTML Options Collection을 반환함. 코드 결과 Prototype event.currentTarget HTML Select Element HTML Element event.currentTarget.options HTML Opti..
1. 프로토타입(Prototype) javascript은 기존의 객체를 복사해 새로운 객체를 생성하는 프로토타입 기반의 언어. 프로토타입 기반 언어는 객체의 원형인 프로토타입을 이용해 새로운 객체를 만들어 내며, 이 과정으로 생성된 객체는 또 다른 객체의 프로토타입이 될 수 있음. // ES6 이전의 class 구현 function Person(personAge) { this.age = personAge; }; Person.prototype.getType = function () { retun "사람"; }; let joon = new Person(14); let jisoo = new Person(29); 함수 Person()는 Person.prototype의 생성자 함수(constructor)이고, 메..
JavaScript 2022. 3. 29. 22:08
1. JavaScript Engine 웹페이지에 JavaScript 파일을 로드하고 각각의 코드를 파싱해 실행하는 프로그램(인터프리터)으로, 크롬의 V8, 파이어폭스의 라이노, 사파리의 웹킷이 대표적인 자바스크립트 엔진. A. Call Stack 실행 중인 함수, 해당 함수의 지역 변수와 arguments 등 정적 데이터를 담고 있는 메모리 공간으로 가장 나중에 들어온 작업이 가장 처음에 나가는 방식(Last in, Fisrt out)으로 작동함. function foo(b) { let a = 10; return a + b + 11; } function bar(x) { let y = 3; return foo(x * y); } const baz = bar(7); bar() 함수가 실행되면 함수 bar()..
JavaScript 2022. 3. 28. 16:26
localStorage SessionStorage 특징 데이터를 브라우저 상에 저장해 새로고침을 해도 데이터가 보존됨 데이터 유지 조건 동일한 PC, 브라우저, 프로토콜 하나의 탭 key, value 저장 형태 문자열(DOMString) 문자열(DOMString) window.localStorage https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage localStorage.setItem('key', 'value'); // key - value 쌍 저장 방법 주의할 점 localStorage, sessionStorage 모두 key, value 쌍을 문자열로 저장하므로 객체를 저장하면 객체의 프로토타입이 모두 손실됨 const arr = [..
JavaScript 2022. 3. 26. 18:14
2022.03.24 - [Javascript] - (2022. 3. 24.) 유사 배열(Array-like) const divs = document.querySelectorAll('div'); let arr = [] Array.prototype.forEach.call(divs, (element, index) => { arr.push(element.innerText) }) console.log(arr) // ["내용1", "내용2", "내용3", ... ] Function.prototype.call() 메서드를 이용해서 유사 배열에서 배열의 메서드를 사용할 수 있음. 하지만 Array.prototype.forEach() 메서드에도 this를 매개변수(thisArg)로 넣을 수 있는데 두 방법의 차이에 대해..
JavaScript 2022. 3. 24. 21:43
1. This Javascript는 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체를 동적으로 결정함. 동일한 함수라 하더라도 함수를 호출할 때마다 달라질 수 있음. this 비고 전역에서 선언된 변수 window 함수 window 내부함수 지정되지 않음 외부함수가 일반, 메서드, 콜백이든 상관없이 객체 메서드 해당 객체 new를 이용한 생성자 함수 호출 생성자 함수로 생성된 객체 화살표 함수 상위 스코프의 this A. 일반 함수, 객체 메서드 var age = 100; let ken = { age: 35, foo: function bar() { console.log(this.age); } }; let wan = { age: 31, foo: ken.foo } let foo ..
JavaScript 2022. 3. 24. 21:18
① 배열은 아니지만: 배열의 메서드를 사용할 수 없음 ② 배열의 특성을 갖는 객체 - 숫자로 인덱싱이 되어 있고(0, 1, 2, ...) - length 프로퍼티를 가지고 있음: length 프로퍼티가 없다면 유사 배열로 인식하지 않음 const arrLike = { // 유사배열의 예 0: "내용1" 1: "내용2" 2: "내용3" 3: "내용4" length: 4 } document.querySelectorAll 메서드를 이용해 결과로 얻은 객체는 [[Prototype]]이 Array가 아닌 것에서 알 수 있듯이 유사 배열이므로 Array의 매서드를 사용할 수 없음. ES6부터 NodeList에 forEach 메서드가 추가되었기 때문에 forEach 사용이 가능하지만 IE에서는 NodeList.pro..
JavaScript 2022. 3. 16. 21:28
2022.03.07 - [HTML, CSS] - (2022. 3. 7.) document.addEventListener() 위 글에서 document.addEventListener는 document 내부에 있는 모든 요소에 대해 반응함을 알 수 있음. document 이벤트가 내부의 요소와 요소의 이벤트에 반응했던 이유는 이벤트 위임(Event Delegation) 때문. 1. 이벤트의 발생 단계 1. 캡처링 단계(Capture Phase): 이벤트가 DOM tree 하위 노드로 전파되는 단계 ※ addEventListener의 capture 옵션 기본값이 false이므로 캡처링 단계에서는 이벤트 발생되지 않음 2. 타겟 단계(Target Phase): 이벤트가 실제 타겟 노드에 전달되는 단계 * 타겟 ..
JavaScript 2022. 3. 12. 15:45
1. 클로저(Closure) 선언된 당시의 환경(lexical environment)을 기억하여 그 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수들의 조합. 즉, 1. 어떠한 함수에 내부 함수가 존재하면서, (외부함수에 의해 return된 함수일 필요는 없음) 2. 그 내부함수가 호출된 위치가 아닌, 자신이 선언된 위치에서의 scope를 참조하는 함수가 존재 (자신의 scope + 외부함수의 scope를 가짐) 2022.03.09 - [Javascript] - 변수의 선언(const, let, var)과 Scope // 1. 클로저의 예시 function outer1() { let x = 1; return function (y) { return y + x }; } // 2. 클로저가 아님! fu..
JavaScript 2022. 3. 9. 20:03
1. 스코프(Scope) 참조의 대상이 되는 식별자(변수, 함수 등)를 찾기 위한 규칙으로, 변수 접근의 유효 범위를 나타냄. - 전역에서 선언된 변수는 코드 블럭 어디에서든 참조가 가능함. - 함수 내부에서 선언된 변수는 함수 내부에서만 참조할 수 있고, 함수 외부에서는 참조가 불가능함. - 함수 내부에서 선언된 변수는 해당 함수의 내부 함수에서 참조할 수 있음. ① 지역 스코프: 함수 및 해당 함수의 내부 함수 코드 블럭에서만 참조할 수 있는 것 ② 전역 스코프: 모든 코드 블럭에서 참조할 수 있는 것 A. Lexical Scope( = Static Scope) 함수, 변수가 '선언'된 위치에 따라 상위 scope가 결정되는 방식. ① Function Scope: 함수 내부에서 선언된 변수는 해당 함..
JavaScript 2022. 3. 7. 22:13
event.currentTarget 메서드를 사용할 때 왜 HTML 텍스트 입력에 대해서는 event.currentTarget.value를 쓰고, 드롭다운 목록에 대해서는 event.currentTarget.options를 쓰는가? 1 2 3 HTML 로 드롭다운 목록을 선택하는 이벤트가 발생할 때 event.currentTarget은 HTML Select Element을 가리킴. 특히, HTML Select Element의 property 중에서 options는 HTML Options Collection을 반환함. 코드 결과 Prototype event.currentTarget HTML Select Element HTML Element event.currentTarget.options HTML Opti..
JavaScript 2022. 3. 6. 21:22
1. 프로토타입(Prototype) javascript은 기존의 객체를 복사해 새로운 객체를 생성하는 프로토타입 기반의 언어. 프로토타입 기반 언어는 객체의 원형인 프로토타입을 이용해 새로운 객체를 만들어 내며, 이 과정으로 생성된 객체는 또 다른 객체의 프로토타입이 될 수 있음. // ES6 이전의 class 구현 function Person(personAge) { this.age = personAge; }; Person.prototype.getType = function () { retun "사람"; }; let joon = new Person(14); let jisoo = new Person(29); 함수 Person()는 Person.prototype의 생성자 함수(constructor)이고, 메..