Javascript - 데이터 불러오기

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

JavaScript를 사용하여 변수 x, y, z에 값을 할당하고, document.write() 함수를 사용하여 이 변수들의 값을 출력하는 예제입니다.

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

    document.write(x, y, z);	// 100, 200, "javascript"
}

1. let x = 100, y = 200, z = "javascript";: 변수 x, y, z를 선언하고 각각에 값을 할당합니다.
· x에는 100이라는 정수가 할당됩니다.
· y에는 200이라는 정수가 할당됩니다.
· z에는 "javascript"라는 문자열이 할당됩니다.

2. document.write(x, y, z);: document.write() 함수를 호출하여 변수 x, y, z의 값을 출력합니다. 이 함수는 전달된 인수를 화면에 출력합니다.

 

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

JavaScript를 사용하여 상수 x, y, z에 값을 할당하고, document.write() 함수를 사용하여 이 상수들의 값을 출력하는 예제입니다.

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

    document.write(x, y, z);	// 100, 200, "javscript"
}

1. const x = 100, y = 200, z = "javascript";: 상수 x, y, z를 선언하고 각각에 값을 할당합니다.
· x에는 100이라는 정수가 할당됩니다.
· y에는 200이라는 정수가 할당됩니다.
· z에는 "javascript"라는 문자열이 할당됩니다.

2.document.write(x, y, z);: document.write() 함수를 호출하여 상수 x, y, z의 값을 출력합니다. 이 함수는 전달된 인수를 화면에 출력합니다.

 

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

JavaScript에서 배열 arr을 선언하고, 배열의 각 요소를 document.write() 함수를 사용하여 출력하는 예제입니다.

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

    document.write(arr[0], arr[1], arr[2]);	// 100, 200, "javscript"
}

1. const arr = [100, 200, "javascript"];: 배열 arr을 선언하고 세 개의 요소를 포함합니다.
· 첫 번째 요소(인덱스 0)에는 정수 100이 들어갑니다.
· 두 번째 요소(인덱스 1)에는 정수 200이 들어갑니다.
· 세 번째 요소(인덱스 2)에는 문자열 "javascript"가 들어갑니다.

2.document.write(arr[0], arr[1], arr[2]);: document.write() 함수를 호출하여 배열 arr의 각 요소를 출력합니다.
· arr[0]는 배열의 첫 번째 요소인 정수 100을 나타냅니다.
· arr[1]은 배열의 두 번째 요소인 정수 200을 나타냅니다.
· arr[2]는 배열의 세 번째 요소인 문자열 "javascript"를 나타냅니다.

 

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

JavaScript에서 배열 arr의 길이를 document.write() 함수를 사용하여 출력하는 예제입니다.

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

    document.write(arr.length);	// 3
}

1. const arr = [100, 200, "javascript"];: 배열 arr을 선언하고 세 개의 요소를 포함합니다.
· 첫 번째 요소(인덱스 0)에는 정수 100이 들어갑니다.
· 두 번째 요소(인덱스 1)에는 정수 200이 들어갑니다.
· 세 번째 요소(인덱스 2)에는 문자열 "javascript"가 들어갑니다.

2. document.write(arr.length);: arr.length를 사용하여 배열 arr의 길이를 출력합니다. arr.length는 배열의 요소 개수를 나타내며, 이 코드에서는 배열 arr의 길이를 출력합니다.

 

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

JavaScript에서 배열 arr을 선언하고, for 루프를 사용하여 배열의 요소를 출력하는 예제입니다.

{
    const arr = [100, 200, 300];

    //for(초기값; 조건식; 증감값)
    for(let i = 0; i < 3; i++){
        document.write(arr[i]);	// 100, 200, 300
    }
}

1. const arr = [100, 200, 300];: 배열 arr을 선언하고 세 개의 요소를 포함합니다.
· 첫 번째 요소(인덱스 0)에는 정수 100이 들어갑니다.
· 두 번째 요소(인덱스 1)에는 정수 200이 들어갑니다.
· 세 번째 요소(인덱스 2)에는 정수 300이 들어갑니다.

2. for(let i = 0; i < 3; i++) { ... }: i가 0부터 2까지 반복됩니다. 이것은 for 루프의 조건입니다. 배열 arr의 길이가 3이기 때문에, i가 0, 1, 2로 변화하면서 배열의 인덱스로 사용됩니다.

3. document.write(arr[i]);: i의 현재 값을 배열 arr의 인덱스로 사용하여 배열의 요소를 출력합니다. 따라서 i가 0부터 2까지 변화하면서 배열 arr의 각 요소가 출력됩니다.

 

06. 배열 : 데이터 불러오기 + forEach()

JavaScript에서 배열 arr의 forEach 메서드를 사용하여 배열의 각 요소에 대해 함수를 실행하는 예제입니다.

{
    const arr = [100, 200, 300];

    arr.forEach(function(element, index, array){
        document.write(element);    // 각 요소 출력: 100200300
        document.write(index);      // 각 요소의 인덱스 출력: 012
        document.write(arr);        // 배열 전체 출력: 100,200,300
    });

    // 화살표 함수 사용
    arr.forEach((element)=>{
        console.log(element);      // 각 요소를 콘솔에 출력: 100\n200\n300\n
    });

    // 괄호 생략하여 화살표 함수 사용
    arr.forEach(element=>{
        console.log(element);      // 각 요소를 콘솔에 출력: 100\n200\n300\n
    });

    // 중괄호 생략하여 화살표 함수 사용
    arr.forEach(element=>
        console.log(element)       // 각 요소를 콘솔에 출력: 100\n200\n300\n
    );
}

1. const arr = [100, 200, 300];: 배열 arr을 선언하고 세 개의 요소를 포함합니다.
· 첫 번째 요소(인덱스 0)에는 정수 100이 들어갑니다.
· 두 번째 요소(인덱스 1)에는 정수 200이 들어갑니다.
· 세 번째 요소(인덱스 2)에는 정수 300이 들어갑니다.

2. arr.forEach(function(element, index, array) { ... });: 배열
arr의 forEach 메서드를 호출합니다. forEach는 배열의 각 요소에 대해 주어진 함수를 실행하는데 사용됩니다. 이 함수는 매개변수로 세 가지 값을 받습니다. · element: 현재 순회 중인 배열 요소의 값입니다.
· index: 현재 순회 중인 배열 요소의 인덱스입니다.
· array: 배열 자체를 나타냅니다.

3. document.write(element);: element에는 현재 배열 요소의 값이 전달됩니다. 따라서 이 코드는 각 요소의 값을 출력합니다.

4. document.write(index);: index에는 현재 배열 요소의 인덱스가 전달됩니다. 따라서 이 코드는 각 요소의 인덱스를 출력합니다.

5. document.write(arr);: arr에는 배열 자체가 전달됩니다. 따라서 이 코드는 배열 전체를 출력합니다.

 

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

for...of 반복문을 사용한 간단한 예제입니다.

{
    const arr = [100, 200, 300];

    for(let el of arr){
        console.log(el);	// 100200300
    }
}

1. const arr = [100, 200, 300];: 이 부분은 arr이라는 상수 변수를 선언하고, 그 안에 100, 200, 300 세 개의 요소를 갖는 배열을 할당합니다.

2. for(let el of arr){: 이 부분은 for...of 반복문의 시작입니다. 이 반복문에서 el이라는 변수가 배열 arr의 각 요소를 대표합니다. of 키워드는 배열의 요소들을 순회하겠다는 것을 나타냅니다.

3. console.log(el);: 반복문 내부에서, 이 부분은 el의 값을 콘솔에 출력합니다. 첫 번째 순회에서는 el이 100이 되고, 두 번째 순회에서는 200이 되고, 세 번째 순회에서는 300이 됩니다.

4.}: for...of 반복문의 끝입니다. 배열의 각 요소마다 실행될 코드 블록의 끝을 나타냅니다.

 

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

JavaScript에서 배열 arr의 요소를 for...in 루프를 사용하여 반복하고, 각 요소의 인덱스를 출력한 후 해당 요소의 값을 출력하는 예제입니다. 그러나 주의해야 할 점이 있습니다. 배열에 대해 for...in을 사용할 때, 인덱스가 아니라 속성(property) 이름이 출력되므로 예상치 않은 동작을 할 수 있습니다.

{
    const arr = [100, 200, 300];
    for(let element in arr){
        document.write(element);	// 인덱스 출력: 0, 1, 2
        document.write(arr[element]);	// 각 요소 출력: 100, 200, 300
    }
}

1. const arr = [100, 200, 300];: 배열 arr을 선언하고 세 개의 요소를 포함합니다.
· 첫 번째 요소(인덱스 0)에는 정수 100이 들어갑니다.
· 두 번째 요소(인덱스 1)에는 정수 200이 들어갑니다.
· 세 번째 요소(인덱스 2)에는 정수 300이 들어갑니다.

2. for(let element in arr) { ... }: for...in 루프를 사용하여 배열 arr의 각 요소를 반복합니다. element는 현재 순회 중인 요소의 인덱스가 아니라 속성 이름(객체의 키)을 나타냅니다.

3. document.write(element);: element에는 현재 순회 중인 속성 이름(인덱스가 아님)이 들어갑니다. 따라서 이 코드는 순회 중인 속성 이름을 출력합니다.

4. document.write(arr[element]);: arr[element]를 사용하여 현재 순회 중인 속성 이름에 해당하는 배열 요소의 값을 출력합니다. 이 부분은 배열 arr에서 요소를 가져오는 부분입니다.

 

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

JavaScript로 작성된 예제입니다. 여기서는 배열(arr)을 생성하고, 배열의 각 요소를 가공하고 출력하는 과정을 보여줍니다.

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

    arr.map(function(el, index, array) {
        console.log(el + " : " + index + " : " + array); // 100 : 0 : 100,200,javascript
                                                         // 200 : 1 : 100,200,javascript
                                                         // javascript : 2 : 100,200,javascript
    });

    const arrNum = arr.map((el) => {
        return el;
    });
    console.log(arrNum);	// [100, 200, "javascript"]
}

1. const arr = [100, 200, "javascript"];: 배열 arr을 선언하고 초기값으로 100, 200, 그리고 "javascript"라는 세 개의 요소를 가지고 있습니다.

2. arr.map(function(el, index, array) { console.log(el + " : " + index + " : " + array) });:
· arr.map()은 배열의 각 요소를 순회하면서 주어진 함수를 실행하고 그 결과를 새로운 배열로 반환합니다.
· 여기서 사용된 함수는 익명 함수입니다. 이 함수는 세 개의 매개변수를 받습니다.
· el: 현재 순회 중인 요소의 값
· index: 현재 순회 중인 요소의 인덱스
· array: 원본 배열 자체

3.세 번째 map() 호출:
이 부분은 배열 arr 자체를 콘솔에 출력합니다. map() 메서드에 전달된 콜백 함수는 세 개의 매개변수 element, index, array를 받습니다. element는 현재 순회 중인 배열 요소의 값, index는 해당 요소의 인덱스, 그리고 array는 배열 자체를 나타냅니다.

 

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

주어진 배열에서 조건을 만족하는 요소들을 새로운 배열로 추출하는 filter 함수의 사용 예시입니다.

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

    arr.filter(function(el, index, array) {
        console.log("10 : " + el + " : " + index + " : " + array); // 10 : 100 : 0 : 100,200,javascript
                                                                   // 10 : 200 : 1 : 100,200,javascript
                                                                   // 10 : javascript : 2 : 100,200,javascript
    });

    const arrNum = arr.filter((el) => {
        return el > 150;
    });
    console.log(arrNum); // [200]

    const arrNum2 = arr.filter(el => {
        return el > 150;
    });
    console.log(arrNum2); // [200]

    const arrNum3 = arr.filter(el => el > 150);
    console.log(arrNum3); // [200]
}

1. const arr = [100, 200, "javascript"];:
arr이라는 상수 변수를 선언하고, 그 안에 100, 200, "javascript" 세 개의 요소를 갖는 배열을 할당합니다.

2. arr.filter(function(el, index, array) { ... });:
· filter 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 함수의 결과가 true인 요소만을 모아 새로운 배열로 반환합니다.
· 여기서는 filter 함수에 익명의 함수를 전달합니다. 이 함수는 세 개의 인자를 받습니다.
· el: 배열의 각 요소
· index: 요소의 인덱스
· array: 원본 배열
· 이 함수는 각 요소를 콘솔에 출력합니다.

3. const arrNum = arr.filter((el) => { return el > 150; }):
화살표 함수를 사용하여 arr 배열을 필터링합니다. 이 함수는 각 요소 el이 150보다 큰지 확인하고 그 결과로 새로운 배열을 만듭니다.

4. console.log(arrNum);:
위에서 만든 arrNum 배열을 콘솔에 출력합니다.

5. const arrNum2 = arr.filter(el => { return el > 150; }):
이는 화살표 함수를 사용하여 배열을 필터링하는 것입니다. 위와 같은 결과를 얻습니다.

6. console.log(arrNum2);:
위에서 만든 arrNum2 배열을 콘솔에 출력합니다.

7. const arrNum3 = arr.filter(el => el > 150);:
화살표 함수를 사용하여 간략하게 표현한 것입니다. el이 150보다 큰지 확인하고 그 결과로 새로운 배열을 만듭니다.

8. console.log(arrNum3);:
위에서 만든 arrNum3 배열을 콘솔에 출력합니다.

 

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

배열 펼침 연산자의 간단한 예제입니다.

{
    // 배열 펼침 연산
    const arr1 = [100, 200, 300];
    const arr2 = [400, 500, 600];

    console.log(arr1);	// 100,200,300
    console.log(...arr1);	// 100 200 300
    console.log(arr1 + arr2);	// 100,200,300400,500,600
    console.log(...arr1, ...arr2);	// 100 200 300 400 500 600
    console.log(...arr1, 400);	// 100 200 300 400 --< push()
    console.log(...arr1.slice(0,2));	// 100 200 --< slice()

    // 함수 호출시 인수 전달
    function addNum(a, b, c){
        return a + b + c;
    }
    const num = [100, 200, 300];
    const sum = addNum(...num);
    console.log(sum);	// 600
}

1. const arr1 = [100, 200, 300];:
arr1이라는 상수 변수를 선언하고, 그 안에 100, 200, 300 세 개의 요소를 갖는 배열을 할당합니다.

2. const arr2 = [400, 500, 600];:
arr2라는 상수 변수를 선언하고, 그 안에 400, 500, 600 세 개의 요소를 갖는 배열을 할당합니다.

3. console.log(arr1);:
arr1 배열 전체를 출력합니다. 즉, [100, 200, 300]가 콘솔에 출력됩니다.

4. console.log(...arr1);:
arr1 배열의 요소를 펼쳐서 출력합니다. 즉, 100, 200, 300이 각각 개별적으로 출력됩니다.

5. console.log(arr1 + arr2);:
arr1과 arr2를 문자열로 변환한 후 이어서 출력합니다. 예를 들어, [100, 200, 300][400, 500, 600]가 출력됩니다.

6. console.log(...arr1, ...arr2);:
arr1의 요소와 arr2의 요소를 펼쳐서 출력합니다. 결과적으로 100, 200, 300, 400, 500, 600이 각각 개별적으로 출력됩니다.

7. console.log(...arr1, 400);:
arr1의 요소를 펼치고, 그 뒤에 400을 출력합니다. 따라서 100, 200, 300, 400이 각각 개별적으로 출력됩니다.

8. console.log(...arr1.slice(0,2));:
arr1 배열에서 첫 번째부터 두 번째 요소까지를 추출하여 펼쳐서 출력합니다. 즉, 100, 200이 각각 개별적으로 출력됩니다.

 

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

JavaScript에서 배열의 구조 분해 할당(Destructuring Assignment)을 보여주는 예제입니다.

{
    // 단일 배열에서 구조 분해 할당
    const [a, b, c] = [100, 200, 300];

    console.log(a); // 100
    console.log(b); // 200
    console.log(c); // 300

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

    // 기존 배열에서 구조 분해 할당
    console.log(x); // 100
    console.log(y); // 200
    console.log(z); // 300

    // 나머지 요소 추출 분해 할당
    const num = [100, 200, 300, 400, 500];
    const [num1, num2, ...rest] = num;
   
    console.log(num1); // 100
    console.log(num2); // 200
    console.log(...rest); // 300 400 500
    console.log(rest); // [300, 400, 500]
}

1. 단일 배열에서 구조 분해 할당:
배열 [100, 200, 300]을 구조 분해하여 각 요소를 변수 a, b, c에 할당합니다.

2. 기존 배열에서 구조 분해 할당:
arr 배열의 요소를 구조 분해하여 변수 x, y, z에 할당합니다.

3.나머지 요소 추출 분해 할당:
· num 배열의 첫 번째 요소는 num1에, 두 번째 요소는 num2에 할당됩니다.
· 나머지 요소는 ...rest를 사용하여 배열로 추출됩니다. ...rest는 나머지 요소를 배열로 포함하므로 rest 변수에는[300, 400, 500] 배열이 할당됩니다.

 

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

JavaScript에서 객체의 속성에 접근하는 방법을 보여주는 예제입니다.

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

    console.log(obj.a); // 100
    console.log(obj.b); // 200
    console.log(obj.c); // javascript

    console.log(obj["a"]); // 100
    console.log(obj["b"]); // 200
    console.log(obj["c"]); // javascript
}

1. 객체 생성:
obj라는 객체를 생성합니다. 이 객체는 세 개의 속성을 가지며, 각각의 속성은 a, b, c입니다.

2. 속성에 접근:
객체의 속성에 점 표기법을 사용하여 접근합니다. obj.a는 객체 obj의 a 속성에 접근하고 값을 출력합니다.

3.대괄호 표기법을 사용한 속성 접근:
· 대괄호 표기법을 사용하여 객체의 속성에 접근할 수도 있습니다. obj["a"]는 obj 객체의 a 속성에 접근하고 값을 출력합니다.
· 이 방법은 속성의 이름을 문자열로 표현할 수 있는 장점이 있습니다. 예를 들어, 동적으로 속성을 선택해야 할 때 사용됩니다.

 

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

JavaScript에서 객체의 속성들을 배열로 반환하는 Object.keys() 메서드를 사용하는 예제입니다.

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

    console.log(Object.keys(obj));	// ["a", "b", "c"]
}

1. 객체 생성:
obj라는 객체를 생성합니다. 이 객체는 세 개의 속성을 가지며, 각각의 속성은 a, b, c입니다.

2. Object.keys() 메서드:
· Object.keys(obj)는 객체 obj의 모든 속성 이름을 배열로 반환합니다.
· 위에서 정의한 obj 객체는 a, b, c 세 개의 속성을 가지고 있으므로, Object.keys(obj)는 ["a", "b", "c"]라는 배열을 반환합니다.

 

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

JavaScript에서 객체의 속성 값들을 배열로 반환하는 Object.values() 메서드를 사용하는 예제입니다.

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

    console.log(Object.values(obj));	// [100, 200, "javascript"]
}

1. 객체 생성:
obj라는 객체를 생성합니다. 이 객체는 세 개의 속성을 가지며, 각각의 속성은 a, b, c입니다.

2. Object.values() 메서드:
· Object.values(obj)는 객체 obj의 모든 속성 값들을 배열로 반환합니다.
· 위에서 정의한 obj 객체의 속성 값은 각각 100, 200, "javascript"이므로, Object.values(obj)는 [100, 200, "javascript"]라는 배열을 반환합니다.

 

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

JavaScript에서 객체의 속성들을 [키, 값]의 배열로 반환하는 Object.entries() 메서드를 사용하는 예제입니다.

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

    console.log(Object.entries(obj));	// [["a", 100], ["b", 200], ["c", "javascript"]]
}

1. 객체 생성:
obj라는 객체를 생성합니다. 이 객체는 세 개의 속성을 가지며, 각각의 속성은 a, b, c입니다.

2. Object.entries() 메서드:
· Object.entries(obj)는 객체 obj의 속성들을 [키, 값]의 배열로 반환합니다.
· 위에서 정의한 obj 객체의 속성은 { a: 100, b: 200, c: "javascript" } 이므로, Object.entries(obj)는 [['a', 100], ['b', 200], ['c', 'javascript']]라는 배열을 반환합니다.

 

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

javaScript에서 객체를 합치는 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); // { a: 100, b: 200, c: "javascript", d: 300, e: 400, f: "jquery" }
}

1. 두 개의 객체를 생성:
· obj1은 {a: 100, b: 200, c: "javascript"} 형태의 객체를 생성합니다.
· obj2는 {d: 300, e: 400, f: "jquery"} 형태의 객체를 생성합니다.

2. Object.assign() 메서드를 사용하여 객체 병합:
· Object.assign()은 여러 객체를 하나로 병합합니다. 첫 번째 인자인 obj1에 두 번째 인자인 obj2가 병합됩니다.
· 병합된 결과는 obj1에 저장되고, obj3에도 참조가 저장됩니다.

3. 결과 출력:
obj3는 obj1과 obj2를 합친 결과입니다. 따라서 {a: 100, b: 200, c: "javascript", d: 300, e: 400, f: "jquery"} 형태의 객체가 출력됩니다.

 

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

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

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

    console.log(obj.hasOwnProperty("a")); // true
    console.log(obj.hasOwnProperty("b")); // true
    console.log(obj.hasOwnProperty("c")); // true
    console.log(obj.hasOwnProperty("d")); // false
    console.log(obj.hasOwnProperty("javascript")); // false

    //in 연산자
    console.log("a" in obj); // true
    console.log("b" in obj); // true
    console.log("c" in obj); // true
    console.log("d" in obj); // false
}

1. 객체 생성:
obj라는 객체를 생성합니다. 이 객체는 세 개의 속성을 가지며, 각각의 속성은 a, b, c입니다.

2. hasOwnProperty() 메서드:
· hasOwnProperty() 메서드는 객체가 특정 속성을 직접 소유하고 있는지를 판별합니다.
· 위에서 정의한 obj 객체는 a, b, c 속성을 가지고 있으므로 각각에 대한 hasOwnProperty 호출은 true를 반환합니다.
· d나 javascript는 obj 객체가 직접 소유하고 있지 않기 때문에 false를 반환합니다.

3. in 연산자:
· in 연산자는 객체가 특정 속성을 가지고 있는지를 확인합니다.
· 위에서 정의한 obj 객체는 a, b, c 속성을 가지고 있으므로 각각에 대한 in 연산자는 true를 반환합니다.
· 마찬가지로 d나 javascript는 obj 객체가 소유하고 있지 않기 때문에 false를 반환합니다.

 

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

JavaScript에서 for...in 루프를 사용하여 객체의 속성을 순회하고 출력하는 예제입니다.

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

1. const obj = {...}; 코드는 obj라는 객체를 정의합니다. 이 객체는 세 개의 속성을 가지고 있습니다: a, b, c. 각 속성은 각각의 값을 가지고 있습니다.

2. for...in 루프는 객체의 속성을 순회합니다. for(let el in obj){ ... } 구문에서 el은 각 속성의 이름을 나타냅니다.

3. console.log(el + " : " + obj[el]); 코드는 현재 속성의 이름과 해당 속성의 값을 출력합니다. 여기서 el은 현재 속성의 이름이고 obj[el]은 해당 속성의 값입니다.

 

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

JavaScript에서 객체의 병합 및 속성 수정을 보여주는 예제입니다.

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

    const obj3 = {...obj1, ...obj2};
    const obj4 = {...obj1, ...obj2, g: "SQL"};
    const obj5 = {...obj1, b: 500};

    console.log(obj3); // { a: 100, b: 200, c: "javascript", d: 300, e: 400, f: "jquery" }
    console.log(obj4); // { a: 100, b: 200, c: "javascript", d: 300, e: 400, f: "jquery", g: "SQL" }
    console.log(obj5); // { a: 100, b: 500, c: "javascript" }
}

1. 두 개의 객체를 생성:
· obj1은 {a: 100, b: 200, c: "javascript"} 형태의 객체를 생성합니다.
· obj2는 {d: 300, e: 400, f: "jquery"} 형태의 객체를 생성합니다.

2. 객체의 병합:
· ... 문법을 사용하여 객체를 병합합니다. 이를 "스프레드 연산자" 또는 "전개 연산자"라고 합니다.
· obj3는 obj1의 속성과 obj2의 속성이 합쳐진 결과를 가지게 됩니다.

3. 새로운 속성 추가:
obj4는 obj1의 속성, obj2의 속성, 그리고 새로운 속성 g를 추가한 결과를 가지게 됩니다.

4. 속성 값 수정:
obj5는 obj1의 속성을 복사하고, b 속성의 값을 500으로 변경한 결과를 가지게 됩니다.

5. 결과 출력:
obj3, obj4, obj5를 콘솔에 출력합니다.

 

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

JavaScript에서 객체 구조 분해 할당을 사용하는 예제입니다.

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

    // 객체의 속성들을 해체하여 변수에 할당
    const {a, b, c} = obj1;

    console.log(a); // 100
    console.log(b); // 200
    console.log(c); // javascript

    // 해체된 속성에 새로운 변수 이름 할당
    const {a: x, b: y, c: z} = obj1;

    console.log(x); // 100
    console.log(y); // 200
    console.log(z); // javascript

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

    // 객체의 속성들을 해체하여 변수에 할당하고 기본값 설정
    const {d, e, f, g = "SQL"} = obj2;

    console.log(obj2); // { d: 300, e: 400, f: "jquery" }
    console.log(g);    // SQL

    const obj3 = {
        x3: 100,
        y3: {a3: 200, b3: 300},
        z3: "javascript",
    }

    // 중첩된 객체의 속성들을 해체하여 변수에 할당
    const {x3, y3: {a3, b3}, z3} = obj3;

    console.log(x3); // 100
    console.log(a3); // 200
    console.log(b3); // 300
    console.log(z3); // javascript
}

obj1 예제:
1-1. const obj1 = {...};: 이 코드는 객체 obj1을 선언하고 초기화합니다. 이 객체는 세 개의 속성을 가지고 있습니다: a, b, c. 각 속성은 각각의 값을 가지고 있습니다.
1-2. const {a, b, c} = obj1;: 이 부분은 객체 obj1의 속성 a, b, c의 값을 각각 a, b, c 변수에 할당합니다. 이를 객체 구조 분해 할당이라고 합니다. 즉, 객체의 속성 값을 추출하여 변수에 저장하는 것입니다.
1-3. console.log(a);, console.log(b);, console.log(c);: 이 부분은 변수 a, b, c에 저장된 값을 출력합니다.

2-1 const {a: x, b: y, c: z} = obj1;: 이 코드는 obj1의 속성 a, b, c의 값을 각각 x, y, z 변수에 할당합니다. 이 때, a: x는 a 속성의 값을 x 변수에 할당하는 것을 의미합니다.
2-2 console.log(x); console.log(y); console.log(z);: 마지막으로, x, y, z 변수의 값을 각각 출력합니다.

obj2 예제:
1. const obj2 = { ... };: 이 코드는 객체 obj2를 정의하고 초기화합니다. 이 객체에는 d, e, f라는 세 개의 속성이 있습니다.
2. const {d, e, f, g = "SQL"} = obj2;: 이 부분은 객체 obj2의 속성 d, e, f, 그리고 g의 값을 각각 d, e, f, g 변수에 할당합니다. 여기서 g = "SQL"은 만약 obj2 객체에 g 속성이 없으면 g 변수에 기본값으로 "SQL"을 할당합니다.
3. console.log(obj2);: obj2 객체 전체를 출력합니다. 이 부분은 해당 예제에서는 obj2 객체의 내용을 확인하기 위한 용도로 사용됩니다.
4. console.log(g);: g 변수의 값을 출력합니다. 이 부분에서 g의 값은 "SQL"입니다. 이는 기본값이 할당되었기 때문입니다.

obj3 예제:
1. const obj3 = { ... };: 이 코드는 객체 obj3를 정의하고 초기화합니다. 이 객체에는 x3, y3, z3라는 세 개의 속성이 있습니다. 그 중 y3는 또 다른 객체입니다.
2. const {x3, y3: {a3, b3}, z3} = obj3;: 이 부분은 객체 obj3의 속성 x3, y3, z3의 값을 각각 x3, y3, z3 변수에 할당합니다. 여기서 y3: {a3, b3}는 y3 속성의 값을 분해하여 a3, b3 변수에 할당합니다.
3. console.log(x3); console.log(a3); console.log(b3); console.log(z3);: 마지막으로, x3, a3, b3, z3 변수의 값을 출력합니다.

 

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

JavaScript를 사용하여 비동기적으로 HTTP GET 요청을 보내고, 응답으로 받은 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();
}

1. var xhr = new XMLHttpRequest();: XMLHttpRequest 객체를 생성합니다. 이 객체는 서버와 상호작용할 수 있는 기능을 제공합니다.

2. xhr.open("GET", "https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json", true);: HTTP 요청을 설정합니다. 첫 번째 인자는 HTTP 메서드 (여기서는 GET), 두 번째 인자는 요청을 보낼 URL입니다. 세 번째 인자는 요청을 비동기적으로 보낼지 여부를 나타냅니다 (true는 비동기, false는 동기).

3. xhr.onreadystatechange: XMLHttpRequest 객체의 상태가 변할 때마다 호출되는 이벤트 핸들러입니다. 즉, 서버로부터 응답이 도착하면 호출됩니다.

4. if (xhr.readyState === 4 && xhr.status === 200) { ... }: readyState는 현재 XMLHttpRequest 객체의 상태를 나타냅니다. 4는 완료 상태를 나타내고, 200은 HTTP 상태 코드 중 성공을 나타냅니다.

5. xhr.readyState === 4 && xhr.status === 200는 서버에서 응답을 받았고, 상태 코드가 200인 경우를 의미합니다.

6. var responseData = xhr.responseText;: 응답으로 받은 데이터를 문자열 형태로 responseData 변수에 저장합니다.

7. var jsonData = JSON.parse(responseData);: 문자열 형태로 받은 JSON 데이터를 JavaScript 객체로 파싱하여 jsonData 변수에 저장합니다.

8. console.log(jsonData);: 파싱된 JSON 데이터를 콘솔에 출력합니다.

9. else if (xhr.readyState === 4) { ... }: 서버에서 응답이 도착했지만 상태 코드가 200이 아닌 경우, 즉 오류가 발생한 경우를 처리합니다.

10. xhr.readyState === 4는 서버와의 통신이 완료되었음을 의미합니다.

11. console.error("데이터 불러오기 오류: " + xhr.status);는 오류 메시지를 콘솔에 출력합니다. 여기서 xhr.status는 서버에서 받은 HTTP 상태 코드를 나타냅니다.

12. xhr.send();: 실제로 HTTP 요청을 보냅니다.

 

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

JavaScript에서 fetch API를 사용하여 비동기적으로 데이터를 가져오고, 이후에 해당 데이터를 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);
        })
}

1. fetch('https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json'): fetch 함수를 사용하여 주어진 URL에서 데이터를 가져옵니다. 이 함수는 HTTP 요청을 보내고, 해당 요청에 대한 Promise를 반환합니다.

2. .then(response => { return response.json(); }): 첫 번째 .then 블록은 응답 객체(response)를 받아와서 해당 응답을 JSON 형식으로 파싱합니다. response.json()은 비동기 작업이기 때문에, 이 또한 Promise를 반환합니다.

3. .then(data => { console.log(data); }): 두 번째 .then 블록은 JSON으로 파싱된 데이터(data)를 받아와서 콘솔에 출력합니다. 이 단계에서 data는 JavaScript 객체로 변환된 JSON 데이터입니다.

4. .catch(error => { console.log(error); });: 어떤 이유로든 에러가 발생하면 .catch 블록에서 해당 에러를 처리하고 콘솔에 출력합니다.