Javascript
-
Javascript) Rest 파라미터Javascript 2022. 8. 17. 09:51
1. Rest 파라미터란 ? 매개변수 이름 앞에 점 3개 ... 을 붙여서 정의한 매개변수를 의미한다. 함수에 전달된 인수들의 목록을 배열로 받는다. function func(...rest) { console.log(rest); } func(1, 2, 3, 4); // [ 1, 2, 3, 4 ] 2. 일반 매개 변수와 함께 사용 가능 function func(param, ...rest) { console.log(rest); // [2,3,4] console.log(param); // 1 } func(1, 2, 3, 4); 3. 단 하나만 선언할 수 있음, 제일 마지막에 와야함 function func(...rest1, ...rest2) { } func(1, 2, 3, 4); // SyntaxError: ..
-
Javascript) 화살표 함수와 일반 함수의 차이Javascript 2022. 8. 16. 18:27
화살표 함수는 function 키워드 대신 화살표(=>)를 사용하여 기존의 함수 정의 방식보다 간략하게 함수를 정의할 수 있다. 그러나 정의 방식 말고도 일반 함수와 차이 나는 게 많은데 그것들에 대해서 알아보도록 하자. 1. 화살표 함수는 인스턴스를 생성할 수 없는 non-constructor다. non-constructor 란 말은 생성자 함수로서 호출할 수 없다는 말이다. 이는 곧 인스턴스를 생성할 수 없음을 의미한다. function Func() { console.log("hello"); } new Func(); // hello const Fun = () => { console.log("Hi"); }; new Fun(); // TypeError: Fun is not a constructor 2. ..
-
Javascript) 클래스Javascript 2022. 8. 16. 09:55
1. 클래스란 ? -ES6에서 새롭게 도입된 객체 생성 메커니즘. -자바나 C# 같은 클래스 기반 객체지향 프로그래밍에 익숙한 사람이 더욱 빠르게 학습할 수 있도록 클래스 기반 객체지향 프로그래밍 언어와 매우 흡사 -함수(일급객체)로서, 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 일종의 문법적 설탕이라고도 볼 수 있음. 클래스 몸체에서 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드 3가지가 있다. 클래스와 생성자 함수의 정의 방식은 형태적인 면에서 매우 유사하다. class Person { // 생성자 constructor(name) { // 인스턴스 생성 및 초기화 this.name = name; } // 프로토타입 메서듸 say..
-
Javascript) 클로저Javascript 2022. 8. 13. 17:30
1. 정의 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 클로저를 이해하기 전에 먼저 렉시컬 스코프를 알고가야한다. 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위스코프를 결정한다. 이를 렉시컬 스코프라 한다. 처음 이 문장을 봤을 땐 난해해서 무슨 의미인지 이해가 안갔다. 하지만 코드를 작성하여 실행시켜보니 그 의미를 이해할 수 있었다. const x = 1; function outerFunc() { const x = 10; innerFunc(); } function innerFunc() { console.log(x); } outerFunc(); // 1 함수 innerFunc의 호출을 outerFunc 안에서 하도록 했지만 결과 값은 1 이 나..
-
Javascript) thisJavascript 2022. 8. 2. 19:42
동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이 때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다 객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다. const circle = { radius: 5, getDiameter() { return 2 * circle.radius; }, }; console.log(circle.getDiameter()); 생성자 함수 방식으로 인스턴스를 생성하는 경우를 생각해보자. function Circle(radius) { // 이 시점에는 생성자 함수 자신이 생성할 인스턴스..
-
Javascript) 생성자 함수에 의한 객체 생성Javascript 2022. 6. 18. 14:16
const person = new Object(); // new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환 console.log(person); // {} //프로퍼티 추가 person.name = "Choo"; person.sayHello = function () { console.log("Hi My name is " + this.name); }; person.sayHello(); // Hi My name is Choo 생성자 함수에 의해 생성된 객체를 인스턴스라 한다. 자바스크립트는 Object 생성자 함수 이외에도 String, Number, Boolean, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수를 제공한다. 객..
-
Javascript) Property ArrtibuteJavascript 2022. 6. 18. 12:31
1️⃣ 내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 ECMA Script 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다. 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공한다. 빈 객체를 콘솔로 찍어 내부를 보면 내부 슬롯으로 [[Prototype]]을 갖는 것을 알 수 있다. 하지만 이는 직접 접근할 수 없는 대신 __proto__를 통해 간접적으로 접근할 수 있다. 2️⃣ Property Attribute 와 Property Descriptor 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 프로..