Javascript

{
    const a = 100;
    const b = 200;
    const c = "javascript"

    const obj = {a, b, c}

    document.write(obj.a); //객체 안 개체 키 a 출력 : 100
    document.write(obj.b); //객체 안 개체 키 b 출력 : 200
    document.write(obj.c); //객체 안 개체 키 c 출력 : javascript
}

{
    const x = 100, 
    y = 200,
    z = "javascript" //상수 x에 100, y에 200, z에 javascript

    document.write(x)       //x의 값 100 출력
    document.write(y)       //y의 값 200 출력
    document.write(z)       //z의 값 javascript 출력
}

{
    const arr = [100, 200, "javascript"];       //배열 arr에 100, 200, javascript 대입

    document.write(arr[0]);     //배열 arr 첫번째 값 100 출력
    document.write(arr[1]);     //배열 arr 두번째 값 200 출력
    document.write(arr[2]);     //배열 arr 세번째 값 javascript 출력
}

{
    const arr = [100, 200, ["javascript","jquery"]]     //arr 배열에 100,200,세번째 자리에 배열 삽입 후 javascript,jquery 삽입

    document.write(arr[0]);       //arr 배열 첫번째에 100 대입
    document.write(arr[1]);       //arr 배열 두번째에 200 대입
    document.write(arr[2][0]);       //arr에 배열 세번째의 배열에 첫번째 배열에 javascript 대입
    document.write(arr[2][1]);       //arr에 배열 세번째의 배열에 첫번째 배열에 jquery 대입
}

{
    const arr = [100, 200, "javascript"]; // 배열 arr에 100, 200, javascript 대입

    document.write(arr.length) // 배열의 개수 : property의 경우 정해져있어서 () 안씀
}

{
    const arr = [100, 200, 300, 400, 500];
    
    for(let i=0; i<arr.length; i++){ // i의 값을 최대 배열의 길이 만큼 1씩 증가시킵니다.
        document.write(arr[i]); //i의 값으로 배열의 각 값을 출력합니다.
    }
}

{
    const num = [100, 200, 300, 400, 500]; //요소:eliment

    //for each문
    num.forEach(function(el){  // 콜백함수 사용 (요소)
    document.write(el);  // num에서 요소만 출력
    })

    //for each문
    num.forEach(function(el, index, array){ //콜백함수 사용 (요소, 위치, 배열)
    
    document.write(el); // num에서 요소만 출력
    document.write(index); // num에서 위치만 출력
    document.write(array); // num에서 배열만 출력
    });
}

{
    const arr = [100, 200, 300, 400, 500]; // 배열 arr에 100,200,300,400,500 대입

    //for of문
    for(let i of arr){ // i를 배열로 설정
        
    document.write(i); // i(배열)를 출력

    }
}           

{
    const arr = [100, 200, 300, 400, 500]; // 배열 arr에 100,200,300,400,500 대입

    //for in문
    for(let i in arr){ // arr에서 i(배열)를 자리 출력
    
    document.write(arr[i]); // i(배열)을 출력
}

{
    const arr = [100, 200, 300, 400, 500];
    
    //forEach문
    arr.forEach(function(el){ //불러오는 대상, (콜백함수(요소)){}
        document.write(el);
    });
    
    //forEach문
    arr.forEach(function(el, index, array){ //불러오는 대상, (콜백함수(요소, 인덱스(위치), 배열))
        document.write(el); // 요소를 출력
        document.write(index); // 인덱스(위치)를 출력
        document.write(array); // 요소를 출력
    })

    //map문
    arr.map(function(el){
        document.write(el)
    })

    //map문
    arr.map(function(el, index, array){ //불러오는 대상, (콜백함수(요소, 인덱스(위치), 배열))
        document.write(el); // 요소를 출력
        document.write(index); // 인덱스(위치)를 출력
        document.write(array); // 요소를 출력
    });
}

 {
    const num = [100, 200, 300, 400, 500,];

    document.write(num);                                 //이렇게하면 배열 자체를 가져오기 떄문에 쉼표가 붙음
    document.write(num[0],num[1],num[2],num[3],num[4]);  //하나씩 불러왔기 떄문에 쉼표가 안붙음
    document.write(...num);                              //...은 오퍼레이션이며 배열 자체를 그냥 불러왔을때 쉼표를 제거해준다.
}

 {
    let a, b, c; //배열 생성
    [a,b,c]=[100,200,"javascript"]; //구조를 깨서 다시 배당해줌

    document.write(a);
    document.write(b);
    document.write(c);
}

{
    const obj = {
        a : 100,
        b : 200,
        c : "javascript"
    }
    
    document.write(obj.a);
    document.write(obj.b);
    document.write(obj.c);
}

{
    const obj = {
        a : 100,
        b : 200,
        c : "javascript"
    }

    document.write(Object.keys(obj))        //각 개체의 키
    document.write(Object.values(obj))      //각 개체의 값
    document.write(Object.entries(obj))      //각 개체의 키와 값
}

{
    const obj = {
        a : 100,
        b : 200,
        c : "javascript"
    }

    const name1 = obj.a;            //객체의 a키 값을 상수 name1에 저장
    const name2 = obj.b;            //객체의 b키 값을 상수 name2에 저장
    const name3 = obj.c;            //객체의 c키 값을 상수 name3에 저장

    document.write(name1);          //상수 name1 출력
    document.write(name2);          //상수 name2 출력
    document.write(name3);          //상수 name3 출력
}

let result = document.querySelector(“.sample19_result”);
const obj = {
    a: 100,
    b: 200,
    c: “javascript”,
};
const spread = { ...obj };
result.innerHTML += spread.a;
result.innerHTML += spread.b;
result.innerHTML += spread.c;

 //추가의 의미
let result = document.querySelector(“.sample20_result”);
const obj = {
    a: 100,
    b: 200,
    c: “javascript”,
};

const spread = { ...obj, d: “jquery” };
result.innerHTML += spread.a;
result.innerHTML += spread.b;
result.innerHTML += spread.c;
result.innerHTML += spread.d;

//결합의 의미
let result = document.querySelector(“.sample21_result”);
const objA = {
    a: 100,
    b: 200,
};
const objB = {
    c: “javascript”,
    d: “jquery”,
};
const spread = { ...objA, ...objB };
result.innerHTML += spread.a;
result.innerHTML += spread.b;
result.innerHTML += spread.c;
result.innerHTML += spread.d;

let result = document.querySelector(“.sample22_result”);
const obj = {
    a: 100,
    b: 200,
    c: “javascript”,
};
const { a, b, c } = obj;
result.innerHTML += a;
result.innerHTML += b;
result.innerHTML += c;

const obj = {
    a: 100,
    b: 200,
    c: "javascript"
}
const {a:name1, b:name2, c:name3} = obj

document.write(name1);
document.write(name2);
document.write(name3);