본문 바로가기

FE/JavaScript18

[JavaScript] 프로퍼티 어트리뷰트 프로퍼티 어트리뷰트 # 내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 것이다. 콘솔 창에서 이중 대괄호로 감싼 이름들이 바로 내부 슬롯과 내부 메서드이다. 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직이므로 개발자가 직접 접근하거나 호출할 수 없다. 그러나 일부에 한에서 간접적으로 접근하는 수단이 있긴 하다. 예를 들어, 모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는다. 원칙적으로는 직접 접근할 수 없지만, [[Prototype]]의 경우, __proto__를 통해 간접 접근이 가능하다. const obj = { name: "kim", age: 20, id: 123, }; console.log.. 2023. 3. 31.
[JavaScript] 클로저 클로저 # 클로저(Closure)란 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여, 만일 자신이 선언됐을 때의 스코프 밖에서 호출되어도 스코프에 접근할 수 있는 함수를 말한다. 클로저는 자바스크립트 고유의 개념이 아니라 함수형 프로그래밍 언어에 등장하는 보편적인 특성이다. 객체지향 프로그래밍과 함수형 프로그래밍을 모두 아우르는 개념이기에 매우 중요하다. 예시를 통해 알아보자. function outer() { const x = 10; const inner = function () { console.log(x); }; return inner; } const result = outer(); result(); // 10 함수 outer는 내부함수.. 2023. 3. 27.
[JavaScript] this this # this란 this는 값을 가르키는 키워드이다. this가 가르키는 값은 실행 컨텍스트가 생성될 때 함께 결정된다. 만약 함수를 호출한다면, 함수가 호출될 때 실행 컨텍스트가 생성되고 this가 가르키는 값도 결정된다. 다양한 상황에서 this가 어떤 값을 가르키게 되는지 알아보자. # 전역 객체를 가르키는 this 전역 공간에서 this는 전역 객체를 가르킨다. 여기서 전역 객체란, 브라우저에서는 window, Node.js에서는 global이 된다. 전역 객체에는 특이한 성질이 있다. 전역 공간에 변수를 선언하면, 자바스크립트 엔진은 그 변수를 전역 객체의 프로퍼티로도 할당한다. 즉, 전역 공간에서 선언된 변수는 변수이자 전역 객체의 프로퍼티가 된다. var a = 1; console.l.. 2023. 3. 26.
[JavaScript] 프로토타입 프로토타입 # 프로토타입이란 객체지향 언어는 프로토타입 기반과 클래스 기반으로 나뉘어지는데, 자바스크립트는 프로토타입 기반 객체 지향 언어이다. 원시 값을 제외한 나머지들이 모두 객체이다. 상속은 객체지향 프로그래밍의 핵심 개념으로, 프로토타입 기반 언어에서는 프로토타입으로 삼은 객체를 참조함으로써 상속을 구현한다. 즉, 자바스크립트의 모든 객체는 프로토타입이라는 객체를 가지고 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받는다. 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체가 프로토타입인 것이다. # 예시 : 배열.map을 사용할 수 있는 이유 예를 들어보자. 다음과 같은 객체가 있다. const user = { nam.. 2023. 3. 17.
[JavaScript] 객체지향과 Class 함수 객체지향과 Class 함수 # 객체지향 프로그래밍이란 프로그래밍 개념 중 하나로, 데이터를 단순히 받고 처리하는 것이 아니라 공통점으로 묶어 객체 단위로 나누어 관리하는 방식이다. 반복되는 값을 그때그때마다 새롭게 처리하는 것이 아니라 미리 형식(class)를 지정해놓고 처리하므로 데이터 관리를 효율적으로 할 수 있다. 예를 들어 사용자 정보의 내용은 이름, 나이, 아이디 등 반복되는 항목이 존재한다. 그러니 사용자의 정보를 객체로 생성하는 함수를 만들면 반복되는 작업을 굳이 하지 않아도 된다. 이렇게 함수를 통해 객체지향 프로그래밍을 구현할 수 있다. 객체지향 프로그래밍에는 프로토타입 기반 언어와 클래스 기반 언어가 있다. 자바스크립트는 프로토타입 언어이므로 클래스 없이도 프로토타입으로 상속을 할 수 .. 2023. 3. 14.
[JavaScript] 자주 사용하는 자바스크립트 코드 정리 코딩테스트 공부하는 중... 개인적으로 자주 사용하는 코드를 기억하기 위해 정리해본다.🧐 배열 대소관계 비교 : for 사용하기 let array = [3, 2, 1]; for(let i = 0; i < array.length; i++){ for(let j = 0; j < array.length; j++){ if(array[i] < array[j]){ [array[i], array[j]] = [array[j], array[i]]; } } } console.log(array) // [1, 2, 3] for을 두 번 사용한다. array = [3, 2, 1]라고 했을 때, array[0]과 array[0] 비교 array[0]과 array[1] 비교 array[0]과 array[2] 비교 array[1]과 .. 2023. 3. 7.