클래스 문법 [JavaScript] ES6 의 class 문법 기본 개념`class` 문법`class` 문법 : ES6에서 도입되어 기존 Prototype 기반 객체지향 프로그래밍을 더욱 직관적으로 사용할 수 있음내부적으로 prototype 을 기반으로 동작생성자 함수 방식과 다르게 `class` 내부에jackinquantico.tistory.com  클래스 상속 (`extends`)클래스 상속 : 기존 클래스를 확장하여 새로운 클래스 생성 가능`extends` 키워드 : 부모 클래스의 기능을 자식 클래스에서 상속 가능상속받은 메서드는 그대로 사용 가능, 필요시 오버라이딩 가능class Animal { constructor(name) { this.name = name; } s..

Prototype 문법 [JavaScript] 프로토타입 (Prototype) 기본 개념자바스크립트의 객체객체 (Object) : 키 (Key) 와 값 (Value) 쌍으로 이루어진 데이터 구조로, 하나의 변수에 여러 개의 데이터를 저장할 수 있음데이터를 속성 (property) 형태로 저장할 수 있음속성 값jackinquantico.tistory.com  `class` 문법`class` 문법 : ES6에서 도입되어 기존 Prototype 기반 객체지향 프로그래밍을 더욱 직관적으로 사용할 수 있음내부적으로 prototype 을 기반으로 동작생성자 함수 방식과 다르게 `class` 내부에서 메서드 정의시 자동으로 prototype 에 추가됨> 생성자 함수와 prototype 을 단순화한 문법// 기존 생성..

프로토타입 (Prototype) [JavaScript] 프로토타입 (Prototype) 기본 개념자바스크립트의 객체객체 (Object) : 키 (Key) 와 값 (Value) 쌍으로 이루어진 데이터 구조로, 하나의 변수에 여러 개의 데이터를 저장할 수 있음데이터를 속성 (property) 형태로 저장할 수 있음속성 값jackinquantico.tistory.com  내장 객체의 프로토타입자바스크립트의 내장 객체 (String, Array 등) 도 프로토타입을 활용해 동작> `map()`, `filter()`, `split()` 등 메서드들도 prototype 에 정의되어 있음`Array.prototype` 과 `String.prototype``Array.prototype` : 모든 배열이 상속받는 pro..

프로토타입 (Prototype) [JavaScript] 프로토타입 (Prototype) 기본 개념자바스크립트의 객체객체 (Object) : 키 (Key) 와 값 (Value) 쌍으로 이루어진 데이터 구조로, 하나의 변수에 여러 개의 데이터를 저장할 수 있음데이터를 속성 (property) 형태로 저장할 수 있음속성 값jackinquantico.tistory.com  생성자 함수와 프로토타입생성자 함수 : `new` 키워드를 사용해 동일한 형식의 여러 객체를 만들 수 있음생성자 함수 내에서 메서드를 정의하면 각 객체마다 메서드가 생성되어 메모리가 낭비됨> `prototype` 에 메서드를 정의하여 모든 객체가 공유하도록 하면 해결할 수 있음function Person(name, age) { this...

자바스크립트의 객체객체 (Object) : 키 (Key) 와 값 (Value) 쌍으로 이루어진 데이터 구조로, 하나의 변수에 여러 개의 데이터를 저장할 수 있음데이터를 속성 (property) 형태로 저장할 수 있음속성 값으로 함수 (function) 을 가질 수 있음 > 이때 함수는 메서드 (method) 라고 부름`.` (점) 또는 `[]` (대괄호) 표기법으로 속성에 접근 가능객체 생성 방법let person = { name: "Alice", age: 25, greet: function() { console.log("Hello, my name is " + this.name); }};person.greet(); // Hello, my name is Alice객체 리..

ES6ES : ECMAScript 의 약자로, 자바스크립트의 표준, 규격을 나타내는 용어뒤의 숫자는 버전을 뜻하고 ES6 은 2015년에 출시됨 let, const 키워드Scope (범위)스코프 : 기본적으로 변수를 사용할 수 있는 범위를 의미var 로 변수 선언 시 함수 범위 또는 전역 범위 (함수 외부에서 선언 시) 로 지정됨→ 함수 블록 외부에서 var 로 변수 선언 시 전체 윈도우 상에서 사용 가능재선언, 재할당var : 같은 범위 내에서라면 수정이 가능하며 에러 발생하지 않음var hi = "hello";var hi = "hi";// 오류 발생 Xvar hello = "hello";hello = "hi";// 오류 발생 X호이스팅호이스팅 : 인터프리터가 코드를 실행하기 전에 변수/함수/클래스/임..

함수 종류일반 함수function 함수명() { // javascript code}파싱 단계에서 함수 변수인 `함수명` 이 정의되고 함수를 호출하면 런타임 시 매개변수가 정의됨자바스크립트를 처음 읽을 때만 해석호이스팅 가능익명 함수const 변수명 = function(매개변수) { // 리터럴 방식 // javascript code}변수명(매개변수);이름이 없는 함수로, 접근 시에 해석되고 실행될 때 함수 몸체가 해석됨주로 변수에 할당되거나 함수 인자의 값 또는 반환값으로 사용호이스팅 시 익명 함수는 위로 올라가지 않고 익명 함수를 저장한 변수만 올라가게 됨변수에 담지 않으면 메모리가 사용되지 않으므로 재사용하지 않고 일회용으로 사용화살표 함수 (람다 함수)const 변수명 = () => { ..

JavaScript 의 모듈 패턴 (Module Pattern)모듈 패턴 : 정보 은닉 (Encapsulation) 을 활용해 코드의 구조를 정리하는 디자인 패턴 중 하나전역 변수 오염 방지 : 네임스페이스 충돌 방지데이터를 안전하게 보호하여 필요한 부분만 외부에 노출 가능 : 캡슐화(Encapsulation)코드 재사용성 용이, 유지보수 용ES6 의 모듈 (import/export) 등장 전까지는 주로 IIFE (즉시 실행 함수 표현) 을 이용해 모듈화하는 방식 사용예시const ModuleTest = (function () { // private 변수 및 함수 let privateVar = "private 변수 : 외부에서 접근 불가"; function privateFunction() { ..