JavaScript 썸네일형 리스트형 [JavaScript] class를 복사하는 extends / super class, prototype, constructor를 지나 이제 자바스크립트 객체지향 문법의 끝판왕인 extends를 배워보도록 합시다. class를 상속한 class를 만들 때 사용하는 extends 한 class와 유사한 class를 하나 더 만들고 싶은 경우가 있는데, 이 때 extends라는 문법을 사용할 수 있습니다. extends를 사용하여 class를 만들면 기존에 있던 class의 내용을 그대로 복붙해서 만들어낼 수 있습니다. 즉, class에 class를 상속해서 만들 수 있게 도와주는 문법 입니다. 그리고 extends된 오브젝트들은 super를 사용해서 값들을 받아와야 합니다. super()는 'extends로 상속된 부모 class의 constructor()'를 의미합니다. cla.. 더보기 [JavaScript] ES5/ES6 방식으로 구현하는 상속 기능 ES5 방식 prototype, this, class와 같은 방식 외에 ES5 출시 때 나온 Object.create()라는 문법이 있습니다. 상속을 이용해서 오브젝트를 만들고 싶다면 이 문법을 사용하면 쉽게 구현해낼 수 있습니다. 하지만 class문법에 밀려서 인지도는 낮습니다. var Parent = { name : 'Kim', age : 50 }; var Child = Object.create(Parent); // es5에 나온 상속된 오브젝트 만드는 방법 console.log(Child.age); // 50 위 예제에서 child를 직접 호출하면 아무런 값도 가지고 있지 않습니다. 하지만, prototype은 parent가 되어있기에 prototype으로 사용할 수 있습니다. Q. child의 a.. 더보기 [JavaScript] 상속과 Prototype Prototype은 생성자(Construtcor)외의 상속(Inheritance)을 구현할 수 있는 또 하나의 문법 입니다. 생성자(Constructor)가 가지고 있던 속성들을 그대로 물려받아 오브젝트를 만들기 때문에 상속이라고 부르며 Constructor를 부모, 생성된 오브젝트를 자식이라고 합니다. Prototype을 직역하면 유전자라는 뜻이 됩니다. 그리고 Constructor를 만들면 Prototype이라는 공간이 자동으로 생깁니다. Prototype에 값을 추가하게 되면 모든 자식들이 물려받게 됩니다. function Fc(name){ // Constructor, 상속관계에서 부모 this.name = name; this.age = 15; this.say = function(){ console.. 더보기 [JavaScript] 객체지향문법 - Primitive / Reference data type 객체지향 문법을 알아보기 위해 반드시 알고 있어야 하는 Reference data type, Primitive data type에 대해 알아보겠습니다. 자바스크립트의 자료형(문자, 숫자, 배열, object 등)은 크게 2개로 분류할 수 있습니다. Primitive와 Reference로 분류됩니다. Primitive data type 자료 자체가 변수에 바로 저장되는 자료들입니다. 문자, 숫자 자료형들이 대표적입니다. // primitive data type var data1 = 'hello'; var data2 = 1234567890; Reference data type 배열, Object 자료형은 Reference data type에 속합니다. 자료를 변수에 직접 저장하지 않고 자료의 값이 저장된 주.. 더보기 [JavaScript] apply, call 함수 알아보기 apply / call 해당 함수를 실행할 때 다른 오브젝트에 함께 적용해서 실행해달라는 뜻입니다. 해당 값들이 합쳐지는 것은 아닙니다. 실행 할 때만 합쳐서 실행되는 것입니다. call 또한 apply와 똑같은 기능을 지원합니다. // person2에 person의 hello라는 키와 값을 넣어주면서 실행하고 싶을 때 var person = { hello : function(){ console.log('안녕') } } var person2 = { name: '홍길동' } person.hello.apply(person2); // -> person.hello를 person2에 합쳐서 실행한다 person.hello.call(person2); // -> person.hello를 person2에 합쳐서 실행한다 더보기 [JavaScript] 스프레드 오퍼레이터(Spread Operator) Spread Operator 마침표를 연달아 3개 ( ... ) 를 찍는 문법을 스프레드 오퍼레이터(Sprade Operator)라고 합니다. 한글로는 '펼침연산자'라고도 합니다. 스프레드 오퍼레이터는 대괄호, 중괄호, 소괄호 안에서만 사용 가능하며 외부에서 사용할 경우, 에러가 발생합니다. 1. 스프레드 오퍼레이터는 배열(Array)에 사용하면 대괄호를 제거하여 나타내줍니다. var array = ['hello', 'world']; console.log(array); // -> ['hello', 'world'] console.log(...array); // -> 스프레드 오퍼레이터가 대괄호를 제거해주어 'hello', 'world'로 변환되어 // 최종적으로 hello world가 출력된다. 2. 스프.. 더보기 [JavaScript] 문자 다루는 방법(Template Literals) 기존의 자바스크립트에서 문자를 작성할 때 불편한 점을 해결하기 위해 나온 문법입니다. 따옴표 대신 백틱(Backtick) 혹은 백쿼트(Backquote)라고 불리며 ( ` ` ) 기호를 사용하여 문자를 만들 수 있습니다. 위치는 키보드의 1옆의 ` 기호 입니다. 이 문법을 사용할때의 장점은 무엇인지 알아봅시다. 1. 엔터키를 사용하여 작성 가능합니다. - 기존 따옴표( ' ', " " )를 쓸 때 엔터키를 사용하면 문자열이 깨지게 됩니다. - 백틱을 사용하면 엔터키를 사용하여도 문자열이 깨지지 않습니다. var text = '안녕 하세요'; // 기존의 따옴표로는 엔터로 줄을 나누면 문자열이 깨져 에러가 발생한다. var text = `안녕 하세요`; // 백틱을 사용하면 엔터로 줄을 나누더라도 에러가 .. 더보기 [JavaScript] 전역변수, 지역변수 전역변수 전연변수란, 모든 곳에서 쓸 수 있는 변수를 말한다. 함수 바깥에서 선언한 변수는 함수 안에서 사용이 가능한 전역변수가 된다. var age = 20; // 함수 밖에서 선언한 변수는 전역변수가 된다. function fc(){ console.log(age); } fc(); // 값 -> 20 또한, window를 사용하여 전역변수를 만들 수 있다. var age = 20; // 기본 사용 방법 window.name = 'kim'; // window를 사용한 전역변수 만드는 방법 console.log(name); // 'kim' console.log(window.name); // 'kim' 지역변수 함수 안에서 만들어진 변수는 함수 안에서만 사용할 수 있으며, 지역변수라고 부른다. var age.. 더보기 이전 1 2 3 다음
