Front-end/JS31 커링 Currying 과 클로저 📍 클로저 간단 복습 클로저는, 현재의 유효범위를 넘어 스코프 체인으로 연결된 객체나 변수를 참조할 수 있게 해준다. 간단하게는 "함수와 함수가 선언된 어휘적 환경의 조합" 으로 정의된다. ✔ 장점 • 함수 내에 있는 변수를 재활용할 수 있다. • 참조하고 있는 변수를 외부에 노출시키지 않을 수 있다. 은닉 가능 ✔ 단점 • 클로저 함수를 남발하면 메모리 누수가 발생한다. 📌 커링을 공부하게 된 계기 코드를 작성하면서 은연중에 클로저를 사용하고 있다는 건 안다. 하지만 효과적으로 사용하고 있냐는 질문에는 자신있게 대답을 못하겠더라 .. ㅎ 그래서 실제 클로저 예시를 찾아보게 되었다 !-! 📌 커링 Currying 커링은 f(a, b, c) 처럼 단일 호출로 처리하는 함수를 f(a)(b)(c) 와 같이 각.. 2022. 4. 11. 자바스크립트 프로토타입 Prototype (2) 📌 프로토타입 (객체) ? ❗ 객체 간 상속inheritance을 구현하기 위한 핵심 개념 ❗ ❗ 프로토타입의 프로토타입은 언제나 Object.prototype ❗ 프로토타입은 어떤 객체의 상위 객체(부모 객체)의 역할을 하는 객체로, 다른 객체에 공유 프로퍼티/메서드를 제공한다. 프로토타입을 상속받은 하위 객체(자식 객체)는 상위 객체의 프로퍼티/메서드를 본인의 프로퍼티/메서드처럼 자유롭게 사용할 수 있다. 📌 객체 생성 방식과 프로토타입 결정 😮 (진심으로 너무 다양한) 객체 생성 방법들 ... ✔ 객체 리터럴 ✔ Object 생성자 함수 ✔ 생성자 함수 (new 연산자) ✔ Object.create 메서드 ✔ 클래스(ES6) 📍 객체 리터럴 객체 리터럴에 의해 생성되는 객체의 프로토타입은 Objec.. 2022. 4. 4. this 와 this binding 📌 this 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 self-referencing-variable 이다. this 를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 property 나 method 를 참조할 수 있다. 단, this 가 가리키는 값 (this 바인딩) 은 함수 호출 방식에 의해 동적으로 결정된다. 1. 일반 함수 호출 2. 메서드 호출 3. 생성자 함수 호출 4. Function.prototype.apply/call/bind 메서드에 의한 (간접) 호출 📎 일반 함수 호출 기본적으로 this 에는 전역 객체(global object)가 바인딩된다. (어떠한 함수[중첩 함수, 콜백 함수 포함]라도 일반 함수로 호출되면 this 에 전역 객체가 바인딩.. 2022. 4. 2. 자바스크립트 프로토타입 Prototype (1) (원시 타입을 제외했을 때) 자바스크립트를 이루고 있는 모든 것은 객체다. 📌 객체지향 프로그래밍 특징? 명령형 프로그래밍 객체지향 프로그래밍 ✔ 그래서, 객체지향 프로그래밍이 뭔데 ? 프로그램을 객체의 집합 으로 표현하려는 프로그래밍 패러다임 이다. 📎 객체 Object 📎 메서드 Method 📎 속성 Property 객체지향 프로그래밍은 실제 세계의 실체를 인식하는 철학적인 사고를 프로그래밍에 접목한 결과다. 현실에서 사물이나 개념은 각자의 '속성'을 가지고 있기 때문에 이를 기준으로 실체를 인식하거나 구분한다. 이 방식을 프로그래밍에 접목시켜보면, 하나의 객체(사물)는 상태(사물의 색상, 너비, 무게)와 동작(사물의 부피를 구하는 수식)으로 표현할 수 있다. 상태 state는 속성 property/.. 2022. 3. 9. 22.02.17 면접 Q & A 📌 자바스크립트는 동기적 언어인가 비동기적 언어인가 ? 📌 자바스크립트의 "동기"와 "비동기"에 대해 아는대로 말해보기 자바스크립트는 동기적 언어입니다. 자바스크립트의 엔진이 싱글 스레드로 동작하기 때문에, 코드를 순서대로 읽을 수밖에 없습니다. 동기적인 언어의 문제점은, 해당 태스크를 끝내기 전까지는 아무것도 처리할 수 없다는 점입니다. 일례로 데이터를 불러오는 작업과 UI 컴포넌트의 렌더링 작업이 차례로 진행된다고 했을 때, 데이터가 모두 불러오기 전까지 화면이 하얗게 뜨는 문제가 발생할 수 있습니다. 반대로 UI 컴포넌트를 먼저 렌더링하더라도 컴포넌트에 할당된 이벤트가 동작되지 않는 문제를 야기할 수 있습니다. 이를 해결하기 위해 브라우저 엔진에 내장된 비동기 메서드를 사용합니다. fetch( ) .. 2022. 2. 18. 자바스크립트가 data 를 저장하는 방법 (메모리 저장 방식) 📍 당신이 선언한 변수는 스스로에게 할당된 값을 모 른 다. 우리가 변수로 선언하고 지정하는 모든 것은 "식별자"이다. 식별자란, 메모리 공간에 저장되어 있는 어떤 값을 구별(식별)해 낼 수 있는 고유한 이름이다. 즉, 식별자는 값이 아니라 값이 저장된 메모리 주소를 기억한다. --> 원시 타입과 객체 타입 모두에 해당되는 내용이기 때문에 굉장히 중요함 다음과 같은 방식으로 원시 타입의 값을 복사하게 되면 1또는 2와 같은 일이 일어난다. const num = 5; const copyNum = num; console.log(num === copyNum) // true // 원시 값을 할당한 변수를 다른 변수에 할당하는 것을 "깊은 복사"라고 부르기도 한다. (공식 x) 1. 새로운 메모리 공간을 할당하여.. 2022. 2. 15. 22.02.14 면접 Q & A 📌 원시 자료형과 참조 자료형의 차이 말해보기 원시 자료형은 (할당 후에) 변경 불가능한 데이터 타입이고, 참조 자료형은 (할당 후에) 변경 가능한 데이터 타입이다. 원시 자료형은 메모리에 저장될 때 값 그 자체가 저장되지만, 참조 자료형은 값의 참조 값, 즉 값의 주소가 저장되는 차이가 있습니다. 📍 과거 학습 내용 복습 2021.08.12 - [Front-end/JS] - 자바스크립트 원시 타입 & 객체 타입 Primitive type & Reference type 자바스크립트 원시 타입 & 객체 타입 Primitive type & Reference type 📌 원시 타입? 객체 타입? 자바스크립트가 제공하는 7가지 데이터 타입들을 크게 원시 타입primitive type과 객체 타입object/re.. 2022. 2. 14. 22.02.13 면접 Q & A 📌 자바스크립트의 자료형[data type]이 필요한 이유 말해보기 모든 언어가 다 그렇지만, 원하는 값을 메모리에 저장하고 읽고, 사용하게 된다. 메모리에 값을 저장하기 위해선 저장되는 데이터의 크기를 알아야한다. 저장하기 위한 공간을 확보해야하기 때문이다. 데이터의 크기를 알 수 있게 하는 지표가 데이터 타입이다. -> 그래서 데이터 타입이 중요하다. 📌 자바스크립트의 자료형[data type]에 대해 말해보기 자바스크립트의 모든 값은 데이터 타입을 갖는다. 1. 숫자 타입 [number] | 모든 수를 64비트 실수 처리. 2. 문자열 타입 [string] | 16비트 유니코드 문자로 표현. 3. 불리언 타입 [boolean] | True / False 4. undefined 타입 [undefine.. 2022. 2. 13. 변수, 함수, 클래스 호이스팅 정리 📌 선언하는 모든 식별자는 호이스팅 된다 변수 선언문 (var, let, const), 함수 선언문 (function, function*), 클래스 선언문 (class) 은 모두 호이스팅이 일어난다. 📍 변수 ✔ var // var 키워드로 선언한 변수는 [1.선언 단계] & [2.초기화 단계]가 동시에 실행된다. // 따라서 변수 선언문 이전에 변수를 참조할 수 있다. console.log(VAR); // undefined var VAR; console.log(VAR); // undefined // 할당문에서 [3.할당 단계]가 실행된다. VAR = "var"; console.log(VAR); // "var" ✔ const ❗ const 키워드로 선언한 상수는 반드시 선언과 동시에 초기화 해야한다.❗ .. 2021. 10. 5. 이전 1 2 3 4 다음
