01. 변수 : 데이터 저장

자바스크립트에서 변수는 값을 지정하고 참조하는데 사용합니다.
변수를 사용하면 데이터를 저장하고 나중에 해당 데이터를 재사용 할 수 있습니다.
JavaScript에서 let 키워드는 변수를 선언할 때 사용되는 중요한 키워드 중 하나입니다.
2015년에 ECMAScript 6(ES6)가 등장하면서 let은 var와 함께 변수 선언을 위한 새로운 옵션으로 소개되었습니다.
let은 주로 블록 스코프(block scope) 변수를 선언하는 데 사용됩니다. 🚀

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

    console.log("01. 변수 : 데이터 저장");
    console.log(x);
    console.log(y);
    console.log(z);
}
결과 확인하기
01. 변수 : 데이터 저장
100
200
javascript

02. 변수 : 데이터 저장 + 데이터 변경

가장 기본적인 방법으로, 변수를 사용하여 데이터를 저장하고 변경할 수 있습니다.
변수는 값을 할당하고 해당 값을 참조할 수 있는 식별자입니다.
console.log() 메소드는 개발자 콘솔에 메시지를 출력합니다. 이 메시지는 문자열일 수도 있고, JavaScript 객체일 수도 있습니다.

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

    x = 300;
    y = 400;
    z = "zquery"

    console.log("02. 변수 : 데이터 저장 + 데이터 변경");
    console.log(x);
    console.log(y);
    console.log(z);
}
결과 확인하기
02. 변수 : 데이터 저장 + 데이터 변경
300
400
zquery

03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가

자바스크립트 변수를 사용하여 배열과 객체에 데이터를 추가할 수 있습니다.

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

    x += 300;
    y += 400;
    z += "zquery"

    console.log("03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가");
    console.log(x);
    console.log(y);
    console.log(z);
}
결과 확인하기
03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가
400
600
javascriptzquery

04. 상수 : 데이터 저장 + 데이터 변경(x)

자바스크립트에서는 상수를 정의하는 데에는 const 키워드를 사용합니다.
상수는 한 번 정의되면 그 값을 변경할 수 없습니다.
이는 코드의 가독성과 유지 보수성을 향상시키는데 도움이 됩니다.
const는 JavaScript에서 상수를 선언할 때 사용하는 키워드입니다.
한번 선언되면 그 값은 변경할 수 없으며, 블록 스코프를 가집니다. 🚫
let은 재할당이 가능하지만, const는 불가능합니다.

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

    // x += 300;
    // y += 400;
    // z += "zquery"

    console.log("04. 상수 : 데이터 저장 + 데이터 변경(x)");
    console.log(x);
    console.log(y);
    console.log(z);
}
결과 확인하기
04. 상수 : 데이터 저장 + 데이터 변경(x)
100
200
javascript

05. 배열 : 데이터 저장(여러개) : 표현방법1 : 배열선언

자바스크립트에서 배열은 여러 값을 담을 수 있는 데이터 구조입니다.
배열은 정수형 인덱스를 사용하여 값에 접근할 수 있습니다.
new Array()는 JavaScript에서 배열을 생성하는 한 가지 방법입니다.
배열이란 다양한 데이터를 순서대로 저장할 수 있는 자료구조로, JavaScript에서는 매우 중요한 역할을 합니다. 📦

{
    const arr = new Array();

    arr[0] = 100;
    arr[1] = 200;
    arr[2] = "javascript";

    console.log("05. 배열 : 데이터 저장(여러개) : 표현방법1 : 배열선언");
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);

}
결과 확인하기
05. 배열 : 데이터 저장(여러개) : 표현방법1 : 배열선언
100
200
javascript

06. 배열 : 데이터 저장(여러개) : 표현방법2 : 배열선언과 동시에 초깃값 설정

자바스크립트에서 배열(Array)은 여러 개의 값을 순서대로 저장하는 자료구조입니다.
배열 선언과 동시에 초깃값을 설정할 수 있습니다.

{
    const arr = new Array(100, 200, "javascript");

    console.log("06. 배열 : 데이터 저장(여러개) : 표현방법2 : 배열선언과 동시에 초깃값 설정");
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
}
결과 확인하기
06. 배열 : 데이터 저장(여러개) : 표현방법2 : 배열선언과 동시에 초깃값 설정
100
200
javascript

07. 배열 : 데이터 저장(여러개) : 표현방법3 : 리터럴 방식으로 배열을 선언하는 방법

자바스크립트에서 배열을 선언하는 가장 간단하고 직관적인 방법은 리터럴 방식을 사용하는 것입니다.
배열 리터럴은 대괄호 []를 사용하여 배열을 생성하며, 이 안에 원하는 만큼의 요소를 콤마 ,로 구분하여 넣으면 됩니다.
[]를 사용하는 것이 간결하고 읽기 쉬운 코드를 작성하는 데 도움이 됩니다.
예를 들어, var arr = [1, 2, 3];은 new Array(1, 2, 3);와 동일합니다.

{
    const arr = [];

    arr[0] = 100;
    arr[1] = 200;
    arr[2] = "javascript";

    console.log("07. 배열 : 데이터 저장(여러개) : 표현방법3 : 리터럴 방식으로 배열을 선언하는 방법");
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
}
결과 확인하기
07. 배열 : 데이터 저장(여러개) : 표현방법3 : 리터럴 방식으로 배열을 선언하는 방법
100
200
javascript

08. 배열 : 데이터 저장(여러개) : 표현방법4 : 리터럴 방식으로 배열 선언과 동시의 초깃값 설정

자바스크립트에서는 배열(array)을 다루는 가장 기본이자 간편한 방법 중 하나가 리터럴 방식입니다.
리터럴 방식으로 배열을 선언하는 것은 대괄호 []를 사용하며, 이 때 배열을 선언함과 동시에 초깃값을 설정할 수 있어 매우 편리합니다. 😊

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

    console.log("08. 배열 : 데이터 저장(여러개) : 표현방법4 : 리터럴 방식으로 배열 선언과 동시의 초깃값 설정");
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
}
결과 확인하기
08. 배열 : 데이터 저장(여러개) : 표현방법4 : 리터럴 방식으로 배열 선언과 동시의 초깃값 설정
100
200
javascript

09. 배열 : 데이터 저장(여러개) : 표현방법5 : push() 메서드를 이용한 배열 추가 방법

push() 메서드는 자바스크립트에서 배열의 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 새로운 길이를 반환하는 데 사용됩니다.
📌 이 방법은 배열에 요소를 동적으로 추가할 수 있게 해주며, 매우 편리하고 널리 사용되는 방법 중 하나입니다.
arr.push('Fourth item')은 arr 배열의 끝에 'Fourth item'을 추가합니다.

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

    arr.push(400);

    console.log("09. 배열 : 데이터 저장(여러개) : 표현방법5 : push() 메서드를 이용한 배열 추가 방법");
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
    console.log(arr[3]);
}
결과 확인하기
09. 배열 : 데이터 저장(여러개) : 표현방법5 : push() 메서드를 이용한 배열 추가 방법
100
200
javascript
400

10. 배열 : 데이터 저장(여러개) : 표현방법6 : 다차원 배열

다차원 배열은 2차원 이상의 배열을 의미하며, 배열의 요소로 또 다른 배열을 포함하는 배열입니다.🌐
일반적으로 2차원 배열은 표 형태의 데이터를 다룰 때 유용하며, 3차원 이상의 배열은 더 복잡한 데이터 구조를 필요로 하는 애플리케이션에서 사용됩니다.

{
    const arr = [100, [200, 300, [400, 500, [600]]], ["javascript", "zquery"]];

    console.log("10. 배열 : 데이터 저장(여러개) : 표현방법6 : 다차원 배열");
    console.log(arr[0]);
    console.log(arr[1][0]);
    console.log(arr[1][1]);
    console.log(arr[2][0]);
    console.log(arr[2][1]);
    console.log(arr[1][2][2][0]);
}
결과 확인하기
10. 배열 : 데이터 저장(여러개) : 표현방법6 : 다차원 배열
100
200
300
javascript
zquery
600

11. 배열 : 데이터 저장(여러개) : 표현방법7 : 배열구조분해할당

배열 구조 분해 할당은 배열의 요소를 쉽고 직관적으로 개별 변수에 할당하는 효율적인 방법입니다.
🚀특히 자바스크립트에서 배열이나 객체로부터 데이터를 추출하고 변수에 할당할 때 매우 유용하게 사용됩니다.

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

    const [a, b, c] = [100, 200, "javascript"];

    console.log("11. 배열 : 데이터 저장(여러개) : 표현방법7 : 배열구조분해할당");
    console.log(a);
    console.log(b);
    console.log(c);
}
결과 확인하기
11. 배열 : 데이터 저장(여러개) : 표현방법7 : 배열구조분해할당
100
200
javascript

12. 배열 : 데이터 저장(여러개) : 표현방법8 : 배열펼침연산자

javaScript에서 ...arr 구문은 '확장 연산자(Spread Operator)'로 알려져 있으며, 배열이나 객체의 요소를 개별 요소로 확장하는데 사용됩니다.
주로 배열이나 함수의 인자 리스트에서 쓰이죠. 😉
배열이나 객체의 요소를 간편하게 확장하거나, 함수에 매개변수를 전달할 때 사용되는 연산자입니다.
마침표 세 개(...)를 사용하여 표현되며, 간단하지만 매우 유용한 여러 기능을 제공합니다. 📈

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

    console.log("12. 배열 : 데이터 저장(여러개) : 표현방법8 : 배열펼침연산자");
    console.log(arr1);              
    console.log(...arr1)            
    console.log(...arr1, ...arr2)    
    console.log(merge1)              
    console.log(merge2)              
}
결과 확인하기
12. 배열 : 데이터 저장(여러개) : 표현방법8 : 배열펼침연산자
[100,200]
100 200
100 200 300 400
[100,200,300,400]
[100,200,'javascript',300,400,'jquery']

13. 객체 : 데이터 저장(키와값) : 표현방법1 : 객체 선언 후 배열 방식으로 데이터 입력

자바스크립트에서는 객체를 이용해 키와 값으로 구성된 데이터를 저장할 수 있습니다.
특히, 객체 선언 후 배열 방식으로 데이터를 입력하는 방법은 다양한 상황에서 유용하게 사용됩니다.😊

객체 선언: 객체를 선언하기 위해서는 중괄호 {}를 사용합니다. 예를 들어, let user = {}와 같이 쓸 수 있습니다.
배열 방식으로 데이터 입력: 객체에 데이터를 입력할 때, 배열처럼 대괄호 []를 사용하여 키를 지정하고 값을 할당할 수 있습니다.
이 방식은 동적으로 키를 생성하거나 변수를 키로 사용할 때 유용합니다.

{
    const obj = new Object();     

    obj[0] = 100;                       
    obj[1] = 200;                       
    obj[2] = "javascript";                     

    console.log("13. 객체 : 데이터 저장(키와값) : 표현방법1 : 객체 선언 후 배열 방식으로 데이터 입력");
    console.log(obj[0]);
    console.log(obj[1]);
    console.log(obj[2]);
}
결과 확인하기
13. 객체 : 데이터 저장(키와값) : 표현방법1 : 객체 선언 후 배열 방식으로 데이터 입력
100
200
javascript

14. 객체 : 데이터 저장(키와값) : 표현방법2 : 객체 선언 후 객체 방식으로 데이터 입력

객체를 선언한 후 객체 방식으로 데이터를 입력하는 것은 자바스크립트에서 매우 흔히 사용되는 방법입니다.
이를 통해 간단하게 데이터 구조를 만들고 관리할 수 있습니다. 객체는 여러 개의 속성을 가질 수 있으며, 각 속성은 키(key)와 값(value)의 쌍으로 이루어집니다.

const obj = new Object();를 사용하여 객체를 생성하는 방식은 자바스크립트에서 객체를 초기화하는 또 다른 방법입니다.
이 방식이나 {} (객체 리터럴) 방식 모두 유용하지만, 일반적으로 간결한 {} 리터럴 방식이 더 널리 사용됩니다.
그러나 특수한 경우에 new Object() 방식이 필요할 수도 있습니다.
객체에 데이터를 입력하고 관리하는 기본 원칙은 방식에 상관없이 동일합니다.

{
    const obj = new Object();

    obj.a = 100;
    obj.b = 200;
    obj.c = "javascript";

    console.log("14. 객체 : 데이터 저장(키와값) : 표현방법2 : 객체 선언 후 객체 방식으로 데이터 입력");
    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}
결과 확인하기
14. 객체 : 데이터 저장(키와값) : 표현방법2 : 객체 선언 후 객체 방식으로 데이터 입력
100
200
javascript

15. 객체 : 데이터 저장(키와값) : 표현방법3 : 리터럴 방식으로 객체를 선언

리터럴 방식으로 객체를 선언한다는 것은 객체를 초기화할 때 중괄호({})를 사용해 객체의 내용을 직접 기술하는 것을 말합니다.
단순히 빈 객체를 생성하는 경우는 const obj = {};와 같이 표현할 수 있으며, 이는 객체 리터럴의 가장 간단한 형태입니다.

주어진 코드에서 객체 obj는 빈 객체로 시작하지만, 이후에 프로퍼티 a, b, c가 추가됩니다.
이 방법도 유효하지만, 리터럴 방식의 기본적인 의도와는 조금 다릅니다.
리터럴 방식을 이용해 동일한 객체를 선언하려면, 처음부터 객체의 구조와 함께 초기 값을 포함시켜 선언하는 것이 특징입니다.

{
    const obj = {};

    obj.a = 100;
    obj.b = 200;
    obj.c = "javascript";

    console.log("15. 객체 : 데이터 저장(키와값) : 표현방법3 : 리터럴 방식으로 객체를 선언");
    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}
결과 확인하기
15. 객체 : 데이터 저장(키와값) : 표현방법3 : 리터럴 방식으로 객체를 선언
100
200
javascript

16. 객체 : 데이터 저장(키와값) : 표현방법4 : 리터럴 방식으로 객체를 선언과 동시에 초깃값을 설정

객체 리터럴 방식은 자바스크립트에서 가장 흔하게 객체를 생성하는 방식입니다.
이 방법은 중괄호({})를 사용하여 객체를 직접 선언하며, 객체 내부에는 키와 값의 쌍(즉, 프로퍼티)을 쉼표(,)로 구분하여 나열합니다.
키는 보통 문자열 형식이지만, 자바스크립트에서는 따옴표를 생략할 수 있게 해줍니다. 각 키와 값은 콜론(:)으로 연결됩니다.

객체 리터럴은 객체를 생성하면서 동시에 그 내부에 프로퍼티들을 초기화할 수 있는 간결하고 효율적인 방법을 제공합니다
. 객체 리터럴을 사용하면 코드의 양을 줄일 수 있으며, 객체의 구조를 한눈에 파악하기 쉬워 코드의 가독성도 향상됩니다.

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

    console.log("16. 객체 : 데이터 저장(키와값) : 표현방법4 : 리터럴 방식으로 객체를 선언과 동시에 초깃값을 설정");
    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}
결과 확인하기
16. 객체 : 데이터 저장(키와값) : 표현방법4 : 리터럴 방식으로 객체를 선언과 동시에 초깃값을 설정
100
200
javascript

17. 객체 : 데이터 저장(키와값) : 표현방법5 : 배열안에 객체가 있는 방식

배열 안에 객체가 있는 방식은 JavaScript에서 자주 사용되며, 복잡한 데이터 구조를 효율적으로 관리할 수 있게 해줍니다.
이 방식은 여러 개의 객체를 배열에 순차적으로 저장함으로써, 객체들의 집합을 쉽게 조작하고 접근할 수 있는 구조를 제공합니다.
각 객체는 배열의 요소로 존재하며, 중괄호({})를 사용하여 객체 리터럴 형태로 표현됩니다.
배열 내부의 객체는 서로 다른 구조를 가질 수도 있고, 동일한 키(속성명)와 값을 가진 객체들의 집합일 수도 있습니다.

배열과 객체의 조합의 장점
* 유연성 및 확장성: 다른 형태의 데이터를 유연하게 담을 수 있으며, 필요에 따라 쉽게 데이터 구조를 확장하거나 수정할 수 있습니다.
* 데이터 관리 효율성: 객체 배열을 사용하면 복잡한 데이터를 구조화하여 관리하기 쉬워집니다. 검색, 필터링, 정렬 등 다양한 데이터 조작 작업을 용이하게 합니다.
* 코드 가독성: 데이터가 구조화되어 있어, 개발자가 코드를 이해하고 작업하기가 더 쉬워집니다.

{
    const obj = [
        { a: 100, b: 200, c: "javascript" },
        { a: 300, b: 400, c: "jquery" }
    ]

    console.log("17. 객체 : 데이터 저장(키와값) : 표현방법5 : 배열안에 객체가 있는 방식");
    console.log(obj[0].a);       
    console.log(obj[0].b);
    console.log(obj[0].c);
    console.log(obj[1].a);        
    console.log(obj[1].b);
    console.log(obj[1].c);
}
결과 확인하기
17. 객체 : 데이터 저장(키와값) : 표현방법5 : 배열안에 객체가 있는 방식
100
200
javascript
300
400
jquery

18. 객체 : 데이터 저장(키와값) : 표현방법6 : 객체안에 배열이 있는 방식

객체 안에 배열이 있는 방식은 데이터를 구조화하여 관리하는 데 유용한 방법 중 하나로,
다양한 형태의 복잡한 데이터를 조직적으로 저장하고 관리할 수 있게 해줍니다.
이 방식은 특히, 하나의 개체(객체)가 여러 값을 묶어야 할 때 유용하며, 각각의 값이 다양한 속성을 갖고 있을 때도 효과적입니다.
객체의 속성 값으로 배열을 지정하여, 해당 속성에 여러 값을 순차적으로 저장할 수 있습니다.

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

    console.log("18. 객체 : 데이터 저장(키와값) : 표현방법6 : 객체안에 배열이 있는 방식");
    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.b[0]);
    console.log(obj.b[1]);
    console.log(obj.c);
}
결과 확인하기
18. 객체 : 데이터 저장(키와값) : 표현방법6 : 객체안에 배열이 있는 방식
100
200,300
200
300
javascript

19. 객체 : 데이터 저장(키와값) : 표현방법7 : 객체안에 객체가 있는 방식

객체 안에 객체가 있는 방식은 복잡한 데이터 구조를 구성하고 관리할 때 매우 유용한 방법입니다.
이러한 방식을 사용하면, 하나의 객체 내부에 다른 객체를 내포하여, 계층적이고 관계적인 데이터를 효율적으로 표현할 수 있습니다.
이는 데이터의 복잡도가 증가함에 따라 관련 정보를 그룹화하고 체계적으로 관리할 수 있게 해줍니다.
객체 내부에 있는 또 다른 객체의 속성에 접근하려면, 일반적으로 점(.) 연산자 또는 대괄호([]) 연산자를 사용하여 접근할 수 있습니다.

객체 안에 객체를 사용하는 장점
*계층적 데이터 표현: 복잡한 데이터 관계를 계층적으로 표현할 수 있어, 데이터의 구조와 관계를 명확히 이해할 수 있습니다.
*데이터의 캡슐화: 관련 데이터를 함께 묶어 관리함으로써 데이터의 캡슐화를 증진시키고, 가독성과 유지보수성을 개선할 수 있습니다.
*재사용성 및 확장성: 내부 객체를 독립적으로 정의하고 사용함으로써, 코드의 재사용성과 시스템의 확장성을 높일 수 있습니다.

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

    console.log("19. 객체 : 데이터 저장(키와값) : 표현방법7 : 객체안에 객체가 있는 방식");
    console.log(obj.a);
    console.log(obj.b.x);
    console.log(obj.b.y);
    console.log(obj.c);
}
결과 확인하기
19. 객체 : 데이터 저장(키와값) : 표현방법7 : 객체안에 객체가 있는 방식
100
200
300
javascript

20. 객체 : 데이터 저장(키와값) : 표현방법8 : 객체 + 함수가 있는 방식

객체와 함수를 함께 사용하는 방식은 객체 지향 프로그래밍에서 매우 중요한 개념입니다.
여기서 객체는 데이터(속성)와 그 데이터를 조작할 수 있는 기능(메서드)을 함께 캡슐화합니다.
이런 방식을 통해 데이터와 그 데이터를 처리하는 로직이 하나의 단위로 묶여 있어, 복잡성을 관리하고 코드의 재사용성과 유지 보수성을 높일 수 있습니다.

객체와 함수를 사용하는 장점
*캡슐화와 추상화: 객체는 관련된 데이터와 함수를 하나로 묶어 관리합니다.
이로 인해 외부에서 객체의 내부 구현을 몰라도, 제공된 인터페이스(메서드)를 통해 객체와 상호작용할 수 있습니다.
*재사용성: 객체와 메서드는 재사용성을 높여줍니다. 같은 기능을 하는 메서드를 여러 객체에서 활용할 수 있게 함으로써, 코드의 중복을 줄이고 유지보수를 용이하게 합니다.
*확장성: 새로운 속성이나 메서드를 추가하여 객체의 기능을 확장하기 쉽습니다. 기존 코드를 크게 변경하지 않고도 새 기능을 추가할 수 있습니다.

함수(function)는 특정 작업을 수행하는 코드의 묶음입니다.
프로그래밍에서 함수는 중요한 역할을 하며, 코드의 재사용성을 높이고, 프로그램의 구조를 조직화하는 데 도움을 줍니다.
함수는 여러 번 호출될 수 있고, 다양한 입력(인자 또는 매개변수)에 대해 특정 출력(반환 값)을 생성합니다.

"this"는 자바스크립트와 같은 객체지향 프로그래밍 언어에서 사용되는 키워드로, 현재 실행중인 객체의 컨텍스트를 가리키는 참조 변수입니다.

{
    const obj = {
        a: 100,
        b: [200, 300],
        c: { x: 400, y: 500 },
        d: "javascript",
        e: function () {
            console.log("javascipt가 실행되었습니다.")
        },
        f: function () {
            console.log(obj.d + "가 실행되었습니다.")
        },
        g: function () {
            console.log(this.d + "가 실행되었습니다.")
        }
    }

        console.log("20. 객체 : 데이터 저장(키와값) : 표현방법8 : 객체 + 함수가 있는 방식")
        console.log(obj.a)
        console.log(obj.b[0])
        console.log(obj.b[1])
        console.log(obj.c.x)
        console.log(obj.c.y)
        console.log(obj.d)
        obj.e();                     //객체안에 콘솔로그를 써서 실행분만 작성
        obj.f();
        obj.g();
}
결과 확인하기
20. 객체 : 데이터 저장(키와값) : 표현방법8 : 객체 + 함수가 있는 방식
100
200
300
400
500
javascript
javascript가 실행되었습니다.
javascript가 실행되었습니다.
javascript가 실행되었습니다.

21. 객체 : 데이터 저장(키와값) : 표현방법9 : 객체구조분해할당

객체 구조 분해 할당은 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 해주는 JavaScript 문법입니다.
이는 코드를 보다 깔끔하고 이해하기 쉽게 만들어줍니다.😉

전달받은 객체나 배열에서 필요한 일부 데이터만 추출해야 할 때 사용됩니다.

const {key1, key2} = object 형태로 구조 분해 할당을 통해 객체의 키에 해당하는 값들을 개별 변수로 가져옵니다.
복잡한 객체나 중첩된 객체에서도 유용하게 사용됩니다.

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

    const { a, b, c } = obj;

    console.log("21. 객체 : 데이터 저장(키와값) : 표현방법9 : 객체구조분해할당");
    console.log(a)
    console.log(b)
    console.log(c)
}
결과 확인하기
21. 객체 : 데이터 저장(키와값) : 표현방법9 : 객체구조분해할당
100
200
javascript

22. 객체 : 데이터 저장(키와값) : 표현방법10 : 객체 펼침연산자

객체 펼침 연산자는 JavaScript에서 사용되는 유용한 기능 중 하나입니다.
이 연산자는 객체 안의 속성들을 펼쳐서 해당 객체의 속성들을 다른 객체에 복사할 수 있게 해줍니다.
이 연산자는 주로 객체를 복제하거나 새로운 객체를 생성할 때 유용하게 사용됩니다.

{
    const obj1 = { a: 100, b: 200 }
    const obj2 = { c: 300, d: 400 }
    const merge1 = { ...obj1, ...obj2 }
    const merge2 = { ...obj1, x: "javascript", ...obj2, y: "jquery" }

    console.log("22. 객체 : 표현방법10 : 객체 펼침연산자");                 
    console.log(obj1)                           
    console.log(obj2)    
    console.log(merge1)    
    console.log(merge2)    
}

위 예제에서는 obj1과 obj2라는 두 개의 객체가 있습니다.
이 두 객체를 병합하여 mergedObj라는 새로운 객체를 만들었습니다.
객체 펼침 연산자인 ...를 사용하여 obj1과 obj2의 속성들을 펼쳐서 새로운 객체에 추가했습니다.

결과 확인하기
22. 객체 : 데이터 저장(키와값) : 표현방법10 : 객체 펼침연산자
{a:100, b:200}
{c:300, d:400}
{a:100, b:200, c:300, d:400}
{a:100, b:200,x:'javascript', c:300, d:400, y:'jquery'}

23. 파일 : 데이터 교환(JSON)

JSON(JavaScript Object Notation)은 데이터를 효과적으로 교환하고 저장하기 위한 경량의 데이터 형식입니다.
특히 웹 프로그래밍에서 데이터를 주고받는 데 널리 사용됩니다.
SON은 사람과 기계가 모두 이해하기 쉬운 텍스트 기반 형식으로 데이터를 표현합니다.

JSON 데이터를 JavaScript 객체로 변환하거나 JavaScript 객체를 JSON 데이터로 변환하는 과정에는 몇 가지 차이가 있습니다.

* JSON 데이터를 객체로 변환하는 경우:
JSON 데이터를 JavaScript 객체로 변환할 때는 JSON.parse() 메서드를 사용합니다.
이 메서드는 JSON 형식의 문자열을 JavaScript 객체로 변환합니다.
변환된 JavaScript 객체는 일반적인 JavaScript 객체처럼 속성에 접근하여 사용할 수 있습니다.

* 객체를 JSON 데이터로 변환하는 경우:
JavaScript 객체를 JSON 데이터로 변환할 때는 JSON.stringify() 메서드를 사용합니다.
이 메서드는 JavaScript 객체를 JSON 형식의 문자열로 변환합니다.
변환된 JSON 문자열은 일반적인 문자열처럼 처리됩니다.

{
    //01. JSON 데이터 --> 객체 변환
    const jsonString = '{"name": "Hwang", "age": 30}';
    const jsonObject = JSON.parse(jsonString);

    console.log(jsonObject.name);        
    console.log(jsonObject.age);        
}
{
    //02. 객체 파일  --> JSON 데이터
    const person = { name: "Hwang", age: 30 }
    const jsonString = JSON.stringify(person);

    console.log(jsonString);           
}

주의할 점은 JSON.parse()를 사용할 때는 유효한 JSON 형식의 문자열이어야 하며,
JSON.stringify()를 사용할 때는 문자열로 변환할 수 있는 값이어야 합니다.
그렇지 않으면 오류가 발생할 수 있습니다.

또한, 객체를 JSON 데이터로 변환할 때는 일반적으로 객체의 모든 속성이 JSON으로 변환됩니다.
그러나 JavaScript 객체에는 함수와 같은 메서드와 같이 JSON으로 직렬화할 수 없는 속성이 있을 수 있습니다.
이러한 경우 해당 메서드나 속성은 무시되고 JSON 데이터에 포함되지 않습니다.

결과 확인하기
22. 객체 : 데이터 저장(키와값) : 표현방법10 : 객체 펼침연산자
Hwang
30
{"name":"Hwang,"ang":30}

24. ++ 연산자

연산자는 프로그래밍 언어에서 다양한 작업을 수행하기 위해 사용되는 기호 또는 키워드입니다.
연산자는 피연산자라고 하는 하나 이상의 값에 대해 특정한 동작을 수행하고 그 결과를 생성합니다.

주로 사용되는 연산자들은 다음과 같습니다:

* 산술 연산자: 덧셈(+), 뺄셈(-), 곱셈(* ), 나눗셈(/), 나머지(%) 등의 연산을 수행합니다.

* 대입 연산자: 변수에 값을 할당하는데 사용됩니다. 예를 들어, (=)는 오른쪽의 값을 왼쪽의 변수에 할당합니다.

* 비교 연산자: 두 값의 비교를 수행하여 참(true) 또는 거짓(false)을 반환합니다. 예를 들어, (==), (!=), (>), (<), (>=), (<=) 등이 있습니다.

* 논리 연산자: 논리적인 연산을 수행하여 참(true) 또는 거짓(false)을 반환합니다. 주로 AND(&&), OR(||), NOT(!) 연산자가 사용됩니다.

* 증감 연산자: 변수의 값을 증가(++), 감소(--)시킵니다. 전위 증가(++x), 후위 증가(x++)와 같은 형태로 사용됩니다.

* 비트 연산자: 이진수로 표현된 숫자의 비트 단위 연산을 수행합니다. AND(&), OR(|), XOR(^), 비트 이동(<<, >>) 등이 있습니다.

* 삼항 연산자: 조건식을 평가하여 참일 경우 첫 번째 표현식을 반환하고 거짓일 경우 두 번째 표현식을 반환합니다. 일반적으로 (조건식 ? 표현식1 : 표현식2) 형태로 사용됩니다.

* typeof 연산자: 피연산자의 데이터 유형을 반환합니다.

* instanceof 연산자: 객체가 특정 클래스의 인스턴스인지 여부를 확인합니다.

* 접근 연산자: 객체의 속성이나 배열의 요소에 접근할 때 사용됩니다. 점(.) 연산자와 대괄호([]) 연산자가 있습니다.

25. ++ 자료형

자료형(data type)은 프로그래밍에서 변수나 상수가 가질 수 있는 값의 종류를 나타냅니다.
각각의 자료형은 데이터를 저장하고 처리하는 방식을 결정합니다.
대부분의 프로그래밍 언어에서는 다양한 자료형이 지원되며, 일반적으로 기본 자료형과 복합 자료형으로 구분됩니다.

1. 기본 자료형(Primitive Data Types):

    * 정수형(Integer): 정수를 나타냅니다. 보통 정수형의 크기는 해당 프로그래밍 언어나 시스템에 따라 다르지만,일반적으로 정수형은 정수 값만을 표현합니다.
    * 실수형(Floating-point): 실수를 나타냅니다. 부동 소수점 방식으로 숫자를 저장하여 실수 값을 표현합니다.
    * 문자형(Character): 문자를 나타냅니다. 문자열은 여러 개의 문자로 이루어진 복합 자료형이며, 문자 자체를 나타내는 것은 문자형 자료형입니다.
    * 부울형(Boolean): 참(True) 또는 거짓(False)을 나타냅니다.
    
2. 복합 자료형(Composite Data Types):
    
    * 배열(Array): 동일한 자료형의 요소들을 순차적으로 저장합니다. 각 요소는 인덱스를 통해 접근할 수 있습니다.
    * 구조체(Structure): 서로 다른 자료형의 요소들을 묶어서 하나의 자료형으로 만듭니다. 각 요소는 이름을 통해 접근할 수 있습니다.
    * 리스트(List): 배열과 유사하지만 크기가 동적으로 변할 수 있습니다. 따라서 리스트의 크기를 미리 지정할 필요가 없습니다.
    * 튜플(Tuple): 리스트와 유사하지만 변경할 수 없는(immutable) 요소들을 저장합니다.
    * 사전(Dictionary 또는 Map): 키-값 쌍으로 데이터를 저장합니다. 특정 키를 이용하여 값을 검색하거나 수정할 수 있습니다.