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

변수 데이터 불러오기 예시입니다.

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

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

let x = 100, y = 200, z = "javascript";세 개의 변수 x, y, z 각각의 초기 값을 선언합니다.

결과 확인하기
100, 200, javascript

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

상수 데이터 불러오기 예시입니다.

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

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

let x = 100, y = 200, z = "javascript";세 개의 변수 x, y및 z각각의 초기 값을 선언합니다.
const는 변경불가

결과 확인하기
100, 200,javascript

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

배열 데이터 불러오기 예시입니다.

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

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

const arr = [100, 200, "javascript"]; 상수 변수를 선언 하고 arr 3개의 요소가 포함된 배열로 초기화합니다

결과 확인하기
100, 200, javascript

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

배열 데이터 갯수 불러오기 예시입니다.

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

    console.log(arr.length); 
}

console.log(arr.length); 배열의 길이를 arr콘솔에 기록합니다 '3'. 이는 배열에 세 가지 요소가 있기 때문입니다.

결과 확인하기
3

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

배열 데이터 불러오기 for()문 예시입니다.

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

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

const arr100부터 900까지의 숫자를 포함하는 9개의 요소로 배열을 초기화합니다.
루프는 지정한대로 'i=0' ~ 'i=8'까지 반복됩니다.

결과 확인하기
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(elemunt){
        console.log(elemunt);
    });

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

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

    // 약식 표현 (매개변수 한개일때 생략가능)
    arr.forEach((el) => {   
        console.log(el);
    });

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

    arr.forEach(el => console.log(el));  // 리턴생략
}

제공된 코드에서는 메서드를 사용하여 forEach배열 요소를 반복 arr하고 콘솔에 인쇄합니다.
이 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

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

배열 데이터 불러오기 for of문 예시입니다.

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

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

for...of루프 에서는 배열 element의 각 요소를 arr순차적으로 나타내며 각 요소를 한 번에 하나씩 콘솔에 인쇄합니다.
이 루프는 명시적인 인덱스를 처리할 필요 없이 배열 요소를 반복하는 편리한 방법입니다.

결과 확인하기
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(arr[element]);
    }
}

for...in제공된 코드에서 루프를 사용하여 배열 요소를 반복 arr하고 각 요소를 콘솔에 인쇄하려고 합니다 .
그러나 for...in일반적으로 배열 요소를 반복하는 데 사용되지 않습니다.
주로 객체의 속성을 반복하는 데 사용됩니다.

결과 확인하기
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메소드를 사용하여 호출된 배열을 반복 arr하고 각 요소를 콘솔에 기록합니다.
이 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배열을 반복 arr하고 각 요소를 콘솔에 기록합니다.
이 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);
}

이를 통해 배열을 복사하거나, 여러 배열을 결합하거나, 함수에 매개변수로 전달할 때 유용하게 사용됩니다.

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

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

배열 데이터 불러오기 : 배열 구조 분해 할당 예시입니다.

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

    const [a, b, c] = arr;

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

주어진 코드 조각은 세 개의 요소를 포함하는 'arr' 배열을 정의한 다음 구조 분해 할당을 사용하여 배열의 각 요소를 개별 변수 'a', 'b' 및 'c'에 할당합니다.

결과 확인하기
100
200
javascrip

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

코드에는 obj세 가지 속성이 있는 개체가 있습니다 .
이러한 속성의 값에 액세스하려면 점 표기법과 대괄호표기법 이라는 두 가지 방법을 사용합니다
점 표기법과 대괄호 표기법 모두 객체 속성에 접근하는 데 사용될 수 있으며, 이 경우에는 동일한 결과를 산출합니다.
점 표기법은 일반적으로 속성 이름을 미리 알고 있고 유효한 JavaScript 식별자인 경우에 사용되는 반면, 대괄호 표기법은 더 유연하며 동적 이름이나 비표준 이름으로 속성에 액세스할 수 있도록 해줍니다.

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

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

객체 데이터 불러오기 Object.key 문 예시입니다.

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

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

Object.key() 메서드는 객체의 열거 가능한 속성 이름의 배열을 검색하는 데 사용됩니다.
결과를 콘솔에 기록하면 객체의 키(속성 이름)가 포함된 배열이 표시됩니다.

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

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

객체 데이터 불러오기 Object.values 문 예시입니다.

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

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

이 메서드는 개체의 속성 값을 포함하는 배열을 검색하는 데 사용됩니다.
결과를 콘솔에 기록하면 개체 속성 값이 포함된 배열이 표시됩니다.

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

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

객체 데이터 불러오기 Object.entries 문 예시입니다.

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

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

이 메서드는 객체 자체의 열거 가능한 속성 쌍의 배열을 검색하는 데 사용됩니다.
결과를 콘솔에 기록하면 이러한 쌍이 포함된 배열이 표시됩니다.

결과 확인하기
[Array(2), Array(2), Array(2)]

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"));      
    console.log(obj.hasOwnProperty("b"));      
    console.log(obj.hasOwnProperty("c"));      
    console.log(obj.hasOwnProperty("d"));       

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

hasOwnProperty 메서드는 객체가 특정 속성을 직접 소유하고 있는지 여부를 확인합니다.
obj.hasOwnProperty("a")는 true를 반환합니다. 왜냐하면 객체 obj는 a라는 속성을 직접 소유하고 있기 때문입니다.
obj.hasOwnProperty("b")도 true를 반환합니다. 객체는 b라는 속성을 직접 소유하고 있습니다.
obj.hasOwnProperty("c") 역시 true를 반환합니다. 객체는 c라는 속성을 직접 소유하고 있습니다
obj.hasOwnProperty("d")는 false를 반환합니다. 객체는 d라는 속성을 소유하고 있지 않기 때문입니다.
in 연산자는 객체의 속성을 포함하여 상속된 속성까지 확인합니다.
"a" in obj는 true를 반환합니다. 객체 내에 a 속성이 있으므로 true입니다.
"b" in obj도 true를 반환합니다. b 속성이 객체 내에 있으므로 true입니다.
"c" in obj 역시 true를 반환합니다. c 속성이 객체 내에 있으므로 true입니다.
"d" in obj는 false를 반환합니다. d 속성이 객체 내에 없기 때문입니다.

결과 확인하기
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 루프는 객체 obj의 속성을 순회합니다. 각 반복에서 el 변수는 현재 속성 이름을 나타내고, obj[el]은 해당 속성의 값을 나타냅니다.
따라서 반복문에서는 각 속성과 그 값이 순서대로 출력됩니다.

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

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, b: 300}

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

obj1과 obj2의 모든 속성을 합쳐서 새로운 obj3 객체를 만듭니다.
obj1의 모든 속성을 obj4로 복사한 후, d 속성의 값을 "jquery"로 변경합니다.
obj1의 모든 속성을 obj5로 복사한 후, b 속성의 값을 300으로 변경합니다.

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

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

obj1 객체에서 a, b, c 속성을 추출하여 새로운 변수 a, b, c에 할당합니다.
obj1 객체에서 a, b, c 속성을 추출하되, a를 x, b를 y, c를 z로 변수 이름을 변경하여 할당합니다.
obj2 객체에서 d, e, f 속성을 추출하며, g는 기본값으로 "jquery"를 설정합니다.
obj3 객체에서 x1, y1, z1 속성을 추출합니다. y1은 중첩된 객체입니다.

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

22. 파일 : 서버 데이터 불러오기 : 객체 구조 분해 할당

객체 데이터 불러오기 : 객체 구조 분해 할당 예시입니다.


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