Front-end/Javascript
-
클래스 (2)Front-end/Javascript 2022. 4. 29. 09:33
프로퍼티 인스턴스 프로퍼티 constructor 내부 코드가 실행되기 이전에 constructor 내부의 this에는 이미 빈 객체가 바인딩 되어있다. constructor 내부에서 this 인스턴스 프로퍼티를 추가함으로써 클래스가 생성한 빈 객체, 즉 인스턴스에 프로퍼티가 추가되어 인스턴스가 초기화 된다. 접근자 프로퍼티 접근자 프로퍼티는 클래스에서도 사용할 수 있다. 접근자 프로퍼티는 자체적으로 는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수 ( getter , setter ) 로 구성되어 있다. getter와 setter 이름은 인스턴스 프로퍼티처럼 사용된다. getter는 호출하는 것이 아니라 프로퍼티처럼 참조하는 형식으로 사용한다. getter는 반드시 무..
-
클래스 (1)Front-end/Javascript 2022. 4. 28. 13:41
클래스의 정의 class 키워드를 사용하여 정의한다. 일반적이진 않지만 표현식으로 클래스를 정의할 수 있다. 즉, 클래스가 값으로 사용할 수 있는 일급 객체라는 것을 의미한다. 클래스 호이스팅 클래스 선언문도 호이스팅이 발생한다. 단, let,const 키워드로 선원한 변수처럼 호이스팅되기 때문에 호이스팅이 발생하지 않는 것처럼 동작한다. 인스턴스 생성 클래스 표현식으로 정의된 경우 클래스를 가리키는 식별자를 사용해 인스턴스를 생성해야한다. 표현식에서 사용한 클래스 이름은 외부 코드에서 접근이 불가능하기 때문이다. (함수 표현식으로 표현한 함수 이름은 함수 몸체 내부에서만 유효한 식별자이므로 함수 이름으로 호출시 Reference Error가 발생한다) 메서드 클래스의 몸체에서 정의할 수 있는 메서드는 ..
-
클래스와 생성자 함수Front-end/Javascript 2022. 4. 28. 00:07
생성자 함수와 this 생성자 함수를 정의하고 new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작한다. 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다. new 연산자와 함께 생성자 함수를 호출하지 않으면 일반 함수로 동작한다. 일반 함수로 호출된 함수의 내부의 this는 전역 객체를 가리킨다. 클래스 클래스와 생성자함수는 프로토타입 기반의 인스턴스를 생성하지만 차이점이 존재한다. 클래스는 new 연산자 없이 호출하면 에러가 발생한다. 클래스는 extends와 super 키워드를 사용할수 있다. 클래스는 호이스팅이 발생하지 않는것처럼 동작하는 반면에 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 정의한 생헝자 함수는 변수 호이스팅이 발생한다. 클..
-
화살표 함수Front-end/Javascript 2021. 5. 3. 18:14
화살표 함수는 함수 표현식으로 정의해야 한다. 화살표 함수를 사용하면 콜백 함수 안에서 this가 전역객체를 가리키는 문제를 해결할 수 있다. 화살표 함수도 일급 객체이므로 map, filter, reduce 같은 함수에 인수로 전달할 수 있다. 화살표함수와 즉시 실행 함수 (IIFE) - 화살표함수도 IIFE로 사용 할 수 있다. 일반 함수와 차이 1. 인스턴스를 생성할수 없다. (non-constructor) => 화살표 함수는 인스턴스를 생성할 수 없으므로 prototype 프로토타입도 없고 프로토타입을 생성하지 않는다. 2. 중복된 매개변수 이름을 사용할 수 없다. strict mode가 아닐때 일반함수에서는 중복된 매개변수 이름을 선언할 수 있으나, 화살표함수에서는 중복된 매개변수 이름을 선언하..
-
Promise.all([ ])과 Promise.race([ ])Front-end/Javascript 2021. 4. 29. 19:19
1. Promise.all([ ]) / 매개변수 : 순회 가능한 객체. 비동기 시퀀스는 단 한개의 비동기 작업만 가능하다. 여러 단계의 프로미스를 동시에(병렬로) 진행하고 싶을때 Promise.all() 메서드를 이용하면 된다. Promise.all([ ]) 실행 도중 한개의 프로미스라도 에러가 나면 실패를 바로 반환한다. 2. Promise.race([ ])/ 매개변수 : 순회 가능한 객체. 인자로 받은 프로미스 중 가장 먼저 완료된 프로미스만 결과값만 reselove한다. (에러가 발생할때도 가장 빠르게 응답한 에러만 catch로 넘어간다)
-
일급 객체(first-class object)Front-end/Javascript 2021. 4. 29. 13:01
컴퓨터 프로그래밍에서, first class citizen의 조건은 아래와 같다. 1. 변수에 담을 수 있다. 2.인자로 전달할 수 있다 3.반환값으로 전달할 수 있다 자바스크립트에서는 객체를 first class citizen으로 취급한다. 함수도 객체이므로, 자바스크립트 함수는 1급 객체라고 볼 수 있으며, 1급 함수의 추가조건도 만족한다. 일급함수 1. 변수에 함수를 할당 2. 함수를 인자로 전달 3.함수를 반환 출처 : MDN (developer.mozilla.org/ko/docs/Glossary/First-class_Function)
-
toString() 과 String() 형변환의 차이?Front-end/Javascript 2021. 4. 28. 12:45
개발할때 문자열로 형변환을 시킬때 String()을 사용하지만 가끔 toString()을 사용했기때문에 정확히 어떤 차이가 있는지 궁금했다. String() 은 null과 undefined에 대헤서도 잘 동작하는 반면, toString() 사용시 에러가 발생한다. Number.prototype.toString() : toString() 메서드는 특정 진수로 객체를 표현한 문자열을 반환 String() - 문자로 형변환하여 반환
-
함수 vs 블록 스코프Front-end/Javascript 2021. 4. 13. 22:01
변수와 함수를 스코프 안에 숨기는것은 종종 변수값의 겹쳐쓰기를 초래한다. 스코프 역할을 하는 함수 function이 구문의 시작 위치에 있다면 함수선언문이며, 그외의 경우는 함수 표현식이다. 익명함수 표현식 익명함수는 쉽게 입력할 수 있는 장점 때문에 많은 라이브러리에서 이 표현식을 권장하나, 몇가지 단점이 있다. 1) 디버깅이 어 더어려움 2) 기능을 나타내는 이름이 없기때문에 어떤기능을 위한 함수인지 명확하지 않다. IIFE ( Immediately Invoked Function Expression ) ()로 함수를 감싼 형태는 함수를 표현식으로 바꾸고, 두번째 ()는 함수를 실행시킨다. IIFE는 익명함수로 흔하게 사용된다. 블록 스코프 블록스코프의 목적은 변수를 최대한 사용하는 위치에서 가깝게 최..