데이터 저장하기

01. 변수 : 데이터 저장소

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

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

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

var: 옛날 방식의 변수 선언으로, 현재는 잘 사용되지 않습니다.
let: 최신문법입니다.

var과 let의 차이점
var은 변수의 재할당이 가능하지만, let은 재할당이 불가능하며 오류가 생긴다.

코드 해석

(var)변수 x에 숫자 100을 입력
(var)변수 y에 숫자 200을 입력
(var)변수 z에 문자열 javascript을 입력

x 변수값 console.log 출력
y 변수값 console.log 출력
z 변수값 console.log 출력

결과 확인하기

100
200
javascript

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

다른 변수의 값으로 변경: 다른 변수의 값을 이용하여 변수의 값을 변경할 수 있습니다.

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

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

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

let: 블록 스코프 내에서 변경 가능한 변수를 선언할 때 사용합니다.

코드 해석

(let)변수 x에 숫자 100을 입력
(let)변수 y에 숫자 200을 입력
(let)변수 z에 문자열 javascript을 입력

x변수의 값을 숫자 300으로 변경
y변수의 값을 숫자 400으로 변경
z변수의 값을 문자열 jquery로 변경

x 변수값 console.log 출력
y 변수값 console.log 출력
z 변수값 console.log 출력

결과 확인하기

300
400
jquery

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

변수에 데이터 추가 : += 연산자는 값을 누적시키는 용도로 사용됩니다.
기존 변수의 값을 다른 값과 더한 후, 그 결과를 다시 변수에 할당합니다.

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

    x += 100;    //x = x + 100;
    y += 100;    //y = y + 100;
    z += "jquery"    //z = z + "jquery";

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

+= 연산자는 변수에 값을 더하고 그 결과를 변수에 다시 할당하는 축약 연산자입니다.
다른 말로 하면, x += y는 x = x + y와 동일한 역할을 합니다.
이 연산자는 숫자 뿐만 아니라 문자열에도 사용할 수 있습니다.

코드 해석

(let)변수 x에 숫자 100을 입력
(let)변수 y에 숫자 200을 입력
(let)변수 z에 문자열 javascript을 입력

x변수값에 숫자 100을 더한다
y변수값에 숫자 100을 더한다
z변수값에 문자열 jquery를 더한다

x변수값 console.log 출력
y변수값 console.log 출력
z변수값 console.log 출력

결과 확인하기

200
300
javascriptjquery

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

상수의 데이터 저장 : 상수는 데이터 저장이 가능하나 변경은 불가능합니다.
즉, 한 번 정의되면 그 값을 변경할 수 없는 변수입니다.

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

    // 상수는 값이 변경되려고 하면 오류가 발생합니다.
    //x = 200;  //TypeError: Assignment to constant variable.

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

const 키워드를 사용하여 상수를 선언하며,
일반적으로, 변수를 사용해야 할 때와 값을 변경해서는 안 되는 경우에 상수를 사용하는 것이 좋습니다.

상수의 장점
프로그램 내에서 특정 값을 반복해서 사용할 때 실수로 값을 변경하는 것을 방지하고, 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.

주의해야 할 점
객체나 배열과 같은 복합적인 자료형의 경우, const로 정의된 변수의 값이 불변이지만 객체나 배열 내부의 속성이나 요소는 변경 가능하다는 것입니다.

코드 해석

(const)상수 x에 숫자 100을 입력
(const)상수 y에 숫자 200을 입력
(const)상수 z에 문자열 javascript을 입력

x상수값 console.log 출력
y상수값 console.log 출력
z상수값 console.log 출력

결과 확인하기

100
200
javascript

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

배열 : 배열은 여러개의 데이터를 하나의 변수에 저장할 수 있습니다.
배열을 선언해서 쓰는 방법입니다.

{
    const arr = new Array();
    arr[0] = 100;
    arr[1] = 200;
    arr[2] = "javascript";

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

new Array() 생성자를 사용해 배열 선언합니다.

배열 생성자에 크기나 초기값을 지정할 수 있습니다.(잘 사용하지 않습니다.)
ex) const arr = new Array(5);

코드 해석

arr상수 배열 선언
arr[0]에 숫자 100을 입력
arr[1]에 숫자 200을 입력
arr[2]에 문자열 javascript를 입력

arr 전체값 clnsole.log 출력
arr[0] 값 clnsole.log 출력
arr[1] 값 clnsole.log 출력
arr[2] 값 clnsole.log 출력

결과 확인하기

100
200
javascript
undefined

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

new Array() 생성자를 사용한 배열 선언에서 배열 생성자에 초기값을 지정한 방법입니다.

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

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

new Array()생성자를 선언하고 따로 초기값을 지정해야하는 일을 줄일 수 있습니다.
역시 잘 사용하지 않습니다.

코드 해석

arr상수 배열 선언과 동시에 초기값 지정

arr 전체값 clnsole.log 출력
arr[0] 값 clnsole.log 출력
arr[1] 값 clnsole.log 출력
arr[2] 값 clnsole.log 출력
arr[3] 값 clnsole.log 출력

결과 확인하기

100, 200, javascript
100
200
javascript
undefined

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

new Array() 생성자 선언 없이 배열을 만드는 방법입니다.
배열 선언과 동시에 값을 집어넣어 코드입력 양을 줄일 수 있습니다.

{
    const arr = [];

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

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

리터럴 : 배열 리터럴은 배열을 생성하는 방법 중 하나로, 배열의 원소들을 대괄호([])로 감싸고 쉼표(,)로 구분하여 나타냅니다.
ex) const arr = [1, 2, 3, 4, 5];

배열 리터럴을 사용할 때 유의할 점은 배열에 할당되는 값들의 타입이 자유롭다는 것입니다.
따라서 배열 내의 원소가 모두 같은 타입일 필요는 없습니다.
이렇게 자유로운 구조를 가지는 배열은 다양한 데이터를 효율적으로 관리할 수 있게 해줍니다.

코드 해석

arr상수 배열을 리터럴로 선언

arr[0] 값에 숫자 100 입력
arr[1] 값에 숫자 200 입력
arr[2] 값에 문자열 javascript 입력

arr 전체값 clnsole.log 출력
arr[0] 값 clnsole.log 출력
arr[1] 값 clnsole.log 출력
arr[2] 값 clnsole.log 출력
arr[3] 값 clnsole.log 출력

결과 확인하기

100 200 javascript
100
200
javascript
undefined

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

리터럴를 이용해 생성자 선언 없이 바로 초기값까지 선언하는 방법입니다.

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

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

가장 많이 사용하는 방식입니다.

초기값이 있는 리터럴 배열을 생성할 시 장점
1. 간결성과 가독성
2. 선언과 동시에 초기화
3. 실수 방지
4. 배열 내의 요소 구조 유지
5. 성능향상

코드 해석

arr상수 배열을 리터럴로 선언과 동시에 초기값 설정

arr[0] 값 clnsole.log 출력
arr[1] 값 clnsole.log 출력
arr[2] 값 clnsole.log 출력

결과 확인하기

100
200
javascript

09. 배열 : 데이터 저장(여러개) : 표현방법5 : 2차 배열

2차 배열은 배열 내에 또 다른 배열을 요소로 가지는 배열을 말합니다.
이를 통해 행렬(matrix)이나 표 형태의 데이터를 표현할 수 있습니다.

{
    const arr = [100, [200, 300], ["javacript", "jquery"]];

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

2차 배열은 다양한 상황에서 활용이 되기 때문에 알아두어야합니다.

2차 배열이 사용되는 예시
1. 이차원 좌표 시스템: 게임 프로그래밍이나 그래픽스에서 이차원 좌표 시스템을 표현할 때 2차 배열을 사용할 수 있습니다.
예를 들어, 화면을 격자로 나누어 각 격자의 상태를 나타내는데 사용할 수 있습니다.
2. 행렬 연산: 선형 대수학이나 그래픽스에서 행렬 연산을 수행할 때 2차 배열을 사용할 수 있습니다.
예를 들어, 두 행렬을 곱하거나 행렬을 변환하는 데 활용될 수 있습니다.
3. 이미지 처리: 이미지 픽셀 데이터를 행과 열로 나타내기 위해 2차 배열을 사용할 수 있습니다.
각 픽셀의 색상 정보나 특정 처리 결과를 저장할 때 활용됩니다.
4. 게임 보드: 보드 게임에서 게임 보드를 나타내기 위해 2차 배열을 사용할 수 있습니다.
각 셀의 상태를 저장하거나 플레이어의 위치 등을 관리하는 데 사용될 수 있습니다.

코드 해석

상수 2차 배열 arr에 2차배열 초기값 설정

2차 배열arr[0] 값 clnsole.log 출력
2차 배열arr[1][0] 값 clnsole.log 출력
2차 배열arr[1][1] 값 clnsole.log 출력
2차 배열arr[2][0] 값 clnsole.log 출력
2차 배열arr[2][1] 값 clnsole.log 출력

결과 확인하기

100
200
300
javascript
jquery

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

배열에서 원하는 값을 추출하여 변수에 할당합니다.
이를 통해 배열의 요소를 분해하여 각각의 변수로 할당하는 작업을 수행할 수 있습니다.

{
    const arr1 = [100, 200, "javascript"];
    
    //arr1 배열을 구조 분해 할당
    const [a, b, c] = arr1;

    console.log(a);  // 100
    console.log(b);  // 200
    console.log(c);  // "javascript"


    const numbers = [1, 2, 3, 4, 5];

    const [first, second, ...rest] = numbers;

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

배열 구조 분해 할당은 코드를 더 간결하고 가독성 있게 작성할 수 있도록 도와주는 문법입니다.

배열 구조 분해 할당의 특징
1. 쉬운 변수 할당: 배열 구조 분해 할당은 배열의 요소를 쉽게 변수에 할당할 수 있습니다.
이를 통해 각각의 요소를 직접적으로 다룰 수 있습니다.
2. 순서대로 할당: 구조 분해 할당을 할 때, 배열 요소는 순서대로 변수에 할당됩니다.
첫 번째 요소는 첫 번째 변수에, 두 번째 요소는 두 번째 변수에, 이런 식으로 할당됩니다.(code의 arr1 예시 함수)
3. 기본 값 할당: 배열 요소의 값이 undefined일 경우, 변수에 기본 값을 설정할 수 있습니다.
이는 해당 인덱스의 요소가 없거나 undefined일 때 유용합니다.
4. 나머지 요소 처리: ... 연산자를 사용하여 나머지 요소들을 하나의 배열로 할당할 수 있습니다.
이는 남은 요소를 묶어서 새로운 배열에 할당하는 데 사용됩니다.(code의 numbers 예시 함수)

코드 해석

결과 확인하기

100
200
javascript
undefined

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

배열이나 객체를 쉽게 복사하거나 요소를 다른 배열에 병합할 때 사용되는 문법적 요소입니다.
... 기호를 사용하여 표현하며, 배열 내의 요소를 분리하고 다른 배열이나 함수의 인자로 전달할 수 있습니다.

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

    console.log(arr1);  //100, 200, javascript
    console.log(...arr1);  //100 200 javascript  //쉼표가 사라짐
    console.log(...arr1, ...arr2);  //100 200 javascript 300 400 jquery
    console.log(...arr3);  //100 200 javasciprt 500   
}

배열 펼침 연산자의 주요 용도와 동작
1. 복사하기 : 다른 배열의 모든 요소를 현재 배열로 복사할 수 있습니다.
2. 배열 합치기 : 여러 배열을 하나의 배열로 합칠 수 있습니다.
3. 함수의 인자로 사용하기 : 함수 호출 시 배열을 인자로 전달할 때 사용할 수 있습니다.
4. 객체 합치기 : 객체를 병합할 때도 사용할 수 있습니다.

코드 해석

결과 확인하기

100, 200, javascript
100 200 javascript
100 200 javascript 300 400 jquery
100 200 javascript 500

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

객체를 선언한 후 데이터를 할당받는 방식으로 배열형식으로 할당받았습니다.

{
    const obj = new Object();
    obj[0] = 100;
    obj[1] = 200;
    obj[2] = "javasciprt";

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

객체(Object)는 이름-값 쌍의 모음으로 데이터를 저장하고 표현하는데 사용됩니다.
배열 괄호([])를 이용해 배열처럼 사용할 수도 있습니다만 객체라 하기 어려우며 잘 사용되지 않습니다.
객체 괄호는 ({}) 중괄호를 이용합니다. 배열 괄호를 쓸 수 있는 이유는 객체는 배열의 상위개념이기 때문입니다.

코드 해석

상수 obj에 객체 선언
obj[0]키에 숫자 100값 입력
obj[1]키에 숫자 200값 입력
obj[2]키에 문자열 javascript값 입력

console.log로 obj전체 배열 출력
console.log로 obj[0] 값 출력
console.log로 obj[1] 값 출력
console.log로 obj[2] 값 출력

결과 확인하기

100, 200, javascript
100
200
javascript

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

객체를 선언한 후 데이터를 할당받는 방식입니다.
데이터를 입력할 때 키와 값으로 입력합니다.

{
    const obj = new Object();

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

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

객체는 중괄호({})를 사용하여 생성하며, 중괄호 안에 속성과 값이 콜론(:)으로 구분되어 기술됩니다.
ex) {a: 100, b: 200, c: 'javascript'}
객체 각각의 값을 얻으려면 obj.a와 같이 배열은 []괄호를 이용한 것과과 다르게 .을 이용해 값을 찾습니다.

코드 해석

상수 obj에 객체 선언

obj.a키에 숫자값 100값 입력
obj.b키에 숫자값 200값 입력
obj.c키에 문자열값 javascript값 입력

console.log로 obj.a 값 출력
console.log로 obj.b 값 출력
console.log로 obj.c 값 출력

결과 확인하기

100
200
javascript

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

객체를 약식으로 선언하고 데이터를 할당합니다.

{
    const obj = {};

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

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

배열 리터럴([])을 이용해 배열 선언을 약식으로 할 수 있는 것처럼 객체 또한 객체 리터럴인 ({})을 이용해 약식으로 선언이 가능합니다.
객체 리터럴은 중괄호 {} 안에 키-값 쌍을 사용하여 객체를 표현합니다.
각 키-값 쌍은 쉼표로 구분되며, 키와 값 사이에는 콜론 :을 사용합니다.

객체 리터럴 특징
1. 간편성 : 객체 리터럴은 코드를 간결하게 작성할 수 있습니다.
2. 읽기 쉬움 : 객체의 구조와 속성을 직접적으로 이해하기 쉽습니다. 코드의 가독성을 향상시켜줍니다.
3. 동적 속성 추가 : 객체를 나중에 수정하거나 확장할 수 있습니다.
4. 함수 정의 : 객체 내에 함수를 정의할 수 있습니다. 이는 메서드(method)로 사용될 수 있습니다.
5. 속성 이름: 객체의 속성 이름은 문자열이나 심볼(Symbol)이 될 수 있습니다.

코드 해석

상수 obj에 객체 리터럴 선언

obj.a키에 숫자값 100값 입력
obj.b키에 숫자값 200값 입력
obj.c키에 문자열값 javascript값 입력

console.log로 obj.a 값 출력
console.log로 obj.b 값 출력
console.log로 obj.c 값 출력

결과 확인하기

100
200
javascript

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

객체를 약식으로 선언하고 동시에 데이터를 입력합니다.

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

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

배열의 약식과 객체의 약식 비교
배열의 약식 선언과 데이터 입력 방법 : const arr = [100, 200, "javasciprt"];
객체의 약식 선언과 데이터 입력 방법 : const obj = { a : 100, b : 200, c : "javascript" };

코드 해석

상수 obj에 객체 리터럴 선언후 초기값 설정

console.log로 obj.a 값 출력
console.log로 obj.b 값 출력
console.log로 obj.c 값 출력

결과 확인하기

100
200
javascript

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

배열 안에 객체를 선언했을 때 입니다.

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

    console.log(obj1[0].a);
    console.log(obj1[0].b);
    console.log(obj1[0].c);
    console.log(obj1[1].a);
    console.log(obj1[1].b);
    console.log(obj1[1].c);
}

배열 안에 객체를 선언하면 데이터를 구조화하고 관리하기 편리해집니다.
이를 통해 복잡한 데이터를 다루는 데 유용하며, 배열 내부의 각 객체는 서로 다른 속성을 가질 수 있습니다.
배열의 값을 찾을 땐 []로, 객체의 값을 찾을 땐 .을 이용하므로 이를 적절히 이용하여 복잡한 구조에서도 원하는 값을 찾을 수 있습니다.
ex) let people = [
      { name: "John", age: 30 },
      { name: "Alice", age: 25 },
      { name: "Bob", age: 40 }
      ];
위의 예제에서는 각각의 이름과 나이를 키:값 데이터로 저장시켰습니다.
하나의 키당 하나의 값을 가지는 데이터를 저장할 때 유용합니다.

배열 안에 객체를 선언하기 좋은 데이터
1. 사용자 정보 배열 : 각 객체는 사용자의 이름, 나이, 이메일 등과 같은 정보를 가지게 됩니다.
2. 제품 목록 배열 : 각 객체는 제품명, 가격, 설명 등을 가지게 됩니다.
3. 할 일 목록 배열 : 각 객체는 할 일의 제목, 완료 여부 등을 가질 수 있습니다.
4. 게시물 배열 : 각 객체는 제목, 내용, 작성자 등을 가질 수 있습니다.

코드 해석

상수 obj1배열안에 2개의 객체까지 선언하고 초기값입력

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 값 출력

결과 확인하기

100
200
javascript
300
400
jquery

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

객체 안에 배열을 선언했을 때 입니다.

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

    console.log(obj.a[0]);
    console.log(obj.a[1]);
    console.log(obj.b[0]);
    console.log(obj.b[1]);
    console.log(obj.c);
    console.log(obj.d);
}

반대로, 객체안에 배열 선언도 가능합니다.
ex) let person = {
       name: "John",
       age: 30,
       hobbies: ["reading", "hiking", "coding"]
       };
위의 예제에서는 이름, 나이, 취미로 이름과 나이에는 1개의 값이 들어가지만 취미에는 여러 값이 들어갈 수 있습니다.
하나의 키에 여러 값이 들어가야 할 데이터 사용에 유용합니다.

객체 안에 배열을 선언하기 좋은 데이터
1. 주문 정보 객체 : 러 제품을 주문한 주문 정보를 표현하기 위해 객체 안에 배열을 사용할 수 있습니다.
2. 사용자 프로필 객체 : 사용자의 프로필 정보 중에 관심사나 취미를 배열로 표현할 수 있습니다. 이러한 배열을 활용하여 여러 관심사를 저장할 수 있습니다.
3. 갤러리 이미지 정보 객체 : 이미지 갤러리의 이미지들을 객체 안에 배열로 표현할 수 있습니다.
4. 직원 정보 객체 : 회사의 직원 정보를 객체로 표현할 때, 해당 직원의 프로젝트들을 배열로 표현할 수 있습니다. 이렇게 하면 각 직원이 어떤 프로젝트에 참여했는지 쉽게 확인할 수 있습니다.

코드 해석

obj 상수 객체에 배열 선언 후 초기값 입력

console.log로 obj.a[0] 값 출력
console.log로 obj.a[1] 값 출력
console.log로 obj.b[0] 값 출력
console.log로 obj.b[1] 값 출력
console.log로 obj.c 값 출력
console.log로 obj.d 값 출력

결과 확인하기

100
200
300
400
javascript
jquery

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

객체 안에 객체를 선언했을 때 입니다.

{
    const obj2 = {
        a: 100,
        b: {x: 200, y: { d: 300, e: { f: 400, g: 500}}},
        c: "javascript",
    }

    console.log(obj2.a);
    console.log(obj2.b.x);
    console.log(obj2.b.y.d);
    console.log(obj2.b.y.e.f);
    console.log(obj2.b.y.e.g);
    console.log(obj2.c);
}

객체 안에 객체가 있는 방식을 사용하면, 더 복잡한 데이터 구조를 표현하고 다룰 수 있습니다.
이러한 중첩된 객체 구조를 활용하면 데이터를 계층적으로 구성하거나 관련 정보를 그룹화할 수 있습니다.
ex) let person = {
       name: "John",
       age: 30,
       address: {
       street: "123 Main St",
       city: "New York",
       zip: "10001"
       }
     };
위의 예제에는 이름, 나이, 주소의 구조로 이름과 나이에는 하나의 값, 주소는 도로명, 도시, 우편번호와 같이 다시 여러 키와 값으로 나뉘어집니다.

객체 안에 배열을 선언하기 좋은 데이터
1. 게시물 객체 : 게시물의 정보와 댓글들을 객체 안에 중첩된 객체로 표현할 수 있습니다. 각 댓글은 작성자와 내용 등을 가지고 있습니다.
2. 팀 정보 객체 : 팀의 정보와 팀원들의 정보를 객체 안에 중첩된 객체로 표현할 수 있습니다. 팀원은 이름, 역할 등을 가지고 있습니다.

코드 해석

상수 obj1배열안에 2개의 객체까지 선언하고 초기값입력

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 값 출력

결과 확인하기

100
200
300
400
500
javascript

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

객체 안에 함수도 선언할 수 있습니다.

{
    const obj = {
        a: 100,
        b: [200, 300],
        c: {a: 400, b: 500, c: 600},
        d: "javascript",
        e: function(){
            console.log("jquery");
        },
        f: function(){
            console.log(obj.a);
        },
        g: function(){
            console.log(this.a);
        } 
    };

    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.b[0]);
    console.log(obj.b[1]);
    console.log(obj.c);
    console.log(obj.c.a);           
    console.log(obj.c.b);           
    console.log(obj.c.c);
    console.log(obj.d);
    obj.e();
    obj.f();
    obj.g();
}

객체중 함수가 포함된 데이터가 있다면 console.log()를 이용한 출력이 아닌
ex) obj.e(); 처럼 바로 obj객체를 함수처럼 사용 가능합니다.

객체 안에 배열을 선언하기 좋은 데이터
1. 사용자 객체에 메서드 추가 : 사용자 객체에 로그인 기능을 포함한 메서드를 추가할 수 있습니다.
2. 계산기 객체에 메서드 추가 : 계산기 객체에 덧셈과 뺄셈 기능을 가진 메서드를 추가할 수 있습니다.
3. 동물 객체에 메서드 추가 : 동물 객체에 소리를 내는 메서드를 추가할 수 있습니다.
4. 포스트 객체에 메서드 추가 : 게시물 객체에 댓글을 추가하는 메서드를 추가할 수 있습니다.

코드 해석

상수 obj객체 안에 객체들을 선언하고 초기값입력
a키의 데이터는 기본 상수
b키의 데이터는 배열 상수
c키의 데이터는 키 a, b, c의 객체 상수
d키의 데이터는 문자열 상수
e키는 문자열 jquery를 출력하는 함수
f키는 obj.a의 값을 출력하는 함수
g키는 obj.a의 값을 출력하는 함수

console.log로 obj.a 값 출력
console.log로 obj.b의 모든값 출력
console.log로 obj.b[0] 값 출력
console.log로 obj.b[1] 값 출력
console.log로 obj.c의 모든값 출력
console.log로 obj.c.a의 값 출력
console.log로 obj.c.b의 값 출력
console.log로 obj.c.c의 값 출력
console.log로 obj.d의 값 출력
console.log로 함수 obj.e 결과출력
console.log로 함수 obj.f 결과출력
console.log로 함수 obj.g 결과출력

결과 확인하기

100
200, 300
200
300
400, 500, 600
400
500
600
javascript
jquery
100
100

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

객체 구조 분해 할당(Object Destructuring Assignment)은 자바스크립트에서 객체의 속성을 추출하여 변수에 할당하는 문법적 기능입니다.
이를 통해 객체의 각 속성을 개별 변수로 분리하여 사용할 수 있습니다.

{
    const obj2 = {
        a: 100,
        b: {x: 300, y: 400},
        c: "javascript"
    };

    const { a, b:{x, y}, c } = obj2;

    console.log(a);
    console.log(x);
    console.log(y);
    console.log(c);
}

배열 구조 분해 할당와 동일한 특징을 가지며,
객체 구조 분해 할당을 사용하여 속성의 이름을 변경하거나, 속성이 존재하지 않는 경우 기본값을 설정하는 등의 다양한 활용이 가능합니다.
주의할 점은 b:{x, y}로 분해 할당후에 console.log(b);로 사용하지 않는다. 이는 오류를 유발한다.

코드 해석

상수 obj객체 안에 상수값, 객체, 문자열 초기값 입력

obj2 객체 데이터를 다시 분해 할당

console.log로 분해 할당한 a의 값 출력
console.log로 분해 할당한 x의 값 출력
console.log로 분해 할당한 y의 값 출력
console.log로 분해 할당한 c의 값 출력

결과 확인하기

100
300
400
javascript

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

객체의 속성을 다른 객체에 복사하거나 새로운 속성을 추가하는 기능을 제공합니다.
펼침 연산자는 ...를 사용하여 표현되며, 주로 객체나 배열의 내용을 확장하거나 조작할 때 사용됩니다.

{
    const obj1 = { a: 100, b: 200, c: "javascript" };
    const obj2 = { ...obj1, d : "jquery" };
    const obj3 = { ...obj1, ...obj2};

    console.log(obj2.a);
    console.log(obj2.b);
    console.log(obj2.c);
    console.log(obj2.d);
    
    //console.log(...obj1.a);  //console.log에는 ...문법을 사용하지 못함   
    console.log(obj3);         //{ a: 100, b: 200, c: "javascript", d: "jquery" }   
}

객체 펼침 연산자의 기능
1. 객체 복사 : 다른 객체에 속성들을 복사하는데 사용됩니다.
2. 새 속성 추가 : 기존 객체의 속성을 그대로 유지하면서 새로운 속성을 추가할 때 사용됩니다.
3. 여러 객체 병합: 여러 객체의 속성을 모아 새로운 객체로 만들 때 사용됩니다.

코드 해석

obj1 객체에 세 개의 속성이 정의되어 있습니다.
obj2 객체는 obj1 객체의 속성을 스프레드 문법을 이용하여 복사하고, d 속성을 추가하여 새 객체를 생성합니다.
obj3 객체는 obj1 객체와 obj2 객체의 속성을 모두 스프레드 문법을 사용하여 복사하여 새 객체를 생성합니다.

obj2 객체의 각 속성을 개별적으로 출력합니다.

obj3 객체를 출력합니다. 이 객체에는 obj1 객체와 obj2 객체의 모든 속성이 포함됩니다.

결과 확인하기

100
200
javascript
jquery
[object Object]

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

JSON파일을 javascript객체로 변환하는 방법, 반대로 javascript객체를 JSON파일로 변환하는 방법입니다.

{
    // json 데이터를 객체로 변환
    const jsonString = '{"name": "webs", "age": "30"}';
    const jsonObject = JSON.parse(jsonString);
    console.log(jsonObject.name);   // 
    // 객체를 json 데이터로 변환
    const person = {name : "webs", age: 30};
    const jsonPerson = JSON.stringify(person);
    console.log(jsonPerson);        // '{"name": "webs", "age": "30"}'
}

JSON 파일을 데이터로 변환할 때,
문자열로 먼저 로드하고, JSON.parse() 함수를 사용하여 문자열을 객체로 변환할 수도 있습니다.

javascript 객체를 JSON파일로 변환할 때,
JSON.stringify() 메서드를 사용하여 변환합니다.

코드 해석

결과 확인하기

webs
{"name":"webs","age":30}

++ 지역변수/전역변수

지역 변수와 전역 변수는 프로그래밍에서 변수의 범위(scope)를 나타내는 개념입니다.
변수의 범위는 변수가 어느 영역에서 유효한지를 나타냅니다.

{
    var globalVar = "전역 변수";

    function myFunction() {
        var localVar = "지역 변수";
        console.log(globalVar); // 전역 변수 접근 가능
        console.log(localVar); // 지역 변수 접근 가능
    }

    myFunction();

    console.log(globalVar); // 전역 변수 접근 가능
    console.log(localVar); // 오류: localVar에 접근 불가능  
}

1. 지역 변수 :
지역 변수는 특정 블록(scope) 내에서만 유효한 변수입니다.
함수 내부에서 선언된 변수는 해당 함수의 블록 내에서만 접근할 수 있으며, 함수 외부에서는 접근할 수 없습니다.
이는 함수 내부에서 독립적으로 사용되는 변수를 생성하고자 할 때 유용합니다.

2. 전역 변수 :
전역 변수는 프로그램 전체에서 유효한 변수로, 어느 곳에서나 접근할 수 있습니다.
함수 내부에서 선언하지 않은 변수나 프로그램의 가장 상위 레벨에서 선언된 변수는 전역 변수가 됩니다.
전역 변수는 프로그램 전체에서 값을 공유할 때 유용하지만, 과도한 사용은 가독성과 유지보수성을 저해할 수 있습니다.

코드 해석

결과 확인하기

전역 변수
지역 변수
전역 변수

++ 연산자(산술/대입/증가/비교/논리/비트)

01. 산술 연산자
수학적인 계산을 수행하는 연산자입니다. 예를 들어, 덧셈, 뺄셈, 곱셈, 나눗셈, 나머지 등의 연산을 수행합니다.

02. 대입 연산자
연산된 데이터를 변수에 저장할 때 사용합니다.(=)
복합 대입 연산자(+=, -=, *=, /=, %=)는 산술 연산자와 대입 연산자가 복합된 것이다.

03. 증감 연산자
변수의 값을 1씩 증가시키거나 감소시키는 데 사용되는 연산자입니다.
두 가지 종류의 증감 연산자가 있습니다.
변수의 뒤에 오는지 앞에 오는지에 따라 결과값이 달라집니다.

04. 비교 연산자
두 개의 값을 비교하여 그 결과를 불리언(Boolean) 형태로 반환하는 연산자입니다.

05. 논리 연산자
논리적인 조건을 평가하는 연산자입니다. 예를 들어, &&, ||, ! 등이 있습니다.

06. 비트 연산자
정수값을 이진수로 나타내고 비트 단위로 연산을 수행하는 데 사용되는 연산자입니다.
비트 연산자는 숫자를 비트 단위로 조작하는 데 사용되며, 주로 저수준 프로그래밍에서나 비트 조작이 필요한 특정 상황에서 유용합니다.

{
    // 01. 산술 연산자
    let x = 10;
    let y = 3;

    let sum = x + y;     
    let difference = x - y;
    let product = x * y;
    let quotient = x / y;
    let remainder = x % y;
    let power = x ** y;

    console.log(sum);
    console.log(difference);
    console.log(product);
    console.log(quotient);
    console.log(remainder);
    console.log(power);


    //02. 대입 연산자

    let x = 10; 
    let y = "Hello"; 
    
    console.log(x);
    console.log(y);

    //복합 대입 연산자
    let a = 5;
    a += 3; 

    console.log(a);

    let b = 10;
    b -= 2; 

    console.log(b);

    let c = 7;
    c *= 4; 

    console.log(c);

    let d = 10;
    d /= 2;

    console.log(d);

    let e = 10;
    e %= 3;

    console.log(e);

    //03. 증감 연산자
    let x = 5;
    let y = 10;

    x++; // x는 이제 6이 됨
    y--; // y는 이제 9가 됨

    console.log(x); 
    console.log(y);


    //04. 비교 연산자

    //크기 비교(>, <, >=, <=);
    console.log(10 > 5);

    //동등 비교 (==);
    console.log(5 == "5"); // 두 값이 서로 동등한지 확인, 자료형은 무시

    //일치 비교 (===);
    console.log(5 === "5"); // 두 값과 자료형이 모두 동일한지 확인

    //부등 비교 (!=);
    console.log(5 != "10"); // 두 값이 서로 다른지 확인, 자료형은 무시

    //불일치 비교 (!==);
    console.log(5 !== "5"); // 두 값과 자료형이 모두 다른지 확인


    //05. 논리 연산자

    let aa = true;
    let bb = false;

    let resultAnd = aa && bb;
    let resultOr = aa || bb;
    let resultNotA = !aa;
    let resultNotB = !bb;

    console.log(resultAnd);
    console.log(resultOr);
    console.log(resultNotA);
    console.log(resultNotB);


    //06. 비트 연산자
    //비트 AND (&)
    let result1 = 5 & 3; // 이진수 101 & 011 = 001 (결과: 1)

    //비트 OR (|)
    let result2 = 5 | 3; // 이진수 101 | 011 = 111 (결과: 7)

    //비트 XOR (^)
    let result3 = 5 ^ 3; // 이진수 101 ^ 011 = 110 (결과: 6)

    //비트 NOT (~)
    let result4 = ~5; // 이진수 ~00000101 = 11111010 (결과: -6)

    //왼쪽 시프트 (<<)
    let result5 = 5 << 2; // 이진수 101을 왼쪽으로 2번 이동 = 10100 (결과: 20)

    //오른쪽 시프트 (>>)
    let result6 = 20 >> 2; // 이진수 10100을 오른쪽으로 2번 이동 = 101 (결과: 5)

    console.log(result1);
    console.log(result2);
    console.log(result3);
    console.log(result4);
    console.log(result5);
    console.log(result6);

}

산술 연산자의 종류와 기본형
종류	기본형	설명
+	A + B	A변수와 B변수의 값을 더한다.
-	A - B	A변수와 B변수의 값을 뺀다.
*	A * B	A변수와 B변수의 값을 곱한다.
/	A / B	A변수와 B변수의 값을 나눈다.(몫)
%	A % B	A변수와 B변수의 값을 나눈다.(나머지)

01. 산술연산자 :
수학적인 계산을 수행하는 연산자입니다. 예를 들어, 덧셈, 뺄셈, 곱셈, 나눗셈, 나머지 등의 연산을 수행합니다.
%은 나머지, **은 거듭제곱을 뜻합니다.

02. 대입연산자 :
a += 3 은 a = a + 3 와 동일
b -= 2 은 b = b - 2 와 동일
c *= 4 은 c = c * 4 와 동일
d /= 2 은 d = d / 2 와 동일
e %= 3 은 e = e % 3 와 동일하며 %는 나머지를 구합니다.

03. 증감연산자 :
증가 연산자 (++): 변수의 값을 1씩 증가시킵니다.
감소 연산자 (--): 변수의 값을 1씩 감소시킵니다.
var A = ++B; //B의 값을 1증가 시킨 후 증가된 값을 A에 대입
var A = B++; //B의 값을 A에 대입시킨 후 B의 값 1 증가

04. 비교연산자 :
비교 연산자는 조건문(if 문, switch 문)에서 조건을 만들거나, 논리 연산자와 함께 복잡한 조건을 구성할 때 자주 사용됩니다.

05. 논리연산자 :
1. 논리 AND (&&): 두 개의 불리언 값이 모두 참일 때만 결과가 참이 됩니다.
2. 논리 OR (||): 두 개의 불리언 값 중 하나라도 참이면 결과가 참이 됩니다.
3. 논리 NOT (!): 불리언 값을 반전시킵니다. 참은 거짓으로, 거짓은 참으로 변환됩니다.

06. 비트연산자 :
1. 비트 AND (&) : 각 비트 위치에서 두 개의 비교 대상 비트가 모두 1일 때 결과 비트가 1이 됩니다.
2. 비트 OR (|) : 각 비트 위치에서 두 개의 비교 대상 비트 중 하나 이상이 1일 때 결과 비트가 1이 됩니다.
3. 비트 XOR (^) : 각 비트 위치에서 두 개의 비교 대상 비트가 서로 다를 때 결과 비트가 1이 됩니다.
4. 비트 NOT (~) : 비트를 반전시키는 연산자로, 각 비트가 0이면 1로, 1이면 0으로 변환합니다.
5. 왼쪽 시프트 (<<) : 지정된 횟수만큼 비트를 왼쪽으로 이동시킵니다. 새로운 비트는 0으로 채워집니다.
6. 오른쪽 시프트 (>>) : 지정된 횟수만큼 비트를 오른쪽으로 이동시킵니다. 왼쪽 빈 공간은 0으로 채워집니다.

결과 확인하기

01. 산술연산자
13
7
30
3.3333333333333335
1
1000

02. 대입연산자
10
Hello
8
8
28
5
1

03. 증감연산자
6
9

04. 비교연산자
true
true
flase
true
true

05. 논리연산자
false
true
false
true
06. 비트연산자
1
7
6
-6
20
5

++ 자료형(숫자/문자열/논리/null/undefined/Object/Array/Function)

1. 숫자 자료형 : 숫자 값을 나타내는 데 사용되며, 정수 및 부동 소수점 숫자를 모두 다룰 수 있습니다.

2. 문자열 자료형 : 텍스트 데이터를 나타내는 데 사용되는 자료형입니다.
문자열은 문자(character)들의 연속된 시퀀스로 구성되며, 작은따옴표( ), 큰따옴표( " "), 혹은 백틱(``)으로 감싸져 표현됩니다.

3. 논리 자료형 : true와 false를 나타내는 데 사용되는 자료형입니다.
논리 자료형은 조건식의 평가, 제어문의 실행 여부 등과 같이 참과 거짓을 판별해야 하는 상황에서 주로 활용됩니다.

4. null 자료형 : 데이터 타입 중 하나로, 아무 값도 나타내지 않음을 나타내는 특별한 값입니다.

5. undefined 자료형 : 값이 할당되지 않은 변수나 프로퍼티의 상태를 나타내는 특별한 값입니다. 즉, 변수나 프로퍼티가 정의되었지만 어떤 값도 할당되지 않았을 때 undefined가 됩니다.

6. Object 자료형 : 가장 기본적인 데이터 타입 중 하나로, 다양한 값을 그룹화하고 저장할 수 있는 복합 데이터 타입입니다.>br> 객체는 키(key)와 값(value)의 쌍으로 구성된 프로퍼티(properties)들의 집합입니다.

7. Array 자료형 : 여러 개의 값을 순차적으로 저장하는 데 사용되는 데이터 구조입니다.
배열은 하나의 변수에 여러 값을 저장하고 관리하는 데 유용하며, 각 값은 인덱스(index)로 접근할 수 있습니다.
배열은 대괄호([])로 묶여 있으며, 각 값은 쉼표(,)로 구분됩니다.

8. Function 자료형 : 재사용 가능한 코드 블록을 정의하는 데 사용되는 기본적인 구성 요소입니다.
함수는 특정 작업을 수행하고 결과를 반환하거나 다양한 작업을 수행하는 등의 역할을 담당합니다.

{
    //01. 숫자자료형
    let num1 = 42;
    let num2 = 3.14;
    
    console.log(num1);                      //42
    console.log(num2);                      //3.14


    //02. 문자열자료형
    let str1 = 'Hello, world!';
    let str2 = "JavaScript is fun";

    let firstName = "SEO";
    let lastName = "EUGENE";
    let fullName = firstName + " " + lastName;
    let message = "Hello, world!";

    console.log(str1);                      //Hello, world!
    console.log(str2);                      //JavaScript is function
    console.log(fullName);                  //SEO EUGENE
    console.log(message.length);            // 13
    console.log(message.toUpperCase());     // "HELLO, WORLD!"
    console.log(message.toLowerCase());     // "hello, world!"
    console.log(message.indexOf("world"));  // 7


    //03. 논리자료형
    let isTrue = true;
    let isFalse = false;

    console.log(isTrue && isFalse);         // false (AND 연산)
    console.log(isTrue || isFalse);         // true (OR 연산)
    console.log(!isFalse);                  // true (NOT 연산)

    //논리 연산자
    let num3 = 10;
    let num4 = 5;

    console.log(num3 > num4);               // true
    console.log(num3 === num4);             // false

    //조건문과 제어문
    let isWeatherGood = true;
    if (isWeatherGood) {
        console.log("Let's go outside!");   //Let's go outside!
    } else {
        console.log("Let's stay indoors."); //Let's stay indoors.
    }


    //04. null 자료형
    let myVariable = null;
    console.log(typeof(myVariable));        // "object"
    

    //05. undefined 자료형
    //변수의 초기화 없이 선언
    //변수를 선언했지만 초기화하지 않은 경우 변수의 값은 undefined가 됩니다.
    let x;
    console.log(x);                         // undefined

    //객체의 존재하지 않는 프로퍼티에 접근
    //객체 내부의 존재하지 않는 프로퍼티에 접근하면 해당 프로퍼티의 값은 undefined가 됩니다.
    let person = { name: "Alice", age: 30 };
    console.log(person.gender);             // undefined

    //함수에서 리턴하지 않은 경우
    //함수 내부에서 return 키워드를 사용하지 않은 경우 함수의 반환값은 undefined가 됩니다.
    function greet(name) {
        console.log(`Hello, ${name}!`);     //Hello, Bob!
    }
    
    let result = greet("Bob");              // undefined

    //함수의 인자에 값이 전달되지 않은 경우
    //함수를 호출할 때 인자를 제공하지 않은 경우 해당 인자의 값은 undefined가 됩니다.
    function say(message) {
        console.log(message);
    }    
    say(); // message는 undefined


    //05. Object 자료형
    // 빈 객체 생성
    let person = {};

    // 프로퍼티 추가
    person.name = "John";
    person.age = 30;
    person.isStudent = false;

    //객체는 중괄호({})로 생성하며, 각 프로퍼티는 키와 값으로 구성됩니다.
    // 객체 리터럴을 이용한 생성
    let car = {
        make: "Toyota",
        model: "Camry",
        year: 2022
    };

    //객체 내부의 프로퍼티에 접근할 때는 점 표기법 또는 대괄호([]) 표기법을 사용할 수 있습니다
    console.log(person.name);               // "John"
    console.log(car["model"]);              // "Camry"

    //객체 내부의 프로퍼티를 삭제하거나 수정하는 것도 가능합니다
    delete person.age; // 프로퍼티 삭제
    car.year = 2023;   // 프로퍼티 수정 


    //07. Array 자료형
    //배열 생성
    let numbers = [1, 2, 3, 4, 5];
    let fruits = ["apple", "banana", "orange"];
    
    //배열의 각 값은 0부터 시작하는 인덱스로 접근할 수 있습니다.
    console.log(numbers[0]);                    // 1
    console.log(fruits[1]);                     //"banana"

    //배열의 길이는 length 프로퍼티를 통해 얻을 수 있습니다.
    console.log(numbers.length);                // 5

    //push()는 배열의 끝에 값을 추가하고, pop()은 배열의 끝에서 값을 제거합니다.
    fruits.push("grape");   // 배열 끝에 "grape" 추가
    let removedFruit = fruits.pop();  // 배열 끝 값 제거

    //for 루프나 forEach() 메서드 등을 사용하여 배열의 각 값을 순회하고 처리할 수 있습니다.
    for (let i = 0; i < numbers.length; i++) {
        console.log(numbers[i]);
    }    
    fruits.forEach(function(fruit) {
        console.log(fruit);                     //apple,banana,orange
    });

    //배열 안에 배열을 넣어 다차원 배열을 생성할 수 있습니다.
    let matrix = [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9]
    ];


    //08. Function 자료형
    //함수 정의
    //함수는 function 키워드를 사용하여 정의됩니다.
    function greet(name) {
        console.log(`Hello, ${name}!`);
    }

    //함수 호출
    //함수를 호출하려면 함수 이름 뒤에 괄호(())를 붙이고, 필요한 인자(argument)를 전달합니다.
    greet("Alice");                             // "Hello, Alice!"

    //매개변수와 인자
    //함수의 매개변수는 함수 내에서 사용되는 변수입니다. 함수를 호출할 때 전달한 값은 인자로서 함수의 매개변수에 할당됩니다.
    function add(a, b) {
        return a + b;
    }
    let result = add(3, 5); // result는 8
    
    //반환값
    //return 키워드를 사용하여 함수에서 값을 반환할 수 있습니다. 함수가 값을 반환하지 않는 경우에는 undefined가 반환됩니다.
    function multiply(x, y) {
        return x * y;
    }
    
    let product = multiply(2, 4); // product는 8

    //익명 함수와 함수 표현식
    //함수는 이름을 가지지 않는 익명 함수로 정의될 수 있습니다. 
    let square = function(x) {
        return x * x;
    };

    //화살표 함수 
    //간결한 문법으로 함수를 정의할 수 있으며, 주로 익명 함수를 대체하여 사용됩니다.
    let divide = (x, y) => x / y  
}

01. 숫자자료형의 종류
1. 정수 (Integers) :
자바스크립트에서는 정수를 특별한 자료형으로 표현하지 않고, 숫자 자료형으로 표현합니다.
2. 부동 소수점 (Floating-Point Numbers) :
자바스크립트의 대부분의 숫자는 부동 소수점 숫자로 표현됩니다. 부동 소수점 숫자는 소수점을 가지며, 실수 값을 나타냅니다.
3. 지수 표기법 (Exponential Notation) :
큰 수나 작은 수를 간결하게 표현하기 위해 지수 표기법을 사용할 수 있습니다.
4. NaN (Not-a-Number) :
계산이 불가능한 상황에서 숫자 대신 NaN이라는 특별한 값을 얻을 수 있습니다.
5. Infinity and -Infinity :
숫자의 범위를 벗어난 연산은 Infinity나 -Infinity를 반환할 수 있습니다. 이는 양의 무한대와 음의 무한대를 나타냅니다.

02. 문자열자료형
1. 문자열 생성
문자열은 작은따옴표나 큰따옴표로 생성할 수 있습니다.
2. 특수문자
문자열 내에서 특수 문자나 제어 문자를 표현하기 위해 역슬래시()를 사용하는데, 이를 이스케이프 문자(escape characters)라고 합니다
줄 바꿈은 \n, 탭은 \t, 큰따옴표는 \", 작은따옴표는 \'와 같이 표현됩니다.
3. 문자열 연결
문자열은 + 연산자를 사용하여 연결할 수 있습니다.
4. 문자열 길이
문자열의 길이는 length 프로퍼티를 사용하여 얻을 수 있습니다.
5. 문자열 메서드
문자열은 다양한 내장 메서드를 활용할 수 있습니다.
toUpperCase() 메서드는 문자열을 모두 대문자로 변환하고, toLowerCase() 메서드는 모두 소문자로 변환합니다.
또한, indexOf() 메서드는 특정 문자열이 처음으로 나타나는 인덱스를 반환합니다.

03. 논리자료형
1. true와 false 값 :
논리 자료형은 두 가지 값만을 가질 수 있습니다. true는 참을 나타내고, false는 거짓을 나타냅니다.
2. 논리 연산자 :
논리 자료형은 논리 연산자를 사용하여 조건식을 조합하거나 판별하는 데 사용됩니다.
주요 논리 연산자로는 && (논리 AND), || (논리 OR), ! (논리 NOT) 등이 있습니다.
3. 비교 연산자와 논리 자료형 :
비교 연산자(<, >, <=, >=, ===, !== 등)를 사용하여 두 값의 관계를 판별할 때, 결과는 논리 자료형으로 반환됩니다.
4. 조건문과 제어문 :
조건문(if, else if, else)이나 반복문(while, for)과 같은 제어문에서 논리 자료형을 활용하여 조건을 검사하고, 해당 조건에 따라 코드 블록을 실행하거나 반복할 수 있습니다.
5. 논리 자료형 반환 :
논리 연산이나 비교 연산의 결과는 항상 논리 자료형(true 또는 false)으로 반환됩니다.

04. null 자료형
1. 값이 없음을 나타냄
null은 변수에 값을 할당하지 않거나, 어떤 프로퍼티에 대해 값을 설정하지 않은 경우에 사용됩니다.
2. 타입은 'object'
null의 데이터 타입은 "object"입니다. 이는 역사적인 이유로 발생한 JavaScript의 버그로 간주될 수 있지만, 현재로서는 고치지 않고 유지되고 있습니다.
3. typeof 연산자
typeof 연산자를 사용하여 null을 평가하면 결과는 "object"입니다.

05. undefined 자료형
null은 undefined와는 다른 개념입니다.
undefined는 변수가 선언되었지만 값이 할당되지 않은 상태를 나타내며, null은 값이 명시적으로 비어있음을 나타냅니다.
두 값은 "동등 연산"(==)을 사용하면 서로 같다고 평가됩니다.
undefined는 값이 없는 상태를 명시적으로 나타내기 위해 사용되며, null과는 다른 개념입니다.
변수나 프로퍼티가 아직 값을 받지 않았거나, 값이 없음을 나타내기 위한 경우에 undefined를 사용할 수 있습니다.

06. Object 자료형
객체는 다양한 종류의 데이터를 담을 수 있으며, 함수, 배열, 문자열, 숫자, 불리언 등 다양한 값들을 포함할 수 있습니다.
객체는 원시 데이터 타입인 숫자, 문자열, 불리언과는 달리 참조(reference) 방식으로 저장되며, 객체를 복사하거나 전달할 때는 실제 데이터가 아닌 참조가 전달됩니다.
객체는 중괄호({})로 생성하며, 각 프로퍼티는 키와 값으로 구성됩니다.
객체 내부의 프로퍼티에 접근할 때는 점 표기법 또는 대괄호([]) 표기법을 사용할 수 있습니다
객체 내부의 프로퍼티를 삭제하거나 수정하는 것도 가능합니다

07. Array 자료형
1. 배열 인덱스
배열의 각 값은 0부터 시작하는 인덱스로 접근할 수 있습니다.
첫 번째 값은 인덱스 0, 두 번째 값은 인덱스 1로 접근합니다.
2. 배열 길이
배열의 길이는 length 프로퍼티를 통해 얻을 수 있습니다.
3. 배열 메서드
자바스크립트는 다양한 배열 메서드를 제공하여 배열을 조작하고 처리할 수 있습니다.
push()는 배열의 끝에 값을 추가하고, pop()은 배열의 끝에서 값을 제거합니다.
4. 배열 순회
for 루프나 forEach() 메서드 등을 사용하여 배열의 각 값을 순회하고 처리할 수 있습니다.
5. 다차원 배열
배열 안에 배열을 넣어 다차원 배열을 생성할 수 있습니다.

08. Function 자료형
함수의 기능
*가독성(매우 중요)*
1. 모듈화
2. 코드의 재사용
3. 추상화

결과 확인하기

01. 숫자 자료형
42
3.14

02. 문자열 자료형
Hello, world!
JavaScript is function
SEO EUGENE
13
HELLO, WORLD!
hello, world!
7

03. 논리 자료형
false
true
true
true
false
Let's go outside!
You can vote!

04. null 자료형
object

05. undefined 자료형
undefined
undefined
Hello, Bob!
undefined

06. Object 자료형
John
Camry

07. Array 자료형
1
banana
5
apple
banana
orange

08. Function 자료형
Hello, Alice!