javascript

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

세 개의 변수를 선언하고 그 값을 출력하는 예제입니다.

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

    console.log(x, y, z); //100 200 javascrip
}

1. let x = 100, y = 200, z = "javascript";: 이 줄은 세 개의 변수 x, y, z를 선언하고 초기값을 할당합니다.
x 변수에는 숫자 100을 할당합니다. y 변수에는 숫자 200을 할당합니다. z 변수에는 문자열 "javascript"를 할당합니다.
2. console.log(x, y, z);: 이 줄은 console.log() 함수를 사용하여 변수 x, y, z의 값을 출력합니다. console.log() 함수는 콘솔에 인자로 전달된 값을 출력하는 JavaScript의 내장 함수입니다.

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

const를 사용해 세 개의 변수를 선언하고 그 값을 출력하는 예제입니다
const로 선언된 변수는 다른 값으로 변경할 수 없으므로 한 번 할당된 값은 유지됩니다.

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

    console.log(x, y, z); //100 200 javascrip
}

const x = 100, y = 200, z = "javascript";: 이 줄은 세 개의 상수(const) 변수 x, y, z를 선언하고 초기값을 할당합니다. const는 상수를 선언할 때 사용되며, 한 번 할당된 값을 변경할 수 없도록 합니다.
1. x 변수에는 숫자 100을 할당합니다. y 변수에는 숫자 200을 할당합니다. z 변수에는 문자열 "javascript"를 할당합니다.
2. console.log(x, y, z);: 이 줄은 console.log() 함수를 사용하여 변수 x, y, z의 값을 출력합니다. console.log() 함수는 콘솔에 인자로 전달된 값을 출력하는 JavaScript의 내장 함수입니다.

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

배열을 사용하여 데이터를 저장하고 이를 출력하는 예제입니다.

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

    console.log(arr[0], arr[1], arr[2]);    //100 200 javascrip
}

1. const arr = [100, 200, "javascript"];: 이 줄은 arr라는 이름의 상수(const) 배열을 선언하고 초기값으로 세 개의 요소를 가진 배열을 생성합니다.
첫 번째 요소(인덱스 0)에는 숫자 100을 저장합니다.
두 번째 요소(인덱스 1)에는 숫자 200을 저장합니다.
세 번째 요소(인덱스 2)에는 문자열 "javascript"를 저장합니다.
2. console.log(arr[0], arr[1], arr[2]);: 이 줄은 console.log() 함수를 사용하여 배열 arr의 각 요소를 출력합니다. 배열의 각 요소는 인덱스를 사용하여 접근할 수 있습니다.
arr[0]은 배열의 첫 번째 요소인 숫자 100에 접근합니다.
arr[1]은 배열의 두 번째 요소인 숫자 200에 접근합니다.
arr[2]은 배열의 세 번째 요소인 문자열 "javascript"에 접근합니다.

04. 배열 : 데이터 갯수 구하기

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

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

    console.log(arr.length);    //3  
}

1. const arr = [100, 200, "javascript"];: 이 줄은 arr라는 이름의 상수(const) 배열을 선언하고 초기값으로 세 개의 요소를 가진 배열을 생성합니다.
첫 번째 요소(인덱스 0)에는 숫자 100을 저장합니다. 두 번째 요소(인덱스 1)에는 숫자 200을 저장합니다.
세 번째 요소(인덱스 2)에는 문자열 "javascript"를 저장합니다. 배열 arr에는 총 3개의 요소가 있습니다
2. console.log(arr.length);: 이 줄은 arr 배열의 length 속성을 출력합니다. length 속성은 배열의 요소 개수를 나타내며, 배열의 길이를 확인하는 데 사용됩니다.
배열 arr에는 총 3개의 요소가 있으므로 arr.length는 3이 됩니다. 이것은 배열이 세 개의 요소를 포함하고 있음을 나타내는 값입니다.

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

배열 arr의 요소들을 for()문 방식으로 출력하는 예제입니다.
개별적인 console.log() 문을 사용하여 각 요소를 출력하고, 나중에는 반복문을 사용하여 배열을 순회하면서 출력하는 방법을 보여주고 있습니다.

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

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

    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]);
    } //100, 200, 300, 400, 500, 600, 700, 800, 900

    for(let i=0; i<arr.length; i++){
        console.log("05 : " + arr[i]);
    }; //100, 200, 300, 400, 500, 600, 700, 800, 900
}

1. 먼저 const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];: 이 줄은 arr라는 이름의 배열을 선언하고 초기값으로 9개의 숫자를 가진 배열을 생성합니다.
2. 아래 두개의 방식은 배열 arr의 각 요소를 인덱스를 사용하여 직접 출력합니다. 각각의 arr[i] 요소를 개별적으로 출력하고 있습니다
첫번째는 리터럴 방식으로 배열 선언 동시에 초기값 설정을 합니다
두번째는 리터럴 방식으로 배열을 선언 후 데이터를 할당합니다.
3.이 부분은 반복문을 사용하여 배열 arr의 요소를 출력하는 부분입니다. for 루프를 사용하여 i 값을 0부터 8까지 증가시키면서 각 인덱스에 해당하는 arr[i] 값을 출력합니다.

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

forEach() 메서드는 JavaScript 배열에서 사용할 수 있는 배열 반복(iteration) 메서드 중 하나입니다.
배열 arr의 각 요소를 순회하면서 각 요소, 해당 요소의 인덱스, 그리고 배열 자체를 출력하는 예제입니다.

{
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
    
    //01. 각 요소(element)를 출력하는 예제
    arr.forEach(function(element){
        console.log(element)
    });
    //02. 각 요소의 인덱스를 출력하는 예제
    arr.forEach(function(element, index){
        console.log(index);
    }); //0 1 2 3 4 5 6 7 8
    //03. 배열 자체를 출력하는 예제
    arr.forEach(function(element, index, array){
        console.log(array);
    });
    //04. 화살표 함수로 표현
    arr.forEach((element) => {
        console.log(element)
    });

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

    arr.forEach((el, index, array) => {
        console.log("06 : " + el + ":" + index + ":" + array)
    });
    arr.forEach((el, index, array) => {
        console.log( el,index,array)
    }); 
    //  06 : 100:0:100,200,javascript
    //  06 : 200:1:100,200,javascript
    //  06 : javascript:2:100,200,javascript

    //05. 매개변수가 하나뿐인 경우 괄호를 생략
    arr.forEach(element => {
        console.log(element)
    });
    //06. 함수가 단일 표현식인 경우 중괄호 {}를 생략
    arr.forEach(element => console.log(element));
}

1.각 요소(element)를 출력하는 예제
forrEach 메서드는 배열의 각 요소에 대해 주어진 콜백 함수를 호출합니다.
콜백 함수는 매개변수 element를 갖고 있으며, 이는 배열의 각 요소를 나타냅니다.
콜백 함수 내부에서 console.log(element)를 호출하여 각 요소를 콘솔에 출력합니다.

2.각 요소의 인덱스를 출력하는 예제
forEach() 메서드는 배열의 각 요소에 대해 주어진 콜백 함수를 호출합니다.
콜백 함수에는 두 개의 매개변수 element와 index가 전달됩니다.
element는 현재 순회 중인 배열 요소의 값을 나타냅니다.
index는 현재 순회 중인 배열 요소의 인덱스를 나타냅니다.
콜백 함수 내부에서 console.log(index)를 호출하여 각 요소의 인덱스를 콘솔에 출력합니다.

3.배열 자체를 출력하는 예제
forEach() 메서드는 배열의 각 요소에 대해 주어진 콜백 함수를 호출합니다.
콜백 함수에는 세 개의 매개변수가 전달됩니다.
element: 현재 순회 중인 배열 요소의 값을 나타냅니다.
index: 현재 순회 중인 배열 요소의 인덱스를 나타냅니다.
array: forEach() 메서드를 호출한 배열 자체를 나타냅니다.
console.log(element, index, array);: 콜백 함수 내부에서는 console.log() 함수를 사용하여 배열 자체를 출력합니다.

4.화살표 함수는 간결한 구문을 가지므로 코드가 좀 더 간결하고 가독성이 좋을 수 있습니다. 하지만 코드가 복잡해질 경우 화살표 함수를 사용하는 것이 항상 좋은 것은 아닙니다.

5.화살표 함수를 사용하되, 매개변수가 하나뿐인 경우 괄호를 생략할 수 있습니다.

6.함수 바디가 단일 표현식인 경우 중괄호 {}를 생략할 수 있습니다

메서드 (Methods)?
1.객체 (Objects):
JavaScript에서 객체는 속성과 메서드를 포함하는 데이터 구조입니다. 객체는 중괄호 {}로 정의되며, 속성과 메서드는 중괄호 내에 키-값 쌍(key-value pair)으로 정의됩니다. 속성은 객체의 상태나 데이터를 나타내며, 메서드는 해당 객체와 관련된 동작을 나타냅니다.
2.메서드 (Methods):
메서드는 객체 내에서 정의된 함수입니다. 이 함수들은 객체의 상태를 변경하거나 객체와 관련된 동작을 수행합니다. 메서드를 정의하려면 객체 내에 함수를 할당하면 됩니다.
메서드 호출 (Method Invocation):
객체의 메서드는 객체 이름을 따라 점(.)을 사용하여 호출됩니다
3.내장 객체와 메서드:
JavaScript에는 내장 객체와 그와 관련된 메서드가 많이 있습니다. 예를 들어, 문자열(String), 배열(Array), 숫자(Number), 날짜(Date) 등의 내장 객체에는 다양한 메서드가 내장되어 있습니다. 이러한 메서드를 사용하여 해당 객체와 관련된 작업을 수행할 수 있습니다.

콜백 함수(callback function)?
다른 함수 내에서 실행되거나 다른 함수에 전달되는 함수입니다.(함수 안에 함수) 주요한 특징을 살펴보면,
1. 함수로서의 값: 콜백 함수는 함수 자체를 값으로 가지며, 다른 함수 내에서 변수에 할당하거나 인자(argument)로 전달할 수 있습니다.
2. 비동기 처리: 콜백 함수는 주로 비동기적인 작업의 완료를 처리하기 위해 사용됩니다. 예를 들어, 파일을 읽거나 HTTP 요청을 보내는 등의 작업을 비동기적으로 처리하고, 작업이 완료되면 콜백 함수를 호출하여 결과를 처리합니다.
3. 이벤트 처리: 웹 애플리케이션에서는 이벤트 핸들러로서 콜백 함수를 사용합니다. 사용자가 버튼을 클릭하거나 마우스를 움직일 때와 같은 이벤트가 발생하면 미리 정의된 콜백 함수가 호출됩니다.

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

for...of 루프를 사용하여 배열 arr의 각 요소를 순회하고 각 요소를 출력하는 예제입니다.

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

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

    //02
   const arr = [100, 200, "javascript"]

    for(let el of arr){
        console.log("07 : " + el);
    } // 100,200,javascrip
}

for...of 루프는 반복문으로, 배열, 문자열, 맵(Map), 셋(Set) 등의 iterable 객체를 순회할 때 사용됩니다.
for (const element of iterable) {
// 요소(element)에 대한 작업 수행
}
element: 현재 순회 중인 요소를 나타내는 변수입니다. 이 변수의 이름은 사용자가 지정할 수 있으며, 순회할 때마다 iterable 객체의 다음 요소로 자동으로 업데이트됩니다.
iterable: 반복 가능한(iterable) 객체를 나타내는 변수 또는 표현식입니다. 이 객체를 순회하고자 하는 대상을 지정합니다.
console.log(element): 루프 내에서 console.log() 함수를 사용하여 현재 순회 중인 요소인 element를 출력합니다.

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

for...in 루프를 사용하여 배열 arr의 요소를 순회하고 출력하는 두 가지 예제를 보여줍니다.
for...in 루프는 객체의 열거 가능한 속성(enumerable properties)을 순회할 때 주로 사용되며, 배열에 대한 순회에는 권장되지 않습니다.

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

1. 배열 arr의 인덱스(0, 1, 2, ...)를 순회하고 각 인덱스를 element 변수에 할당하여 출력합니다.
2. 배열 arr의 인덱스를 순회하고, 각 인덱스를 사용하여 배열의 요소를 출력합니다. 즉, 각 인덱스를 이용하여 배열 요소에 접근하고 출력합니다.

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

forEach는 각 요소에 대해 특정 작업을 수행할 때 사용되고, map은 각 요소를 변환하여 새로운 배열을 생성할 때 사용됩니다.

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

    //01
    arr.map(function(el, index, array){
        console.log("09 : " + el + " : " + index + " : " + array);
    });
    //


    //02
    const arrNum = arr.map((el) => {
        return el;
    });
    console.log("09 : " + arrNum)
}

1-1. 함수는 배열의 각 요소를 새로운 배열로 변환하는 함수입니다. 이때 사용되는 콜백 함수는 세 개의 매개변수를 가집니다. el은 현재 요소, index는 현재 요소의 인덱스, array는 원본 배열입니다.
1-2. el은 현재 요소를 나타내고, index는 해당 요소의 인덱스, array는 원본 배열을 나타냅니다.예를 들어, 첫 번째 요소에서는 "09 : 100 : 0 : 100,200,javascript"가 출력됩니다. 여기서 100은 첫 번째 요소, 0은 첫 번째 요소의 인덱스, "100,200,javascript"는 원본 배열을 나타냅니다.
2-1. map 함수를 사용하여 arr 배열의 각 요소를 새로운 배열 arrNum으로 변환합니다. 화살표 함수를 사용하여 각 요소를 그대로 반환하고 있습니다. 2-1. console.log("09 : " + arrNum): 새로운 배열 arrNum을 출력합니다. 여기서 arrNum은 [100, 200, "javascript"]과 동일한 값을 가지게 됩니다.

요약하면, 1번 코드는 map 함수를 사용하여 각 요소를 처리하고 콘솔에 출력하는 예시입니다. 2번 코드는 map 함수를 사용하여 새로운 배열을 생성하고, 그 배열을 콘솔에 출력하는 예시입니다.
1번 코드에서는 map 함수가 각 요소를 처리하고, 콘솔에 결과를 출력했습니다. 각 출력문은 현재 요소(el), 인덱스(index), 그리고 전체 배열(array)을 보여줍니다.
2번 코드에서는 map 함수를 사용하여 새로운 배열 arrNum을 생성하고, 이 배열을 콘솔에 출력했습니다. 결과적으로 배열 arrNum은 [100, 200, "javascript"]입니다.

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

filter 함수는 배열의 각 요소를 검사하여 조건을 만족하는 요소만을 가지고 새로운 배열을 생성합니다. 즉, 조건을 만족하지 않는 요소는 필터링됩니다.

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

    //01
        arr.filter((el, index, array) => {
            console.log("10 : " + el + ":" + index + ":" + array)
    });

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

    const arrNum2 = arr.filter(el =>{
        return el>150;
    })

    const arrNum3 = arr.filter(el => el>150);
}

1-1 배열 arr을 생성하고, 요소로 100, 200, 그리고 "javascript"를 가지고 있습니다. 1-2 사용되는 화살표 함수는 세 개의 매개변수를 받습니다. el은 현재 요소, index는 현재 요소의 인덱스, array는 원본 배열입니다. 1-3 출력 : 예를 들어, 첫 번째 요소에서는 "10 : 100 : 0 : 100,200,javascript"가 출력됩니다. 여기서 100은 첫 번째 요소, 0은 첫 번째 요소의 인덱스, "100,200,javascript"는 원본 배열을 나타냅니다. 2-1 filter를 사용하여 arr 배열의 각 요소를 검사하고, 조건을 만족하는 요소로 이루어진 새로운 배열 arrNum을 생성합니다. 여기서 조건은 el > 150이며, 즉 요소가 150보다 큰 경우에만 포함됩니다. 2-2 새로운 배열 arrNum을 출력합니다. 이 경우, 200이 유일하게 150보다 큰 요소이므로, 결과는 [200]이 됩니다.

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

for...in 루프를 사용하여 배열 arr의 요소를 순회하고 출력하는 두 가지 예제를 보여줍니다.
for...in 루프는 객체의 열거 가능한 속성(enumerable properties)을 순회할 때 주로 사용되며, 배열에 대한 순회에는 권장되지 않습니다.

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

1. 배열 arr의 인덱스(0, 1, 2, ...)를 순회하고 각 인덱스를 element 변수에 할당하여 출력합니다.
2. 배열 arr의 인덱스를 순회하고, 각 인덱스를 사용하여 배열의 요소를 출력합니다. 즉, 각 인덱스를 이용하여 배열 요소에 접근하고 출력합니다.

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

for...in 루프를 사용하여 배열 arr의 요소를 순회하고 출력하는 두 가지 예제를 보여줍니다.
for...in 루프는 객체의 열거 가능한 속성(enumerable properties)을 순회할 때 주로 사용되며, 배열에 대한 순회에는 권장되지 않습니다.

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

1. 배열 arr의 인덱스(0, 1, 2, ...)를 순회하고 각 인덱스를 element 변수에 할당하여 출력합니다.
2. 배열 arr의 인덱스를 순회하고, 각 인덱스를 사용하여 배열의 요소를 출력합니다. 즉, 각 인덱스를 이용하여 배열 요소에 접근하고 출력합니다.

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

객체에서 데이터를 불러오는 2가지 방법을 설명하고 있습니다.

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

    //01. 점 표기법을 사용하여 속성에 접근하기
    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);

    //02. 배열을 사용하여 속성에 접근하기
    console.log(["a"]);
    console.log(["b"]);
    console.log(["c"]);
}

01
obj 객체의 속성을 접근하려면 obj.a, obj.b, obj.c와 같이 점 표기법을 사용해야 합니다.
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
02
배열을 사용하여 속성에 접근하려면 다음과 같이 할 수 있습니다
console.log(obj['a']);
console.log(obj['b']);
console.log(obj['c']);

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

Object.keys()는 주어진 객체의 속성 이름들을 배열로 반환합니다.

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

Object.keys()는 주어진 객체의 속성 이름들을 배열로 반환합니다. 즉, obj 객체의 속성인 a, b, c를 배열로 만들어 반환합니다.

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

Object.values()는 주어진 객체의 속성 값들을 배열로 반환합니다.

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

Object.values()는 주어진 객체의 속성 값들을 배열로 반환합니다. 즉, obj 객체의 값들을 배열로 만들어 반환합니다.

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

Object.entries()는 주어진 객체의 각 속성을 [키, 값] 쌍으로 묶은 배열을 생성하고, 이들을 배열로 만들어 반환합니다.

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

Object.entries()는 주어진 객체의 각 속성을 [키, 값] 쌍으로 묶은 배열을 생성하고, 이들을 배열로 만들어 반환합니다. 즉, obj 객체의 속성과 값을 배열로 만들어 반환합니다. 결과값의 배열은 객체 obj의 속성과 값을 [키, 값] 쌍으로 묶은 배열들의 배열을 가지고 있습니다.

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

Object.assign()은 JavaScript에서 객체를 병합하는 메서드입니다. Object.assign()은 여러 객체를 병합하고 첫 번째 객체에 추가된 내용을 반환합니다.

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

    console.log(obj3);
}

Object.assign()은 여러 객체를 병합하고 첫 번째 객체에 추가된 내용을 반환합니다. 이 경우, obj1에 obj2의 속성들이 추가되고, obj3에도 동일한 내용이 할당됩니다.

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

JavaScript에서 객체의 속성을 확인하는 두 가지 방법을 보여줍니다: hasOwnProperty 메서드와 in 연산자.
hasOwnProperty 메서드는 객체가 특정 속성을 직접 소유하고 있는지 여부를 판단합니다.
in 연산자는 객체가 특정 속성을 가지고 있는지 확인합니다. 이때, 상속된 속성까지 확인합니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "jS"
    };
    //hasOwnProperty 메서드
    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);
}

hasOwnProperty 메서드는 객체가 특정 속성을 직접 소유하고 있는지를 확인합니다.
첫 번째, 두 번째, 세 번째 console.log는 obj 객체가 각각 "a", "b", "c" 속성을 가지고 있는지를 확인합니다. 각각의 경우에 해당 속성을 가지고 있기 때문에 true가 출력됩니다.
네 번째 console.log는 "d" 속성을 가지고 있지 않기 때문에 false가 출력됩니다.

in 연산자는 객체가 특정 속성을 가지고 있는지를 확인합니다. 이때, 상속된 속성까지 확인합니다.
네 개의 console.log 문은 "a", "b", "c", "d" 속성이 obj 객체에 존재하는지를 확인합니다.
"a", "b", "c"는 obj 객체에 존재하므로 true가 출력되고, "d"는 존재하지 않기 때문에 false가 출력됩니다.

종합하면, hasOwnProperty 메서드는 객체가 직접 소유한 속성을 확인하고, in 연산자는 객체가 상속한 속성을 포함하여 모든 속성을 확인합니다.

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

for...in 반복문을 사용해 객체 데이터 불러오기

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

    for(let el in obj){
        console.log(el + " : " + obj[el]);
    }
}

먼저, obj라는 객체가 정의됩니다. 이 객체는 세 개의 속성을 가지고 있습니다: a, b, c
for...in 반복문은 객체의 속성들을 반복적으로 접근합니다. el 변수는 각 속성의 이름을 나타냅니다. obj[el]은 해당 속성의 값을 가져옵니다.
16번의 코드는 객체를 배열로 변환하여 처리하는 방법을 사용하고, 18번의 코드는 반복문을 통해 직접 속성에 접근하고 조작하는 방법을 사용합니다.

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

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

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

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

obj3 : ... 연산자를 사용하여 객체 obj1과 obj2를 병합합니다. 이를 통해 새로운 객체 obj3가 생성되며, obj1의 속성과 obj2의 속성이 모두 포함됩니다.
obj4 : ... 연산자를 사용하여 객체 obj1의 속성을 복사하고, d 속성을 덮어씁니다. 이로써 obj4는 obj1의 속성과 d: "JQ"가 포함됩니다.
obj5 : ... 연산자를 사용하여 객체 obj1의 속성을 복사하고, d 속성의 값을 변경합니다. obj1의 d 속성은 300으로 변경되고, 이를 통해 obj5가 생성됩니다.

17번 코드와 20번 코드 모두 객체를 병합하는 것이 목적입니다.단, 17번 코드에서는 Object.assign() 메서드를 사용하여 obj1 객체에 obj2 객체의 속성을 병합합니다.Object.assign() 메서드를 사용할 때, obj1 객체 자체가 변경됩니다. obj1은 obj2의 속성을 흡수합니다.
20번 코드에서는 스프레드 문법을 사용하여 obj1과 obj2 객체를 병합하여 새로운 객체를 생성합니다.스프레드 문법을 사용하여 새로운 객체가 생성되고, 원본 객체(obj1과 obj2)는 변경되지 않습니다.

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

객체 구조 분해 할당(Object Destructuring)은 JavaScript에서 객체의 속성을 추출하여 변수에 할당하는 방법입니다. 이를 통해 코드를 간결하게 작성하고 가독성을 높일 수 있습니다.

{
    //01
    const obj1 = {
        a: 100,
        b: 200,
        c: "jS"
    };
    const {a, b, c} = obj1;

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

    //02
    const {a: x, b: y, c: z} = obj1;
    console.log(x);
    console.log(y);
    console.log(z);

    //03
    const obj2 = {
        d: 100,
        e: 200,
        f: "jS"
    };
    const {d, e, f, g = "JQ"} = obj2
    console.log(g)
    console.log(obj2)

    //04
    const obj3 = {
        x1: 100,
        y1: {a1: 100, b1:200},
        z1: "js"
    }
    const {x1, y1: {a1, b1}, z1} = obj3;

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

//01 객체 구조 분해 할당(Object Destructuring)을 사용하여 obj1 객체의 속성들을 각각의 변수에 할당하고, 그 값을 출력하는 예시입니다.
먼저, obj1이라는 객체가 정의됩니다. 이 객체는 세 개의 속성을 가지고 있습니다: a, b, c.
다음으로, 객체 구조 분해 할당을 사용하여 obj1의 속성들을 변수에 할당합니다
중괄호 내에는 변수 이름이 들어가며, 이는 obj1 객체의 속성 이름과 일치합니다.
즉, a에는 obj1의 a 속성 값이, b에는 obj1의 b 속성 값이, c에는 obj1의 c 속성 값이 할당됩니다. 마지막으로, 각 변수의 값을 출력합니다
//02 객체 구조 분해 할당(Object Destructuring)을 사용하여 obj1 객체의 속성을 다른 변수에 할당하고, 그 값을 출력하는 예시입니다.
a 속성의 값을 x 변수에, b 속성의 값을 y 변수에, c 속성의 값을 z 변수에 할당합니다.
결과적으로, x에는 obj1의 a 속성 값이, y에는 obj1의 b 속성 값이, z에는 obj1의 c 속성 값이 할당되어 출력됩니다.
//03 체 구조 분해 할당(Object Destructuring)을 사용하여 obj2 객체의 속성을 추출하고, 그 값을 변수에 할당한 뒤에, 그 변수들을 출력하는 예제입니다. obj2라는 객체가 정의됩니다. 이 객체는 d, e, f 세 개의 속성을 가지고 있습니다. 객체 구조 분해 할당을 통해 d 속성의 값을 d 변수에, e 속성의 값을 e 변수에, f 속성의 값을 f 변수에 할당합니다. g 속성은 obj2 객체에는 없지만, 기본값으로 "JQ"가 설정되어 있습니다. 만약 g가 obj2 객체에 존재하지 않는 경우, g 변수에는 "JQ"가 할당됩니다. g를 출력하면 기본값인 "JQ"가 나옵니다. obj2를 출력하면 obj2 객체 전체가 출력됩니다. //04 객체 구조 분해 할당(Object Destructuring)을 사용하여 obj3 객체의 속성들을 추출하고, 그 값을 변수에 할당한 뒤에, 그 변수들을 출력하는 예제입니다. obj3라는 객체가 정의됩니다. 이 객체는 x1, y1, z1 세 개의 속성을 가지고 있습니다. y1 속성은 또 다른 객체입니다. 객체 구조 분해 할당을 통해 x1 속성의 값을 x1 변수에 할당합니다. y1 속성의 값을 y1 변수에 할당하려 했지만, y1은 객체이기 때문에 내부의 속성들을 더 분해합니다. 그래서 a1에 100, b1에 200이 할당됩니다. z1 속성의 값을 z1 변수에 할당합니다.