본문 바로가기

FrontEnd/JavaScript24

[JavaScript] 배열 배열(array)는 여러 개의 값을 순차적으로 나열한 자료구조다. 배열 리터럴을 통해 생성한 배열 const avngers = ['Ironman', 'Hulk', 'Captin', 'Spiderman']; 배열이 가지고 있는 값을 요소(element)라고 부른다. 자바스크립트에서 값으로 인정하는 모든 것은 배열의 요소가 될 수 있다. 배열의 요소는 자신의 위치를 나타내는 0 이상의 정수인 인덱스(index)를 가진다. 인덱스는 배열의 요소에 접근할 때 사용한다. 인덱스는 0 부터 시작한다. 요소에 접근할 때는 대괄호 표기법을 사용한다. 대괄호 내에 접근 하려는 요소의 인덱스를 지정한다. avengers[0] // 'Ironman' avengers[1] // 'Hulk' avengers[3] // 'Spi.. 2022. 6. 8.
[JavaScript] 클래스 ES6에서 도입된 클래스는 클래스 기반 객체지향 프로그래밍 언어와 매우 흡사한 새로운 객체 생성 메커니즘을 제시한다. 클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 한다. 클래스와 생성자 함수는 모두 프로토타입 기반의 인스턴스를 생성하고 매우 유사하게 동작하지만 몇 가지 차이가 있다. 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 하지만 생성자 함수를 new 연산자 없이 호출하면 일반 함수로서 호출된다. 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다. 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅, 함수 표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생한다. 클래스 내의 모.. 2022. 6. 8.
[JavaScript] 몇가지 트릭들 인수를 객체로 전달 const ironman = ({ name, affiliation, job }) => {}; ironman({ name: 'tonystark', affiliation: 'avengers', job: 'engineer', }); 2. ES6의 구조 분해 할당 문법 사용 ㅣet x = 10, y = 100; console.log(x,y);//10 100 [x, y] = [y, x]; console.log(x,y);//100 10 const avengers = { members: 10, leader: 'ironman', henchman: ['Thor', 'Hulk', 'Captin'], }; const { members, leader } = avengers; const { 0: thor, .. 2022. 6. 7.
[JavaScript] this this 키워드 동작을 나타내는 메서드는 자신의 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조 할 수 있어야 한다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. 함수 내부에서 arguments 객체를 지역 변수처럼 사용할 수 있는 것처럼 this도 지역 변수처럼 사용할 수 있다. 단 this가 가리키는 값,.. 2022. 6. 7.
[JavaScript] 실행 컨텍스트 실행 컨텍스트 (Execution Context)는 scope, hoisting, this, function closure 등의 동작원리를 담고 있는 자바스크립트의 핵심 원리다. ECMAScript 스펙에 따르면 실행 컨텍스트를 실행가능한 코드를 형상화 하고 구분하는 추상적인 개념 이라고 정의한다. 쉽게 말하자면 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경 이라고 말할 수 있겠다. 여기서 말하는 실행 가능한 코드는 아래와 같다. 전역코드: 전역 영역에 존재하는 코드 Eval 코드 : eval 함수로 실행되는 코드 함수 코드: 함수 내에 존재하는 코드 일반적으로 실행 가능한 코드는 전역 코드와 함수내 코드이다. 자바스크립트 엔진은 코드를 실행하기 위하여 실행에 필요한 여러가지 정보를 알고.. 2022. 6. 7.
[JavaScript] 프로토타입 이 글에서 보여지는 proto 접근자 프로퍼티에는 블로그 기능때문에 보여지지 않지만 proto 앞뒤로 언더바(__)가 두개씩 있어야 합니다. 자바스크립트는 명령형(imperative), 함수형(functional), 프로토타입 기반(prototype-based), 객체지향 프로그래밍(OOP: Object Ori-ented Programming)을 지원하는 멀티 패러다임 프로그래밍 언어다. ES6에서 클래스가 도입되었다. 하지만 ES6의 클래스가 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새로운 객체지향 모델을 제공하는 것은 아니다. 클래스도 함수이며, 기존 프로토타입 기반 패턴의 문법적 설탕(syntactic sugar) 이라고 볼수 있다. 클래스와 생성자 함수는 모두 프로토타입 기반의 인스턴스를 .. 2022. 6. 7.

티스토리툴바