몽탁이의 개발일기

자바스크립트에서 class도 자바에서 처럼 상속이 가능합니다. 위 그림은 extends를 이용하여 Shape라는 클래스를 Rectangle, Triangle 두 개의 클래스에 상속을 내린 것을 보여줍니다. (상속 내린 Shape는 부모 클래스 상속받은 Rectangle, Triangle은 자식 클래스라고 불립니다) 우선, Rectangle 클래스를 이용하여 객체를 보면 Rectangle 클래스 안에 어떠한것도 정의되어있지 않지만 Shape 클래스에 정의된 함수와 변수들을 사용할수 있게 됩니다. 그래서 rectangle 이라는 객체가 printShape라는 함수에 접근하여 width, height, color를 출력할 수 있게 됩니다. 다음, Trangle 클래스 또한 Shape 클래스를 상속받았지만 pr..

객체지향 언어에서 Class란 일종의 설계도와 같다고 볼 수 있습니다. 그리고 Class라는 설계도를 통해 생성되는 물건들이 Object가 되는것입니다. 또 이 Object를 다른 말로 instance of class(한국말로 클래스의 예)라고도 합니다. 대부분의 객체지향 언어들은 Class의 개념을 기반으로 만들어진 언어들이 많습니다. 자바스크립트는 개발 당시 시간을 10일밖에 주어지지 않았기 때문에 급하게 만들 수밖에 없었습니다. 그래서 prototype을 이용한 객체지향 언어가 되어버렸습니다. 하지만 점점 자바스크립트의 사용자가 늘고 웹에서 중요한 언어로 자리를 차지하게 되면서 ES6에서 자바스크립에도 Class를 도입하게 됩니다. 우선, Class가 없던 시절에 객체지향적으로 어떻게 구현했는지 알..

자바스크립트에서 변수의 타입은 크게 3가지로 나눌 수 있습니다. 1. primitive type 2. Object 3. function 먼저 primitive type에 대해 알아보겠습니다. primitive란 더이상 작은 단위로 나눠질 수 없는 타입 원자 값을 의미합니다. 이 primitive type에는 number, string, boolean, null, undefined, symbol이 있습니다. number - 숫자 ( 0 , 1 , 2 , 2.1 , -1 , 8.888 .... ) string - 문자열 ('문자열' , '안녕하세요' , '' ... ) boolean - true , false null - 해당 변수에 어떠한 값도 들어있지 않음을 나타냄 undefined - 해당 변수는 아직..

use strict는 사용자가 자바스크립트를 이용하는데 좀 더 안전하게 사용하도록 도와줍니다. (ES 5부터 도입) 예를 들어 위와 같이 말도 안 되는 일이 발생합니다. 변수의 타입을 지정하지도 않았는데 스스로 타입을 지정하고 변수에 값을 할당하여 출력이 됩니다. 이게 가능한 이유는 자바스크립트는 런타임 시에 메모리를 동적으로 할당시키기 때문에 입니다. 런타임 시란 프로그램이 실행되고 있는 동안의 동작입니다. 하지만 use strict를 사용하게 되면 a라는 변수는 정의되어있지 않다는 에러를 띄우게 됩니다. 프로그래머는 사람이기 때문에 이런 치명적인 실수를 할 수 있기 때문에 사전에 미리 방지하고 또 use strict의 다른 기능은 자바스크립트 엔진이 자바스크립트를 효율적으로 빠르게 분석해주게 되어 좀..

script 태그는 javascrtip를 html에 작성하지 않고 따로 작성한 JS파일을 다운로드하고 실행시켜주는 태그입니다. 기본적인 script 태그의 동작은 브라우저가 HTML을 파싱을 하기되면 위에서부터 한 줄씩 파싱을 하게 됩니다. 그러다 script 태그를 만나게되면 HTML 파싱을 중단하고 JS파일을 다운로드하고 실행시켜준 뒤 다시 HTML을 파싱 하게 됩니다. 아래 그림은 script태그를 상단부분 사이에 정의했을 때 실행되는 순서입니다. 여기에는 문제점이 있습니다. 만약 JS파일의 크기가 크다면 HTML을 파싱을 하다가 중간에 JS파일 받는 틈이 생기기 때문에 사용자가 보는 화면이 완벽하게 출력이 되지않는 상황이 발생됩니다. ex) .... 위와 같은 문제점을 해결하기 위해 몇가지 방법이..

var let const 위와 같이 크게 3가지로 구분됩니다. var 은 ES5가 등장하지 않았을 때 사용되었던 타입입니다. 현재는 let과 const를 사용하기 때문에 var는 잘 사용되지 않으며 사용하면 안 되는 이유가 있습니다. 그 이유는 1) hoisting hoisting 이란 어떤 위치에서 선언을 하였어도 자동으로 맨 위로 올려서 선언되는것 입니다. 예를 들면 console.log(age); // undefined 출력 age = 28; console.log(age); // 28 출력 var age; age를 밑에서 선언하였어도 위에서 해당 변수를 호출하여 출력하는 결과를 얻을수 있게 되는 것이 hoisting 입니다. 처음 출력은 변수의 값이 초기화를 하기 전에 호출한 것이기 때문에 unde..

자바스크립트에서는 데이터를 크게 분류하면 원시(기본) 데이터 타입과 객체(참조) 데이터 타입이 있습니다. 원시 데이터 타입 - 숫자, 문자열, 불리언, null, undefined 객체 데이터 타입 - 객체가 될 수 있는 것들 함수, 배열 [] , {} 등이 있습니다. 그런데 아래 예제에서 보면 var str='coding'; console.log(str.length); // 6 console.log(str.charAt(0)); // "c" str은 문자열을 담고 있는 원시 데이터 타입이 됩니다. 하지만 str.length와 같이 str을 객체인 거처럼 사용이 됩니다. 그 이유는 자바스크립트가 str을 .으로 접근하는 순간에 임시로 str을 객체로 만들어 주게 됩니다. 즉 str.length를 하는 순간..

자바스크립트에서는 Object라는 객체가 존재합니다. 이 객체는 자바스크립트의 모든 객체의 부모 객체가 됩니다. 그래서 모든 객체는 Object의 메소드를 상속받아 사용할 수 있습니다. var arr = ['a','b','c']; console.log('Object.keys(arr)',Object.keys(arr)); var o = new Object(); console.log('o.toString()',o.toString()); var a = new Array(1,2,3); console.log('a.toString()',a.toString()); 위 예제처럼 new Object를 하지 않은 변수 a도 Object의 메소드인 toString()을 사용할 수 있습니다. 하지만 주의할 점이 한 가지 있습니..