Destructuring, import/export

1. Destructuring, 구조 분해 디스트럭쳐링이란 배열이나 오브젝트에 있는 값들을 분해하여 각각의 변수에 할당하는 것을 말한다. 원소가 3개 짜리인 배열이라면 각각의 원소를 변수로 담는 것이 어렵지 않지만 개수가 100개, 1000개가 넘을 경우 일일이 지정하는 것은 여간 복잡한 일이 아니다. var arr = [2,3,4]; // 직접 지정하기 var a = arr[0]; var b = arr[1]; var c = arr[2]; // Destructuring var [a,b,c] = [2,3,4]; // or var [a,b,c] = arr var [a,b,c=10] = [2,3]; a = 2, b = 3, c = 10 var [a,b,c=10] = []; // a,b undefined Des..

• format_list_bulleted JS 문법 정리
• · 2022. 9. 13.
• textsms

extends, getter/setter (객체 지향 4)

클래스를 만들면 여러 오브젝트를 생성자를 통해 만들고 관리할 수 있다. 그런데 만약에 특정 클래스에서 몇몇 속성이나 함수를 추가하여 새로운 클래스를 만들고 싶다면 어떻게 해야 할까? 이럴 때는 특정 클래스를 상속 받는 클래스를 만들면 된다. 이때 사용하는 문법이 extends이다. extends는 자바에서도 클래스 간 상속을 할 때 사용한다. 1. 클래스 상속 extends extends는 class를 상속하는 기능이다. 이를 통해 연관된 클래스를 만들 수 있다. class 할아버지 { constructor(name){ this.성 = 'Kim'; this.이름 = name; } } var 할아버지1 = new 할아버지('만덕'); class 아버지 extends 할아버지 { constructor(nam..

• format_list_bulleted JS 문법 정리
• · 2022. 9. 12.
• textsms

ES5, ES6 상속 (객체 지향 3)

상속을 사용하는 객체지향 문법은 Object를 여러 개 만들어야 하는 경우에 사용한다. 물론 다른 이유도 있다. 그건 여러가지 개념들을 공부하면서 알게 될 것 같다. 앞선 글에서 설명한 prototype에 직접 지정하는 방식은 구 문법이다. ES5, ES6 문법에서는 새로운 방법으로 상속을 사용한다. 1. ES5 상속 var 부모 = { name : 'Kim', age : 50 }; var 자식 = Object.create(부모); 자식.age = 20; // 자식에 key 값을 추가한다. -> 50이 아닌 20을 우선 출력한다. var 손자 = Object.create(자식); // 자식의 상속 // 손자.name = 'Kim' (부모인 '자식'의 prototype) // 손자.age = 20 (부모인..

• format_list_bulleted JS 문법 정리
• · 2022. 9. 7.
• textsms

상속, Prototype (객체지향 2)

생성자를 통해 인스턴스를 만든다는 것은 생성자라는 부모를 상속받는 것과 같다. 따라서 생성자의 여러 속성들을 사용할 수 있는 것이다. 이때 상속을 할 수 있는 방법 중 자바스크립트 언어만이 가지고 있는 특징이 하나 있다. 그것이 바로 Prototype이다. 프로토타입의 뜻은 원형, 표준 예라고 할 수 있으나 좀 더 와닿는 표현이 있다. 강의에서는 유전자라고 표현하였다. 1. Prototype, 자바스크립트에서의 상속 function Student(이름){ this.name = 이름; this.age = 15; this.sayHi = function(){ console.log('안녕하세요 ' + this.name + ' 입니다.'); }; Student.prototype.gender = '남' var 학생..

• format_list_bulleted JS 문법 정리
• · 2022. 9. 6.
• textsms

Data Type, Constructor (객체 지향 1)

데이터 타입은 크게 두 가지로 Primitive와 Reference가 있다. Primitive는 변수에 저장되는 값이 입력한 값 그대로 저장이 된다. 예를들어 숫자나 문자 혹은 문자열 같은 경우, 변수에 저장했을 때 그 데이터가 이진수로 변환되어 변수라는 메모리 공간에 그대로 저장이 된다. 하지만 Reference 타입의 경우 해당 데이터가 그대로 변수에 저장되지 않는다. 그 데이터를 가리키는(참조하는) 주소를 저장한다. Reference 데이터 타입의 대표적인 예는 Array와 Object이다. 1. Primitive / Reference 값 복사 // Primitive data type 복사 특징 var 이름1 = '김'; var 이름2 = 이름1; // 복사 console.log(이름2); // '..

• format_list_bulleted JS 문법 정리
• · 2022. 9. 6.
• textsms

함수 Default 값, Rest 파라미터

C, 자바, 파이썬 등 여러 언어들을 찍먹(?) 해봤지만 자바 스크립트 만큼 문법에 있어서 유연한 언어는 없는 것 같다. var 변수만 보더라도 논리적인 오류들을 전부 눈감아주는 희한한 언어다. 함수에서도 파라미터를 받을 경우 한 두개를 빼먹더라도 에러 없이 정상적으로 함수가 동작한다. 1. 함수의 파라미터 Default 값 설정 function 함수(a,b,c){ return a+b+c } 함수(1,2) // 1+2 위의 경우 필요한 파라미터는 3개지만 전달받은 건 2개밖에 안된다. 즉, c를 빼먹었음에도 함수가 정상적으로 동작한다. 이 때 빼먹은 c의 경우는 undefined(정의되지 않은 값)로 처리되어 나머지 전달받은 값만 처리한다. 이처럼 파라미터를 빼먹었을 경우에 undefined가 아닌 기본..

• format_list_bulleted JS 문법 정리
• · 2022. 9. 5.
• textsms