본문 바로가기
728x90
반응형

JavaScript

 (14)
[JS] Class Ingeritance (클래스 상속) 1. Class 상속과 다양성 class의 반복되는 공통적인 속성들을 한번만 정의하고 (parent class), extends 키워드를 이용하여 class의 property나 method를 추가 정의할 수 있다 (child class). 이것을 class 상속 또는 class 확장 이라고 한다. child class는 parent class의 field와 method를 복사없이 모두 사용할 수 있고, 필요한 property나 method를 추가 또는 오버라이딩 할 수 있다. class 상속의 기본 문법 : class ChildClass extends ParentClass { } Parent Class class Shape { constructor(width, height, color) { this.wi..
[JS] Class 선언과 Object 생성 Class • Class는 Object를 생성하기 위한 템플릿. • 연관 있는 데이터들을 종합적으로 묶어 놓은 것. • 변수 데이터를 fields, 함수 데이터를 method라고 한다. • 들어올 수 있는 데이터를 정의하여 한번만 선언한다. • class는 정의만 한 것이라 data가 메모리에 저장되지는 않는다. • ES6에 추가된 문법이다. class가 도입되기 전에는 function을 이용해서 템플릿을 만들었다. 1. Class declarations (Class 선언) class 키워드를 이용해서 Person이라는 class를 만들고 constructor를 이용해서 object를 만들 때 필요한 데이트를 전달한다. 전달받은 데이터를 class에 존재하는 fields에 바로 할당해준다. class P..
[JS] JavaScript Function & Arrow Function Function 하나의 특별한 목적의 작업을 수행하는 Subprogram 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다. JavaScript Function 자바스크립트에서는 함수도 하나의 datatype이다. 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능하다. 또한 다른 함수 내에 중첩되어 정의될 수도 있다. 1. Function declaration(함수 선언) function name(param1, param2) { body... return ; } 하나의 함수는 하나의 기능한 수행 하도록 한다. (one function === one thing) 함수 이름은 함수의 기능을 잘 알 수 있는 것으로 짓는다. (doSomething, command, verb) 자바스크립..
[JS] Primitive Type 과 Reference Type Variable types primitive type : number, string, boolean, null, undefined, symbol reference type : object, array, function 1. primitive type number, string, boolean, null, undefined, symbol value자체를 메모리에 저장한다. let age = 20; let age2 = age; console.log(age); // 20 console.log(age2); // 20 변수 age와 age2는 각각의 메모리 공간을 가지게 된다. 변수 age2의 메모리 공간에 변수 age의 값을 복사해서 가져오게 된다. age와 age2를 console에 출력해보면 둘 다 20이 ..
[JS] 변수 선언 - var, let, const 비교 변수 선언 3가지 1. let ▶ ES6에 추가된 키워드 ▶ 재선언은 불가능 하지만 재할당은 가능하다 ▶ Read / Write 가능 let name = 'eunji'; console.log(name); // eunji let으로 name이라는 변수를 선언하고 선언함과 동시에 'eunji' 라는 값을 할당한 것이다. 이것을 consle창에 출력해보면 eunji라는 값을 확인할 수 있다. name = 'hello'; console.log(name); // hello 다시 변수 name 에 'hello'라는 값을 할당하면 console창에서 hello로 값이 변경된 것을 확인할 수 있다. 비어져 있는 여러개의 메모리 박스가 있다. 키워드 let 으로 변수를 선언하게 되면 하나의 메모리 박스를 가리키는 포인터..
[JS] <script>의 async 와 defer 속성 이해 Html에서 JavaScript파일을 어떻게 포함하는 것이 더 효율적일까? 웹 브라우저는 html을 parsing하다가 그래서 많이 사용하는 방법이 안 제일 마지막 부분에 를 추가하는 방법이다. 이 경우에는 JS파일을 받기전에 사용자가 빠르게 웹사이트를 컨텐츠를 볼 수 있다. 사용자가 기본적인 html을 빠르게 볼 수는 있지만 웹사이트가 JS에 많이 의존적이고, 동적인 요소가 많다면 사용자가 정상적인 웹사이트를 확인하기까지 여전히 많은 시간이 지연된다. 3. + html을 parsing하다가 를 만나면 파일 다운로드 명령만 내려놓고, 나머지 html을 끝까지 parsing 하게 된다. html parsing이 끝나면 다운받아진 파일을 실행하게 된다. html..
728x90
반응형

티스토리툴바