ECMAScript6

firstNumber: 100,
secondNumber:20,
print: function() {
    console.log(this);
    function add() {
        console.log(this);
        return this.firstNumber + this.secondNumber;
    }
    console.log(this.firstNumber + "+" + this.secondNumber + "=" + add());
}

자바스크립트는 함수 안에 함수를 정의할 수 있다.

객체의 메서드 안에서의 this는 자기자신 참조.

자바스크립트는 프로토타입 지원.. add()안의 this는 window객체를 참조해서 this.firstNumber로 값을 불러오지 못한다.

firstNumber: 100,
secondNumber:20,
print: function() {
    let self = this;
    function add() {
        console.log(self);
        return self.firstNumber + self.secondNumber;
    }
    console.log(this.firstNumber + "+" + this.secondNumber + "=" + add());
}

이런식으로 담아서 전달하는 방법이 있다. self로

또는,

firstNumber: 100,
secondNumber:20,
print: function() {
    const add = () => {
        console.log(this);
        return this.firstNumber + this.secondNumber;
    }
    console.log(this.firstNumber + "+" + this.secondNumber + "=" + add());
}

이런식으로 arrow function으로 해줄수도 있다.

 

of 뒤에는 iterable한 객체만 올수 있다.

in에는 어떤 객체든 대입할 수 있었으나..

 

let str = "가나다라마";
		
for(let ch of str) {
    console.log(ch);
}
let ary = [...str];
console.log(ary);
const [c1, c2] = str;		
const [c3, c4, ...c5] = str;

이런식으로 한다면, c1에는 '가', c2에는 '나', c3에는 '가',c4에는 '나', c5에는 '다','라','마' 가 들어간다.

 

let coffee = {
    name : "Americano",
    price : 3000
};
let {name: coffeeName2, caffeine: coffeeCaffeine1 = 500} = coffee;
console.log(coffeeName2);
console.log(coffeeCaffeine1);

name을 coffeeName2에 할당하고, 500을 coffeeCaffeine1에 할당해라..

콘솔창에는 이런식으로 출력되는 것을 볼 수 있다.

 

str = `${firstNumber1} * ${secondNumber1} = ${firstNumber1 * secondNumber1}`;
console.log(str);

` 문자열에서는 개행문자, 띄어쓰기가 다 인식된다

const colorArray = ["red", "green", "blue"];
const newColorArray = [...colorArray, "orange"];
		
console.log(colorArray);		
console.log(newColorArray);

콘솔창에 이런식으로 출력된다.

 

function myPrint(a, b, c) {
    console.log(`a=${a}`);
    console.log(`b=${b}`);
    console.log(`c=${c}`);
}
const array = [1, 2, 3];		
console.log(array);
myPrint( ... array);
		
const stringArray = [ ... "xyz"];		
console.log(stringArray);		
myPrint( ... stringArray);

...을 붙이면 스프레드 연산자가 되기 때문에

이런 콘솔창이 나오게 된다.

const array1 = ["a", "b", "c"];
console.log(array1);
array1.push("d");
console.log(array1);
array1.push("e", "f");
console.log(array1);
array1.push( ... ["g", "h", "i"]);		
console.log(array1);
array1.push(["j", "k"]);		
console.log(array1);

스프레드 식으로 보내지 않으면 그대로 들어가게 된다.

그래서 위와 같은 콘솔창이 보인다.

 

const array2 = [10, 20, 60, 50, 30];
console.log(Math.max( ... array2));
console.log(Math.max(array2));

배열에 담아서 최댓값을 구하려고 하면 구할 수 없다..

위와 같은 결과를 보인다.

스프레드 연산자로 풀어서 전달해야 한다.

const coffee = {
    name : "Americano",
    price : 3000
};
const coffee2 = {
    "name" : "Americano",
    "price" : 3000
};
const coffee3 = {
    'name' : 'Americano',
    'price' : 3000
};

이렇게 인용부호 있어도 되고 없어도 됨. 그런데 없으면 - 이거는 못쓴다.

const key1 = "name";
const key2 = "price";
		
const coffee4 = {
    key1 : 'Americano',
    key2 : 3000
};

이런식으로 하면 key1은 name이라는 속성명이 아님. 그냥 key1이라는 속성명.

그러나

const coffee5 = {
    [key1] : 'Americano',
    [key2] : 3000
};

이런식으로 대괄호를 붙이면 속성명으로 쓸수 있다. 위에서 key1은 name으로 정해줬으므로 [key1]은 name이라는 속성명을 갖게 된다.

 

const coffee = {
    name : name,
    price : price
};		
const coffee2 = {
    name,
    price
};		
const coffee3 = {name,price};

속성명과 변수가 이름이 같으면 위의 세가지 방법을 쓸 수 있다.

 

const obj = {
    x : 10, y : 20,
    test2() {
        return this.x + this.y;
    },

x,y,test2은 obj의 속성이다, x,y는 변수 사용하듯이, test2은 메서드.

function을 굳이 붙여주지 않아도 된다.function을 붙여준다면 test2 : function(){ 이런식으로 해줘야 하는데..

 

test4(p) {
    p ??= 3; // p가 null 이거나 undefined  이면 3을 할당
    return p+p; 
}

??= 이거는 p가 null 이거나 undefined이면 3을 할당한다는 뜻이다.

class Student {
    constructor(name, korean, math, english, science) {
        this.이름 = name;
        this.국어 = korean;
        this.수학 = math;
        this.영어 = english;
        this.과학 = science;
    } 
				
    toString() {
        return this.이름 + " :  " +
            this.국어 + ", " +
            this.수학 + ", " +
            this.영어 + ", " +
            this.과학
    }
}

이런식으로 자바스크립트에서 클래스를 만들수 있다.

class Person {
    // constructor(생성자)
    constructor(name, age) { 
        // fields
        this.name = name; 
        this.age = age;
    }
    // methods
    speak(color) {
        writeColor(`${this.name} 안녕!`, 'h3', color);
    }
}
let p1 = new Person('둘리', 10);
p1.speak('green');

이렇게 한다면 콘솔창에는 다음과 같이 출력되게 된다.

class User {
    constructor(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }

    get age() {
        write('getter 호출', 'h4');
        return this._age;
    }

    set age(value) {
        write('setter 호출 : ' + value, 'h4');
        this._age = value < 0 ? 0 : value; 
    }

    toString() {
        return `${this.lastName} ${this.firstName} : ${this.age}세`;
    }
}

이런식으로 getter,setter 설정할 수 있다. age에 대한 getter와 setter를 작성한다.

let obj = new User('길동', '고', 20);
obj.age = 40;

그리고 obj.age=40 이런식으로 하면 자동으로 setter가 호출되게 된다.

_가 없으면 getter가 계속해서 호출되게 되기 때문에 _를 붙여준다. 게터, 세터 설정할 때.( this. age라고 하면 rvaule일때는 getter를 호출하고 lvaule일때는 setter를 호출하게 되므로.)

class Shape {
    constructor(width, height, color) {
        this.width = width;
        this.height = height;
        this.color = color;
    }
    draw() {
        write(`${this.color} 색상으로 도형을 그린다`, 'h3');
    }
    getArea() {
        return this.width * this.height;
    }
}
class Rectangle extends Shape {} 
class Triangle extends Shape {
    getArea() {
        return (this.width * this.height) / 2;
    }
    draw() {
        super.draw(); // super는 부모클래스, 즉 Shape클래스를 지칭한다.
    }
}

프로토타입을 통한 객체 지향언어다.. 자바로 만들어지는 모든 객체는 Object의 자식이거나 자손이 된다.

Object를 복제해서 정보를 넣는다.

 

컨트롤러에서 cors 에러를 해결하려면

@CrossOrigin(origins = "*")

이런 코드를 넣어주면 된다.

 

const ajaxrequest = {
    get(url) {
        return fetch(url);
    },
    post(url, payload) {
        return fetch(url, {
            method: 'POST',
            headers: { 'content-Type': 'application/json' },
            body: JSON.stringify(payload)
        });
    },
    delete(url) {
        return fetch(url, { method: 'DELETE' });
    }
}

형식이 json이라고 헤더에서 알려준다. fetch로 통일되어 있는데, 두번째 아규먼트에 정보를 담은 걸 주면서 여러가지를 구현할 수 있다.

 

function getAll() {
    ajaxrequest.get('http://localhost:8088/boards')
        .then(response => {
            if (!response.ok) throw new Error(response.statusText);
                return response.json();
        })
        .then(boards => console.log(boards))
        .catch(err => console.error(err));
}

chaining 방식으로 구현.. then이나 catch나.. 

호출되는 상황을 콜백한다라고 함. ajax요청이 성공적으로 끝났을때 then호출 에러났을때는 catch 호출

응답이 오긴했는데 200이 아닐경우 (404이거나..) if (!response.ok) 이런 조건문을 걸어준다.

 

.json()하면 응답한 json 형식을 자바스크립트 객체로 만들어준다. 그걸 프로미스 형식으로 응답해주기
때문에 then을 호출할 수 있는거..

function sum(num1, num2) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            var result = num1 + num2;
            console.log(num1 + " + " + num2 + " = ");
            resolve(result);
        }, 2000);
    });
}

언제끝날지 모르는 작업을 수행하고 콜백함수를 받는데 성공적으로 수행하면 resolve, 실패하면 reject. 2초후에 수행하겠다.

const res1 =  sum(100, 200);
console.log(res1);

promise고 뭐고 화면에 출력하는 게 다야. 라는 뜻. 호출할때는..

이러면 콘솔창에는 

이런식으로 뜬다.

그러나

function processAsync() {
    sum(100, 200)
    .then(res1 => {
        console.log(res1)
        minus(100, 200)
        .then (res1 => {
            console.log(res1);
            multiply(100, 200)				
            .then(res1 => {
                console.log(res1);
                divide(100, 200)
                .then(res1 => console.log(res1));
            });
        });
    });			
}

이런식으로 구현하면 순서대로 뜨는 것을 확인할 수 있다. 체이닝 방식으로 호출하고 있다. 응답이 오면 처리하고 하는 방식으로 하고 있다. 이런식으로 비동기처리를 순차적으로 수행하고 있다. 이런 프로미스 객체를 통해서. 그러나 콜백의 지옥

콘솔창에 이런식으로 뜬다... 

async function processAsync() {
    const res1 = await sum(100, 200);
    console.log(res1);
    const res2 = await minus(100, 200);
    console.log(res2);
    const res3 = await multiply(100, 200);
    console.log(res3);
    const res4 = await divide(100, 200);
    console.log(res4);
}

async await 구문. 앞에 await를 붙이면 sum이 언제끝날지는 모르지만 끝날때까지 대기한다는 뜻. 그리고 리턴을 받게 된다. 위와 같은 결과가 나오게 된다. 이 await는 반드시 async function 안에서만 쓸 수 있다.

 

자바스크립트 소스 하나를 하나의 모듈로 봄. 같은 이름의 함수가 있던, 변수가 있던 모듈로 보니까 조금 더 자유로워짐.

 

export 지시자 : 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있다. -> 모듈 내보내기

import 지시자 : 사용하면 외부 모듈의 기능을 현재 모듈로 가져올 수 있다.

 

출처 : https://www.samanthaming.com/tidbits/79-module-cheatsheet/

- 모듈 내보내기

export component1
export component2
..

export {component1,component2,..}

똑같은 이름으로 import해야됨

 

(기본 내보내기)

export defalut component_name

 

이름 상관없이 import할 수 있다.

 

- 모듈 가져오기

import {component1, component2..} from module_name

import {original_component_name as new_component_name}

import * as variable_name from module_name

 

(기본 내보내기 가져올 때)

import any_variable_name from module_name

 

let name = "긔긔";

let coffee = {
    getName:function(){
        return name
    },
    setName:function(newName){
        name = newName
    }
};

export default coffee;

submodule2.js 를 이런식으로 작성하고 export default를 사용한다면

import ky from "./submodule2.js";
console.log(ky.getName());
ky.setName("영긔");
console.log(ky.getName());

mainmodule4.js를 이런식으로 작성해줄수있다. import ky 이런식으로 아무 이름이나 import할 수 있다.

콘솔창에 이런식으로 출력된다.

mainmodule을 아래와 같이 작성해줄수도 있다.

import ky, {name} from "./submodule3.js";

console.log(name);
console.log(ky.getName());

ky.setName("영긔");
console.log(ky.getName());

위와 같은 콘솔창을 보이게 된다.