몽탁이의 개발일기

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..

React란 자바스크립트를 기반으로 페이스북에서 UI 부분을 재사용과 유지보수성을 높이기 위해 만든 자바스크립트 라이브러리입니다. React의 문법을 알아보기 전에 환경을 구축하는 방법을 알아보겠습니다. 우선 React를 사용하기 위해서는 create-react-app이라는 프로그램을 설치해야 됩니다. create-react-app이라는 프로그램은 Node.js를 먼저 받아야 합니다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 해당 홈페이지로가 자신이 원하는 버전을 받습니다. (저는 최신 버전을 다운로드하였습니다.) 프로그램을 별다른 설정 없이..

자바스크립트에서는 데이터를 크게 분류하면 원시(기본) 데이터 타입과 객체(참조) 데이터 타입이 있습니다. 원시 데이터 타입 - 숫자, 문자열, 불리언, 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()을 사용할 수 있습니다. 하지만 주의할 점이 한 가지 있습니..

표준 내장 객체는 프로그래머가 소프트웨어를 만드는데 편하게 만들어주는 미리 만들어진 객체입니다. 만약 프로그래머가 랜덤 한 수가 필요할 때 랜덤 한 수를 리턴하는 로직을 따로 만들지 않고 내장되어 있는 Math객체를 이용해 Math안에 메서드를 사용하여 랜덤 한 수를 구하는 것처럼 프로그래머를 편하게 만들어줍니다. var arr = new Array('seoul','new york','ladarkh','pusan','Tshkuba'); function getRandomValueFromArray(arr){ var index = Math.floor(arr.length * Math.random()); return arr [index]; } console.log(getRandomValueFromArray(arr..

자바스크립트에서 prototype은 아주 중요한 개념입니다. 자바스크립트의 객체지향을 지탱해주는 큰 역할을 해주기 때문입니다. 또 일반적인 객체지향 언어와 구분해주는 중요한 개념이기도 합니다. prototype은 모든 객체가 가지고 있는 속성입니다. 그리고 이 속성은 자신이 어떤 객체인지에 대한 객체가 들어 있습니다. function Ultra(){} Utra.prototype.ultraProp = true; function Super(){} Super.prototype = new Ultra(); function Sub(){} Sub.prototype = new Super(); var o = new Sub(); console.log(o.ultraProp); 위 예제는 해당 객체의 prototype 프로퍼..

자바스크립트에서의 상속은 prototype이라는 객체가 있기 때문에 가능합니다. 우선은 자바스크립트에서 상속을 어떻게 사용하는지에 대해서만 설명하고 다음에 prototype이라는 개념을 알아보겠습니다. 상속은 특정 객체의 기능들을 물려받아 사용하거나 기능을 더 추가하여 사용할 수 있게 하는 것입니다. 이런 특성은 재활용성을 높여주고 유지보수에 있어서 간편하게 해 줄 수 있습니다. function Person(name){ this.name = name; } Person.prototype.name = null; Person.prototype.introduce = function() { return 'My name is ' + this.name; } function Programmer(name) { this...

this는 객체를 지칭하는 키워드입니다. 객체를 지칭하는 시점이 상황에 따라 다르기 때문에 주의하여야 합니다. function func(){ if(window === this){ console.log('window === this'); } } func(); 위 예제의 함수를 호출하면 'window === this'가 출력이 됩니다. 그 이유는 앞에 전역객체의 내용처럼 모든 객체는 전역 객체의 속성으로 선언되기 때문입니다. var o ={ func: function(){ if(o === this){ console.log('o === this'); } } } o.func(); 이번에는 o라는 객체 안에 함수를 정의하여 해당 함수를 호출하게 되면 his는 o라는 객체를 가리키게 됩니다. 이렇듯 this는 호출..