Front-End

자바스크립트는 명력형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다. 자바스크립트는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 "모든 것"이 객체다. 원시 타입의 값을 제외한 나머지 값들(함수, 배열, 정규 표현식 등)은 모두 객체다. 가보자잇..! = 1. 객체지향 프로그래밍 = 객체지향 프로그래밍은 프로그램을 명령어 또는 함수 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다. 객체지향 프로그래밍은 실세계의 실체(사물이나 개념)를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작한다. 실체는 특징이나 성질을 나타내..

드디어 일급 객체!..... = 1. 일급 객체 = 다음과 같은 조건을 만족하는 객체를 일급 객체라 한다. 1. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 3. 함수의 매개변수에 전달할 수있다. 4. 함수의 반환 값으로 사용할 수 있다. 자바스크립트 함수는 다음 예제와 같이 위의 조건을 모두 만족하므로 일급 객체다. // 1. 함수는 무명의 리터럴로 생성할 수 있다. // 2. 함수는 변수에 저장할 수 있다. // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const increase = function(num) { return ++num; }; const decrease = func..

객체 리터럴에 의한 객체 생성 방식은 가장 일반적이고 간단한 객체 생성 방식이다. 객체는 객체 리터럴 이외에도 다양한 방법으로 생성할 수 있다. 다양한 객체 생성 방식중에서 생성자 함수를 사용하여 객체를 생성하는 방식을 알아보자. 그리고 객체 리터럴을 사용하여 객체를 생성하는 방식과 생성자 함수를 사용해서 생성한 객체의 장단점을 살펴볼것이다. = 1. Object 생성자 함수 = new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다. // 빈 객체의 생성 const person = new Object(); // 프로퍼티 추가 person.name = 'Lee'; person.sayHello =..

앞으로 살펴볼 프로퍼티 어트리뷰트를 이해하기 위해 먼저 알고 가야할 것이 있다. = 1. 내부 슬롯과 내부 메서드 = 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호([[ ... ]])로 감싼 이름들이 내부 슬롯과 내부 메서드다. 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다. 즉, 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직이므로 원칙적으로 자바스크립트는 내부 슬롯과 내부 메서드에 직접적으로 접근하거나 호출할..

드디어 let cont var 차이를 공부할 때가 왔다 드가자 = 1. var 키워드로 선언한 변수의 문제점 = ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드로 선언된 변수는 다음과 같은 특징이 있었다. 이는 다른 언어와는 구별되는 독특한 특징으로, 주의하지 않으면 심각한 문제를 발생시킬 수 있다. - (1) 변수 중복 선언 허용 - var 키워드로 선언한 변수는 중복 선언이 가능하다. var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. var x = 10; //초기화 문이 없는 변수 선언..

전역 변수의 무분별한 사용은 위험하다. 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야한다. 🤓 그렇다면 전역변수의 문제점과 전역변수의 사용을 억제할 방법이 있는지 살펴보자! 🤓 = 1. 변수의 생명 주기 = - 지역 변수의 생명주기 - 변수는 선언에 의해 생성되고 할당에 의해 값을 갖는다. 그리고 언젠간 소멸한다. 즉, 변수는 생물과 유사하게 생성되고 소멸되는 생명 주기가 있다. 변수에 생명주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간에 있지않겠어!?요? 변수는 자신이 선언된 위치에서 생성되고 소멸한다. 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 하지만 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하..

스코프가 뭔가유 ? 스코프 = 유효범위 스코프는 변수 그리고 함수와 깊은 관련이 있다. function add(x, y) { // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부다. console.log(x, y); // 2 5 return x + y; } add(2, 5) // 7 // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. console.log(x, y); // ReferenceError : x is not defined 변수는 코드의 가장 바깥 영역뿐 아니라 코드 블록이나 함수 몸체 내에서도 선언할 수 있다. 이때 코드 블록이나 함수는 중첩될 수 있다. var var1 = 1; // 코드의 가장 바깥 영역에서 선언한 변수 if(t..

함수란 ?? 함수는 자바스크립트에서 가장 중요한 핵심 개념이다. 또 다른 자바스크립트의 핵심 개념인 스코프, 실행 컨텍트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, this, 프로토타입, 모듈화 등이 모두 함수와 깊은 관련이 있다. 따라서 함수는 자바스크립트를 정확히 이해하고 사용하기 위해 피해 갈 수 없는 핵심 중의 핵심이라 할 수 있다. 수학의 함수는 입력을 받아 출력을 내보내는 일련의 과정을 정의한 것이다. 예를 들어, f(x, y) = x + y라는 함수를 정의하고 이 함수에 두 개의 입력 2, 5를 전달하면 함수는 정의된 일련의 과정, 즉 x+y를 실행하여 7을 출력한다. 이처럼 함수는 마치 재료를 투입받아 제품을 생산하는 기계와 같다. 미리 정의해 둔 함수를 실행하는 것을 수식으로 표..

원시 타입과 객체 타입은 크게 세 가지 측면에서 다르다. 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다. 이에 비해 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값이다. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 이에 비해 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 이를 값에 의한 전달이라 한다. 이에 비해 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조값이 복사되어 전달된다. 이를 참조에 의한 전달이라 한다. 1. 원시 값 = 변경 불가능한 값 = 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다. 다시말해, 한번 생성된 원시 값은..

객체란 무엇인가 자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 "모든 것"이 객체다. 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등) 모두 객체다. 원시 타입은 단 하나의 값만 나타내지만, 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조다. 즉, 원시 값은 변경 불가능한 값이고 객체 타입의 값 즉, 객체는 변경 가능한 값이다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다. 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 함수도 프로퍼티 값으로 사용할 수 있다. 프로퍼티 값이 함수일 경우..