[JS] Array와 Array 메소드
·
HTML,CSS,JS
❗️ 자바스크립의 배열(인척 하는 객체)- 일반 배열같은 데이터 타입으로 이루어짐배열의 각 요소가 동일한 크기의 메모리 공간을 차지함 메모리 공간이 빈틈 없이 연속적으로 나열되어 있음이런 배열을 밀집 배열(dense array)라고 한다.  - 자바스크립트의 배열다양한 타입의 요소들이 저장될 수 있음배열의 요소들이 동일한 크기의 메모리 공간을 가지지 않음메모리 공간이 연속적으로 이어져 있지 않을 수도 있음이런 배열을 희소 배열(sparse array)라고 한다. 결론적으로 자바스크립트의 배열은 배열의 동작을 흉내 낸 특수한 객체이다. 이러한 특성 때문에 인덱스로 접근하면 일반 배열에 비해 느리지만특정 요소를 탐색하거나 요소를 삽입/삭제 하는 경우에는 일반 배열보다 빠르다.🤔 어떻게 하나의 배열에 여러 ..
[JS] Class
·
HTML,CSS,JS
자바스크립트의 Class 문법은 ES6에 추가된 문법이다.추가되기 전에도 생성자 함수와 프로토타입을 통해 상속을 구현할 수 있었는데 굳이 추가된 이유가 뭘까?👀 Class가 나오게 된 배경프로토타입 체인을 이용해서 클래스 방식을 모방할 수 있지만, 구현이 복잡하고 어렵다.또한 기존 객체지향 프로그램 언어들과 달라서 개발자들이 어려움을 느꼈다. 결론적으로 개발자들의 편의를 위해 도입되었다는 것이다!👀 Class vs 생성자 함수- new 연산자생성자 함수는 new 연산자를 붙이지 않고 객체를 생성해도 오류가 발생하지 않지만,class는 new 연산자를 붙이지 않고 객체를 생성하면 오류가 발생한다. 생성자 함수에서 오류가 발생하지 않을뿐, 의도했던 동작과는 다르게 단순 함수 호출로 처리된다. - exte..
[JS] Prototype
·
HTML,CSS,JS
👀 Prototype이란?자바스크립트는 프로토타입 기반의 언어이다. 클래스 기반 언어 -> 상속프로토타입 기반 언어 -> 복제 진짜 복제가 아니라 프로토타입 링크를 통해 해당 객체를 참조하여 만드는 것이다. 자바스크립트에서는 원시타입(Number, String, Boolean, Symbol, Undefined, null)을 제외한 모든 참조 타입이 객체이다.객체는 원형을 참조해서 새로운 객체를 생성하게 되는데, 그 때 프로토타입 링크인 __proto__가 같이 생성된다.function Person() {}var HeeDong = new Person();var Guri = new Person();Person이라는 함수가 정의 되고, Person 함수의 prototype 속성은 Person Prototyp..
[JS] closure
·
HTML,CSS,JS
이전에 조사했었지만,, 너무너무 어렵게 느껴졌던 개념이다.이번 기회에 closure를 부셔버리겠어,, 부서지는건 나일지도 👀 Closure란?클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다라고 MDN에 나와있지만 정말 무슨 말인지 이해가 안된다,, 코드를 살펴보자.function doSomething() { const x = 10; function sum(y) { console.log(x+y); } return sum;}const something = doSomething();something(5); // 15doSomething 함수는 sum 함수를 리턴하고 있다.sum 함수에서는 doSomething 함수의 x 변수를 참조하고 있다. doSomething..
[JS] This
·
HTML,CSS,JS
👀 this란?Java에서 this는 자기 자신을 가리키는 참조 변수로 객체 자신에 대한 참조 값을 의미한다.주로 매개변수와 객체 자신의 멤버 변수 명이 같을 때, 구분하기 위해 사용된다.public class Person { private String name; public Person (String name) { this.name = name; }}이런 식으로 멤버 변수에 매개변수를 할당해주기 위해 사용한다. 하지만 JS에서 this 키워드는 다른 언어에서와는 다르게 동작한다!!(왜 맨날 JS 너만 달라...) JS에서 this에 바인딩되는 객체는 해당 함수의 호출 방식이나 함수 선언 위치에 따라 달라지게 된다.어떤 객체가 바인딩 될 지 주의해야 한다는 의미이다.👀 일반..
[JS] 동작원리
·
HTML,CSS,JS
👀 JS 엔진과 구동 환경자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요하다.Google에서 만든 V8 엔진이 가장 대표적인 예시이다. 자바스크립트 엔진은 Memory Heap과 Call Stack으로 이루어져 있다.Memory Heap : 메모리 할당이 일어나는 곳으로 변수와 함수 같은 객체 등이 담기는 곳이다.Call Stack : 함수를 호출들이 쌓이는 스택이다.자바스크립트 엔진 자체는 싱글 스레드이다. 실제 자바스크립트가 구동되는 환경인 웹 브라우저는 멀티 스레드로 동작하기 때문에 비동기 처리가 가능한 것이다.정확히는 Web API가 멀티 스레드로 동작하는 것이다. 따라서 자바스크립트의 런타임 환경은 위의 그림과 같다.Web APIs : 브라우저에서 제공하는 API들로, 비동기 처리를 ..