Front-end/JS31 자바스크립트 클로저 Closure 📌 일단 Lexical Scope? Dynamic Scope? ◾ Lexical Scope 함수나 변수의 스코프를 선언된 위치를 기준으로 정함 ( Compile 시점 ) ◾ Dynamic Scope 함수나 변수의 스코프를 호출된 시점을 기준으로 정함 ( Runtime 시점 ) // 01 Lexical Scope와 Dynamic Scope 비교 let x = 1; function print() { console.log(x); // Lexical Scope : 1 -> 선언된 위치 기준 / 변수 x 전역 스코프 } function foo() { let x = 100; print(); // Dynamic Scope : 100 -> 호출된 시점 기준 / 변수 x 지역 스코프 } foo(); // 02 내부 함수.. 2021. 8. 27. 자바스크립트 배열 고차함수 forEach / map 📍 Array.prototype.forEach ( immutable △ ) 함수형 프로그래밍 은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고, 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다. forEach 메서드는 for문을 대체할 수 있는 고차함수다. 반복문을 추상화한 고차 함수로서 내부에서 반복문을 통해 자신을 호출한 배열을 순회하면서 수행해야 할 처리를 콜백 함수로 전달받아 반복 호출한다. const number = [1, 2, 3]; const pows = []; numbers.forEach(item => pows.push(item ** 2)); console.log(pows); // [1, 4, 9]; 🔔 forEac.. 2021. 8. 23. 자바스크립트 배열 메서드 Array Method (계속 추가중) ◾ Array.isArray ( immutable ) // true Array.isArray([]); Array.isArray([1, 2]); Array.isArray(new Array()); 전달된 인수가 배열이면 true, 배열이 아니면 false를 반환한다. 배열과 객체를 구분할 때 typeof 대신 Array.isArray를 사용한다. ◾ Array.prototype.indexOf ( immutable ) const arr = [1, 2, 2, 3]; // 배열 arr에서 첫 번째로 검색된 요소 2의 인덱스를 반환한다. arr.indexOf(2); // 1 // 배열 arr에 요소 4가 없으므로 -1을 반환한다. arr.indexOf(4); // -1 // 두 번째 인수는 검색을 시작할 인덱스다... 2021. 8. 21. 자바스크립트 배열 고차함수 reduce 📍 Array.prototype.reduce ( immutable ) reduce 메서드는 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백함수를 반복 호출한다. 그리고 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫번째 인수로 전달하면서 콜백 함수를 호출하여, 하나의 결과값을 만들어 반환한다. // 1부터 4까지 누적을 구한다. // 숫자끼리 값을 더할 때는 초기값을 0으로 설정하지 않아도 값이 나오지만 // 그래도! 그래도! 초기값을 넣어주는 게 좋다. const sum = [1, 2, 3, 4].reduce( // 콜백 함수 (accumulator, currentvalue, index, array) => { accumulator + currentvalue }, // 초기값 0);.. 2021. 8. 15. 자바스크립트 문서 객체 모델 DOM (Document Object Model) Achivement Goals ✅ DOM의 개념을 이해할 수 있다. ✅ DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 알 수 있다. ✅ HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해할 수 있다. 📌 웹 페이지는 어떻게 만들어지는가? 웹 브라우저는 원본 HTML문서를 읽고, Style을 입히고, 대화형 페이지로 만들고, 뷰포트에 표시하는 등 해석 과정을 거친다. 이렇게 해석하는 과정을 "Critical Rendering Path"라고 한다. 🏁 Critical Rendering Path Critical Rendering Path 01 Constructing the DOM Tree 02 Constructing the CSSOM Tree 03 Running JavaS.. 2021. 8. 14. 자바스크립트 배열 Array 📌 자바스크립트의 배열은 배열이 아니다? 자료 구조data structure에서 말하는 "배열" === 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료 구조. 즉, "배열"의 요소는 하나의 데이터 타입으로 통일되어 있으며, 서로 연속적으로 인접해 있다. ( 밀집 배열dense array ) 하나의 데이터 타입으로 통일되어있다는 얘기는 각 요소가 동일한 데이터 크기를 가진다는 뜻과 일맥상통하다. 일반적인 배열 장단점 장점: 인덱스로 요소에 빠르게 접근할 수 있다. 단점: 특정 요소를 검색/삽입/삭제하는 경우에는 비효율적이다. 즉, 자바스크립트의 배열은 연속적으로 이어져 있지 않을 수 있다. ex. 희소 배열 즉, 자바스크립트의 배열은 요소를 위한 각각의 메모리 공간이 동일한 크기를 갖지 않아도.. 2021. 8. 13. 자바스크립트 원시 타입 & 객체 타입 Primitive type & Reference type 📌 원시 타입? 객체 타입? 자바스크립트가 제공하는 7가지 데이터 타입들을 크게 원시 타입primitive type과 객체 타입object/reference type으로 구분할 수 있다. 📌 원시 타입과 객체 타입 특징 💡 원시 타입 primitive type 특징 01 원시 값은 "변경 불가능"한 값이다. --> immutable value --> 데이터의 신뢰성을 보장한다. 02 원시 값을 변수에 할당하면, 변수 (확보된 메모리 공간) 에는 실제 값이 저장된다. 원시 값이 변하지 않는 건 사실이지만, 변수에 저장된 원시 값은 재할당을 통해 새로운 값을 줄 수 있다. 그러나 이 경우도 원래 변수에 할당된 원시 값을 새로운 값으로 교체하는 것이 아니라, 변수가 참조하던 메모리 공간의 주소를 변경해 새롭게.. 2021. 8. 12. 자바스크립트 문자열 String 📌 String 생성자 함수 const strObj = new String(); console.log(strObj); // String{length: 0, [[PrimitiveValue]]: ""} // [[PrimitiveValue]]는 [[StringData]] 내부 슬롯이다 ❗ String 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면, [ [ StringData ] ] 내부 슬롯에 빈 문자열을 할당한 String 래퍼 객체를 생성한다. String 래퍼 객체 === 유사 배열 객체 const strObj = new String('Lee'); console.log(strObj); // String{0:"L", 1:"e", 2:"e", length: 3, [[PrimitiveVal.. 2021. 7. 24. 자바스크립트 제어문 Control flow statement Achivement Goals 🏁 조건문 ✅ truthy와 falsy 가 조건문에서 작동하는 방식을 이해할 수 있다. ✅ 비교연산자를 통한 엄격한 비교(=== , !==)에 대해 이해할 수 있다. ✅ if 와 else if , else를 이해하고 무리없이 활용할 수 있다. ✅ 논리연산자를 (&&, ||, ! ...)을 통해 복잡한 조건을 간결하게 작성할 수 있다. 🏁 반복문 ✅ 반복문을 활용하여 단순한 기능을 반복하여 수행할 수 있다. ✅ for문과 문자열, 숫자를 이용해 반복적으로 코드를 실행시킬 수 있다. ✅ 기본적인 for문 (for (let i = 0; i < 5; i++))을 응용하여 다양한 for문을 만들 수 있다. ✅ for와 while의 차이에 대해서 설명할 수 있다. ✅ 반복문에 조건문을.. 2021. 7. 23. 이전 1 2 3 4 다음
