JavaScript

자바스크립트 getter, setter 문법을 알아봅시다. 얕게 말하자면 오브젝트 내의 함수들을 괄호없이 쓸 수 있게 만들어주는 키워드인데 깊숙히 들어가면 데이터의 무결성을 보존하기 위해 쓰는 키워드라고 보시면 됩니다. 원본 데이터는 immutable(불변) 해야한다 하고 하는데, 데이터를 수정하거나 출력할 때 직접 원본 데이터를 만지는게 아니라 함수로 간접적으로 다루는게 대세를 이루고 있는데 거기에 합치되는 일종의 코딩 테크닉이라고 보시면 됩니다. 이걸 이해하려면 일단 object 데이터를 다루는 방법론에 대해 알아야합니다. 함수로 object 데이터를 꺼내는 방법 object 데이터를 하나 만들어봅시다. var 사람 = { name : 'Kim', age : 30, } 그 다음에 여러분의 내년 나이를..

class 라는 문법이 있습니다. constructor, prototype 을 이용한 상속기능을 만들어 주는 문법입니다. ES6 class 키워드로 구현하는 constructor 기계만들기 ES6 class라는 신문법으로 constructor를 만드시려면 이렇게 따라치시면 됩니다. class 부모 { constructor(){ this.name = 'Kim' } } var 자식 = new 부모(); 끝입니다. 예전 function 부모(){} 이렇게 기계를 만드는 문법과 똑같은 문법입니다. 이제 new 키워드를 이용해서 방금 만든 부모라는 기계에서 오브젝트를 새로 생성할 수 있는 것이고요. constructor()라고 쓴 부분에 예전처럼 this.name 어쩌구 하시면 새로 생성되는 오브젝트들에 값을 부..

ES5 출시 때 나온 Object.create()라는 신기한 문법이 하나 있는데, 손쉽게 상속을 이용해서 오브젝트를 만들 수 있습니다. Object.create() 사용하기 Object.create(부모object); 이렇게 사용하시면 이 자리에 오브젝트 자료형 하나가 남습니다. 그리고 소괄호 안에 적은 부모object가 유전자(prototype)가 되는 것이고요. 예를들면 var 부모 = { name : 'Kim', age : 50 }; var 자식 = Object.create(부모); console.log(자식.age); //50나옴 이렇게 사용한다는 소리입니다. 그럼 자식이라는 object는 부모를 prototype으로 두게 됩니다. 그럼 자식.name 해도 'Kim'이 출력되고요, 자식.age 해..

지난 게시물의 Constructor 문법을 통해 비슷한 객체를 생성하는 행위를 객체지향 용어로 상속(inheritance)이라고 합니다. 기계라는 Constructor가 가진 name, age 속성들을 그대로 물려받아서 오브젝트를 하나 뽑아주는게 재산 물려주는 상속과 비슷하다고 해서 상속이라고 부릅니다. 근데 자바스크립트엔 constructor 말고도 상속기능을 구현할 수 있는 장치가 하나 더 있습니다. prototype이라는 것인데 알아보도록 합시다. Constructor를 만드시면 prototype이라는 항목이 Constructor 안에 몰래 생성됩니다. 저희가 만든 기계(constructor)는 전부 prototype이라는 항목을 내부에 몰래 생성합니다. function 기계(){ this.name..

생성자(Constructor)란? 생성자는 객체를 편리하게 생성할 수 있게 도와주는 기계같은 역할입니다. 비슷한 객체들을 여러개 생성하기 위해서 생성할때마다 키밸류 값을 일일이 입력해서 만드는 것이아니라 하나의 생성자를 만들어놓으면 그 생성자를 이용하여 간편하게 해당 객체(인스턴스)를 생성할 수 있게 해줍니다. 이렇게 설명만 나열해서는 이해하기 어려울 수 있는 예를 들겠습니다. 현재 자바스크립트로 학생 출석부를 만들어야 하는 상황입니다. var 학생1 = { name : 'Kim', age : 15 }; var 학생2 = { name : 'Park', age : 15 }; ... 이렇게 쭉 30명을 만들어야합니다. 어떻게 하는게 가장 빠른 방법일까요? 당연히 오브젝트를 직접 중괄호쳐서 하드코딩 30개 하..

오늘은 객체지향 문법 시작 전 반드시 알아야할 reference, primitive data type을 알아봅시다. Primitive data type 자바스크립트의 자료형 (문자, 숫자, array, object 등)은 자료형을 크게 2개로 분류합니다. Primitive & reference라고 분류하는데 Primitive data type들은 그냥 별건 없고 자료 자체가 변수에 저장되는 자료들입니다. 문자, 숫자 자료형들이 대표적인 primitive data type들입니다. var name = 'john'; var age = 20; 이렇게 문자나 숫자 자료형은 문자나 숫자가 변수에 직접 저장된다는 소리입니다. 이를 설명한 이유는, 그렇지 않은 것들도 존재하기 때문인데요. 그것은 바로..!! . . ..

Rest Parameters : 나머지 매개변수 함수를 만들 때 ...이라는 기호를 파라미터 왼쪽에 추가가능합니다. 이렇게 파라미터 부분에 ...를 붙여서 정의한 매개변수를 나머지 매개변수라고 하는데, 이 구문을 사용할 경우, 함수에 전달된 전달인자들을 배열로 전달받게 됩니다. function 함수2(...파라미터들){ console.log(파라미터들) } 함수2(1,2,3,4,5,6,7); 위 코드를 실행해보면 파라미터들이라는 변수를 출력해줍니다. 파라미터들이라는 변수는 모든 파라미터를 [] array 안에 담고 있습니다. 이게 바로 ES6 환경에서 쓸 수 있는 rest 파라미터입니다. 원하는 파라미터 왼쪽에 ... 기호를 붙여주시면 "이 자리에 오는 모든 파라미터를 [] 중괄호로 감싸준 파라미터" 라..

ES6 Spread Operator 라는 문법을 알아봅시다. 마침표를 연달아서 3개... 찍으시면 그게 spread operator라는 문법입니다. 무슨 역할을 하냐면 아주 쉽게 설명하자면 "괄호제거 해주는 연산자" 입니다. 1. array에 붙이면 대괄호를 제거해줍니다 var 어레이 = ['hello', 'world']; console.log(어레이); console.log(...어레이); Array에서 사용해주면 어레이라는 Array 에 붙어있던 괄호를 제거해줍니다. ▲ 3번줄처럼 spread operator를 붙여서 출력해보시면 괄호가 제거된 'hello', 'world'만 콘솔창에 출력됩니다. 2. 문자에 붙이면 펼쳐줍니다 문자에 붙이면 문자에 붙은 괄호를 제거해줍니다. var 문자 = 'hell..