모던 자바스크립트

front-end/JavaScript

[JavaScript] 24. 배열

📖 모던 자바스크립트 교재 27장. 배열 01. 배열이란? 여러 개의 값을 순차적으로 나열한 자료구조 사용 빈도가 매우 높은 가장 기본적인 자료구조이므로 잘 알아두기로 하자. const arr = ['apple', 'banana', 'orange']; 🔹 요소 (Element) : 배열이 가지고 있는 값 🔹 인덱스 (Index) : 배열에서 배열의 요소의 위치 (0 이상의 정수) 🔹 대괄호 표기법을 통해 요소에 접근한다. arr[0] // -> 'apple' arr[1] // -> 'banana' arr[2] // -> 'orange' 🔹 length 프로퍼티 : 배열의 길이(요소의 개수)를 나타내는 프로퍼티 arr.length // -> 3 🔹배열은 객체 타입이다. ❓배열을 생성하려면 🔹배열 리터럴, ..

front-end/JavaScript

[JavaScript] 22. 클래스

📖 모던 자바스크립트 교재 25장. 클래스 01. 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 프로토타입 기반 객체지향 언어다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는(class free)객체지향 프로그래밍 언어다. ES5에서는 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있다. 💡 ES6에서 클래스 추가됨 ➡️ 클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하여, 문법적 설탕(syntactic sugar)이라고 표현한다. 💡 클래스와 생성자 함수의 차이점 클래스를 new연산자 없이 호출하면 에러가 발생한다.(생성자 함수를 new연산자 없이 호출하면 일반 함수로 호출된다.) 클래스는 상속을 지원하는 exten..

front-end/JavaScript

[JavaScript] 21. 클로저

📖 모던 자바스크립트 교재 24장. 클로저 MDN에서 정의하는 클로저는 다음과 같다. 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 01. 렉시컬 스코프 클로저를 이해하려면 먼저 렉시컬 환경, 즉 렉시컬 스코프를 이해해야 한다. 자바스크립트 엔진은 함수가 정의된 위치에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라고 한다. 그리고 객체가 생성되는 시점에 상위 스코프가 결정된다. ➡️ [[Envirnment]] 내부 슬롯에 저장 이후 함수가 호출되고 함수 몸체 코드가 평가되는 시점에 외부 렉시컬 환경에 대한 참조에 객체가 생성될때 저장한 상위 스코프에 대한 참조값을 저장한다. 02. 함수 객체의 내부 슬롯 [[Environment]] 렉시컬 스코프가 가능하려면 함수는 상위..

front-end/JavaScript

[JavaScript] 20. this

📖 모던 자바스크립트 교재) 22장. this 01. this 키워드 객체 : 상태(state)를 나타내는 프로퍼티와 동작(behavior)를 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. ➡️ 이때 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 하는데, 이때 this를 사용한다. const circle = { // 프로퍼티: 객체 고유의 상태 데이터 radius: 5, // 메서드: 상태 데이터를 참조하고 조작하는 동작 getDiameter() { // 이 메서드가 자신이 속한 객체의 프로퍼티나 다른 메서드를 참조하려면 // 자신이 속한 객체인 circle을 참조할 수 있어..

front-end/JavaScript

[JavaScript] 18. strict mode

📖 모던 자바스크립트 교재) 20장. strict mode 01. strict mode란? ES5부터 추가된 것으로, 자바스크립트 언어의 문법을 좀 더 엄격하게 적용하여, 문제를 일으킬 수 있는 코드에 대해 명시적 에러를 발생시킨다. 02. strict mode의 적용 strict mode를 적용하려면,전역의 선두/함수 몸체의 선두에 'use strict';를 추가한다. 03. 전역에 strict mode를 적용하는 것은 피하자 전역에 적용한 strict mode는 스크립트 단위로 적용 ➡️ 해당 스크립트에 한정되어 적용 💥 strict mode 스크립트와 non-strict mode 스크립트를 혼용할 수 있는 오류를 발생시킨다. 04. 함수 단위로 strict mode를 적용하는 것도 피하자 즉시 실행..

gaan
'모던 자바스크립트' 태그의 글 목록