목록프로젝트/자바스크립트 (13)
minzzl
Class와 Objec는 연관있는 데이터들을 한군데 모아 놓은 컨테이너 같은 역할을 합니다. // 클래스 선언 class person { name; // 프로퍼티(혹은 속성(filed)) age; // 프로퍼티(혹은 속성(filed)) speak(); // 메소드 } // 객체 생성 // 객체를 생성할 때는 클래스앞에 new라는 키워드를 사용한다. const mike = new Person('mike', 20); console.log(mike.name); console.log(mike.age); 우선 class와 object 에 대해서 알아봅시다. Class template, 즉 틀 같은 역할을 한다. 한번만 선언한다. 클래스 안에는 데이터가 없다. 메모리에 올라가지 않는다. Object instanc ..
이 글에서는 Javascript의 operator와 loop, if 등의 기본적인 문법에 대해 공부해보겠습니다. String concatenation // string + string = string console.log('my'+' cat'); // string + number = string console.log('1'+2); // string과 number 계산을 같이 쓰고 싶은 땐, 백팁을 사용한다(``). 이 때 number 계산은 ${}을 이용한다. console.log(`string literals: 1 + 2 = ${1+2}`); //특수문자열도 비슷함 console.log('san\nh\ta'); //'' 사이에 문자열을 쓰다가 '표시를 string으로 표시하고 싶을 땐 이스케이프 문자(..
호이스팅 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것 자바스크립트에서 호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당 하는 것을 의미합니다. 쉽게 말해, 어디에 선언했는지는 상관 없이 항상 제일 위로 선언을 끌어올려 주는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined 로 변수를 초기화 합니다. 반면 let과 const로 선언한 변수의 경우 호스팅 시 변수를 초기화 하지 않습니다. 호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 합니다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다. 다만 선언과 초기화를 함께 수행하..
이 글에서는 함수 선언식과 함수 표현식에 대해 알아보도록 하겠습니다. 우선 Javascript에서의 함수의 개념과 특징에 대해 이야기해봅시다. 함수 - 프로그램을 구성하는 기본적인 building block subprogram이라고도 하며 여러번 사용할 수 있다. 한 가지의 task나 값을 계산 여러 개의 인자를 받아서, 그 결과를 출력합니다. 파라미터의 개수와 인자의 개수가 일치하지 않아도 오류가 발생하지 않는다. - 만약, 파라미터 1개가 정의된 함수를 부를 때, 인자의 개수를 0개만 넣어 실행하면 이미 정의된 파라미터(매개변수)는 undefined이라는 값을 갖게 되는데 이는 변수는 초기화됐지만, 값이 할당되지 않았기 때문입니다. Javascript에서는 함수도 객체다. - 따라서 다른 객체와 마찬..
우선 Javascript의 데이터타입은 두가지로 나눌 수 있습니다. 변경이 가능한 Mutable 데이터타입, 변경이 불가능한 Immutable 데이터타입이 존재합니다. 그렇다면 Mutable 데이터타입을 먼저 알아보겠습니다. var 변수 중복 선언 가능 hoisting No Block-level Scope Function-level scope var 키워드 생략 가능 변수 중복 선언 var x = 1; var x =50; var x; // 이때는 값을 할당하지 않았으므로, console.log(x); var는 변수를 중복해서 선언 및 초기화가 가능하다. 만약 사용자가 동일한 이름의 변수가 이미 선언되었다는 것을 모르고 의도치 않게 중복 선언을 하고 값을 할당한다면, 원래 의도와는 다른 값이 출력될 수 있..
HTML 안에 Javascript를 포함 시킬 때 다양한 방법이 존재합니다. 크게 4가지가 있는데요, 이에 대해 알아보고 Javascript를 HTML에 포함할 때 어떻게 포함해야 가장 효율적으로 포함할 수 있는지 async와 defer의 차이점을 살펴보겠습니다. 1. 태그 안에 태그로 Javascript를 포함시킨 경우 위의 코드는 head가 script를 포함하고 있는데요, 이렇게 포함했을 때 과연 어떤 순서대로 사용자에게 페이지가 보여지게될까요? 브라우저는 HTML을 쭉 읽다가 태그를 만나면 스크립트를 먼저 실행해야 되므로 HTML 파싱(DOM 생성)을 멈춥니다. 필요한 .js 파일을 서버에서 받아와 다운로드 후 실행합니다. 다시 HTML 파싱을 시작합니다. 모든 DOM 생성이 완료됩니다. 이렇게 ..