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

변수에 저장된 데이터 부르는 법

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

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

let x, y, z에 각각 데이터를 초기화 후 console.log를 통해서 데이터를 호출하였다.

결과 확인하기
100, 200, javascript

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

상수에 저장된 데이터 부르는 법

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

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

상수를 선언할 땐 const를 사용해야한다.
호출 할 땐 console.log를 사용하여 호출 하였다.

결과 확인하기
100, 200, javascript

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

배열에 저장된 데이터 부르는 법

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

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

const arr에 100, 200, javascript로 초기화 되었다.
각각 데이터에 맞는 인덱스를 입력 후 console.log로 호출하였다.

결과 확인하기
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];

    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의 각 데이터를 호출할 때 console.log(arr[0]); ~ console.log(arr[8]); 이렇게 입력하면 계속되는 반복이 보이는데,
이를 for()문을 이용하면 간단하게 몇줄로 출력이 가능핟.

결과 확인하기
100
200
300
400
500
600
700
800
900

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){
        console.log(index);
    });

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

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

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

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

forEach 메소드를 사용하여 배열의 각 요소에 대한 작업을 수행한다.
forEach 메소드는 배열의 각 요소에 대해 주어진 함수를 호출한다.
이 함수는 인자로 현재 요소를 나타내는 변수 el을 받아 콘솔에 출력한다.
console.log(el); 이것은 배열의 데이터를 불러온다.
console.log(index); 이것은 배열의 인덱스를 불러온다.
console.log(array); 이것은 배열을 불러온다.

결과 확인하기
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

100
200
300
400
500
600
700
800
900

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

for of를 사용하여 데이터 부르기(주로 배열에서 사용)

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

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

for(const element of arr)을 하나씩보면
arr의 값을 하나씩 element에 보내고 받은 값을 출력하면 다시 arr의 값을 element로 보내는 반복을 하는 것이다.

결과 확인하기
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을 사용하여 console.log(element);이렇게 호출을 하면 배열의 값이 아닌 인덱스가 나온다.
만약 배열의 값을 불러오고 싶다면
arr[element] 인덱스 위치에 element를 넣어 호출하면 된다.

결과 확인하기
0
1
2
3
4
5
6
7
8

100
200
300
400
500
600
700
800
900

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

map()를 사용하여 데이터 불러오기

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

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

map()는 배열을 순회하면서 각 요소에 대해 주어진 함수를 호출하고,
각 함수 호출의 결과를 새로운 배열로 모아 반환
map()을 사용하면 배열을 변형하거나, 배열의 각 요소에 대한 연산을 수행할 수 있다.

결과 확인하기
100
200
300
400
500
600
700
800
900

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

filter()를 사용하여 데이터 불러오기

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

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

filter()는 배열에서 원하는 조건을 만족하는 요소만을 걸러내어 새로운 배열로 반환한다.

결과 확인하기
100
200
300
400
500
600
700
800
900

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

배열 펼침 연산자

{
    const arr1 = [100, 200, "javascript"];
    const arr2 = [300, 400, "jquery"];
    const arr3 = [...arr1, 500];

    console.log(arr1);   
    console.log(...arr1); 
    console.log(...arr1, ...arr2);
    console.log(...arr3); 
}

배열을 펼쳐서 개별 요소로 추출하거나 여러 배열을 병합하는 데에 활용된다.
arr1을 호출하면 100, 200, javascript 이렇게 쉼표(,)가 있는 채로 호출이 되는데,
배열 펼침 연산자(...)를 사용하면 쉼표가 사라지고
const arr3 = [...arr1, 500]; 이렇게 배열끼리의 병합도 가능해 진다.

결과 확인하기
100, 200, javascript
100 200 javascript
100 200 javascript 300 400 jquery
100 200 javascript 500

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

배열 구조 분해 할당

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

    const [a, b, c] = arr;

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

배열 구조 분해 할당을 하게되면 배열이 복잡해지면 호출할 때도 이름이 길어지는데 이를 간단하게 만들어 줄 수 있다.
const arr = [100, 200, "javascript"];을 그냥 호출 하려면
console.log(arr[0]); 이렇게 배열의 이름과 위치를 적어야 하는데
const [a, b, c] = arr; 배열 구조 분해 할당을 해주면
console.log(a); 이렇게 간편해 진다.

결과 확인하기
100
200
javascript

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

객체를 불러올 땐 .을 붙여서 불러올 수도 있지만
배열처럼[] 안에 키값을 넣어서 불러 올 수도 있다.

결과 확인하기
100
200
javascript
100
200
javascript

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

Object.keys()

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

    console.log(Object.keys(obj));  // 키를 배열로 출력
}

Object.keys()는 주어진 객체의 속성 키값을 배열로 반환한다.

결과 확인하기
['a', 'b', 'c']

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

Object.values()

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

    console.log(Object.values(obj));  // 값을 배열로 출력
}

Object.values()는 주어진 객체의 속성 값들을 배열로 반환한다.
반환된 배열에는 객체의 속성 값들이 순서대로 포함되며, 배열의 길이는 객체의 속성 개수와 일치한다.

결과 확인하기
[100, 200, 'javascript']

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

Object.entries()

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

    console.log(Object.entries(obj));  // 배열로 처리함
}

Object.entries()는 주어진 객체의 각 속성과 그 값들을 [key, value] 형태의 배열로 구성된 배열로 반환한다.

결과 확인하기
['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()은 여러 객체의 속성을 병합하여 새로운 객체를 생성하거나, 하나의 객체에 다른 객체의 속성을 복사할 때 사용된다.

결과 확인하기
{a: 100, b: 200, c: 'javascript', d: 300, e: 400, f: 'jquery'}

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

hasOwnProperty()

{
    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);
    console.log("b" in obj);
    console.log("c" in obj);
    console.log("javascript" in obj);
}

hasOwnProperty()는 해당 객체에 내가 찾는 키값이 있는지를 불리언 값으로 반환하는 메서드이다.
만약 키값이 있다면 true, 없다면 false가 출력된다.
이는 키값만 찾을 수 있으며 값은 찾지 못한다.

결과 확인하기
true
true
true
false
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반복문은 el이 obj의 키값이라고 생각하면 간단하다.
보통 객체에 사용하지만 배열에서도 사용은 가능하다.
만약 출력시 el만 입력한다면 키값만 나오지만 obj[el]이라고 입력시 값이 나온다.

결과 확인하기
a : 100
b : 200
c : javascript

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

객체 펼침 연산자

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

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

객체 펼침 연산자는 객체를 복사하거나 두 개 이상의 객체를 병합하는데 사용된다
이 연산자를 사용하여 출력시 ,가 사라진다.
obj3은 obj1과 obj2가 객체펼침 연산자로 펼쳐진 후 obj3에 합쳐진 것이다.
obj4는 obj1과 하나의 키와 값을 추가한 것이고
obj5는 추가된 키값의 값을 변경한 것이다.

결과 확인하기
{a: 100, b: 200, c: 'javascript', d: 300, e: 400, …}
{a: 100, b: 200, c: 'javascript', d: 'jquery'}
{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: 100,
        e: 200,
        f: "javascript",
    }
    const {d, e, f, g = "jquery"} = obj2;
    console.log(obj2);       // {d: 100, e: 200, c: "javascript"}
    console.log(g);         //jquery

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

객체 구조 분해 할당은 객체의 속성을 추출하고 그 값을 변수에 할당하는 것이다.
객체 구조 분해 할당을 하기 전에는 하나의 값을 호출하려면 obj1.a 이렇게 해야 했지만
한 후에는 a 이렇게만으로도 호출이 가능하다.

결과 확인하기
100
200
'javascript'
100
200
'javascript'
{d: 100, e: 200, c: "javascript"}
'jquery'
100
100
200
'javascript'

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

XMLHttpRequest

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

이 코드는 원격 서버에서 JSON 데이터를 가져오는 것으로
XMLHttpRequest를 사용하여 GET 요청을 보내고, 서버에서 응답을 받아 JSON으로 출력하는 부분이다.
XMLHttpRequest : 객체를 생성하고 웹 페이지에서 원격 JSON 파일을 가져오기 위한 GET 요청을 설정
xhr.onreadystatechange : 이벤트 핸들러를 정의하여 요청의 상태가 변경할 때마다 호출되는 함수를 지정
요청의 readyState가 4(완료)이고, HTTP 상태 코드가 200(성공)일 때, 요청이 성공했으며 서버에서 응답을 받았다는 것을 의미합니다. 그런 경우, 서버에서 받은 텍스트 응답 데이터를 xhr.responseText를 통해 얻습니다.
만약 readyState가 4이지만 HTTP 상태 코드가 200이 아닌 경우, 에러 메시지를 콘솔에 출력

결과 확인하기
jsonData

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

fetch API

{
    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 API를 사용하여 웹에서 JSON 데이터를 가져오는 방법으로
fetch 함수를 사용하여 주어진 URL에서 데이터를 가져온다
then 메서드를 사용하여 HTTP 응답을 JSON으로 파싱하는데 성공한 경우와, 실패한 경우에 대한 처리를 정의
파싱에 성공한 경우, JSON 데이터는 다음 .then 블록으로 전달
만약 요청에 실패하면 .catch 블록이 실행되어 에러 메시지를 콘솔에 출력

결과 확인하기
data