[DAY - 55] JSON, 구조분해, 생성자 함수, class

• JSON
• 구조분해
• 생성자 함수
• class

 

 

1) JSON

JSON.stringify()
웹페이지에서 서버로 보낼 때 문자열 변환해서 보냄
JSON.parse()
서버에서 문자열로 받은 데이터를 Object 형식으로 변환

let data = [
    {
        "firstName" : "길동",
        "lastName" : "홍",
        "age" : 40
    },
    {
        "firstName" : "동길",
        "lastName" : "민",
        "age" : 20
    },
    {
        "firstName" : "윤길",
        "lastName" : "박",
        "age" : 50
    }
]

let result = "";

result = JSON.stringify(data, null, 4);

console.log(result);
console.log(data);

let obj = JSON.parse(result);

console.log(obj);



[
    {
        "firstName": "길동",
        "lastName": "홍",
        "age": 40
    },
    {
        "firstName": "동길",
        "lastName": "민",
        "age": 20
    },
    {
        "firstName": "윤길",
        "lastName": "박",
        "age": 50
    }
]
[
  { firstName: '길동', lastName: '홍', age: 40 },
  { firstName: '동길', lastName: '민', age: 20 },
  { firstName: '윤길', lastName: '박', age: 50 }
]
[
  { firstName: '길동', lastName: '홍', age: 40 },
  { firstName: '동길', lastName: '민', age: 20 },
  { firstName: '윤길', lastName: '박', age: 50 }
]

 

 

2) 구조분해

let arr = ['김', '이', '박'];
let a1 = arr[0];
let a2 = arr[1];
let a3 = arr[2];
console.log(a1,a2,a3);

let [n1, n2, n3] = ['김', '이', '박'];
console.log(n1, n2, n3);

let [a, [b, c]] = [10, [20, 30]];
console.log(a, b, c);

let [num1, ...nums] = [40,50,60];
console.log(num1,nums);



김 이 박
김 이 박
10 20 30
40 [ 50, 60 ]

const {cc, dd} = {
    cat : '고양이',
    dog : '강아지'
}
console.log(cc, dd);



undefined undefined

객체의 경우 임의로 정의해서 사용이 불가능하다. 따라서 cat, dog를 넣어야 한다.

const {cat, dog} = {
    cat : '고양이',
    dog : '강아지'
}
console.log(dog, dog);



고양이 강아지

 

 

3) 생성자 함수

* 요즘은 생성자 함수 대신 대부분 class를 사용한다고 한다. 따라서 개념만 간단하게 배웠다.

function 함수명(){

}
const 변수 = new 함수명();

기본 형식

function Man(){
    this.name = '박'
    this.age = 33
}

let man1 = new Man();
let man2 = new Man();
console.log(man1.name, man1.age);
console.log();
console.log(man2.name, man2.age);

const User = function(id, email){
    this.id = id;
    this.email = email;
}
const foo = new User('aaa', 'aaa@gmail.com');
const foo2 = new User('bbb', 'bbb@gmail.com');

console.log(foo.id, foo.email);
console.log(foo2.id, foo2.email);



박 33

박 33
aaa aaa@gmail.com
bbb bbb@gmail.com

매개변수를 직접 넣어 다르게 출력할 수도 있고, 추후에 수정을 해서 바꿀 수도 있다.

 

4) class

class 클래스명 {
    construtor() {
        this.맴버변수 = 값
    }
    메서드()
}

class Test {
    name = '김'
    age = 10
}

const test1 = new Test();
console.log(test1.name, test1.age);

console.log('--------------------------------------');

function Man(name, age){
    this.name = name
    this.age = age
}

class User{
    constructor(name, age){
        this.name = name
        this.age = age
    }
    run(){
        console.log(this.name, '씨 와서 밥 먹어');
    }
};

const user = new User('박', 30);
console.log(user.name, user.age);
user.run();



김 10
--------------------------------------
박 30
박 씨 와서 밥 먹어

문법과 사용하는 방식은 생성자 함수와 비슷하다.