01. 변수 : 데이터 저장소

자바스크립트 변수는 데이터를 저장하고 관리하기 위한 식별자(identifier)입니다. 변수는 값을 저장하고 참조할 수 있는 메모리 공간을 나타내며, 프로그램 내에서 데이터를 재사용하거나 조작할 때 사용됩니다. 변수는 프로그래밍 언어에서 중요한 개념 중 하나입니다.

{
    var x = 100;          // 변수 x에 숫자 100을 저장
    let y = 200;          // 변수 y에 숫자 200을 저장
    const z = "javascript"; // 변수 z에 문자 javascript를 저장

    var x = 300;        // 과거에 사용되던 변수 선언, 재할당이 가능함
    // let y = 400;        // 오류: Uncaught SyntaxError: Identifier 'y' has already been declared
    // const z = "jquery"; // 오류: Uncaught SyntaxError: Identifier 'z' has already been declared

    console.log(x);
    console.log(y);
    console.log(z);
}
변수 선언(Declaration): 변수를 생성하고 식별자를 할당합니다. 변수를 선언할 때 var, let, const와 같은 키워드를 사용합니다.
var: 과거에 사용되던 변수 선언 방식입니다. 함수 스코프를 가지며 호이스팅 현상이 발생합니다.
let: 블록 스코프를 가지며, 값을 재할당할 수 있는 변수를 선언할 때 사용됩니다.
const: 블록 스코프를 가지며, 한 번 할당된 값은 변경할 수 없는 상수를 선언할 때 사용됩니다.
결과 확인하기
(x)의 결과 300
(y)의 결과 200
(z)의 결과 javascript

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

자바스크립트에서 데이터 변경은 변수의 값이나 객체의 속성 등을 수정하는 작업을 의미합니다. 이를 통해 프로그램의 상태나 동작을 조작하거나 업데이트할 수 있습니다. 데이터 변경은 변수의 재할당, 객체의 속성 수정, 배열의 요소 변경 등으로 이루어집니다.

{
    let x = 100;            // 변수 x에 숫자 100을 저장
    let y = 200;            // 변수 y에 숫자 200을 저장
    let z = "javascript";   //변수 z에 문자 javascript를 저장

    x = 300;        // 변수 x에 값을 숫자 300으로 변경
    y = 400;        // 변수 y에 값을 숫자 400으로 변경
    z = "jquery";   // 변수 z에 값을 문자 jquery로 변경

    console.log(x);
    console.log(y);
    console.log(z);
}
변수의 값 변경:변수는 let이나 var를 사용하여 선언하고, = 연산자를 사용하여 값을 변경할 수 있습니다.
결과 확인하기
(x)의 결과 300
(y)의 결과 400
(z)의 결과 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 + "jaquery";

    console.log(x);
    console.log(y);
    console.log(z);
}
+=는 자바스크립트에서 사용되는 복합 할당(Compound Assignment) 연산자 중 하나입니다. 이 연산자는 변수에 현재 값을 더한 후 그 결과를 변수에 다시 할당하는 역할을 합니다.
결과 확인하기
(x)의 결과 200
(y)의 결과 300
(z)의 결과 javascriptjquery

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

자바스크립트에서 상수는 값을 한 번 할당하면 그 값을 변경할 수 없는 변수를 의미합니다. 상수는 프로그램 내에서 변하지 않아야 하는 값이나 설정을 나타내는 데 사용됩니다. 자바스크립트에서 상수를 정의하기 위해 const 키워드를 사용합니다.

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

    x = 200;

    console.log(x);
    console.log(y);
    console.log(z);
}
const 키워드를 사용하여 선언된 변수는 한 번 할당된 값은 변경할 수 없습니다. 이것은 상수의 핵심 특성입니다. 하지만 객체나 배열 같은 데이터 구조가 const로 선언되더라도, 그 안의 내용은 변경할 수 있습니다. 이는 변수가 객체나 배열 자체를 가리키는 포인터이기 때문입니다.
결과 확인하기
(x)의 결과 TypeError: Assignment to constant variable.
(y)의 결과 200
(z)의 결과 javascript

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

자바스크립트에서 배열은 여러 개의 값을 순서대로 저장하는 데이터 구조입니다. 배열은 하나의 변수에 여러 값을 저장하거나 관리할 때 사용됩니다. 배열은 [ ] 괄호 내에 값들을 쉼표로 구분하여 나열하여 생성하며, 각 값은 요소(element)라고 합니다.

{
    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]);
}
const arr = new Array();는 빈 배열을 생성하는 코드입니다. 이 코드는 Array 생성자 함수를 사용하여 빈 배열을 생성하고, 생성된 배열을 const 키워드를 사용하여 arr 변수에 할당합니다.
결과 확인하기
(arr)의 결과 100, 200, 'javascript'
(arr[0])의 결과 100
(arr[1])의 결과 200
(arr[2])의 결과 javascript
(arr[3])의 결과 undefined

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

자바스크립트에서 배열은 여러 개의 값을 순서대로 저장하는 데이터 구조입니다. 배열은 하나의 변수에 여러 값을 저장하거나 관리할 때 사용됩니다. 배열은 [ ] 괄호 내에 값들을 쉼표로 구분하여 나열하여 생성하며, 각 값은 요소(element)라고 합니다.

{
    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]);
}
const arr = new Array(100, 200, "javascript"); 코드는 값을 가지는 배열을 생성하는 예시입니다. 이 코드는 Array 생성자 함수를 사용하여 배열을 생성하고, 생성된 배열을 const 키워드를 사용하여 arr 변수에 할당합니다.
결과 확인하기
(arr)의 결과 100, 200, 'javascript'
(arr[0])의 결과 100
(arr[1])의 결과 200
(arr[2])의 결과 javascript
(arr[3])의 결과 undefined

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

자바스크립트에서 배열은 여러 개의 값을 순서대로 저장하는 데이터 구조입니다. 배열은 하나의 변수에 여러 값을 저장하거나 관리할 때 사용됩니다. 배열은 [ ] 괄호 내에 값들을 쉼표로 구분하여 나열하여 생성하며, 각 값은 요소(element)라고 합니다.

{
    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]);
}
const arr = [];는 빈 배열을 생성하는 코드입니다. 이 코드는 배열 리터럴을 사용하여 빈 배열을 생성하고, 생성된 배열을 const 키워드를 사용하여 arr 변수에 할당합니다.
결과 확인하기
(arr)의 결과 100, 200, 'javascript'
(arr[0])의 결과 100
(arr[1])의 결과 200
(arr[2])의 결과 javascript
(arr[3])의 결과 undefined

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

자바스크립트에서 배열은 여러 개의 값을 순서대로 저장하는 데이터 구조입니다. 배열은 하나의 변수에 여러 값을 저장하거나 관리할 때 사용됩니다. 배열은 [ ] 괄호 내에 값들을 쉼표로 구분하여 나열하여 생성하며, 각 값은 요소(element)라고 합니다.

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

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

    const arr2 = [[100,200], [300,400], ["javascript","jquery"]];

    console.log(arr2[0]);
    console.log(arr2[0][0]);
    console.log(arr2[0][1]);
    console.log(arr2[1]);
    console.log(arr2[1][0]);
    console.log(arr2[1][1]);
    console.log(arr2[2]);
    console.log(arr2[2][0]);
    console.log(arr2[2][1]);
}
const arr = [100, 200, "javascript"]; 코드는 값을 가지는 배열을 생성하는 예시입니다. 이 코드는 배열 리터럴을 사용하여 배열을 생성하고, 생성된 배열을 const 키워드를 사용하여 arr 변수에 할당합니다. 배열 사용시 대부분 '표현방식4'를 사용한다.
결과 확인하기
(arr)의 결과 100, 200, 'javascript'
(arr[0])의 결과 100
(arr[1])의 결과 200
(arr[2])의 결과 javascript
(arr[3])의 결과 undefined
(arr2[0])의 결과 100, 200
(arr2[0][0])의 결과 100
(arr2[0][1])의 결과 200
(arr2[1])의 결과 300, 400
(arr2[1][0])의 결과 300
(arr2[1][1])의 결과 400
(arr2[2])의 결과 'javascript', 'jquery'
(arr2[2][0])의 결과 javascript
(arr2[2][1])의 결과 jquery

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

자바스크립트에서 2차 배열은 배열의 요소로 또 다른 배열을 포함하는 배열을 말합니다. 2차 배열은 행과 열의 형태로 데이터를 구조화하거나 표현할 때 사용됩니다. 각 행은 배열의 요소로서 다시 하위 배열을 가지고 있습니다.

{
    const arr = [100, [200, 300], ["javascript", "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차 배열은 중첩된 구조이므로 데이터의 행과 열을 쉽게 접근하고 조작할 수 있습니다.
결과 확인하기
(arr[0])의 결과 100
(arr[1][0])의 결과 200
(arr[1][1])의 결과 300
(arr[2][0])의 결과 javascript
(arr[2][1])의 결과 jquery

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

자바스크립트에서 배열 구조 분해 할당(Array Destructuring Assignment)은 배열의 값을 추출하여 여러 변수에 할당하는 문법입니다. 이를 통해 배열의 각 요소를 쉽게 변수에 분배하거나 교환할 수 있습니다. 배열 구조 분해 할당은 ES6(ECMAScript 2015)부터 도입되었으며, 코드의 가독성과 유지보수성을 높이는 데 도움이 됩니다.

{
    const arr = [100, 200, "javascript"];
    const [a, b, c] = arr;
    console.log(a);
}
배열 구조 분해 할당은 배열의 요소를 여러 변수에 빠르게 할당하거나 추출하는 강력한 기능입니다. 코드를 보다 간결하게 작성하고 유지보수하기 쉬운 방향으로 발전시키는 데 도움이 됩니다.
결과 확인하기
(a)의 결과 100

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

자바스크립트 배열 펼침 연산자(Spread Operator)는 배열이나 문자열 같은 이터러블(iterable) 객체를 펼쳐서 그 내용을 개별적인 요소로 분해하는 기능을 제공합니다. 이를 통해 배열을 복사하거나 다른 배열에 병합하거나 함수의 매개변수로 전달하는 등 다양한 상황에서 유용하게 활용할 수 있습니다. 펼침 연산자는 ES6(ECMAScript 2015)에서 도입되었습니다.

{
    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
(...arr1)의 결과 100 200 'javascript'
(...arr1, ...arr2)의 결과 100 200 'javascript' 300 400 'jquery'
(...arr3)의 결과 100 200 'javascript' 500

12. 객체 : 데이터 저장(키과값 || 속성과메서드) : 표현방법1 : 객체 선언 후 배열 방식으로 데이터 입력

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

{
    const obj = new Object();

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

    console.log(obj);
    console.log(obj[0]);
    console.log(obj[1]);
    console.log(obj[2]);
    console.log(obj[3]);
}
객체 선언 후 데이터를 할당합니다.
데이터를 입력할 때 배열 방식도 적용됩니다.
결과 확인하기
(obj)의 결과 0: 100, 1: 200, 2: 'javascript'
(obj[0])의 결과 100
(obj[1])의 결과 200
(obj[2])의 결과 javascript
(obj[3])의 결과 undefined

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

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

{
    const obj = new Object();

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

    console.log(obj);
    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}
객체 선언 후 데이터를 할당합니다.
데이터를 입력할때 키(속성)와 값(메서드)으로 입력합니다.
결과 확인하기
(obj)의 결과 a: 100, b: 200, c: 'javascript'
(obj[0])의 결과 100
(obj[1])의 결과 200
(obj[2])의 결과 javascript
(obj[3])의 결과 undefined

14. 객체 : 데이터 저장(키와값 || 속성과메서드) : 표현방법3 : {}(리터럴) 방식으로 객체 선언

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

{
    const obj = {};

    obj.a = 100;
    obj.b = 200;
    obj.c = "javascript";
    // obj[d] = "jquery"; // Uncaught ReferenceError: d is not defined

    console.log(obj);
    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}
객체 선언 후 데이터를 할당합니다.
결과 확인하기
(obj)의 결과 a: 100, b: 200, c: 'javascript'
(obj.a)의 결과 100
(obj.b)의 결과 200
(obj.c)의 결과 javascript

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

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

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

    console.log(obj);
    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}
객체 약식으로 선언하고 동시에 데이터를 할당합니다.
가장 많이 사용하는 방식입니다.
결과 확인하기
(obj)의 결과 a: 100, b: 200, c: 'javascript'
(obj.a)의 결과 100
(obj.b)의 결과 200
(obj.c)의 결과 javascript

16. 객체 : 데이터 저장(키과값 || 속성과메서드) : 표현방법5 : 배열안에 객체가 있는 방식

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

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

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

    const obj1 = [
        {a: 100, b: 200, c: "javascript"},
        {a: 300, b: 400, c: "jquery"}
    ];
    
    console.log(obj1[0]);
    console.log(obj1[0].a);
    console.log(obj1[0].b);
    console.log(obj1[0].c);
    console.log(obj1[1]);
    console.log(obj1[1].a);
    console.log(obj1[1].b);
    console.log(obj1[1].c);
}
배열 안에 객체를 선언했을 경우
결과 확인하기
(obj[0])의 결과 a: 100, b: 200, c: 'javascript'
(obj[0].a)의 결과 100
(obj[0].b)의 결과 200
(obj[0].c)의 결과 javascript

(obj1[0])의 결과 a: 100, b: 200, c: 'javascript'
(obj1[0].a)의 결과 100
(obj1[0].b)의 결과 200
(obj1[0].c)의 결과 javascript
(obj1[1])의 결과 a: 300, b: 400, c: 'jquery'
(obj1[1].a)의 결과 300
(obj1[1].b)의 결과 400
(obj1[1].c)의 결과 jquery

17. 객체 : 데이터 저장(키과값 || 속성과메서드) : 표현방법6 : 객체안에 배열이 있는 방식

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

{
    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);
}
객체 안에 배열를 선언했을 경우
결과 확인하기
(obj.a[0])의 결과 100
(obj.a[1])의 결과 200
(obj.b[0])의 결과 300
(obj.b[1])의 결과 400
(obj.c)의 결과 javascript
(obj.d)의 결과 jquery

18. 객체 : 데이터 저장(키과값 || 속성과메서드) : 표현방법7 : 객체안에 객체가 있는 방식

자바스크립트 객체(Object)는 여러 속성(key-value 쌍)을 포함하는 데이터 구조입니다. 객체는 관련된 데이터를 하나의 그룹으로 묶거나 구조화하여 표현할 때 사용됩니다. 객체는 중괄호 { }를 사용하여 생성하며, 각 속성은 이름(키)과 값으로 구성됩니다.

{
    const obj = {
        a: 100,
        b: [200, 300],
        c: { x: 400, y: 500},
        d: "javascript"
    }

    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.a)의 결과 100
(obj.b[0])의 결과 200
(obj.b[1])의 결과 300
(obj.c.x)의 결과 400
(obj.c.y)의 결과 500
(obj.d)의 결과 javascript

19. 객체 : 데이터 저장(키과값 || 속성과메서드) : 표현방법8 : 객체 + 함수

자바스크립트에서는 객체 안에 함수를 저장할 수 있습니다. 이러한 함수를 객체의 속성(property)으로 저장하여 해당 객체의 메서드(method)로 활용할 수 있습니다. 객체 안에 저장된 함수는 해당 객체의 상태나 데이터에 접근하고 조작할 수 있으며, 객체의 행동을 정의하는 데 사용됩니다.

{
    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[0], obj.b[1]);
    console.log(obj.c.a, obj.c.b, obj.c.c);
    console.log(obj.d);
    obj.e();
    obj.f();
    obj.g();
}
함수를 객체 속성으로 저장함으로써 해당 객체에 관련된 기능을 논리적으로 그룹화하고 재사용할 수 있습니다. 객체의 함수를 메서드로 사용하면 객체의 상태에 대한 변경을 더 효율적으로 관리하고 조작할 수 있습니다.
결과 확인하기
(obj.a)의 결과 100
(obj.b[0], obj.b[1])의 결과 200 300
(obj.c.a, obj.c.b, obj.c.c)의 결과 400 500 600
(obj.d)의 결과 javascript
(obj.d)의 결과 jquery
obj.f()의 결과 100
obj.g()의 결과 100

20. 객체 : 데이터 저장(키과값 || 속성과메서드) : 표현방법9 : 객체 구조 분해 할당

자바스크립트에서 객체 구조 분해 할당(Object Destructuring Assignment)은 객체의 속성을 추출하여 여러 변수에 할당하는 문법입니다. 이를 통해 객체의 각 속성을 쉽게 변수에 할당하거나 기본값을 설정할 수 있습니다. 객체 구조 분해 할당은 ES6(ECMAScript 2015)부터 도입되었으며, 코드의 가독성과 유지보수성을 높이는 데 도움이 됩니다.

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

    console.log(a);
    console.log(x);
    console.log(y);
    console.log(c);
}
객체 구조 분해 할당은 객체의 속성을 빠르게 변수에 할당하거나 추출하는 유용한 기능입니다. 이를 통해 코드를 간결하게 작성하고 필요한 데이터를 쉽게 활용할 수 있습니다.
결과 확인하기
(a)의 값은 100
(x)의 값은 200
(y)의 값은 300
(c)의 값은 javascirpt

21. 객체 : 데이터 저장(키과값 || 속성과메서드) : 표현방법10 : 객체 펼침연산자

자바스크립트에서 객체 펼침 연산자(Object Spread Operator)는 객체의 속성을 펼쳐서 새로운 객체를 생성하거나 기존 객체에 다른 객체의 속성을 병합하는 기능을 제공합니다. 객체 펼침 연산자는 ES6(ECMAScript 2015)부터 도입되었습니다.

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

    console.log(obj1);
    console.log(obj2);
    console.log(obj2.a);
    console.log(obj2.b);
    console.log(obj2.c);
    console.log(obj2.d);
    console.log(obj3);
}
객체 펼침 연산자는 객체를 복사하거나 속성을 조작할 때 편리하게 사용할 수 있는 기능입니다. 다만, 객체 내부의 중첩된 객체까지는 얕은 복사만 수행되므로, 깊은 복사(deep copy)를 하려면 별도의 방법을 사용해야 합니다.
결과 확인하기
(obj1)의 값은 a: 100, b: 200, c: 'javascript'
(obj2)의 값은 a: 100, b: 200, c: 'javascript', d: 'jquert'
(obj2.a)의 값은 100
(obj2.b)의 값은 200
(obj2.c)의 값은 javascirpt
(obj2.d)의 값은 jquery
(obj3)의 값은 a: 100, b: 200, c: 'javascript', d: 'jquert'

21. 파일 : 데이터 교환 : JSON

JavaScript에서 JSON (JavaScript Object Notation) 데이터를 다루는 예제입니다.

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

// 객체를 Json 데이터로 변환
const person = {name: "webs", age: 30}
const jsonPerson = JSON.stringify(person);
console.log(jsonPerson);
// '{"name": "webs", "age": "30"}'
첫번째 부분 :
· jsonString은 문자열 형태로 JSON 데이터를 나타냅니다. 이 데이터는 name이 "webs"이고 age가 "30"인 객체를 나타냅니다.
· JSON.parse()는 JSON 문자열을 JavaScript 객체로 변환하는 함수입니다. 따라서 jsonString을 파싱하여 jsonObject에 저장합니다.
· jsonObject.name은 jsonObject 객체의 name 속성에 접근하며 "webs"를 출력합니다.

두번째 부분 :
· person은 JavaScript 객체로, name이 "webs"이고 age가 30인 객체입니다.
· JSON.stringify()는 JavaScript 객체를 JSON 문자열로 변환하는 함수입니다. 따라서 person 객체를 JSON 문자열로 변환하여 jsonPerson에 저장합니다.
· console.log(jsonPerson)은 JSON 문자열을 콘솔에 출력합니다. 결과적으로 jsonPerson은 {"name": "webs", "age": "30"}입니다. 주의할 점은, age가 숫자로 저장되어 있음에도 불구하고 JSON 문자열로 변환될 때는 문자열 형태로 변환됩니다.
결과 확인하기

산술 연산자

자바스크립트에서 산술 연산자는 숫자 값을 사용하여 다양한 수학적 연산을 수행하는 데 사용됩니다. 다양한 산술 연산자를 통해 숫자를 더하거나 빼는 등의 연산을 수행할 수 있습니다.

{
    let num1 = 15;
    let num2 = 2;
    let result;

    result = num1 + num2;
    console.log(result);

    result = num1 - num2;
    console.log(result);

    result = num1 * num2;
    console.log(result);

    result = num1 / num2;
    console.log(result);

    result = num1 % num2;
    console.log(result);

    let power = 2 ** 3;
    console.log(power);
}
산술 연산자의 종류와 기본형
종류 기본형 설명
덧셈 (+) A + B 두 숫자를 더하는 연산을 수행합니다.
뺄셈 (-) A - B 두 숫자를 빼는 연산을 수행합니다.
곱셈 (*) A * B 두 숫자를 곱하는 연산을 수행합니다.
나눗셈 (/) A / B 하나의 숫자를 다른 숫자로 나누는 연산을 수행합니다.
나머지 (%) A % B 나눗셈을 수행하고 나머지 값을 반환하는 연산을 수행합니다.
거듭제곱 연산자 ()** A ** B 첫 번째 숫자를 두 번째 숫자의 거듭제곱으로 계산합니다.
결과 확인하기
num1 + num2의 결과 17
num1 - num2의 결과 13
num1 * num2의 결과 30
num1 / num2의 결과 7.5
num1 % num2의 결과 1
2 ** 3의 결과 8

문자 결합 연산자

자바스크립트에서 문자열을 결합할 때 사용되는 문자 결합 연산자는 +입니다. 이 연산자를 사용하여 문자열끼리 또는 문자열과 다른 데이터 타입을 결합할 수 있습니다.

{
    let t1 = "학교종이";
    let t2 = "땡땡땡";
    let t3 = 8282;
    let t4 = "어서 모이자";
    let result;

    result = t1 + t2 + t3 + t4;
    console.log(result);
}
숫자형과 문자형이 섞이면 문자형 데이터로 저장됩니다.
결과 확인하기
학교종이땡땡땡8282어서 모이자

대입 연산자

자바스크립트에서 사용되는 대입 연산자는 변수에 값을 할당하는 데 사용됩니다.

{
    let num1 = 10;
    let num2 = 3;

    num1 += num2; // num1 = num1(10) + num2(3);
    console.log(num1);

    num1 -= num2; // num1 = num1(13) - num2(3);
    console.log(num1);

    num1 *= num2; // num1 = num1(10) + num2(3);
    console.log(num1);

    num1 %= num2; // num1 = num1(30) % num2(3);
    console.log(num1);
}
할당 (=): 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다.
더하기와 할당 (+=): 왼쪽 피연산자에 오른쪽 피연산자를 더한 후, 결과를 왼쪽 피연산자에 할당합니다.
빼기와 할당 (-=): 왼쪽 피연산자에서 오른쪽 피연산자를 뺀 후, 결과를 왼쪽 피연산자에 할당합니다.
곱하기와 할당 (*=): 왼쪽 피연산자에 오른쪽 피연산자를 곱한 후, 결과를 왼쪽 피연산자에 할당합니다.
나누기와 할당 (/=): 왼쪽 피연산자를 오른쪽 피연산자로 나눈 후, 결과를 왼쪽 피연산자에 할당합니다.
나머지와 할당 (%=): 왼쪽 피연산자를 오른쪽 피연산자로 나눈 나머지를 왼쪽 피연산자에 할당합니다.
결과 확인하기
num1 += num2의 결과 13
num1 -= num2의 결과 10
num1 *= num2의 결과 30
num1 %= num2의 결과 0

증감 연산자

자바스크립트에서는 변수의 값을 1씩 증가시키거나 감소시키는 데 사용되는 증감 연산자가 있습니다. 이러한 연산자는 변수의 값을 빠르게 증가시키거나 감소시킬 때 유용합니다. 

{
    let num1 = 10;
    let num2 = 20;
    let result;

    num1--;
    console.log(num1);

    num1++;
    console.log(num1);

    result = num2++;
    console.log(result);

    result = ++num2;
    console.log(result);
}
증가 연산자 (++): 변수의 값을 1 증가시킵니다.
감소 연산자 (--): 변수의 값을 1 감소시킵니다.

증감 연산자는 변수에 직접 연산을 수행하며, 변수의 값을 변경하면서 원하는 작업을 수행합니다. 다만 주의할 점은 증감 연산자를 사용할 때 위치에 따라 동작이 다를 수 있습니다.

후위 증감 연산자 (variable++ 또는 variable--): 해당 라인의 코드 실행 후에 변수 값을 증가시키거나 감소시킵니다.
전위 증감 연산자 (++variable 또는 --variable): 해당 라인의 코드 실행 전에 변수 값을 증가시키거나 감소시킵니다.
결과 확인하기
num1--의 결과 9
num1++의 결과 10
result = num2++의 결과 result: 20, num2: 21
result = ++num2의 결과 result: 22, num2: 22

비교 연산자

자바스크립트에서는 값 또는 표현식 간의 비교를 수행하는 다양한 비교 연산자가 있습니다. 이 연산자들은 두 값을 비교하고, 비교 결과에 따라 true 또는 false 값을 반환합니다.

{
    let a = 10;
    let b = 20;
    let c = 10;
    let d = "20";
    let result;

    result = a > b;
    console.log(result);

    result = a < b;
    console.log(result);

    result = a <= b;
    console.log(result);

    result = a != b;
    console.log(result);

    result = b == d;
    console.log(result);

    result = b === d;
    console.log(result);
}
동등 비교 (==): 두 값이 동일한지 비교합니다. 자동으로 형 변환이 일어날 수 있습니다.
일치 비교 (===): 두 값이 동일하고 데이터 타입도 동일한지 비교합니다. 형 변환이 일어나지 않습니다.
부등 비교 (!=): 두 값이 다른지 비교합니다. 자동으로 형 변환이 일어날 수 있습니다.
불일치 비교 (!==): 두 값이 다르거나 데이터 타입이 다른지 비교합니다.
대소 비교 (<,>, <=,>=): 숫자나 문자열을 대소 비교합니다.
논리 연산자와 조합한 비교: 비교 연산자는 논리 연산자(&&, ||, !)와 함께 사용하여 복잡한 조건을 만들 수 있습니다.
결과 확인하기
a > b의 결과 false
a < b의 결과 true
a <= b의 결과 true
a != b의 결과 true
b == d의 결과 true
b === d의 결과 false

논리 연산자

자바스크립트에서는 논리 연산자를 사용하여 여러 조건을 결합하거나 논리적인 연산을 수행할 수 있습니다.

{
    let a = 10;
    let b = 20;
    let m = 30;
    let n = 40;

    let result;
    result = a > b || b >= m || m > n; // false || false || false
    console.log(result);

    result = a > b || b >= m || m <= n; // false || false || true
    console.log(result);

    result = a <= b && b >= m && m <= n; // true && false && true
    console.log(result);

    result = a <= b && b <= m && m <= n; // true && true && true
    console.log(result);

    result = !(a>b); // !false를 계산
    console.log(result);
}
논리 AND (&&): 두 조건이 모두 true일 때 true를 반환합니다.
논리 OR (||): 두 조건 중 하나라도 true이면 true를 반환합니다.
논리 NOT (!): 조건을 부정하여 true는 false로, false는 true로 변환합니다.
논리 연산자의 우선순위: AND(&&)가 OR(||)보다 우선순위가 높습니다. 필요에 따라 괄호를 사용하여 연산자의 우선순위를 조절할 수 있습니다.
복합 조건: 논리 연산자를 조합하여 복잡한 조건식을 만들 수 있습니다.
결과 확인하기
result = a > b || b >= m || m > n의 결과 false
result = a > b || b >= m || m <= n의 결과 true
result = a <= b && b>= m && m <= n의 결과 false
result = a <= b && b <=m && m <=n의 결과 true
result = !(a>b)의 결과 true

연산자 우선순위

자바스크립트에서 연산자는 우선순위에 따라 평가됩니다. 우선순위가 높은 연산자가 먼저 평가되며, 괄호 ()를 사용하여 연산자의 우선순위를 변경할 수 있습니다. 아래는 자바스크립트 연산자의 일반적인 우선순위 목록입니다. 이 목록은 우선순위가 높은 것부터 낮은 순서로 나열되어 있습니다.

{
    1.그룹화 (())
    2.후위 증감 (x++, x--), 전위 증감 (++x, --x)
    3.논리 NOT (!x), 비트 NOT (~x), 타입 변환 (+x, -x), 전위 연산자 (typeof x, void x, delete x, await x)
    4.곱하기 (*), 나누기 (/), 나머지 (%)
    5.덧셈 (+), 뺄셈 (-)
    6.비트 시프트 (<<, >>, >>>)
    7.비트 AND (&), XOR (^), 비트 OR (|)
    8.비교 (<, >, <=, >=, instanceof, in) 
    9.동등 비교 (==, !=, ===, !==)
    10.논리 AND (&&)
    11.논리 OR (||)
    12.삼항 조건 (? :)
    13.할당 (=, +=, -=, *=, /=, %= 등)
}
자바스크립트의 연산자 우선순위를 정확히 이해하면 식을 더 명확하게 작성할 수 있습니다. 그러나 의도치 않은 동작을 피하기 위해 괄호를 사용하여 우선순위를 명시적으로 지정하는 것이 좋습니다.
결과 확인하기

삼향 조건 연산자

자바스크립트에는 삼항 조건 연산자도 있습니다. 이 연산자는 간단한 조건문을 한 줄로 표현할 때 사용됩니다.

{
    let age = 18;

    let isAdult = age >= 18 ? "성인" : "미성년자";
    console.log(isAdult);

    let age2 = 17;

    let isAdult2 = age2 >= 18 ? "성인" : "미성년자";
    console.log(isAdult2);
}
condition ? expressionIfTrue : expressionIfFalse;
여기서 condition은 평가되는 조건, expressionIfTrue는 조건이 true로 평가될 때 실행되는 표현식, expressionIfFalse는 조건이 false로 평가될 때 실행되는 표현식입니다.
결과 확인하기
let isAdult = age >= 18 ? "성인" : "미성년자"의 결과 성인
let isAdult2 = age2 >= 18 ? "성인" : "미성년자"의 결과 미성년자

지역변수 + 전역변수

자바스크립트에서 변수의 범위(scope)는 변수가 어디에서 접근 가능한지를 나타냅니다. 변수는 지역 변수(Local Variable)와 전역 변수(Global Variable)로 나눌 수 있습니다. 이 두 종류의 변수 범위는 변수가 선언된 위치에 따라 결정됩니다.

{
    let x = 100; //전역변수
    let y = 200; //전역변수
    let z = "javascript" //전역변수

    console.log("함수밖1:"+ x, y, z);

    function func(){
        let x = 300; //지역변수
        y += 400; //전역변수 y의 값에 400을 추가
        z = "jquery"; //전역변수 z의 값을 jquery로 변경

        console.log("함수안:"+ x, y, z);
    };
    func();

    console.log("함수밖2:"+ x, y, z);
}
지역 변수 (Local Variable): 지역 변수는 특정 블록 또는 함수 내에서 선언된 변수로, 해당 블록 또는 함수 내에서만 접근할 수 있습니다. 지역 변수는 변수가 선언된 블록 내에서만 유효하며, 외부에서는 접근할 수 없습니다. 이는 변수가 함수의 매개변수로 전달될 때도 해당됩니다.

전역 변수 (Global Variable):전역 변수는 함수 밖에서 선언된 변수로, 프로그램 전체에서 접근할 수 있습니다. 전역 변수는 어디서든 접근할 수 있기 때문에 변수의 범위를 관리하는 데 주의가 필요합니다. 또한, 전역 변수는 여러 함수에서 공유되므로 의도치 않은 변수 값 변경이 발생할 수 있습니다.
결과 확인하기
함수밖1:100 200 javascript
함수안:300 600 jquery
함수밖2:100 600 jquery

자료형

자바스크립트는 동적 타입 언어로서, 변수의 자료형을 선언하지 않아도 됩니다. 변수의 자료형은 변수에 할당된 값에 따라 자동으로 결정됩니다.

{
    const func1 = 100; // 숫자
    const func2 = "100"; // 문자열
    const func3 = true; // 불리언
    const func4 = false; // 불리언
    const func5 = null; // null
    const func6 = undefined; // undefined
    const func7 = [100, 200, "javascript"]; // 배열
    const func8 = [100, 200, "javascript"]; // 객체
    const func9 = function (){} // 함수
}
숫자(Number): 정수와 부동 소수점 숫자를 나타냅니다.
문자열(String): 문자들의 시퀀스입니다. 작은따옴표(')나 큰따옴표(")로 감싸서 생성할 수 있습니다.
불리언(Boolean): true 또는 false 값을 나타냅니다. 주로 조건식에서 사용됩니다.
null과 undefined: null은 값이 없음을 나타내는 특별한 값이고, undefined는 값이 할당되지 않은 상태를 나타냅니다.
배열(Array): 여러 값을 순차적으로 저장하는 자료구조입니다. 배열 내의 각 값은 인덱스로 접근할 수 있습니다.
객체(Object): 이름과 값의 쌍으로 데이터를 표현하는 자료구조입니다. 객체의 값은 속성(property) 또는 메서드(method)가 될 수 있습니다.
함수(Function): 일련의 작업을 수행하는 코드 블록을 나타냅니다. 함수는 호출되어 실행되며, 필요한 경우 결과값을 반환할 수 있습니다.
결과 확인하기