데이터 불러오기

01. 변수 : 데이터 불러오기

변수를 선언하고 값을 할당하는 예제입니다.

{
    let x = 100, y = 200, z = "javascript";

    console.log(x, y, z);
}

x: 숫자 100을 할당합니다.
y: 숫자 200을 할당합니다.
z: 변수에는 문자열 "javascript"를 할당합니다.

결과 확인하기

100
200
javascript

02. 상수 : 데이터 불러오기

const를 사용하여 상수를 선언하고 초기값을 할당하는 예제입니다.

{
    const x = 100, y = 200, z = "javascript";

    console.log(x, y, z);
}

x: 숫자 100을 할당합니다.
y: 숫자 200을 할당합니다.
z: 변수에는 문자열 "javascript"를 할당합니다.

결과 확인하기

100
200
javascript

03. 배열 : 데이터 불러오기

배열을 생성하고 배열의 요소에 접근하여 값을 출력하는 예제입니다.

{
    const arr = [100, 200, "javascript"];

    console.log(arr[0], arr[1], arr[2]);
}

const arr = [100, 200, "javascript"];은 배열 arr을 선언하고 초기값으로 세 개의 요소를 가진 배열을 생성합니다.
첫 번째 요소에는 숫자 100을 할당합니다.
두 번째 요소에는 숫자 200을 할당합니다.
세 번째 요소에는 문자열 "javascript"를 할당합니다.

결과 확인하기

100
200
javascript

04. 배열 : 데이터 갯수 불러오기

배열의 길이를 확인하는 예제입니다.

{
    const arr = [100, 200 , "javascript"];

    console.log(arr.length);
}

배열 arr의 첫 번째 요소에는 숫자 100을 할당합니다.
배열 arr의 두 번째 요소에는 숫자 200을 할당합니다.
배열 arr의 세 번째 요소에는 문자열 "javascript"를 할당합니다.

console.log(arr.length);는 배열 arr의 length 속성을 출력합니다.
이 속성은 배열에 포함된 요소의 개수를 나타내며, 배열의 길이를 반환합니다.
따라서 배열 arr에는 100, 200, javascript 3개의 요소가 있으므로 3을 출력합니다.

결과 확인하기

3

05. 배열 : 데이터 불러오기 : for()

for 반복문을 사용하여 배열의 요소를 순서대로 접근하고 값을 출력하는 예제입니다.
for 반복문은 일정한 조건을 만족하는 동안 코드 블록을 반복적으로 실행하는데 사용됩니다.

{
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];

    //console.log(arr[0]);
    //console.log(arr[1]);
    //console.log(arr[2]);
    //console.log(arr[3]);
    //console.log(arr[4]);
    //console.log(arr[5]);
    //console.log(arr[6]);
    //console.log(arr[7]);
    //console.log(arr[8]);

    for (let i = 0; i < 9; i++) {
        console.log(arr[i]);
    }
}

배열 arr은 아홉 개의 숫자 요소를 가진 배열을 생성합니다.
for 반복문을 이용하면 주석처럼 코드를 작성하지 않아도 간단하게 값을 출력할 수 있습니다.
for 반복문은 변수의 초기값, 조건식, 증감으로 이루어져 있습니다.
i = 0;: i의 초기값이 0으로 할당됩니다.
i < 9;: 출력값이 참인 경우 반복합니다.
따라서 i가 9보다 작을 경우 반복문이 실행됩니다.
i++: i의 값을 1씩 증가시킵니다.
반복문 실행 순서: 초기값이 조건식에 맞는지 확인 후 실행문을 실행 -> 데이터 값이 증감값에 의해 증감되고 let이 없어진 i가 되어 값이 변경됨 -> 조건식에 맞지 않을 때까지 실행문을 반복함
따라서 console.log(arr[i]);는 i가 0부터 8까지 순서대로 증가하면서 반복한 값을 출력합니다.

결과 확인하기

100
200
300
400
500
600
700
800
900

06. 배열 : forEach()

forEach 메서드는 콜백 함수를 인자로 받습니다.
forEach 메서드를 사용하여 배열의 각 요소를 순서대로 하나씩 가져와서 반복적으로 처리하는 예제입니다.

{
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];

    arr.forEach(function(el) {
        console.log(el);
    });
    
    arr. forEach((el, index) => {
        console.log(index);
    });

    arr. forEach((el, index, array) => {
        console.log(array);
    });
    
    arr. forEach(el => {
        console.log(el);  
    });

    arr. forEach(el => console.log(el));
}

1. forEach 기본형: arr.forEach(function(el){console.log(el);});: 배열 arr의 각 요소를 el 변수로 받아와서 출력합니다.
2. 인덱스 출력: arr. forEach((el, index) => {console.log(index);});: el은 현재 요소를 나타내고 index는 현재 요소의 인덱스를 나타냅니다.
3. 배열 출력: arr. forEach((el, index, array) => {console.log(array);});: array 매개변수를 통해 배열 전체를 출력할 수 있습니다.
4. 화살표 함수로 표현: function을 생략하여 화살표 함수로 표현할 수 있습니다.
5. 더 간략하게 표현: function 생략, () 생략, {} 생략

결과 확인하기

100
200
300
400
500
600
700
800
900

0
1
2
3
4
5
6
7
8

[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]

100
200
300
400
500
600
700
800
900

100
200
300
400
500
600
700
800
900

07. 배열 : 데이터 불러오기 : for of

for of 반복문을 사용하여 배열 arr의 요소를 반복하고 각 요소를 출력하는 예제입니다.

{
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];

    for (let element of arr) {
        console.log(element);
    }
}

arr 배열의 첫 번째 요소부터 element 변수에 할당합니다.
console.log(element);을 실행하고 배열의 마지막 요소까지 도달할 때까지 다음 요소를 할당하여 같은 작업을 반복합니다.

결과 확인하기

100
200
300
400
500
600
700
800
900

08. 배열 : 데이터 불러오기 : for in

for in 반복문을 사용하여 배열 arr의 인덱스를 반복하고 해당 인덱스에 있는 요소를 출력하는 예제입니다.

{
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];

    for (let element in arr) {
        console.log(element);
        console.log(arr[element]);
    }
}

for in 반복문의 실행 순서:
1. arr 배열의 인덱스를 반복합니다.
2. 현재 인덱스를 element 변수에 할당합니다.
3. console.log(element);를 통해 현재 인덱스를 출력합니다.
4. console.log(arr[element]);를 통해 현재 인덱스에 해당하는 배열의 요소를 출력합니다.

그러나 for in 루프는 객체의 속성을 열거할 때 순서를 보장하지 않습니다.
즉, 배열의 인덱스가 순서대로 열거되지 않을 수 있습니다.
이런 이유로 배열을 순서대로 열거하고자 할 때는 for of 루프를 사용하는 것이 좋습니다.

*for(), forEach(), for of, for in
- for(): 초기화식, 조건식, 증감식을 사용하여 반복문을 제어합니다.
조건식이 참인 동안 반복합니다.
배열, 객체 또는 숫자와 같은 순회 가능한 데이터 구조를 반복하고자 할 때 주로 사용합니다.
반복 횟수를 정확하게 제어해야 할 때 유용합니다.
- forEach(): 배열의 모든 요소를 순회하며 어떤 작업을 수행해야 할 때 사용합니다.
열을 수정하지 않으며 반환값이 없습니다.
- for of: 순회 가능한(iterable) 객체를 순회할 때 사용됩니다.
배열의 값을 직접 가져올 수 있습니다.
배열, 문자열, Map, Set 등 순회 가능한 객체를 순회하며 값을 가져와야 할 때 사용합니다.
- for in: 객체의 열거 가능한 속성을 반복하며 특정 작업을 수행해야 할 때 사용합니다.
배열의 경우 사용하지 않는 것이 좋습니다.
주로 객체의 키 값을 가져올 때 사용합니다.

결과 확인하기

0
100
1
200
2
300
3
400
4
500
5
600
6
700
7
800
8
900

09. 배열 : 데이터 불러오기 : map()

map()은 주어진 배열을 변경하지 않고 새로운 배열을 생성하며, 주로 기존 배열의 각 요소를 가공하여 새로운 배열을 만들 때 사용됩니다.
또한, forEach처럼 index와 Array를 불러올 수 있습니다.
아래는 배열 요소, 인덱스 및 배열 자체를 매개변수로 받는 예제입니다. 원본 배열을 변경하지 않고 조건에 맞는 새로운 배열을 반환해야 합니다.

{
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];

        arr.map(function(element){
            console.log(element);
        });

        arr.map(function(element, index){
            console.log(index);
        });

        arr.map(function(element, index, Array){
            console.log(Array);
        });
}

1. arr.map(function(element){...}): element라는 매개변수를 사용하여 배열의 요소를 받아와서 console.log를 통해 각 요소를 출력합니다.
배열의 모든 요소가 순서대로 출력됩니다.
2. arr.map(function(element, index){...}): 두 개의 매개변수를 가지는 함수로 배열의 요소와 해당 요소의 인덱스를 받아옵니다.
따라서 함수 내부에서 element 변수에는 배열의 요소가, index 변수에는 해당 요소의 인덱스가 전달됩니다.
3. arr.map(function(element, index, Array){...}): 세 개의 매개변수를 가지는 함수로 배열의 요소, 해당 요소의 인덱스, 그리고 배열 자체를 받아옵니다.
따라서 함수 내부에서 element 변수에는 배열의 요소가, index 변수에는 해당 요소의 인덱스가, 그리고 Array 변수에는 배열 자체가 전달됩니다.

결과 확인하기

100
200
300
400
500
600
700
800
900

1
2
3
4
5
6
7
8
9

[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]

10. 배열 : 데이터 불러오기 : filter()

filter()는 배열에서 특정 조건을 만족하는 요소들을 새로운 배열로 필터링할 때 사용합니다.
주어진 조건에 따라 요소를 선택하고 필터링된 배열을 반환합니다.
또한, forEach처럼 index와 Array를 불러올 수 있습니다.

{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];

        arr.filter(function(element){
            console.log(element);
        });

        arr.filter(function(element, index){
            console.log(index);
        });

        arr.filter(function(element, index, Array){
            console.log(Array);
        });
}

1. 첫번째 코드: arr 배열의 각 요소를 하나씩 순회하며 해당 요소를 콘솔에 출력합니다.
filter() 함수가 배열을 필터링하여 새로운 배열을 반환하는 것이 일반적이지만, 이 코드에서는 필터링 조건 없이 전체 배열을 출력하기 때문에 새로운 배열은 생성되지 않습니다.
2. 두번째 코드: filter() 함수의 두 번째 매개변수로 요소의 인덱스를 받아와서 출력하고 있습니다.
3. 세번째 코드: filter() 함수의 세 번째 매개변수로 배열 자체를 받아와서 출력하고 있습니다.

결과 확인하기

100
200
300
400
500
600
700
800
900

1
2
3
4
5
6
7
8
9

[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]
[100, 200, 300, 400, 500, 600, 700, 800, 900]

11. 배열 : 데이터 불러오기 : 배열 펼침 연산자

배열 펼침 연산자(Spread Operator)는 JavaScript와 같은 프로그래밍 언어에서 사용되는 기능 중 하나로, 배열이나 객체를 펼쳐서 (spread) 그 내용을 다른 배열이나 객체에 복사하거나 합칠 때 사용됩니다.
... 기호를 사용하여 표현됩니다.

{
    const arr1 = [100, 200, 300];
    const arr2 = [400, 500, 600];

    console.log(arr1);
    console.log(...arr1);
    console.log(arr1 + arr2);
    console.log(...arr1, ...arr2);
    console.log(...arr1, 400);
    console.log(...arr1.slice(0, 2));

    function addNum(a, b, c){
        return a + b + c;
    }
    const num = [100, 200, 300];

    const sum = addNum(...num);
    console.log(sum);
}

console.log(arr1);: arr1의 배열을 그대로 출력합니다. [100, 200, 300]
console.log(...arr1);: arr1의 배열을 스프레드 연산자 (...)를 사용하여 요소들을 개별적으로 출력합니다. 각 요소는 공백으로 구분되어 출력됩니다. 100 200 300
console.log(arr1 + arr2);: arr1의 배열과 arr2의 배열을 + 연산자를 사용하여 결합합니다. 100, 200, 300400, 500, 600
console.log(...arr1, ...arr2);: arr1과 arr2의 배열을 스프레드 연산자를 사용하여 개별적으로 출력합니다. 모든 요소가 하나의 배열로 합쳐져 두 배열을 결합하는 것과 같은 결과를 얻습니다. 100 200 300 400 500 600 concat과 비슷
console.log(...arr1, 400);: 스프레드 연산자를 사용하여 arr1 배열의 요소와 숫자 400을 개별적으로 출력합니다. 100, 200, 300, 400 push와 비슷
console.log(...arr1.slice(0, 2));: 스프레드 연산자를 사용하여 arr1 배열의 첫 번째부터 두 번째 요소를 개별적으로 출력합니다. 100 200
function addNum(a, b, c){return a + b + c;}: 입력된 세 개의 매개변수 a, b, c를 받아서 그 합을 반환하는 역할을 합니다.
const sum = addNum(...num);: 배열 펼침 연산자(...)를 사용하여 num 배열의 요소를 함수 addNum의 매개변수로 전달하고, 그 결과를 sum 변수에 저장합니다. console.log(sum);: 100 + 200 + 300의 결과인 600이 출력됩니다.

결과 확인하기

[100, 200, 300]
100 200 300
100, 200, 300400, 500, 600
100 200 300 400 500 600
100, 200, 300, 400
100, 200
600

12. 배열 : 데이터 불러오기 : 배열 구조 분해 할당

배열 구조 분해 할당(Array Destructuring Assignment)은 배열의 요소를 추출하여 여러 변수에 할당하는 방법을 제공합니다.
이를 통해 배열의 각 요소를 간단하게 변수에 저장하고 사용할 수 있습니다.

{
        const [a, b, c] = [100, 200, 300];

        console.log(a);
        console.log(b);
        console.log(c);

        const arr = [100, 200, 300];
        const [x, y, z] = arr;

        console.log(x);
        console.log(y);
        console.log(z);

        const num = [100, 200, 300, 400, 500];
        const [num1, num2, ...rest] = num;

        console.log(num1);
        console.log(num2);
        console.log(rest);
        console.log(...rest); //300 400 500 요소로 저장
}

const [a, b, c] = [100, 200, 300];: (단열)배열 구조 분해 할당을 사용하여 [100, 200, 300] 배열의 요소를 각각 a, b, c 변수에 할당합니다.
const arr = [100, 200, 300];: (기본)배열 구조 분해 할당을 사용하여 배열 arr의 요소를 각각 x, y, z 변수에 할당합니다.
const [num1, num2, ...rest] = num;:(나머지 요소 추출)배열 구조 분해 할당을 사용하여 배열 num의 첫 번째 요소를 num1 변수에, 두 번째 요소를 num2 변수에 할당하고 나머지 요소는 rest 배열에 할당합니다.
console.log(rest);: rest가 배열로 저장되었기 때문에 배열로 출력됩니다.
console.log(...rest);: rest가 요소로 저장되었기 때문에 300 400 500으로 출력됩니다.

결과 확인하기

100
200
300
100
200
300
100
200
[300, 400, 500]
300 400 500

13. 객체 : 데이터 불러오기

객체를 생성하고 객체의 요소에 접근하여 값을 출력하는 예제입니다.

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

    console.log(obj["a"]);
    console.log(obj["b"]);
    console.log(obj["c"]);
}

객체는 중괄호({})로 정의되며, 세 개의 속성(a, b, c)을 가진 객체를 만들었습니다.
객체의 속성에 접근하는 방법은 점 표기법과 대괄호 표기법 두 가지가 있으며, 두 방법은 동일한 결과를 얻습니다.
console.log(obj.a);: 객체의 속성에 점(.)을 사용하여 obj.a는 객체 obj의 a 속성에 접근합니다. console.log(obj["a"]);: 객체의 속성에 대괄호([])를 사용하여 obj["a"]는 객체 obj의 a 속성에 접근합니다. 점 표기법은 속성 이름이 유효한 변수 이름일 때 사용하고, 대괄호 표기법은 동적으로 속성에 접근하거나 특수한 문자를 포함하는 속성 이름에 사용됩니다.

결과 확인하기

100
200
javascript
100
200
javascript

14. 객체 : 데이터 불러오기 : Object.keys()

객체의 키(key)를 배열로 추출하여 출력하는 예제입니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript",
    }
    
    console.log(Object.keys(obj));
}

Object.keys(obj)는 obj 객체의 모든 속성 이름(키)을 배열로 반환합니다.

결과 확인하기

["a", "b", "c"]

15. 객체 : 데이터 불러오기 : Object.values()

객체의 값을 배열로 추출하여 출력하는 예제입니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript",
    }
    
    console.log(Object.values(obj));
}

Object.values(obj)는 obj 객체의 모든 속성 값을 배열로 반환합니다.

결과 확인하기

[100, 200, "javascript"]

16. 객체 : 데이터 불러오기 : Object.entries()

객체의 속성 및 값들을 [키, 값] 쌍으로 이루어진 배열로 추출하여 출력하는 예제입니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript",
    }
    
    console.log(Object.entries(obj));
}

Object.entries(obj)는 obj 객체의 속성 및 값들을 [키, 값] 쌍으로 이루어진 배열로 반환합니다.

결과 확인하기

[["a", 100], ["b", 200], ["c", "javascript"]]

17. 객체 : 데이터 불러오기 : Object.assign()

Object.assign()를 사용하여 두 개의 객체를 결합하는 예제입니다.

{
    const obj1 = { a: 100, b: 200, c: "javascript"};
    const obj2 = { d: 300, e: 400, f: "jquery"};
    
    const obj3 = Object.assign(obj1, obj2);

    console.log(obj3);
}

Object.assign(obj1, obj2)는 obj1 객체에 obj2 객체를 병합합니다.
obj1 객체에 obj2 객체의 속성과 값을 추가하고, 그 결과를 obj3 변수에 저장합니다.
Object.assign()는 대상 객체(obj1)를 수정하고, 대상 객체를 반환하기 때문에 obj3에 할당된 결과와 obj1은 동일한 객체를 참조합니다.
따라서 console.log(obj1);은 console.log(obj3);과 같이 { a: 100, b: 200, c: "javascript", d: 300, e: 400, f: "jquery" }가 출력됩니다.

결과 확인하기

{ a: 100, b: 200, c: "javascript", d: 300, e: 400, f: "jquery" }

18. 객체 : 데이터 불러오기 : hasOwnProerty()

객체에서 속성의 존재 여부를 확인하는 두 가지 방법을 보여주는 예제입니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript",
    }
    console.log(obj.hasOwnProperty("a"));
    console.log(obj.hasOwnProperty("b"));
    console.log(obj.hasOwnProperty("c"));
    console.log(obj.hasOwnProperty("d"));

    console.log("a" in obj);
    console.log("b" in obj);
    console.log("c" in obj);
    console.log("d" in obj);
}

hasOwnProperty는 객체의 속성 중에서 지정한 속성이 직접 속해 있는지 여부를 판단합니다.
console.log(obj.hasOwnProperty("a"));: 객체 obj에 속성 a가 있는지 확인하여 존재하면 true를, 존재하지 않으면 false를 출력합니다.
in 연산자는 객체에 특정 속성이 존재하는지 확인합니다.
console.log("a" in obj);: 객체 obj에 속성 a가 존재하기 때문에 true를 출력합니다.
hasOwnProperty는 직접적인 속성을 확인하고, in 연산자는 상속된 속성을 포함하여 모든 속성을 확인합니다.

결과 확인하기

true
true
true
false
true
true
true
false

19. 객체 : 데이터 불러오기 : for in

for in()을 사용하여 객체의 속성을 순회하고 각 속성과 그에 해당하는 값을 출력하는 방법을 보여줍니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript",
    }
    for( let el in obj ){
        console.log(el + ":" + obj[el]);
    }
}

for in()은 객체의 모든 속성을 반복적으로 접근할 수 있는 반복문입니다.
console.log(el + ":" + obj[el]);: el은 현재 순회 중인 속성의 키이며, obj[el]을 통해 해당 속성의 값을 가져옵니다.

결과 확인하기

a:100
b:200
c:javascript

20. 객체 : 데이터 불러오기 : 객체 펼침 연산자

객체 펼침 연산자를 사용하여 객체를 병합하는 다양한 예제입니다.

{
    const obj1 = {
        a: 100,
        b: 200,
        c: "javascript",
    }
    const obj2 = {
        a: 300,
        b: 400,
        c: "jquery",
    }

    const obj3 = {...obj1, ...obj2}
    const obj4 = {...obj1, d: "jequery"}
    const obj5 = {...obj1, d: "300"}

    console.log(obj3);
    console.log(obj4);
    console.log(obj5);
}

객체 펼침 연산자는 Object.assign()과 비슷한 기능을 합니다.
obj3은 obj1과 obj2를 병합하여 두 객체의 속성을 모두 포함하는 새로운 객체를 생성합니다.
obj4는 객체 obj1의 속성을 모두 포함하는 새로운 객체에 추가로 d값에 jequery가 할당된 새로운 객체를 생성합니다.
obj5는 객체 obj1의 속성을 모두 포함하는 새로운 객체에 추가로 d값에 300이 할당된 새로운 객체를 생성합니다.

결과 확인하기

{ a: 100, b: 200, c: "javascript", d: 300, e: 400, f: "jquery" }
{ a: 100, b: 200, c: "javascript", d: "jequery" }
{ a: 100, b: 200, c: "javascript", d: 300 }

21. 객체 : 데이터 불러오기 : 객체 구조 분해 할당

객체 구조 분해 할당을 사용하여 객체의 속성 값을 추출하고 새로운 변수에 할당하는 예제입니다.

{
    const obj1 = {
        a: 100,
        b: 200,
        c: "javascript",
    }
    
    const {a, b, c} = obj1;
    
    console.log(a);
    console.log(b);
    console.log(c);

    const { a: x, b: y, c: z } = obj1;

    console.log(x);
    console.log(y);
    console.log(z);

    const obj2 = {
        d: 300,
        e: 400,
        f: "javascript",
    }

    const { d, e, f, g= "jequery"} = obj2;

    console.log(g);

    const obj3 = {
        x1: 100,
        y1: {a1: 100, b1: 200},
        z1: "javascirpt"
    }

    const { x1, y1: {a1, b1}, z1} = obj3;

    console.log(x1);
    console.log(a1);
    console.log(b1);
    console.log(z1);
}

const {a, b, c} = obj1;: obj1 객체의 속성 a, b, c 값을 각각 a, b, c 변수에 추출하여 할당합니다.
const { a: x, b: y, c: z } = obj1;: obj1 객체의 속성 a, b, c 값을 각각 x, y, z 변수에 추출하여 할당합니다.
const { d, e, f, g= "jequery"} = obj2;: 기존 객체에 g= "jequery"를 추가하여 변수 obj2에 할당합니다.
const { x1, y1: {a1, b1}, z1} = obj3;: obj3 객체에서 x1, z1 속성을 추출하고, y1 속성 안에 있는 a1, b1 속성도 추출하여 변수에 할당합니다.

결과 확인하기

100
200
"javascript"
100
200
"javascript"
"jequery"
100
100
200
"javascirpt"

22. 파일 : 서버 데이터 불러오기 : XMLHttpRequest

웹 페이지에서 외부 JSON 파일을 가져오는 예제입니다.
XMLHttpRequest를 사용하여 비동기적으로 외부 JSON 파일을 로드하고 해당 파일의 내용을 처리합니다.

{
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json", true);
    
    xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                    var responseData = xhr.responseText;
                    var jsonData = JSON.parse(responseData);

                    console.log(jsonData);
            } else if (xhr.readyState === 4) {
                    console.error("데이터 불러오기 오류: " + xhr.status);
            }
    };
            
    xhr.send();
}

var xhr = new XMLHttpRequest(): XMLHttpRequest 객체를 생성합니다. 이 객체를 사용하여 서버와 데이터를 교환합니다.
xhr.open("GET", "https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json", true): XMLHttpRequest 객체를 설정합니다.
이 메서드는 요청 유형(GET), 요청 URL("https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json"), 및 비동기 여부(true)를 설정합니다.
이것은 비동기 요청을 의미하며, 서버에서 응답을 기다리지 않고 코드의 실행이 계속됩니다.
xhr.onreadystatechange = function () { ... }: XMLHttpRequest 객체의 onreadystatechange 이벤트 핸들러를 설정합니다.
이 이벤트는 서버와의 통신 상태가 변경될 때마다 호출됩니다. 이 핸들러 함수는 XMLHttpRequest의 상태를 모니터링하고, 요청이 완료되면 응답 데이터를 처리합니다.
if (xhr.readyState === 4 && xhr.status === 200) { ... }: XMLHttpRequest의 readyState가 4(완료)이고, status 코드가 200(성공)일 때 응답 데이터를 처리합니다. 이것은 요청이 성공적으로 완료되었음을 나타냅니다.
var responseData = xhr.responseText: JSON 문자열을 JavaScript 객체로 변환하기 위해 JSON.parse() 메서드를 사용합니다.
이렇게 하면 jsonData 변수에 JSON 데이터가 포함된 JavaScript 객체가 저장됩니다.
console.log(jsonData): 변환된 JSON 데이터를 콘솔에 출력합니다. 이를 통해 개발자는 가져온 데이터를 확인할 수 있습니다.
xhr.send(): 실제 요청을 보내는 메서드입니다. 설정된 요청을 서버로 보내고, 서버는 응답을 반환합니다.

결과 확인하기

Array(60)

23. 파일 : 서버 데이터 불러오기 : fetch API

fetch 함수를 사용하여 외부 JSON 파일을 가져오는 예제입니다.
fetch 함수를 사용하여 비동기적으로 외부 JSON 파일을 로드하고 해당 파일의 내용을 처리합니다.

{
    fetch("https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json")
    .then(response => {
        return response.json();
    })
    .then(data => {
        console.log(data)
    })
    .catch(error => {
        console.log(error)
    })
}

fetch("https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json"):fetch 함수를 사용하여 지정된 URL에서 데이터를 가져옵니다. 이 함수는 Promise 객체를 반환합니다.
.then(response => { return response.json(); }): fetch 함수가 외부 URL에서 데이터를 가져오면, 해당 데이터가 response 매개변수로 전달됩니다. 이 부분은 이 응답 데이터를 JSON 형식으로 파싱하는 역할을 합니다.
response.json()은 다시 Promise 객체를 반환하며, JSON 데이터를 추출하고 파싱한 다음 반환합니다.
.then(data => { console.log(data) }): 이 부분은 이전 단계에서 파싱된 JSON 데이터를 data 매개변수로 받아와서 콘솔에 출력합니다. 이 때, 이미 JSON 데이터로 파싱되었으므로 JavaScript 객체로 사용할 수 있습니다.
.catch(error => { console.log(error) }): Promise 체인에서 발생한 오류를 처리하기 위해 catch 블록을 추가합니다. 오류가 발생하면 해당 오류 메시지가 콘솔에 출력됩니다.

결과 확인하기

Array(60)