ES5 에는 원시 타입(primitive data type)인 Boolean, undefined, Number, String, null 그리고 객체 타입(object type)인 Object 를 가지고 있었다. ES6 부터 새로운 친구 Symbol 타입이 생겼다. Symbol 타입에 대해 알아보자. Symbol 생성Symbol 은 고유 값만 가지는 원시 타입(primitive data type)의 값이며, 객체 프로퍼티에 대한 식별자로 사용한다. Symbol 생성 시 Symbol() 을 사용하며, 다른 원시 타입의 객체 생성(new Boolean, new String, new Number)과 다르게 new 써서 생성을 하지 않는다. const createSymbol = Symbol();const numb..
안녕하세요 ! 오늘은 ES6에서 도입 된 Class에 대해 알아보겠습니다. 들어가기 전 이야기 드리고 싶은 부분이 있습니다. JavaScript는 프로토타입 기반 객체 지향 언어입니다. 모든 객체는 각 부모 역할을 담당하는 객체와 prototype으로 연결이 되어 있다. 그렇기 때문에 class가 필요 없이도 객체 지향 프로그래밍이 가능하다. 어떤 커뮤니티에서는 JavaScript가 무슨 객체 지향 언어냐 라고 이야기를 하는 분들을 본 것 같은데 나는 그분들이 생각하는 다른 언어보다 상상 이상으로 충분한 조건을 갖추고 있는 객체 지향 언어라고 생각한다. 이제 본격적으로 시작해보자.class 는 어떤 것을 제공 해주나 ?기존 prototype 기반의 상속 보다 명료하게 구현해 놓았으며 객체를 생성하고 상속..
이번에는 template literals 에 대해 알아보겠다. 기존 문자열 표기법은 이중 따옴표(") 또는 작은 따옴표(')를 이용하였다. 하지만 ES6 부터는 templete literals 라는 새로운 문자열 표기법이 도입되었다. templete literals 는 백틱(`) 이라는 문자를 사용하여 표기한다. // ES5var text = 'string text'; // ES6const text = `string text`; // ES5console.log('string text line 1\n' + 'string text line 2');// "string text line 1// string text line 2" // ES6console.log(`string text line 1string te..
arrow function에 대해서 머리속으로 정리해보고자 합니다. 이번 시간에도 마찬가지로 arrow function(ES6) 이 나오기 전 어떤 현상이 있었고 그 현상을 어떻게 해결 했는지에 대해 이야기 하겠습니다. arrow function이 나오기 전에 우리는 느꼈을 수도 있지만 메소드 안에 함수를 만드는게 매우 어려웠을 것이다. 바로 this 때문이다. 일단 아래의 예제를 보자. function Person() { this.age = 0; console.log(this); // Person { age: 0 } setTimeout(function growUp() { console.log(this); // window this.age++; // NaN }, 1000);} var p = new Per..
우리는 작업을 하다보면 많은 값들을 찾고 그 상황에 맞게 값을 변경 또는 삭제를 한다. ES5에서는 주로 Array.prototype.foreach(), Array.prototype.map(), Array.prototype.filter() 를 사용하여 특정 또는 전체 값에 대한 처리를 했다. 처리를 하는 도중 이 모든 함수는 한 배열 안에 있는 모든 데이터를 확인 한 후 변경 및 삭제를 한다. 하지만 이들의 단점 아닌 단점은 어떤 하나의 특정 값만 바꾸려고 하는데 모든 데이터를 확인 한다는 점이다. 배열이 작을 때는 속도 차이가 크게 없지만 배열의 데이터가 클 때 아무래도 모든 데이터를 확인하면서 처리하다 보니 속도가 낮아지는 현상을 볼 수 있다. 그래서 어떤 하나의 값만 찾아서 값을 변경 할 때 ES6..
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 함수 컴포넌트
- github
- 클래스 컴포넌트
- scope
- 깃헙
- 클래스형 컴포넌트
- 리엑트
- Angular
- Prototype
- website
- class component
- string
- TypeScript
- virtual dom
- react
- const
- useEffect
- Function Component
- array
- ES6
- Let
- this
- useState
- 가상돔
- HTML
- JavaScript
- Es5
- window
- NestJS
- 웹사이트
- Total
- Today
- Yesterday