javascript

01. 변수 : 데이터 저장

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

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

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

var: 과거에 사용되던 변수 선언 방식으로, 현재는 잘 사용하지 않습니다.

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

자바스크립트(JavaScript)에서 변수에 새로운 값을 할당함으로써 변수에 저장된 데이터를 업데이트하거나 변경할 수 있습니다.

{
    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는 재소환 가능 하지만 let은 불가합니다.

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

자바스크립트(JavaScript)에서 변수에 연산을 수행하는 것은 기존 데이터에 새로운 값을 더하거나 빼는 등의 작업을 의미합니다. 이를 위해 수학 연산자를 사용할 수 있습니다.

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

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

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

자바스크립트에서 += 연산자를 사용하면 변수에 현재 값에 다른 값을 더한 후 그 결과를 다시 변수에 할당할 수 있습니다. 문자열을 추가하는 경우에는 이 연산자를 사용하여 문자열 연결을 수행합니다. 변수에 데이터를 추가하는 것은 기존 데이터에 새로운 값을 붙이거나 객체에 속성을 추가하는 것을 의미합니다.

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

자바스크립트에서 상수(constant)는 값이 한 번 할당되면 그 값을 변경할 수 없는 변수를 말합니다. const 키워드를 사용하여 상수를 선언합니다.

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

한 번 값이 할당되면 다른 값으로 변경할 수 없습니다. 상수는 주로 변하지 않는 값을 나타내는데 사용됩니다.

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

자바스크립트 배열(Array)은 여러 개의 값을 순차적으로 저장하는 자료구조입니다.

{
    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: 이는 변수의 이름입니다. arr 변수는 생성한 배열을 참조하게 됩니다. new Array(): Array 생성자 함수를 사용하여 빈 배열을 생성합니다. arr[] = 는 배열의 몇번째 요소의 값을 지정하는 코드이며 배열은 순차적으로 저장하는 방법이므로 0번부터 순차적으로 올라갑니다. 지정하지 않은 요소를 불러온다면 "undefined"라고 결과값이 나옵니다.

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

자바스크립트 배열(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]);
}

배열을 생성하는 동시 안에 함수를 할당할 수 있습니다.

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

자바스크립트 배열(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]);
}

자바스크립트에서 []는 배열을 생성하거나 배열 요소에 접근하기 위해 사용되는 특별한 구문입니다.

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

자바스크립트 배열(Array)은 여러 개의 값을 순차적으로 저장하는 자료구조입니다

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

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

배열은 대괄호 [ ] 안에 원하는 값을 쉼표로 구분하여 나열하여 생성할 수 있습니다.

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

2차 배열은 배열의 배열로, 각 요소가 하위 배열인 배열 구조를 말합니다. 2차 배열은 행렬(matrix)이나 다양한 데이터를 구조화하거나 저장하기 위해 사용됩니다. 각 하위 배열은 행(row)이나 열(column)과 같은 차원의 데이터를 포함합니다.

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

자바스크립트에서 배열 안에 배열을 선언하려면, 배열 리터럴을 사용하여 중첩된 배열을 생성하면 됩니다. 기본적으로 배열의 배열을 만들어 내부 배열을 행으로 간주하고, 각 행의 요소들을 열로 간주합니다.

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

자바스크립트의 배열 구조 분해 할당(Array Destructuring Assignment)은 배열의 요소를 개별 변수로 추출하여 할당하는 방법입니다.

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

    const [a, b, c] = arr3;

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

배열 구조 분해 할당의 기본 문법은 const [요소1, 요소2, ...] = 배열; 입니다. 여기서 []대괄호 내에 추출하고자 하는 요소의 인덱스를 적어주면 됩니다. 이때 변수 이름은 배열의 인덱스에 해당하는 요소와 일치해야 합니다.

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

배열 펼침 연산자(spread operator)는 자바스크립트에서 배열이나 문자열과 같은 이터러블(iterable) 객체를 펼쳐서 개별 요소로 분해하는 데 사용되는 문법입니다. 배열 펼침 연산자는 ... 기호를 사용하여 표현됩니다.

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

    console.log(arr1);                  //100, 200, javascript
    console.log(...arr1, ...arr2);      //100 200 javascript 300 400 jquery
    console.log(...arr3);               //100 200 javascript 500
}

배열 펼침 연산자는 배열뿐만 아니라 다른 이터러블 객체에서도 사용할 수 있습니다. 또한 여러 개의 배열을 하나로 합칠 때도 유용하게 사용됩니다

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

자바스크립트 객체를 선언한 후 데이터를 할당하는 방식입니다.

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

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

자바스크립트에서 객체는 데이터와 해당 데이터에 대한 동작(메서드)을 하나로 묶은 복합적인 데이터 유형입니다. 객체는 키-값 쌍의 집합으로 구성됩니다. 객체에 데이터를 입력할 때 배열 방식도 적용됩니다.

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

자바스크립트 객체를 선언한 후 데이터를 할당하는 방식입니다.

{
    const obj = new Object();

    obj.a = 100;            // a라는 키에 100이라는 값을 저장한 것
    obj.b = 200;
    obj.c = "javascript";

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

자바스크립트에서 객체를 출력할 때에는 객체 이름 뒤에 .키(속성)을 선언 하게 되면 해당 객체에 있는 해당 키의 값을 출력합니다. 예를 들면 console.log(obj.a);는 객체 obj의 속성 중 a라는 속성의 값을 출력하는 코드입니다.

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

자바스크립트 객체를 약식으로 선언하고 데이터를 할당합니다.

{
    const obj = {};

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

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

자바스크립트에서 객체는 중괄호({})를 사용하여 생성합니다.

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

자바스크립트 객체를 약식으로 선언하고 동시에 데이터를 입력합니다.

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

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

자바스크립트에서 객체는 중괄호{} 안에 객체의 키(속성)을 정의하고, 각각의 속성에 값을 할당합니다.

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

자바스크립트 배열 안에 객체를 선언할 수 있습니다.

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

console.log(obj[0].a);  // 100
console.log(obj[0].b);  // 200
console.log(obj[0].c);  // javascript

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

console.log(obj1[0].a); // 100
console.log(obj1[0].b); // 200
console.log(obj1[0].c); // javascript
console.log(obj1[1].a); // 300
console.log(obj1[1].b); // 400
console.log(obj1[1].c); //jquery
}

자바스크립트 배열 안에 객체를 생성 할 수 있습니다. 출력 할 때에는 배열 안에 객체가 있는 것이므로 먼저 []을 통해서 몇 번째 배열인지 선언해 주고 그 뒤에 .키(속성)을 표시해서 출력하면 해당 값이 출력 됩니다. 예를 들자면 console.log(obj[0].a);은 obj 배열의 0번째 요소에 들어 있는 속성들 중에 속성 이름이 a인 값을 출력한다는 뜻 입니다.

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

자바스크립트 객체 안에 배열를 선언 할 수 있습니다.

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

    console.log(obj.a[0]);  // 100
    console.log(obj.a[1]);  // 200
    console.log(obj.b[0]);  // 300
    console.log(obj.b[1]);  // 400
    console.log(obj.c);     // javascript
    console.log(obj.d);     // jquery
}

자바스크립트 객체 안에 배열를 생성 할 수 있습니다. 출력 할 때에는 객체 안에 배열이 있는 것이므로 먼저 .키(속성)을 통해 해당 값을 불러오고 값 안에 저장된 배열[]의 몇 번째 요소를 출력할 것인지 선언하면 해당 결과 값이 출력합니다. 예를 들면 console.log(obj.a[0]);은 obj이라는 객체 안에 a라는 키(속성)의 값에 저장된 배열 중에 0번째 요소를 출력한다는 뜻입니다.

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

자바스크립트 객체 안에 객체를 선언 할 수 있습니다.

{
    const obj = {
        a: 100,
        b: [200, 300],
        c: {x: 400, y: 500},
        d: "javascript"
    }
    console.log(obj.a);         // 100
    console.log(obj.b[0]);      // 200
    console.log(obj.b[1]);      // 300
    console.log(obj.c.x);       // 400
    console.log(obj.c.y);       // 500
    console.log(obj.d);         // javascript
}

자바스크립트 객체 안에 객체를 생성 할 수 있습니다. 출력 할 때에는 객체 안에 객체가 있는 것이므로 먼저 .키(속성)을 통해 해당 값을 불러오고 값 안에 저장된 객체의 해당 .키(속성)을 통해 해당 값을 출력할 것인지 선언하면 해당 결과 값이 출력합니다. 예를 들면 console.log(obj.c.x);은 obj이라는 객체 안에 c라는 키(속성)의 값에 저장된 객체 중 x라는 키(속성)의 값을 출력한다는 뜻입니다.

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);     //100
    console.log(obj.b[0]);  //200
    console.log(obj.b[1]);  //300
    console.log(obj.c.a);   //400
    console.log(obj.c.b);   //500
    console.log(obj.c.c);   //600
    console.log(obj.d);     //javascript
    obj.e();                //jquery
    obj.f();                //100
    obj.g();                //100
}

자바스크립트 객체 안에 함수를 생성 할 수 있습니다. e라는 키(속성)에 "jquery"라는 콘솔을 출력하는 함수를 값으로 넣어 e 키(속성)의 값으로 함수를 할당한 것입니다. f라는 키(속성)에 obj.a의 값을 출력하는 함수를 할당하여 f의 값으로 obj.a의 값 100을 출력시키게 합니다. 즉 obj는 객체 자체를 나타내므로 객체의 속성에 접근할 때 obj.를 사용할 수 있습니다. g라는 키(속성)에는 this.a라는 값을 출력합니다. this.a는 해당 메소드가 속해 있는 객체를 가리키는 것이므로 this.a는 obj.a와 동일한 역할을 하여 100을 출력하는 것입니다. 객체의 키에 함수를 사용하여 값을 주었을 경우에는 함수 출력 방식을 사용해야합니다. 예를 들자면 obj.e();, obj.f(); 등 실행문으로 출력해야 합니다.

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

자바스크립트의 객체 구조 분해 할당(Object Destructuring Assignment)은 객체 내부의 속성을 개별 변수로 추출하여 할당하는 방법입니다.

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

    const {a, b, c} = obj;          //전역 변수
    
    console.log(a);     //100
    console.log(b);     //200
    console.log(c);     //javascript

    const obj2 ={
        d: 100,
        e: {x: 300, y: 400},
        f: "javascript"
    };

    const {d, e:{x, y}, f} = obj2;

    console.log(d);     //100
    console.log(x);     //300
    console.log(y);     //400
    console.log(f);     //javascript
}

객체 구조 분해 할당의 기본 문법은 const { 속성1, 속성2, ... } = 객체; 입니다. {} 중괄호 내에 추출하고자 하는 속성 이름을 적어주면 됩니다. 이때 변수 이름은 객체 내의 속성 이름과 일치해야 합니다. 객체 구조 분해 할당을 사용하면 속성의 값이 해당 변수에 할당됩니다.

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

객체 펼침 연산자(spread operator)는 자바스크립트에서 객체의 속성을 복사하거나 새로운 속성을 추가할 때 사용되는 문법입니다.

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

    console.log(obj1);      //a: 100, b: 200, c: javascript
    console.log(obj2);      //a: 100, b: 200, c: javascript, d: jquery
    console.log(obj2.a);    //100
    console.log(obj2.b);    //200
    console.log(obj2.c);    //javascript
    console.log(obj2.d);    //jquery
    console.log(obj3);      //a: 100, b: 200, c: javascript, d: jquery
}

객체 펼침 연산자는 객체의 속성들을 풀어서 새로운 객체에 포함시키는 역할을 합니다. 객체 펼침 연산자는 ...을 사용하며, 객체를 복사하거나 조작합니다.

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

json 데이터를 객체로 변환시킬 수 있으며 객체르 json 데이터로 변환 할 수 있습니다. 데이터 교환(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"}'
}

JSON 문자열 형태는 const 변수 = '{"속성": "값"}' 입니다.

JSON 문자열을 객체로 변환(JSON.parse)
JSON.parse()는 JSON 형식의 문자열을 JavaScript 객체로 변환하는 JavaScript의 내장 함수입니다. 이 함수는 JSON 데이터를 파싱하고 객체로 변환하여 사용자가 쉽게 데이터를 조작하고 처리할 수 있도록 합니다.
JSON.parse() 함수에 JSON 형식의 문자열을 인자로 전달하면, 해당 문자열을 분석하여 JavaScript 객체나 배열 등 JSON 데이터가 포함된 구조를 반환합니다. 이 함수를 사용하면 웹 애플리케이션에서 서버로부터 받은 JSON 데이터를 JavaScript에서 사용 가능한 형식으로 변환할 수 있습니다. JSON 문자열을 파싱하는 동안 유효한 JSON 형식이어야 하며, 문법 오류가 있는 경우 예외를 발생시킵니다.

객체를 JSON 문자열로 변환 (JSON.stringify)
JSON.stringify()는 JavaScript 객체를 JSON 형식의 문자열로 변환하는 JavaScript의 내장 함수입니다. 이 함수를 사용하면 JavaScript 객체나 배열과 같은 데이터를 JSON 형식으로 직렬화(serialize)하여 문자열로 만들 수 있습니다.
JSON.stringify() 함수에 JavaScript 객체나 배열을 인자로 전달하면 해당 객체를 JSON 형식의 문자열로 변환하고 반환합니다. 이렇게 생성된 JSON 문자열은 다른 시스템 또는 서버로 전송하거나 저장할 때 주로 사용됩니다. JSON.stringify() 함수는 두 개의 선택적 매개변수를 가질 수 있습니다
SON.stringify() 함수는 주로 데이터 교환 및 저장 시에 JavaScript 데이터를 JSON 형식으로 변환하는 데 사용되며, 반대로 JSON.parse() 함수를 사용하여 JSON 문자열을 JavaScript 객체로 파싱할 수 있습니다.

/++ 지역변수/전역변수

지역 변수(Local Variable)와 전역 변수(Global Variable)는 변수의 범위(scope)에 따라 다른 변수 유형을 나타냅니다. 지역 변수는 함수 내에서 선언된 변수로, 해당 함수 내에서만 접근이 가능합니다. 함수가 호출되면 그 안에서 선언된 변수가 생성되고, 함수가 실행되는 동안에만 유효합니다. 함수 외부에서는 해당 변수에 접근할 수 없습니다. 이를 통해 변수의 충돌을 방지하고, 코드의 모듈성과 유지보수성을 향상시킬 수 있습니다. 전역 변수는 코드 어디에서든 접근 가능한 변수로, 스크립트 전체에서 유효합니다. 전역 변수를 사용하면 간편하게 변수에 접근할 수 있지만, 변수 충돌이나 예상치 못한 동작을 초래할 수 있습니다. 또한 전역 변수를 남용하면 코드의 가독성과 유지보수성이 저하될 수 있습니다.

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

function func(){}안에 let x = 300;는 해당 함수 내에서만 유효한 지역 변수 x를 선언하여 함수 내에서만 사용되며 외부의 x와는 별개입니다. 반면에 y += 400;은 내부에서 선언이 되었지만 전역변수 y의 값을 증가시키는 연산입니다.

++연산자 : 01. 산술 연산자

산술 연산자는 숫자 값을 이용하여 수학적 계산을 수행하는 연산자입니다.

{
    let num1 = 15;
    let num2 = 2;

    console.log(num1 + num2);    //17
    console.log(num1 - num2);    //13
    console.log(num1 * num2);    //30
    console.log(num1 / num2);    //7.5
    console.log(num1 % num2);    //1
}

산술 연산자는 +(더하기: 값을 더하기), -(빼기: 오른쪽 값에서 왼쪽 값을 빼기), *(곱하기: 값을 곱하기), /(나누기: 왼쪽 값을 오른쪽 값으로 나누기), %(나머지: 왼쪽 값을 오른쪽 값으로 나눈 후 나머지)가 있습니다.

++연산자 : 02. 문자 결합 연산자

여러 개의 문자를 하나의 문자형 데이터로 결합합니다.

{
    let a = "학교종이";
    let b = " 땡땡땡";
    let c = 8282;
    let d = "모이자";

    console.log(a + b);     // 학교종이 땡땡땡
    console.log(c + d);     //8282모이자
}

문자형 데이터와 숫자형 데이터를 섞어서 사용했을 때 문자형 데이터로 출력합니다.

++연산자 : 03. 대입 연산자

변수에 값을 할당하거나, 변수에 연산한 결과를 저장합니다.

{
    let a = 3;
    let b = 4;
    let c = 5;
    let d = 6;
    let f = 7;
    let g = "hello!!";
    let h = "안녕하세요";

    a += 2;         // a = a+2
    b -= 2;         // b = b-2
    c *= 2;         // c = c*5
    d /= 2;         // d = d/2
    f %= 2;         // f = f%2
    g += "john";    
    h += "8";

    console.log(a);     // 5
    console.log(b);     // 2
    console.log(c);     // 10
    console.log(d);     // 3
    console.log(f);     // 1
    console.log(g);     // hello!!john
    console.log(h);     // 안녕하세요8
}

문자형 데이터 간에 +=(더하기 대입) 연산자를 사용하게 되면 문자열 값을 연결하여 할당되고 문자형 데이터와 숫자형 데이터를 이용하여 +=(더하기 대입) 연산자를 사용할 경우 숫자형 데이터가 문자형 데이터로 변환되어 문자열 값을 연결하여 할당이 됩니다.

++연산자 : 04. 증감 연산자

변수의 값을 증가시키거나 감소시키는 데 사용되는 연산자입니다.

{
    let x = 8;
    let y = 10;
    let z = 15;

    x++;        // x = x + 1
    y--;        // y = y + 1
    --z;        // z = z - 1

    console.log(x);     //9
    console.log(y);     //9
    console.log(z);     //14
}

연산자(--, ++)가 앞에 오면 전위 연산자로 값을 감소시킨 후 반환하고 연산자(--, ++)가 뒤에 있으면 후위 연산자라고 값을 사용한 후에 감소시킵니다.

++연산자 : 05. 비교 연산자

두 값 또는 변수의 상대적인 크기나 관계를 비교하는 데 사용되는 연산자입니다.

{
    let a = 7
    let b = 8;
    let d = "8";

    console.log(a == 7);     // true  (a의 값이 7과 같다)
    console.log(a != 10);    // true  (a의 값이 10과 다르다)
    console.log(a < 15);     // true 
    console.log(b > 9);      // false
    console.log(b >= 5);     // true
    console.log(a <= 10);    // true
    console.log(a === 7);    // true  (a의 값이 7와 데이터 형식과 값이 같다)
    console.log(a !== 9);    // true  (a의 값이 9와 데이터 형식과 값이 다르다.)
    console.log(d == 8);     // true
    console.log(d === 8);    // false
}

==, != 비교 연산자는 값만을 비교하고 형 변환을 수행하여 비교합니다. 반면에 ===, !===은 값과 데이터 타입을 함께 비교하므로 더 엄격한 비교를 수행합니다.

++연산자 : 06. 논리 연산자

논리적인 조건을 평가하고, 여러 개의 조건식을 결합하여 복합적인 조건을 만들 때 사용되는 연산자입니다.

{
    let x = 5;
    let y = 10;

    console.log(x > 0 && y < 20);   //true
    console.log(x > 0 || y < 20);   //true
    console.log(!(x > 0));          //false
}

&&(AND)은 연산자는 값 중에 하나라도 false이 있으면 false이라는 결과값을 내보내고 ||(or)연산자는 값 중에 true가 하나라도 있으면 true를 값으로 반환합니다. !(not)은 실제값이 true라면 결과값으로는 true 반대로 false를 결과값으로 반환합니다.

++연산자 : 07. 연산자 우선순의

어떤 연산자가 먼저 계산되어야 하는지를 결정하는 규칙입니다.

{
    let x = 3;
    let y = 4;

    console.log(2*(x+4) && y<=5);   //true
    console.log(2*(x+4));           //14
}

연산자 우선 순위는 () -> 단항 연산자(--, ++, !) -> 산술 연산자(*, /, %, +, -) -> 비교 연산자(>, >=, <, <=, == , ===, !=, !===) -> 논리 연산자(&&, ||) -> 대입(복합대입) 연산자 순으로 계산이 됩니다.

++연산자 : 08. 삼항 조건 연산자

조건부 연산을 수행하는 데 사용되는 연산자로, 조건식의 참/거짓 여부에 따라 두 가지 중 하나의 값을 선택하여 반환하는 기능을 제공합니다.

{
    let x = 10;
    let y = 20;

    let z = (x>y) ? "hello" : "john";  //john

    console.log(z);
}

기본형 구조로는 "조건식 ? 자바스크립트1 : 자바스크립트2;" 형식을 이용해서 값이 true이면 자바스크립트1을 출력하고 false면 자바스크립트2를 출력합니다.

++연산자 : 09. 비트 연산자

비트 연산자는 컴퓨터 프로그래밍에서 정수형 데이터의 비트 단위 연산을 수행하기 위해 사용되는 연산자들입니다. 이러한 연산자들은 주로 이진(binary) 표현을 다루거나 비트 단위의 조작을 할 때 활용됩니다.

{
    let a = 5;          // 5 = 0000 0101
    let b = 3;          // 3 = 0000 0011
    let c = 10;         // 10 = 0000 1010
    let d = 20;         // 20 = 0001 0100

    //& (AND 연산자)

    console.log(a & b); // 1 = 0000 0001
    
    //| (OR 논리 연산자)
    
    console.log(a | b); // 7 = 0000 0111

    //^ (XOR 논리 연산자)

    console.log(a ^ b); //6 = 0000 0110
    
    //~ (NOT 논리 연산자)

    console.log(~a);    // -6 = 1111 1010 (정수의 2의 보수표현)
    
    //<< (왼쪽 시프트 연산자)

    console.log(c << 2);    //  40 = 0010 1000
                
    //>> (오른쪽 시프트 연산자)

    console.log(d >> 2);    // 5 = 0000 0101
}

&(AND 연산자) - 두 비트가 모두 1인 경우 1을 반환합니다. 예를 들어, 1010 & 1100은 1000이 됩니다.
|(OR 연산자) - 두 비트 중 하나 이상이 1인 경우 1을 반환합니다. 예를 들어, 1010 | 1100은 1110이 됩니다.
^(XOR 연산자) - 두 비트가 서로 다른 경우 1을 반환합니다. 예를 들어, 1010 ^ 1100은 0110이 됩니다.
~(NOT 연자) - 비트를 반전시킵니다. 0은 1로, 1은 0으로 바뀝니다. 예를 들어, ~1010은 0101이 됩니다.
<<(왼쪽 시프트 연산자) - 비트를 왼쪽으로 지정된 수만큼 이동시킵니다. 오른쪽에서 새로운 비트는 0으로 채워집니다. 예를 들어, 1010 << 2는 1010 00이 됩니다.
>>(오른쪽 시프트 연산자) - 비트를 오른쪽으로 지정된 수만큼 이동시킵니다. 왼쪽에서 새로운 비트는 부호 비트(양수인 경우 0, 음수인 경우 1)로 채워집니다. 예를 들어, 1010 >> 1은 0101이 됩니다.

++자료형 : 01. 숫자

숫자 자료형은 정수와 부동소수점 숫자를 나타냅니다

{
    let x = 42;

    console.log(x);
}

기본적인 수학 연산(+, -, *, / 등)을 수행할 수 있습니다.

++자료형 : 02. 문자열

문자열 자료형은 텍스트 데이터를 나타냅니다. 작은따옴표나 큰따옴표로 둘러싸여 있습니다.

{
    let x = "hello"
    let y = 'world'
    let z = 'i\'m lee' 

    console.log(x);     //hello
    console.log(y);     //world
    console.log(z);     //i'm lee
}

작은 따옴표안에 작은 따옴표 포함하려면 이스케이프 문자 \를 사용하여 해당 따옴표를 이스케이프해야 합니다.이스케이프 문자를 사용하면 자바스크립트는 문자열 내의 따옴표를 그대로 해석하고 문자열을 제대로 구성할 수 있습니다.

++자료형 : 03. 논리

자바스크립트에서의 논리 자료형은 논리적인 참과 거짓을 나타내는 값입니다. 이 자료형은 true와 false 두 가지 값만을 가질 수 있습니다.

{
    let x = 10;

    console.log(x<20);
    console.log(x>15);
}

논리 자료형의 특징으로는 4가지가 있습니다.
1. true(참), false(거짓) 두가지 값만 가질 수 있음
2. 논리 연산자를 통해 조합되어 사용
3. 건문 (if문, switch문 등)에서 조건식으로 사용되어 조건에 따라 코드 블록이 실행되거나 건너뛰게 됨
4. 비교 연산자를 사용하여 논리 자료형을 생성하고 비교

++자료형 : 04. null

null은 자바스크립트의 기본 데이터 타입 중 하나로, "값이 없음"을 나타내는 특별한 값입니다. null은 변수가 명시적으로 값이 없음을 나타내기 위해 사용되며, 변수에 대한 초기화나 값의 재할당으로 명시적으로 할당됩니다.

{
    let x = null;
    const arr = [null, 100, 200];

    console.log(x);
    console.log(arr);
}

null 자료형의 주요 특징으로는 3가지가 있습니다.
1. 값이 없음
2. null은 자체적으로 "null" 타입을 갖음
3. 변수에 null을 할당하면 해당 변수느 명시적으로 값이 없음을 가리케됨으로써 변수의 초기화 상태나 값이 없을 나타낼수 있음

++자료형 : 05. nudefined

undefined는 변수가 선언되었지만 값을 할당받지 않은 상태를 나타냅니다.

{
    let x = undefined;
    const arr = [100, 200];

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

undefined 자료형의 주요 특징으로는 3가지가 있습니다.
1. 값이 할당되지 않음
2.undefined라는 자체적인 타입을 갖음
3. 변수를 선언만 하고 어떤 값을 할당하지 않은 경우 변수는 암묵적으로 undefined로 초기화 됨

!! null 자료형과 undefined의 차이점 !!
null값과 undefined는 값이 없음을 나타내는 두 가지 다른 개념입니다.
undefined: 변수가 선언되었지만 값을 가지고 있지 않거나 값이 할당되지 않은 경우에 발생한는 것
null: 명시적으로 값이 없을 나타내기 위해 할당되는 값

++자료형 : 06. Object

Object는 데이터를 구조화하고 표현하기 위해 사용되는 자료형입니다.

{
    const person = {
        name: "John",
        age: 30,
        profession: "Developer"
    };

    console.log(person.name);
    console.log(person.age);
    console.log(person.profession);
}

객체는 키와 값 쌍의 집합으로 구성되며, 각 이름은 키를 나타내고 해당 값은 속성에 대한 데이터를 담고 있습니다. 객체는 중괄호 {}로 감싸진 형태로 표현되며, 속성들은 쉼표로 구분됩니다.

++자료형 : 07. Array

Arry은 같은 종류의 데이터들을 순차적으로 저장하기 위한 자료형입니다.

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

    console.log(numbers);
}

Array은 숫자로 인덱싱된 요소들의 리스트로 구성되며, 각 요소는 인덱스를 통해 접근할 수 있습니다. 배열은 대괄호 []로 감싸져 있으며, 각 요소들은 쉼표로 구분됩니다.

++자료형 : 08. function

function은 자바스크립트에서 기능을 정의하고 호출하는 데 사용되는 데이터 타입입니다.

{
    function add(a, b) {
        return a + b;
    }
    const result1 = add(5, 3);  // 5 + 3 => 8
    console.log(result1);

    function func(){
        document.write("함수가 실행되었습니다.");
    }
    func();
}

함수는 재사용 가능한 코드 블록으로, 특정 작업을 수행하거나 값을 계산하는 데 사용됩니다. 함수는 자체적으로 독립된 코드 단위이며, 호출될 때마다 해당 코드 블록이 실행됩니다.