분류 전체보기

📌 getter, setter- 오브젝트 내의 함수들을 괄호 없이 쓸 수 있게 만들어주는 키워드- 데이터의 무결성을 보존하기 위해 쓰는 키워드 원본 데이터는 immutable 해야 한다. (immutable  = 불변)데이터를 수정하거나 출력할 때 직접 원본 데이터를 만지는 것이 아니라 함수로 간접적으로 다루는 게 대세이다. 📌 함수로 object 데이터 꺼내기var 사람 = { name : 'Kim', age : 30, nextAge(){ return this.age + 1 }} nextAge 는 내년 나이를 출력해주는 함수이다.   🔎 굳이 왜 nextAge 를 활용할까?- object 안의 데이터가 복잡할 수록 함수를 이용하는 것이 데이터를 꺼내기가 쉽다.- 내부에 있는 name,..

📌 class 문법 사용 하는 방법class 부모 { constructor(){ this.name = 'Kim' }}var 자식 = new 부모(); 📌 상속 가능한 함수를 추가하려면?sayHi 라는 함수를 상속가능한 함수를 추가하려면, class를 배우기 이전에는1. constructor 안에 this.sayHi 형식으로 추가하기2. prototype 에 추가하기두 가지 방법이 있었다. class 를 활용하면,1번은 아래와 같이 쓴다. (constructor 안에 정의!)class 부모 { constructor(){ this.name = 'Kim'; this.sayHi = function(){ console.log('hello') } }}var 자식 = new 부모(); 새로..

Object.create() 는 ES5 출시 때 나온 문법이다. (class 문법에 밀려 인지도는 낮음)  자식이라는 object 는 부모를 prototype 으로 두게 된다. 자식 오브젝트의 age 를 변경하고 싶다면? 자식의 자식(=손자) 을 만들려면? 손자에 age 가 있는 지 확인한다. 없다면, 자식에 age 가 있는 지 확인한다.자식.age = 20 이므로 20이 출력된다. 요즘 개발자들은 class, extends 문법을 이용하여 상속의 상속기능을 만든다고 한다.

자바스크립트에서는 cunstructor 말고도 상속기능을 구현할 수 있는 장치가 하나 더 있다.바로 prototype(프로토타입) 이다. 다음과 같이 MakeProd 라는 상속자함수가 있다고 하자.function MakeProd (name, price) { this.name = name; this.price = price; this.부가세 = function() { console.log('부가세는 ' + this.price * 0.1 + '원 입니다.'); }}var prod1 = new MakeProd('shirt', 50000);var prod2 = new MakeProd('pants', 60000); makeProd 안에넌 prototype 이라는 항목을 내부에 몰..

cunstructor = 오브젝트를 복사해서 찍어낼 수 있는 새로운 문법object 자료 복사 기계를 만들 땐 function 이라는 함수만드는 키워드를 빌려서 이용하면 된다. 학생부를 찍어낸다고 가정하면,아래와 같이 만들면 된다.this 는 새로 생성되는 오브젝트(= 인스턴스) 를 뜻한다. function makePerson() { this.name = 'kim'; this.age = 20;} 이제 makePerson 이라는 자료 복사 기계에서 새로운 오브젝트를 뽑고 싶다면?new 키워드 활용하면 된다.// constructorfunction makePerson() { this.name = 'kim'; this.age = 20;} var person1 = new makePerson();var ..

default 파라미터function plus (a, b = 5) { console.log(a + b);}plus(1); // 6 출력 b 의 값을 넘겨주지 않았지만, default 파라미터로 5를 지정했기 때문에 1 + 5 = 6 이 출력된다. - 수학 연산자 사용 가능ex) b = 5 * 2 - 다른 파라미터와 연산도 가능function plus (a, b = 5 * a) { console.log(a + b);}plus(2); // 2 + 5 * 2 = 12 출력 - 함수입력 가능function plus (a, b = test() ) { console.log(a + b); // 2 + 10 = 12 출력}plus(2);function test () { return 10} 함수의 argu..

Spread Operator (... 연산자) : 괄호를 제거해주는 연산자 var arr = ['hello', 'world'];console.log(arr);console.log(...arr);  문자에 붙이면 어떻게 될까?var str = 'hello';console.log(...str); console.log('h', 'e', 'l', 'l', 'o'); 를 출력 하는 것과 동일하게 출력된다. 문자도 array 와 비슷하다. array 처럼 인덱스를 붙여서 출력할 수 있다.  어디에 활용할까?1) Array 합치기/복사var arr1 = [1, 2, 3];var arr2 = [4, 5, 6];var arr3 = [...arr1, ...arr2]; var arr1 = [1, 2, 3];var arr2 ..

문자와 변수를 구분하여 추출할 때 유용한 기능이다. var name = '홍길동';function 해체분석기(문자들,변수들) { console.log('문자들 > ', 문자들); console.log('변수들 > ', 변수들);}해체분석기`안녕하세요. 제 이름은 ${name} 입니다`; 함수를 실행시킬 때 소괄호가 아니라 ` (백틱) 문자를 붙이면 된다. 첫번째 파라미터는 `백틱` 내의 순수 문자만 골라서 Array 로 만들어 놓은 파라미터두번째 파라미터는 `백틱` 내의 ${} 변수를 담는 파라미터이다.

📌 var, let, constvarlet const재선언 O재선언 X재선언 X재할당 O재할당 O재할당 Xfunction (함수레벨){ } (블록레벨) { } (블록레벨)  let, const 는 var 에 비해 엄격하다! 라고 기억하면 편하다. const 로 오브젝트를 선언하면, 오브젝트 자체를 재할당하는 것은 불가능하나, 오브젝트 내의 데이터는 변경 가능하다. 만약에 오브젝트 내의 데이터도 변경 불가능하게 하고 싶다면 ?Object.freez() 라는 자바스크립트 기본함수 사용 (오브젝트 내의 오브젝트 까지 freeze 하진 않음) if 문 내에서 쓴 var 은 if 문 밖에서도 쓸 수 있다.function test () { var a = 'a';}if (true) { var age = ..

📌 기본함수 & arrow fuction 선언 및 호출// 자바스크립트에서 함수를 만드는 방법 두 가지// 1)function test () { console.log('test 함수 입니다.')}// 2)var test2 = function () { console.log('test2 함수 입니다.');}// 함수 실행하는 방법test();test2();// arrow fuctionvar test3 = () => { console.log('test3 함수입니다.')}// 화살표 함수의 실행test3();  📌 arrow function 을 쓰는 이유1. 함수 본연의 기능을 아주 잘 표현함function 문법을 사용하는 이유?1) 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때 (+..