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: 과거에는 주로 사용되었으나, 현재는 let과 const가 더 권장됩니다

결과 확인하기
100
200
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에 값을 문자 jaquery로 변경

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

변수에 저장된 값을 연산을 통해 변경할 수 있습니다. 산술 연산자(+, -, *, / 등)나 대입 연산자(+=, -=, *=, /= 등)를 사용하여 값을 변경할 수 있습니다.

결과 확인하기
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);
}

'+='는 자바스크립트에서 사용되는 복합 할당 연산자(compound assignment operator) 중 하나인데, 이 연산자는 변수에 값을 더하고 그 결과를 해당 변수에 다시 할당하는 역할을 합니다.

결과 확인하기
200
300
javascriptjquery

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

자바스크립트 상수(Constant)는 값을 한 번 할당한 후에는 변경할 수 없는 변수를 말합니다. 

{
    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로 선언된 변수가 항상 변경되지 않는 것은 아닙니다. 객체나 배열과 같은 참조형 데이터에서 내용을 변경하는 것은 가능하기 때문에 주의가 필요합니다.

결과 확인하기
TypeError: Assignment to constant variable.

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

위와 같은 표현방식은 잘 사용되지 않습니다.

결과 확인하기
(arr)의 결과 100, 200, 'javascript'
(arr[0])의 결과 100
(arr[1])의 결과 200
(arr[2])의 결과 javascript
(arr[3])의 결과 undefined

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

표현방식1과 마찬가지로 가장 사용되지않는 표현방식입니다.

결과 확인하기
(arr)의 결과 100, 200, 'javascript'
(arr[0])의 결과 100
(arr[1])의 결과 200
(arr[2])의 결과 javascript
(arr[3])의 결과 undefined

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

두번째로 가장 많이 사용하는 표현방식 입니다.

결과 확인하기
(arr)의 결과 100, 200, 'javascript'
(arr[0])의 결과 100
(arr[1])의 결과 200
(arr[2])의 결과 javascript
(arr[3])의 결과 undefined

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

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

가장 간편하기 때문에 대부분의 경우에 배열은 표현방식 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차 배열

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

배열의 배열로 구성되어 있기 때문에 각 요소에 접근할 때는 인덱스를 두 번 사용해야 합니다.

결과 확인하기
(arr[0])의 결과 100
(arr[1][0])의 결과 200
(arr[1][1])의 결과 300
(arr[2][0])의 결과 javascript
(arr[2][1])의 결과 jquery

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

자바스크립트에서 배열 구조 분해 할당(array destructuring assignment)은 배열을 해체하여 배열의 각 원소를 개별 변수로 할당하는 문법입니다. 

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

    const [a, b, c] = arr3;

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

배열 구조 분해 할당은 개별 원소의 값을 추출하여 변수에 할당하는 것 외에도 다양한 활용이 가능하며, 객체 구조 분해 할당과 함께 사용하여 코드를 더욱 간결하고 효율적으로 작성할 수 있습니다.

결과 확인하기
100
200
javascript

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

JavaScript에서 배열 펼침 연산자(spread operator)는 배열의 요소를 다른 배열에 추가하거나 배열 리터럴을 확장하는 데 사용됩니다. 

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

    document.write(...arr1);
}

펼침 연산자는 배열의 요소를 얕게 복사하므로, 배열 내에 다른 배열이나 객체(중첩 구조)가 있을 경우 내부 요소를 깊게 복사하려면 추가적인 처리가 필요할 수 있습니다.

결과 확인하기
100, 200, 'javascript'
100 200 'javascript'
100 200 'javascript' 300 400 'jquery'
100 200 'javascript' 500
100200javascript

12. 객체 : 데이터 저장(키와값) : 표현방법1

JavaScript 객체는 중괄호 {} 내부에 키-값 쌍으로 구성됩니다. 각 키는 문자열이며, 값은 어떤 데이터나 함수든 될 수 있습니다. 객체 내의 키는 고유해야 하며, 동일한 키를 여러 번 사용할 수 없습니다. 

{
    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

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

{
    const obj = new Object();

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

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

{object Object} 오류가 발생하는 이유는 document.write() 함수가 객체를 직접 출력할 때 해당 객체의 문자열 표현을 보여주기 때문입니다. 자바스크립트 객체의 기본 문자열 변환은 "[object Object]"와 같이 단순한 형태로 표시됩니다.

결과 확인하기
(obj)의 결과 {object Object}
(obj.a)의 결과 100
(obj.c)의 결과 200
(obj.b)의 결과 javascript

14. 객체 : 데이터 저장(키와값) : 표현방법3

JavaScript 객체는 속성과 값을 가지는 데이터 구조로, 일종의 "사물" 또는 "개념"을 모델링하는 데 사용됩니다. 

{
    const obj = {};

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

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

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

결과 확인하기
(obj.a)의 결과 100
(obj.c)의 결과 200
(obj.b)의 결과 javascript

15. 객체 : 데이터 저장(키와값) : 표현방법4

객체를 약식으로 선언하고 동시에 데이터를 할당하는 방식입니다. 

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

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

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

결과 확인하기
(obj.a)의 결과 100
(obj.c)의 결과 200
(obj.b)의 결과 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);    
}

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

결과 확인하기
(obj[0].a)의 결과 100
(obj[0].b)의 결과 200
(obj[0].c)의 결과 javascript
(obj1[0].a)의 결과 100
(obj1[0].b)의 결과 200
(obj1[0].c)의 결과 javascript
(obj1[1].a)의 결과 300
(obj1[1].b)의 결과 400
(obj1[1].c)의 결과 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);         
}

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

결과 확인하기
(obj.a[0])의 결과 100
(obj.a[1])의 결과 200
(obj.b[0])의 결과 300
(obj.b[1])의 결과 400
(obj.c)의 결과 javascript
(obj.d)의 결과 jquery

18. 객체 : 데이터 저장(키와값) : 표현방법7

객체는 JavaScript에서 중요한 개념 중 하나이며, 거의 모든 것을 객체로 표현할 수 있습니다. 

{
    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

객체는 JavaScript에서 중요한 개념 중 하나이며, 거의 모든 것을 객체로 표현할 수 있습니다. 

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

객체 안에 함수를 선언했을 경우입니다.

결과 확인하기
100
200
300
400
500
600
javascript
jquery
100
100

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

자바스크립트에서 객체 구조 분해 할당(object destructuring assignment)은 객체의 속성(property)을 해체하여 속성의 값을 개별 변수에 할당하는 문법입니다. 

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

객체 구조 분해 할당은 객체의 속성을 개별 변수로 쉽게 추출하거나 활용할 수 있는 강력한 기능입니다. 또한, 배열 구조 분해 할당과 함께 사용하면 코드를 더 간결하게 작성할 수 있습니다.

결과 확인하기
100
300
400
javascript

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

JavaScript에서 객체 펼침 연산자(spread operator)는 객체의 속성을 다른 객체로 복사하거나 객체 리터럴을 확장하는데 사용됩니다. 

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

펼침 연산자는 객체 내의 속성을 얕은 복사하므로, 객체 내에 객체(중첩 객체)가 있는 경우 내부 객체까지 깊은 복사하려면 추가적인 처리가 필요할 수 있습니다.

결과 확인하기
100, 200, 'javascript'
100 200 javascript 'jquery
200
javascript
jquery
100 200 javascript 100 200 javascript jquery

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

JSON파일로 데이터를 교환하는 예제입니다. 

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

    //webs

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

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

1. JSON 데이터를 객체로 변환:
코드에서 JSON.parse() 메서드를 사용하여 JSON 형식의 문자열 jsonString을 JavaScript 객체로 변환합니다.
이렇게 하면 jsonObject 변수에 JSON 데이터의 내용이 객체 형태로 저장됩니다.
jsonObject.name을 출력하면 객체의 name 속성 값인 "webs"가 출력됩니다.

2. 객체를 JSON 데이터로 변환:
코드에서 JSON.stringify() 메서드를 사용하여 JavaScript 객체 personString을 JSON 형식의 문자열로 변환합니다.
이렇게 하면 jsonPerson 변수에 객체가 JSON 형식으로 변환된 문자열이 저장됩니다.
jsonPerson을 출력하면 JSON 형식의 문자열 {"name": "webs", "age": 30}이 출력됩니다.

결과 확인하기
webs

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

변수 : 전역변수 + 지역변수

자바스크립트에서 변수는 전역 변수(Global Variable)와 지역 변수(Local 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을 추가
        let z = "jquery";   //전역변수 z의 값에 문자열 "jquery"를 추가
        
        console.log("함수안:" + x, y, z);
    }
    func();

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

전역 변수 (Global Variable): 전역 변수는 스크립트 내에서 어디서든 접근 가능한 변수를 말합니다. 이 변수들은 스크립트 전체에서 공유되며, 선언된 위치에 관계없이 어디서든 사용할 수 있습니다.
지역 변수 (Local Variable): 지역 변수는 특정 함수나 블록 내에서 선언되어 해당 범위 내에서만 접근 가능한 변수입니다. 지역 변수는 해당 범위에서만 유효하며, 함수가 실행될 때 생성되고 함수 실행이 끝나면 사라집니다.

결과 확인하기
함수밖1: 100 200 javascript
함수안: 300 600 jquery
함수밖2: 100 600 javascript

자료형 : 숫자

JavaScript에서는 여러 가지 자료형(data type)이 있습니다. 이 자료형은 변수에 저장되거나 처리되는 데이터의 특성을 정의합니다. 

{
    let age = 25;
    let temperature = 37.5;

    console.log(age);
}

숫자(Number): 정수 및 부동소수점 숫자를 나타냅니다

결과 확인하기
25

자료형 : 문자열

JavaScript에서는 여러 가지 자료형(data type)이 있습니다. 이 자료형은 변수에 저장되거나 처리되는 데이터의 특성을 정의합니다. 

{
    let name = "John";
    let message = "Hello, " + name; 

    console.log(name);
}

문자열(String): 텍스트 데이터를 나타냅니다. 작은따옴표('')나 큰따옴표("")로 둘러싸서 생성합니다.

결과 확인하기
John

자료형 : 논리

JavaScript에서는 여러 가지 자료형(data type)이 있습니다. 이 자료형은 변수에 저장되거나 처리되는 데이터의 특성을 정의합니다. 

{
    let isLogged = true;
    let hasPermission = false;
    
    console.log(isLogged);
}

논리: 참(True) 또는 거짓(False) 값을 나타냅니다

결과 확인하기
true

자료형 : null

JavaScript에서는 여러 가지 자료형(data type)이 있습니다. 이 자료형은 변수에 저장되거나 처리되는 데이터의 특성을 정의합니다. 

{
    let value = null;

    console.log(value);
}

null: 값이 없음을 나타내는 특별한 값입니다.

결과 확인하기
null

자료형 : undefined

JavaScript에서는 여러 가지 자료형(data type)이 있습니다. 이 자료형은 변수에 저장되거나 처리되는 데이터의 특성을 정의합니다. 

{
    let undefinedValue;

    console.log(undefinedValue);
}

undefined: 변수가 선언되었지만 아무 값도 할당되지 않은 상태를 나타냅니다.

결과 확인하기
undefined

자료형 : Object

JavaScript에서는 여러 가지 자료형(data type)이 있습니다. 이 자료형은 변수에 저장되거나 처리되는 데이터의 특성을 정의합니다. 

{
    let person = {
        firstName: "Alice",
        lastName: "Johnson",
        age: 30
    };

    console.log(person.age);
}

객체(Object): 여러 속성(key-value 쌍)을 포함하는 컨테이너입니다. 함수, 배열, 날짜 등도 객체의 일종입니다.

결과 확인하기
30

자료형 : Array

JavaScript에서는 여러 가지 자료형(data type)이 있습니다. 이 자료형은 변수에 저장되거나 처리되는 데이터의 특성을 정의합니다. 

{
    let numbers = [1, 2, 3, 4, 5];
    let fruits = ["apple", "banana", "orange"];

    console.log(fruits[0]);
}

배열(Array): 순서대로 정렬된 값의 목록을 나타냅니다. 각 값은 인덱스를 가지고 있으며, 0부터 시작하는 정수 인덱스로 접근할 수 있습니다.

결과 확인하기
'apple'

자료형 : Function

JavaScript에서는 여러 가지 자료형(data type)이 있습니다. 이 자료형은 변수에 저장되거나 처리되는 데이터의 특성을 정의합니다. 

{
    function add(a, b) {
        return a + b;
    }
    add(1, 2);
}

함수(Function): 일련의 작업을 수행하는 코드 블록을 나타냅니다. JavaScript에서 함수는 일급 객체로 취급되므로 변수에 할당하거나 다른 함수의 인자로 전달할 수 있습니다.

결과 확인하기
3

연산자 : 산술 연산자

자바스크립트 산술 연산자는 숫자를 사용하여 다양한 수학적 계산을 수행하는 데 사용되는 연산자들입니다. 

{
    let num1 = 15;
    let num2 = 3;
    let num3 = 5;

    console.log(num1 + num2);
    console.log(num1 - num2);
    console.log(num2 * num3);
    console.log(num1 / num2);
    console.log(num1 % num2);
    console.log(num1 + num2 * num3);
}

덧셈 연산자 (+): 두 숫자를 더합니다.
뺄셈 연산자 (-): 첫 번째 숫자에서 두 번째 숫자를 뺍니다.
곱셈 연산자 (*): 두 숫자를 곱합니다.
나눗셈 연산자 (/): 첫 번째 숫자를 두 번째 숫자로 나눕니다.
나머지 연산자 (%): 첫 번째 숫자를 두 번째 숫자로 나눈 뒤, 남은 나머지 값을 구합니다.

산술 연산자의 종류와 기본형
종류 기본형 설명
덧셈 연산자 + 두 숫자를 더합니다.
뺄셈 연산자 - 첫 번째 숫자에서 두 번째 숫자를 뺍니다.
곱셈 연산자 * 두 숫자를 곱합니다.
나눗셈 연산자 / 첫 번째 숫자를 두 번째 숫자로 나눕니다.
나머지 연산자 % 첫 번째 숫자를 두 번째 숫자로 나눈 뒤, 남은 나머지 값을 구합니다.
결과 확인하기
18
12
15
5
0
30

연산자 : 문자 결합 연산자

문자열 결합 연산자는 두 개 이상의 문자열을 합쳐 하나의 문자열로 만드는 연산자입니다. 

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

    console.log(a + " " + b + " " + c + " " + d)
}

문자열과 문자열 사이에 공백을 추가하기 위해 " "를 사용하였습니다.

결과 확인하기
학교종이 땡땡땡 8282 어서 모이자

연산자 : 대입 연산자

자바스크립트에서 대입 연산자는 값을 변수에 할당하는 데 사용되는 연산자입니다.
대입 연산자를 사용하여 변수에 값을 저장하거나 업데이트할 수 있습니다.
복합 대입 연산자는 산술 연산자와 대입 연산자가 복합적으로 적용된 것을 말합니다. 

{
    let num1 = 10;
    let num2 = 5;

    console.log(num1 += num2);
    console.log(num1 -= num2);
    console.log(num1 *= num2);
    console.log(num1 /= num2);
    console.log(num1 %= num2);
}

산술 연산자와 복합 대입 연산자의 차이점은 그 목적과 동작 방식에 있습니다.
산술 연산자는 숫자들 간의 수학적 계산을 수행하는 데 사용되고, 복합 대입 연산자는 변수의 값을 변경하거나 업데이트하는 데 사용됩니다.

결과 확인하기
15
10
50
10
0

연산자 : 증감 연산자

자바스크립트에서 증감 연산자는 변수의 값을 1만큼 증가시키거나 감소시키는 연산자입니다.
이 연산자들은 변수의 값을 수정하는 목적으로 사용됩니다. 

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

    num1++;                 // 6
    console.log(num1);

    num1--;                 // 5
    console.log(num1);

    result = num2++;
    console.log(result);    // result: 10, num2: 11 (먼저 num2의 값을 result에 대입하는 것이 실행되고 num2의 값을 1만큼 증가하는 것이 실행됩니다.)

    result = ++num2;
    console.log(result);    // result: 12, num2: 12 (먼저 num2의 값을 1만큼 증가하는 것이 실행되고 증가된 num2의 값을 result에 대입하는 것이 실행됩니다.)
}

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

결과 확인하기
6
5
10
12

연산자 : 비교 연산자

자바스크립트에서 비교 연산자는 두 값을 비교하여 참 또는 거짓을 반환하는 연산자입니다. 

{
    let k = 10;
    let m = "10";

    console.log(k == 10)
    console.log(m == 10)
    console.log(k === 10)
    console.log(m === 10)

    let a = 5;
    let b = 20;
    let c = 13;
    let d = 50;

    console.log(a > b);
    console.log(b < c);
    console.log(c >= d);
    console.log(a <= b);
    console.log(a != d);
    console.log(c !== b);
}

대소 비교 연산자 (<, >, <=, >=): 두 값을 대소 관계로 비교하고, 참일 경우 true를 반환합니다.
동등(==) 연산자: 두 값이 서로 같은지 비교하고, 값이 같으면 true를 반환하며, 자료형이 다르더라도 값이 같다면 true를 반환 하지만 자료형까지 엄격하게 비교하지는 않습니다.
부등(!=) 연산자: 두 값이 서로 다른지 비교하고, 값이 다르면 true를 반환합니다.
일치(===) 연산자: 두 값이 서로 일치하는지 비교하고, 값과 자료형 모두를 엄격하게 비교하며, 두 값이 동일한 경우에만 true를 반환합니다.
불일치(!==) 연산자: 두 값이 서로 다른지 비교하고, 값과 자료형 모두를 엄격하게 비교하며, 두 값이 다른 경우에만 true를 반환합니다.

결과 확인하기
true
true
true
false
false
false
false
true
true
true

연산자 : 논리 연산자

자바스크립트에서 논리 연산자는 조건을 결합하거나 조작하는 데 사용되는 연산자입니다.
논리 연산자를 사용하여 여러 개의 조건을 조합하거나 조건을 반전시킬 수 있습니다. 

{
    let a = 10;
    let b = 20;
    let c = 30;
    let d = 10;

    console.log(a == c - b && c > a);
    console.log(a == b && b > a);       // b가 a보다 큰것은 true지만, a와 b가 같다는 것은 false기 때문에 false로 반환된다.
    console.log(a == d || c - a > b);   // c - a > b는 false지만, a == d는 true기 때문에 true로 반환된다.
    console.log(b + d != c || a > b);
    console.log(!(a=d));

    //   연산자 우선순위 : 일반적인 산수를 연산할 때처럼 연산자에도 우선순위가 있습니다.

    //   1.()  2.단항 연산자  3.산술 연산자  4.비교 연산자  5.논리 연산자   6.대입(복합대입) 연산자
}

AND (&&) 연산자: AND 연산자는 두 조건이 모두 true일 때 true를 반환하기 때문에, 모든 조건이 만족할 때만 전체 표현식이 true가 됩니다.
OR (||) 연산자: OR 연산자는 두 조건 중 하나라도 true라면 true를 반환하기 때문에, 어느 하나의 조건이라도 만족하면 전체 표현식이 true가 됩니다.
NOT (!) 연산자: NOT 연산자는 조건을 반전시키기 때문에, true는 false로, false는 true로 변경됩니다.

결과 확인하기
true
false
true
false
false

연산자 : 삼항 조건 연산자

자바스크립트에서의 삼항 조건 연산자는 조건문을 간단하게 표현할 수 있는 방법입니다.

{
    let a = 10;
    let b = 3;

    let result = a > b ? "javascript" : "hello";
    console.log(result);
}

삼항 조건 연산자는 조건식의 결과에 따라 두 개의 값 중 하나를 선택하여 반환합니다.
기본형은 다음과 같습니다 : 조건식 ? 참일 때 값 : 거짓일 때 값

결과 확인하기
javascript