목록자바스크립트 (45)
Front-End
객체 리터럴에 의한 객체 생성 방식은 가장 일반적이고 간단한 객체 생성 방식이다. 객체는 객체 리터럴 이외에도 다양한 방법으로 생성할 수 있다. 다양한 객체 생성 방식중에서 생성자 함수를 사용하여 객체를 생성하는 방식을 알아보자. 그리고 객체 리터럴을 사용하여 객체를 생성하는 방식과 생성자 함수를 사용해서 생성한 객체의 장단점을 살펴볼것이다. = 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개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다. 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 함수도 프로퍼티 값으로 사용할 수 있다. 프로퍼티 값이 함수일 경우..
타입 변환이 뭔가유 자바스크립트의 모든 값은 타입이 있다. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 개발자가 의도적으로 타입을 변환하는 것을 명시적 타입 변환 or 타입 캐스팅이라고 한다. var x = 10; //명시적 타입 변환 //숫자를 문자열로 타입 캐스팅한다. var str = x.toString(); console.log(typeof str, str); // string 10 // x 변수의 값이 변경된 것은 아니다. console.log(typeof x, x); // number 10 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환되기도 한다. 이를 암묵적 타입 변환 또는 타입 강제 변환이라 한다. var ..
제어문 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다. 일반적으로 코드는 위에서 아래방향으로 순차적으로 실행된다. 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다. 하지만, 코드의 실행 순서가 변경된다는 것은 단순히 위에서 아래로 순차적으로 진행하는 직관적인 코드의 흐름을 혼란스럽게 만든다. 따라서 제어문은 코드의 흐름을 이해하기 어렵게 만들어 가독성을 해치는 단점이 있다. 가독성이 좋지 않은 코드는 오류를 발생시키는 원인이 된다. 제어문을 바르게 이해하는 것은 코딩 스킬에 많은 영향을 준다 그러니 잘 이해해보자!!!! 1. 블록문 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 한다. 자바스크립트는 블록문을 하나의 실행 단위로..