데이터 불러오기

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

자바스크립트(Javascript)에서 변수는 데이터를 저장하는 저장소입니다.

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

    console.log(x, y, z)
}

변수는 프로그램 내에서 데이터를 저장하고 관리하는 중요한 개념입니다.
데이터를 변수에 저장하면 나중에 그 데이터를 사용하거나 조작할 수 있습니다.
변수는 프로그램의 유연성과 가독성을 향상시키는데 중요한 역할을 합니다.

결과 확인하기

100 200 javascript

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

상수는 한 번 할당되면 값을 변경할 수 없는 변수입니다. 상수는 변수와 유사하지만 값을 변경할 수 없으므로 데이터를 보호하고 안정성을 제공하는 데 사용됩니다.

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

    console.log(x, y, z)
}

상수는 주로 변경되지 않아야 하는 데이터나 설정 값에 사용됩니다. 예를 들어 수학적인 상수, 프로그램 설정, 또는 고정된 값들을 나타내는 데 유용합니다. 상수를 사용하면 코드의 가독성을 높이고, 실수로 값을 변경하지 않도록 보호할 수 있습니다.

결과 확인하기

100 200 javascript

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

배열은 여러 데이터 항목을 하나의 변수에 저장하는 자료 구조입니다. 배열을 사용하면 하나의 변수에 여러 값을 보다 쉽게 관리하고 조작할 수 있습니다.

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

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

배열 내의 데이터에 접근하려면 배열의 인덱스를 사용합니다. 배열의 인덱스는 0부터 시작하며, 대괄호 내에 인덱스를 넣어 해당 위치의 값을 불러올 수 있습니다.

결과 확인하기

100 200 javascript

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

배열은 여러 데이터 항목을 하나의 변수에 저장하는 자료 구조입니다. 배열 안에 있는 데이터의 갯수를 출력할 수 있습니다.

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

    console.log(arr.length);
}

베열이름.length는 배열의 길이를 나타냅니다.

결과 확인하기

3

05. 배열 : 데이터 불러오기 : for( ) -가장많이쓰임-

for 루프를 사용하여 배열의 데이터를 순회하고 불러올 수 있습니다.

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

    for(i=1; i<=arr.length; i++){
        console.log(arr[i]);
    };
}

for문의 기본문법은 for(초기값; 조건식; 증감값) 입니다.
arr이라는 이름의 상수 배열을 생성하고 초기화합니다. 배열 내부에 1부터 10까지의 정수가 들어있습니다.
반복문이 시작을 정의하는 부분입니다. 변수 i를 0으로 초기화하고, i가 arr 배열의 길이보다 작을 동안에 반복을 실행하며 i를 1씩 증가시킵니다
arr 배열의 인덱스 i에 해당하는 원소를 출력합니다

결과 확인하기

100
200
300
400
500
600
700
800
900

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

forEach() 메서드는 배열의 각 요소를 반복하고 특정 작업을 수행할 때 매우 유용합니다.

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

    arr.forEach(function(el){
        console.log(el);
    });

    arr.forEach(function(el, index){            //번호 뽑아주기 (index)
        console.log(index);
    });

    arr.forEach(function(el, index, array){     //배열 뽑아주기 (index)
        console.log(array);
    });

    // 약식 표현
    arr.forEach((el) => {                       //화살표 함수
        console.log(el);
    });

    arr.forEach(el => {                         //() 생략
        console.log(el);
    });
    
    arr.forEach(el => console.log(el));         //return 생략
}

forEach()는 자바스크립트 배열에서 사용할 수 있는 배열 메서드 중 하나로, 배열의 각 요소에 대해 지정된 함수를 실행하는 반복문과 비슷한 역할을 합니다. forEach()를 사용하면 배열을 반복하면서 각 요소에 대해 작업을 수행할 수 있습니다.

결과 확인하기

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

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

for...of 루프를 사용하면 반복 가능한(iterable) 객체를 효과적으로 순회하고 해당 요소에 대한 작업을 수행할 수 있습니다. 이 반복문은 코드를 간결하게 작성할 수 있고 가독성을 향상시킬 수 있는 장점이 있습니다.

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

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

for...of 루프는 자바스크립트에서 배열, 문자열, 맵(Map), 세트(Set), 배열과 유사한 객체(iterable object) 등과 같이 순회 가능한(iterable) 요소를 반복하는 반복문입니다. 이 반복문은 반복 가능한 객체의 각 요소를 반복하면서 작업을 수행할 때 유용하게 사용됩니다.

결과 확인하기

100
200
300
400
500
600
700
800
900

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

for...in 루프는 자바스크립트 객체의 열거 가능한 속성을 반복하는 반복문입니다. 이 반복문은 객체의 속성을 열거하고 각 속성에 대한 작업을 수행하는 데 사용됩니다.

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

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

    //배열 출력
    for(let element in arr){
        console.log(arr[element]);
    }
}

배열에 대해서는 for in을 사용하는것이 더 적합합니다.
for in문의 기본 문법은 for (const key:키 in object:객체) {};입니다.
for in 문은 배열의 각 요소를 순회하며 요소의 인덱스를 출력합니다.
for...in 루프는 객체의 프로토타입 체인을 따라 상속된 속성도 열거합니다. 따라서 객체의 직접적인 프로퍼티뿐만 아니라 상속된 프로퍼티까지 열거될 수 있습니다.
for in 문을 통해 배열의 요소를 출력할 수 있지만 사용하지 않는 것이 좋습니다.

결과 확인하기

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

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

이 코드는 배열 arr의 각 요소를 순회하고 각 요소를 콘솔에 출력하는 작업을 수행합니다.

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

    arr.map((el) => {
        console.log(el);
    });
}

arr.map((el) => { console.log(el); });: map 메서드는 배열의 각 요소에 주어진 함수를 적용하고 그 결과로 새로운 배열을 생성합니다. 이 경우, 주어진 함수는 각 요소 el을 콘솔에 출력하는 역할을 합니다. 따라서 map 메서드를 사용하여 배열의 각 요소를 순회하고 각 요소를 콘솔에 출력합니다.

결과 확인하기

100
200
300
400
500
600
700
800
900

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

이 코드는 배열 arr의 각 요소를 순회하고 각 요소를 콘솔에 출력하는 것이 아니라, 요소를 조건에 따라 필터링하여 새로운 배열을 생성하는 작업을 수행하려고 시도하고 있습니다.

{
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];  
    arr.filter((el) => {
        console.log(el);
    });
}

arr.filter((el) => { console.log(el); });: filter 메서드는 주어진 함수를 사용하여 배열을 필터링하고 조건을 충족하는 요소만을 포함하는 새로운 배열을 반환합니다. 그러나 여기서 주어진 함수는 각 요소 el을 콘솔에 출력하는 역할을 수행하고 있으며, filter 메서드는 조건을 검사하여 요소를 선택해야 합니다.

결과 확인하기

[500, 600, 700, 800, 900]

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

이 코드는 배열 arr의 각 요소를 순회하고 각 요소를 콘솔에 출력하는 것이 아니라, 요소를 조건에 따라 필터링하여 새로운 배열을 생성하는 작업을 수행하려고 시도하고 있습니다.

{
    const arr1 = [1, 2, 3];
    const arr2 = [4, 5, 6];
    const combinedArray = [...arr1, ...arr2];
    console.log(combinedArray); // [1, 2, 3, 4, 5, 6]
    }
    {
    const numbers = [1, 2, 3];
    console.log(...numbers); // 1 2 3
}

arr.filter((el) => { console.log(el); });: filter 메서드는 주어진 함수를 사용하여 배열을 필터링하고 조건을 충족하는 요소만을 포함하는 새로운 배열을 반환합니다. 그러나 여기서 주어진 함수는 각 요소 el을 콘솔에 출력하는 역할을 수행하고 있으며, filter 메서드는 조건을 검사하여 요소를 선택해야 합니다.

결과 확인하기

[1, 2, 3, 4, 5, 6]
1 2 3

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

{
    const data = [1, 2, 3, 4, 5];

    // 배열 구조분해 할당을 사용하여 데이터를 불러옴
    const [first, second, ...rest] = data;

    console.log(first);              // 1
    console.log(second);             // 2
    console.log(rest);               // [3, 4, 5]
}

배열 구조분해 할당(destructuring assignment)을 사용하면 배열에서 원하는 값을 추출하여 변수에 할당할 수 있습니다. 이를 통해 배열의 요소에 간편하게 접근하고 변수에 저장할 수 있습니다.

결과 확인하기

1
2
[3, 4, 5]

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

이 코드는 객체 obj의 속성을 다양한 방식으로 접근하고 해당 속성의 값을 콘솔에 출력하는 작업을 수행합니다

{
    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"]);
}

이 코드는 객체의 속성에 접근하는 다양한 방법을 보여주고, 해당 속성의 값을 콘솔에 출력하는 예제입니다.

결과 확인하기

100
200
javascript
100
200
javascript

14. 객체 : 데이터 불러오기 : Object.keys() // key값을 배열로 만들어서 출력

이 코드는 객체 obj의 속성 키(key)들을 배열로 추출하고, 해당 배열을 콘솔에 출력하는 작업을 수행합니다.

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

    console.log(Object.keys(obj));
}

객체 obj의 속성 키들인 'a', 'b', 'c'가 배열로 반환되어 콘솔에 출력되었습니다. 이 방법을 사용하면 객체의 속성 키들을 동적으로 얻을 수 있으며, 이후 다양한 작업에 활용할 수 있습니다.

결과 확인하기

[ 'a', 'b', 'c' ]

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

이 코드는 객체 obj의 속성 값(value)들을 배열로 추출하고, 해당 배열을 콘솔에 출력하는 작업을 수행합니다.

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

    console.log(Object.values(obj));
}

객체 obj의 속성 값들인 100, 200, "javascript"이 배열로 반환되어 콘솔에 출력되었습니다. 이 방법을 사용하면 객체의 속성 값들을 배열로 추출하여 이후 다양한 작업에 활용할 수 있습니다.

결과 확인하기

100, 200, "javascript"

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

이 코드는 객체 obj의 속성(key-value 쌍)들을 배열로 추출하고, 해당 배열을 콘솔에 출력하는 작업을 수행합니다.

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

    console.log(Object.entries(obj));
}

객체 obj의 속성(key-value 쌍)들이 [키, 값] 형태의 배열로 반환되어 콘솔에 출력되었습니다. 이 방법을 사용하면 객체의 속성(key-value 쌍)들을 배열로 추출하여 이후 다양한 작업에 활용할 수 있습니다.

결과 확인하기

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

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

이 코드는 두 개의 객체 obj1과 obj2를 병합하고, 그 결과를 obj3에 할당한 후 obj3를 콘솔에 출력하는 작업을 수행합니다.

{
    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);
}

obj1과 obj2의 속성이 병합되어 obj3에 저장되었습니다. 이로써 obj3는 두 객체의 속성들을 포함하는 하나의 객체가 되었습니다. Object.assign() 메서드는 원본 객체를 변경하며, 만약 원본 객체를 변경하지 않고 새로운 객체를 만들고 싶다면 빈 객체를 대상으로 병합하면 됩니다.

결과 확인하기

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

18. 객체 : 데이터 불러오기 : hasOwnProperty() // key값 물어볼때 사용

이 코드는 객체 obj의 속성 존재 여부를 확인하는 두 가지 방법인 hasOwnProperty() 메서드와 in 연산자를 사용하여 속성 "a", "b", "c", "d"에 대한 결과를 확인하고 콘솔에 출력합니다.

{
    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

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

obj1과 obj2의 속성이 병합되어 obj3에 저장되었습니다. 이로써 obj3는 두 객체의 속성들을 포함하는 하나의 객체가 되었습니다. Object.assign() 메서드는 원본 객체를 변경하며, 만약 원본 객체를 변경하지 않고 새로운 객체를 만들고 싶다면 빈 객체를 대상으로 병합하면 됩니다.

결과 확인하기

true
true
true
false
true
true
true
true

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

이 코드는 객체 obj의 속성을 반복하면서 각 속성의 키와 값을 함께 콘솔에 출력하는 작업을 수행합니다.

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

for...in 루프를 사용하여 객체 obj의 모든 속성을 반복하면서 각 속성의 키와 값을 출력하였습니다. 이 방법을 사용하면 객체의 속성을 순회하고 속성의 키와 값을 다룰 수 있습니다.

결과 확인하기

a : 100
b : 200
c : javascript

20. 객체 : 데이터 불러오기 : 객체 펼침 연산자 //assign과 동일함.

이 코드는 객체 스프레드 연산자(...)를 사용하여 여러 객체를 병합하고, 그 결과를 새로운 객체에 저장한 후 이 객체들을 콘솔에 출력하는 작업을 수행합니다.

{
    const obj1 = {
        a: 100,
        b: 200,
        c: "javascript",
    }
    const obj2 = {
        d: 100,
        e: 200,
        f: "jauery",
    }
    const obj3 = {...obj1, ...obj2}
    const obj4 = {...obj1, d: "jquery"}
    const obj5 = {...obj1, b: 300}

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

obj3는 obj1과 obj2의 속성을 모두 포함하는 병합된 객체입니다.
obj4는 obj1의 속성을 복사하되, d 속성의 값을 변경한 객체입니다.
obj5는 obj1의 속성을 복사하되, b 속성의 값을 변경한 객체입니다.
이렇게 객체 스프레드 연산자를 사용하면 객체를 병합하거나 수정하여 새로운 객체를 생성할 수 있습니다.

결과 확인하기

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

21. 객체 : 데이터 불러오기 : 객체 구조 분해 할당 //사용 빈도수가 높음.

이 코드는 객체 분해 (Object Destructuring)를 사용하여 객체의 속성 값을 변수에 할당하고 그 값을 콘솔에 출력하는 작업을 수행합니다.

{
    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: 100,
        e: 200,
        f: "javascript",
    }
    const { d, e, f, g = "jquery"} = obj2;

    console.log(g);

    const obj3 = {
        x1: 100,
        y1: {a1: 100 , b1: 200},
        z1: "javascript",
    }
    const { x1, y1: {a1,b1}, z1} = obj3;
    console.log(x1);
    console.log(a1);
    console.log(b1);
    console.log(z1);
}

객체 분해를 사용하면 객체의 속성 값을 간단하게 추출하여 변수에 할당하거나, 기본값을 설정할 수 있으며, 중첩된 속성에도 접근할 수 있습니다.

결과 확인하기

100
200
javascript
100
200
javascript
jquery
100
100
200
javascript

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

이 코드는 객체 분해 (Object Destructuring)를 사용하여 객체의 속성 값을 변수에 할당하고 그 값을 콘솔에 출력하는 작업을 수행합니다.

 {
    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();
}

객체 분해를 사용하면 객체의 속성 값을 간단하게 추출하여 변수에 할당하거나, 기본값을 설정할 수 있으며, 중첩된 속성에도 접근할 수 있습니다.

결과 확인하기

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

이 코드는 객체 분해 (Object Destructuring)를 사용하여 객체의 속성 값을 변수에 할당하고 그 값을 콘솔에 출력하는 작업을 수행합니다.

{
    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)
        })
}

객체 분해를 사용하면 객체의 속성 값을 간단하게 추출하여 변수에 할당하거나, 기본값을 설정할 수 있으며, 중첩된 속성에도 접근할 수 있습니다.

결과 확인하기