javascript

01. 변수 : 데이터 저장

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

{
    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 x = 100;
    let y = 200;
    const z = 300;

    var x = 400;    //var는 값을 재할당해도 오류나지 않음
    y += "500";        // let은 재할당 오류, +=으로 재할당 가능 / const는 재할당 불가

    console.log(y);
}

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

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

자바스크립트(JavaScript)에서 변수(Variable)는 데이터를 저장하고 변경할 수 있습니다.

{
    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 : 'let'으로 선언된 변수는 블록 스코프를 가집니다. 블록 내에서 선언한 변수는 블록 외부에서 접근할 수 없습니다.

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

자바스크립트(JavaScript)에서 변수(Variable)는 데이터를 저장하고 변경하고, 추가할 수 있습니다.

{
    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와 동일한 의미를 가집니다. 이를 이용하여 변수에 값을 추가하거나 연산한 결과를 할당할 수 있습니다.

위의 예시에서 마지막 변수(z) 예제는 += 연산이 숫자 덧셈이 아닌 문자열 연결로 동작하기 때문에 결과가 문자열로 처리되었습니다.

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

상수는 데이터 저장이 가능하나 변경은 불가능합니다.

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

    //x = 200; //Uncaught TypeError: Assignment to constant variable. (상수는 데이터 변경 불가)

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

const : "상수(constant)"의 줄임말입니다. const를 사용하여 변수를 선언하면 한 번 할당된 값은 변경할 수 없습니다. 다시 말해, const로 선언한 변수는 재할당이 불가능합니다.

const는 변수의 값을 변하지 않고 고정적으로 유지해야 하는 경우 사용됩니다. 주로 프로그램에서 변하지 않는 값을 나타내는데 사용되며, 이를 통해 실수로 변수의 값이 변경되는 것을 방지할 수 있습니다.

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

const arr = new Array(); 코드는 JavaScript에서 배열을 선언하고 생성하는 방법 중 하나입니다.

'const arr' : const 키워드를 사용하여 상수로 선언된 변수 arr을 생성합니다. arr 변수는 이후에 다른 값을 할당할 수 없습니다.
'new Array()' : new 키워드를 사용하여 새로운 배열 객체를 생성합니다. Array() 생성자 함수를 호출하여 빈 배열을 만들게 됩니다. 생성자 함수를 호출할 때 '()' 내에 배열의 초기 크기나 초기값을 넣어 초기화할 수 있습니다.

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

배열은 여러개의 데이터를 하나의 변수에 저장할 수 있습니다.

{
    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() 생성자 함수를 사용하여 초기값이 있는 배열을 생성하는 방법입니다. 각각의 인자가 배열의 요소로 사용되어 초기화됩니다.

'new Array(100, 200, "javascript")' : Array() 생성자 함수를 호출하여 배열을 생성합니다. 괄호 () 내에 있는 값들이 배열의 초기 요소로 사용됩니다.

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

배열은 여러개의 데이터를 하나의 변수에 저장할 수 있습니다.

{
    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 = []' : 빈 배열을 생성하고 arr 변수에 할당합니다. 이 배열은 아무 요소도 가지지 않은 상태입니다.
'arr[0] = 100;, arr[1] = 200;, arr[2] = "javascript";' : 각각의 인덱스에 값을 할당하여 배열을 초기화합니다. 이 방법을 사용하면 빈 배열을 만든 후에 필요한 요소를 하나씩 추가할 수 있습니다.

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

배열은 여러개의 데이터를 하나의 변수에 저장할 수 있습니다.

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

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

배열 리터럴을 사용하여 배열을 생성하고 초기화하는 방법입니다. 이 방법은 간결하고 직관적이며, 배열을 선언하고 초기화하는 가장 흔한 방법 중 하나입니다.

'[100, 200, "javascript"]' : 배열 리터럴을 사용하여 배열을 생성하고 초기화합니다. 대괄호 [] 내에 값을 나열하여 초기 요소를 설정합니다. 숫자와 문자열이 혼합되어 배열의 요소로 사용됩니다.

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

2차 배열은 배열 내에 또 다른 배열이 중첩된 형태의 데이터 구조입니다. 이러한 배열을 사용하면 행과 열의 형태로 데이터를 구성할 수 있으며, 행렬(matrix)이나 테이블과 유사한 형태의 정보를 표현하는 데 많이 활용됩니다.

{
    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차 배열은 다차원적인 데이터 구조를 표현할 수 있어서 이미지 처리, 게임 개발, 수학적 계산 등 다양한 분야에서 활용됩니다. 중첩된 배열을 사용하여 복잡한 데이터를 구조화하고 처리하는 데 유용합니다.

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

배열의 요소를 추출하여 변수에 할당하는 방법을 말합니다. 이를 통해 배열의 각 요소를 개별적인 변수로 분해하여 사용할 수 있습니다.

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

    const [a, b, c] = arr3; //배열 구조 분해 할당

    console.log(a); //100
    console.log(b); //200
    console.log(c); //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 javascript 500
}

배열 구조 분해 할당을 사용하면 변수 이름을 배열의 요소와 일치시켜 해당 변수에 값을 할당할 수 있습니다. 만약에 할당받을 변수의 개수가 배열의 요소보다 적거나 많다면, 남는 변수는 undefined로 할당됩니다.

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

객체를 선언한 후 데이터를 할당하는 방식입니다. 데이터를 입력할 때 배열 방식도 적용됩니다.

{
    const obj = new Object();

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

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

객체를 생성하고 숫자 인덱스를 사용하여 속성을 추가하는 방법입니다.

new Object() 생성자를 사용하여 빈 객체 obj를 생성합니다.
세 개의 속성을 obj 객체에 숫자 인덱스를 사용하여 추가합니다:
obj[0]에는 값 100이 할당됩니다.
obj[1]에는 값 200이 할당됩니다.
obj[2]에는 문자열 값 "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);
}

new Object() 생성자를 사용하여 빈 객체 obj를 생성합니다.

세 개의 속성을 obj 객체에 문자열 키를 사용하여 추가합니다:
obj.a에는 값 100이 할당됩니다.
obj.b에는 값 200이 할당됩니다.
obj.c에는 문자열 값 "javascript"이 할당됩니다.

이 코드에서는 객체의 속성을 문자열 키를 사용하여 추가하였으며, 추가한 속성 값들을 해당 속성 이름으로 접근하여 출력하고 있습니다. 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);
}

빈 객체 obj를 중괄호 {}를 사용하여 생성합니다.

세 개의 속성을 obj 객체에 추가하고 값을 할당합니다:
obj.a에는 값 100이 할당됩니다.
obj.b에는 값 200이 할당됩니다.
obj.c에는 문자열 값 "javascript"이 할당됩니다.

이 코드에서는 빈 객체를 생성한 후에 객체의 속성을 키와 값을 사용하여 추가하였으며, 추가한 속성 값을 해당 속성 이름으로 접근하여 출력하고 있습니다. 이러한 방식으로 JavaScript 객체는 데이터를 효과적으로 구조화하고 저장할 수 있습니다.

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

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

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

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

중괄호 {} 안에 속성과 값을 나타내는 키-값 쌍을 사용하여 객체 obj를 생성합니다.

객체의 초기 속성들은 다음과 같습니다:
obj.a에는 값 100이 할당됩니다.
obj.b에는 값 200이 할당됩니다.
obj.c에는 문자열 값 "javascript"이 할당됩니다.

이 코드에서는 객체를 생성하고 객체 리터럴을 사용하여 속성과 값을 한 번에 초기화하였습니다. 이렇게 객체 리터럴을 사용하면 간단하고 직관적으로 객체를 초기화할 수 있습니다.

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

배열 안에 객체를 선언했을 때

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

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

1. 배열 obj를 생성하고, 배열의 첫 번째 요소로 객체를 추가합니다.
이 객체는 a, b, c 세 개의 속성을 가지며, 각각의 속성에는 100, 200, "javascript"이 할당됩니다.
이후 코드에서는 배열의 첫 번째 객체에 접근하여 해당 객체의 속성 값을 출력합니다.

2. 배열 obj1을 생성하고, 배열의 첫 번째와 두 번째 요소로 각각 객체를 추가합니다.
첫 번째 객체는 a, b, 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] + obj.b[1]);
    console.log(obj.a[0]);
    console.log(obj.a[1]);
    console.log(obj.b[0]);
    console.log(obj.b[1]);
}

obj 객체를 생성합니다. 이 객체는 다양한 속성들을 가지고 있습니다:
1. a 속성에는 [100, 200] 배열이 할당됩니다.
2. b 속성에는 [300, 400] 배열이 할당됩니다.
3. c 속성에는 문자열 값 "javascript"이 할당됩니다.
4. d 속성에는 문자열 값 "jquery"이 할당됩니다.

console.log(obj.a[0] + obj.b[1]) 문은 obj 객체의 a 배열의 첫 번째 요소와 b 배열의 두 번째 요소를 더한 값을 로그합니다. 이 값은 100 + 400이므로 500이 출력됩니다.

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

객체 안에 객체를 선언했을 때

{
    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이 할당됩니다.
b 속성에는 배열 [200, 300]이 할당됩니다.
c 속성에는 객체 { x: 400, y: 500 }가 할당됩니다.
d 속성에는 문자열 값 "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[0]);
    console.log(obj.b[1]);
    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(obj.b[1]);
}

객체 내에 함수를 정의함으로써, 객체의 상태와 동작을 함께 캡슐화할 수 있습니다. 이러한 패턴을 통해 코드의 가독성을 높이고, 관련된 기능들을 한 곳에 모아 유지보수를 용이하게 할 수 있습니다.

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

객체 구조 분해 할당(Object Destructuring Assignment)은 JavaScript에서 객체의 속성을 추출하여 변수에 할당하는 편리한 문법적 기능입니다. 이를 통해 객체의 속성을 하나씩 변수에 할당하거나 원하는 속성만 추출하여 사용할 수 있습니다.

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

    const {a, b, c} = obj;

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

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

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

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

객체 구조 분해 할당을 통해 할당되는 변수 이름은 객체의 속성 이름과 일치해야 합니다. 그러나 원하는 변수 이름을 사용하고 싶을 때는 다음과 같이 이름을 변경하여 할당할 수 있습니다.

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

객체 펼침 연산자(Object Spread Operator)는 JavaScript에서 객체의 속성을 새로운 객체에 복사하거나 기존 객체에 새 속성을 추가할 때 사용되는 문법적인 기능입니다. 이 연산자를 사용하면 객체를 펼치는 것처럼 객체의 속성을 개별적으로 추출하거나 복사할 수 있습니다.

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

    console.log(obj1);
    console.log(obj2);
    console.log(obj2.b);
    console.log(obj2.c);
    console.log(obj2.d);
    console.log(obj3);
}

객체 펼침 연산자는 기존 객체를 변경하지 않고 새로운 객체를 생성하며, 속성의 추가, 변경, 제거 등 다양한 작업에 활용됩니다. 주의할 점은 중첩된 객체의 경우 내부 객체까지 깊은 복사되지는 않으며 얕은 복사(shallow copy)만 수행된다는 점입니다.

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

데이터 교환(JSON)은 데이터를 효과적으로 저장하고 전송하기 위한 경량의 형식입니다. JSON은 "JavaScript Object Notation"의 약어로, 데이터를 구조화된 텍스트 형식으로 표현하는데 사용됩니다. JSON은 다양한 프로그래밍 언어에서 지원되며, 특히 웹 애플리케이션에서 데이터 교환의 표준 형식으로 널리 사용됩니다.

// 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"}'

1. 가독성: JSON은 사람과 기계 모두 이해하기 쉬운 텍스트 형식으로 구성되어 있습니다. 이로 인해 개발자가 데이터를 빠르게 확인하고 디버그하기 쉽습니다.
2. 구조화: JSON 데이터는 객체와 배열을 사용하여 계층 구조를 가질 수 있습니다. 객체는 중괄호 {}로, 배열은 대괄호 []로 나타내며, 이러한 구조를 활용하여 복잡한 데이터 구조를 표현할 수 있습니다.
3. 데이터 타입: JSON은 다양한 데이터 타입을 지원합니다. 주요 데이터 타입으로는 문자열, 숫자, 불리언, 객체, 배열, null이 있습니다.
4. 키-값 쌍: JSON은 키와 해당 값을 쌍으로 저장하는데, 이것을 "속성" 또는 "필드"라고 합니다. 키는 문자열이며, 값은 문자열, 숫자, 불리언, 객체, 배열 또는 null이 될 수 있습니다.

23. 변수 : 지역변수 + 전역변수

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

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

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

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

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

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

1. 지역 변수 (Local Variable):
지역 변수는 특정한 코드 블록 내에서 선언되며, 해당 코드 블록 내부에서만 접근 가능한 변수입니다. 주로 함수 내부에서 선언되며, 함수가 호출될 때 생성되고 함수 실행이 종료되면 소멸합니다. 다른 함수나 코드 블록에서는 해당 변수에 접근할 수 없습니다.

2. 전역 변수 (Global Variable):
전역 변수는 어떤 함수나 코드 블록 내에서도 선언되지 않고, 프로그램 전체에서 접근 가능한 변수입니다. 프로그램의 어느 곳에서나 접근할 수 있으므로 사용 시 주의가 필요합니다. 전역 변수를 남발하면 코드의 가독성을 낮추고 예기치 않은 버그가 발생할 수 있습니다.

24. 산술 연산자

사술 연산자에는 +, -, *(곱하기), /(나누기), %(나머지)가 있습니다.

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

    result = num1 + num2;
    document.write(result);

    result = num1 - num2;
    document.write(result);

    result = num1 * num2;
    document.write(result); 

    result = num1 / num2;
    document.write(result);

    result = num1 % num2;
    document.write(result); 
}

산술 연산자로 연산을 하기 위해서는 연산 대상 데이터가 반드시 2개 있어야 합니다.

25. 문자 결합 연산자

문자 결합 연산자는 피연산자(연산 대상 데이터)가 문자형 데이터입니다. 여러개의 문자를 하나의 문자형 데이터로 결합할 때 사용합니다.

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

    result = t1 + t2 + t3 + t4;
    document.write(result);
}

더하기에 피연산자로 문자형 데이터가 한 개라도 포함되어 있으면 다른 피연산자의 데이터는 자동으로 문자형 데이터로 형 변환되고, 문자 결합이 이루어져 하나의 문자형 데이터를 반환합니다.

ex) "do it " + "javascript" = "do it javascript";
ex) "100" + 200 = "100200";

26. 대입 연산자

대입 연산자(=)는 연산된 데이터를 변수에 저장할 때 사용합니다.

{
    var num1 = 10;
    var num2 = 3;

    num1 += num2;   //num1 = num1(10) + num2(3);
    document.write(num1);

    num1 -= num2;   //num1 = num1(13) - num2(3);
    document.write(num1);

    num1 *= num2;   //num1 = num1(10) * num2(3);
    document.write(num1);

    num1 %= num2;   //num1 = num1(30) % num2(3);
    document.write(num1);
}

복합 대입 연산자(+=, -=, *=, /=, %=)는 산술 연산자와 대입 연산자가 복합적으로 적용된 것을 말합니다.

27. 증감 연산자

증감 연산자에는 숫자형 데이터를 1씩 증가시키는 증가 연산자(++)와 반대로 1씩 감소시키는 감소 연산자(--)가 있습니다.

{
    var num1 = 10;
    var num2 = 3;
    var result;

    num1--;   
    document.write(num1);

    num1++;
    document.write(num1);

    result = num2++;
    document.write(result);

    result = ++num2;
    document.write(result);
}

피연산자가 한 개만 필요한 단항 연산자 입니다. 증감 연산자는 변수의 어느 위치에 오는가에 따라 결괏값이 달라집니다.

1. var A = ++B
먼저 ++B(1만큼 증가)가 실행되고, A(증가된 B의 값을 A에 대입)가 실행됩니다.

2. var A = B++;
먼저 A(B의 값을 A에 대입)가 실행되고, B++(B의 값을 1만큼 증가)가 실행됩니다.

28. 비교 연산자

두 데이터를 '크다, 작다, 같다'와 같이 비교할 때 사용하는 연산자입니다. 결괏값은 true(참) 또는 false(거짓)로 논리형 데이터를 반환합니다.

{
    var a = 10;
    var b = 20;
    var c = 10;
    var f = "20";
    var result;

    result = a > b; //false
    document.write(result);

    result = a < b; //true
    document.write(result);

    result = a <= b; //true
    document.write(result);

    result = b == f; //true
    document.write(result);

    result = a != b; //true
    document.write(result);

    result = b === f; //false
    document.write(result);
}

종류 : >, <,>=, <=,==, !=(다르다),===, !==(다르다)

==와 !=는 피연산자의 자료형이 비교 연산자의 실행 결과에 영향을 미치지 않습니다.
var k = 10, m = "10";
k == 10 //true
m == 10 //true

===과 !==는 피연산자 자료형에 따라 결괏값이 달라집니다.
var k = 10, m = "10";
k === 10 //true
m === 10 //false

29. 논리 연산자

논리 연산자에는 ||(or), &&(and), !(not)이 있으며, 논리 연산자는 피연산자가 논리형 데이터인 true 또는 false로 결괏값을 반환합니다.

{
    var a = 10;
    var b = 20;
    var m = 30;
    var n = 40;
    var result;
    
    result = a > b || b >= m || m > n;  //false || false || false
    document.write(result);

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

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

    result = a <= b && b <= m && m <= n; //true && true && true
    document.write(result);

    result = !(a > b);  //!false를 계산
    document.write(result);
}

1. ||(or) 연산자는 피연산자 중 하나만 true이면 true라는 결괏값을 반환합니다.
2. &&(and) 연산자는 피연산자 중 하나만 false이면 false라는 결괏값을 반환합니다.
3. !(not)은 논리 부정 연산자로, 피연산자가 true이면 false라는 반대의 결괏값을 반환합니다.

30. 삼항 조건 연산자

삼항 조건 연산자는 조건식(true 또는 false의 결괏값을 반환)의 결과에 따라 실행 결과가 달라지는 삼항 연산자로, 연산을 위해 피연산자가 3개 필요합니다.

{
    var a = 10;
    var b = 3;

    var result = a > b ? "javascript" : "hello";
    document.write(result); 
}

삼항 조건 연산자는 연산한 결과 조건식의 만족 요부에 따라 실행하는 코드를 다르게 실행하고자 할 때 사용합니다.
예를 들어 방문자로부터 입력받은 나잇값이 20세 이상이면 '성인'이라 출력하고, 미만이면 '미성년자'라고 출력하도록 할 때 사용할 수 있습니다.

조건식 ? 자바스크립트 코드1 : 코드2

자료형이란?

"자료형"은 컴퓨터 메모리에 저장되는 데이터의 종류를 나타내는 개념입니다. 각각의 자료형은 다른 종류의 값을 나타내며, 프로그램에서 데이터를 조작하고 처리하는 방법을 결정합니다. 자료형은 변수나 상수에 할당되거나 함수의 매개변수로 전달되는 값의 형태와 특성을 지정하는 역할을 합니다.

31. 자료형 : 숫자

숫자(Number): 정수(integer)나 부동소수점(floating-point) 숫자를 나타냅니다. 예를 들어 42, 3.14 등이 숫자 자료형에 해당합니다.

{
    let x = 5;
    x += 10;  // x = x + 10;
    x *= 3;   // x = x * 3;

    console.log(x); 
}

정수 (Integer): 정수는 소수점 없이 표현되며, 양수나 음수 값을 가질 수 있습니다.
부동소수점 (Floating-Point): 부동소수점 숫자는 소수점을 포함한 실수 값을 나타냅니다.

32. 자료형 : 문자열

문자의 시퀀스를 나타냅니다. 작은 따옴표 ' '나 큰 따옴표 " "로 둘러싸인 문자열을 사용합니다. 예를 들어 'Hello', "JavaScript" 등이 문자열 자료형에 해당합니다.

{
    const greeting = "Hello, World!";
    console.log(greeting);
}

문자열은 작은 따옴표(' ')나 큰 따옴표(" ")로 둘러싸인 문자의 시퀀스입니다.

33. 자료형 : 논리

논리형(Boolean)은 JavaScript에서 두 가지 값만 가지는 자료형으로, true나 false 중 하나의 값을 나타냅니다. 논리형은 주로 조건을 표현하거나 조건문, 반복문 등에서 제어 흐름을 다루는 데 사용됩니다.

{
    const isTrue = true;
    const isFalse = false;

    console.log(isTrue);    // 출력: true
    console.log(isFalse);   // 출력: false
}

논리형 값:
true: 참을 나타냅니다.
false: 거짓을 나타냅니다.

34. 자료형 : null

null은 JavaScript에서 특별한 값을 나타내는 자료형 중 하나입니다. null은 변수가 값이 없음을 나타내거나, 의도적으로 값이 없음을 표현할 때 사용됩니다.

{
    let someValue = null;
    console.log(someValue); 
}

null은 값 자체가 없음을 나타내는 반면, undefined는 값이 할당되지 않았음을 나타냅니다. null은 프로그래머가 변수를 명시적으로 비우거나 초기화하고자 할 때 사용됩니다.

35. 자료형 : undefined

undefined는 변수가 선언되었지만 아무런 값이 할당되지 않은 상태를 나타내는 값입니다.

{
    let value; // 초기화되지 않은 변수
    console.log(value); 
}

변수를 선언하고 값을 초기화하지 않았을 때나, 함수에서 반환값을 지정하지 않았을 때 등에 undefined가 사용될 수 있습니다. undefined는 자바스크립트의 기본적인 동작에서 나타날 수 있는 상황을 표현하는 데 사용됩니다.

36. 자료형 : object

object는 다양한 데이터와 기능을 하나로 묶어 표현할 수 있는 자료형입니다.

{
    const person = {
        firstName: "John",
        lastName: "Doe",
        age: 30,
        city: "New York"
    };
      
    console.log(person.firstName);
    console.log(person.age);      
}

object는 이름-값 쌍(name-value pair) 형태의 속성(properties)으로 구성되어 있으며, 데이터의 그룹화와 구조화에 사용됩니다. 객체는 복잡한 데이터를 표현하고 관리하는 데 유용한 자료형입니다.

37. 자료형 : Array

Array는 여러 개의 값을 순서대로 저장하는 데이터 구조입니다.

{
    const colors = ["red", "green", "blue"];
    console.log(colors[0]); 
    console.log(colors[1]); 
    console.log(colors[2]);     
}

배열은 동일한 자료형 또는 다양한 자료형의 값을 포함할 수 있으며, 각 값은 숫자로 된 인덱스로 접근할 수 있습니다. 배열은 프로그래밍에서 데이터를 정리하고 조작하는 데 매우 유용한 자료구조입니다.

38. 자료형 : Function

function은 코드 블록을 나타내는 자료형으로, 재사용 가능한 동작을 정의하고 호출할 수 있는 기능을 제공합니다.

{
    function add(a, b) {
        return a + b;
    }
      
    const result = add(5, 3);
    console.log(result); // 출력: 8  
}

함수는 프로그램의 모듈화, 코드 재사용 및 가독성 향상을 위해 중요한 역할을 합니다. 함수는 특정 작업을 수행하고 결과를 반환할 수 있습니다.