01. 변수 : 데이터 저장

변수는 데이터를 저장하는 저장소입니다.

{
    var x = 100;             //변수 x에 숫자 100을 저장함
    var y = 200;             //변수 y에 숫자 200을 저장함
    var z = "javascript";    //변수 z에 문자 "javascript"를 저장함
                    
    console.log(x);
    console.log(y);
    console.log(z);
}
결과 확인하기
100
200
javascript

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

변수는 데이터를 저장 할수도 있지만 변경도 가능하다.

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

    x = 300;
    y = 200;
    z = "react";

    console.log(x);
    console.log(y);
    console.log(z);
}
결과 확인하기
300
200
react

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

변수는 데이터를 저장 할수도 있지만 변경할수도 있고 추가 할수도 있다.

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

    x += 300;   // x = x + 300
    y += 400;
    z += "react";

    console.log(x);
    console.log(y);
    console.log(z);
}
결과 확인하기
400
700
javascriptreact

연산자 : 변수로 연산이 가능하다.

변수를 이용해서 연산이 가능하고, 연산에는 산술 연산자, 대입 연산자, 비교연산자, 논리 연산자, 상황 연산자가 있다

04. 변수 : 지역 변수 + 전역 변수(스코프)

변수는 함수 블록{}을 기준으로 변수의 선언 위쳉 따라 '전역 변수'와 '지역 변수'로 나뉩니다.

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

    function func(){
        x = 300;  //전역변수 let이 없으면 전역 변수  
        let y = 400;  //지역변수 let이 있으면 지역변수
        z = "javascript";  // 전역변수 새로운 변수가 생겨도 전역함수로 처리해서 보여준다.

        console.log("함수안"+x);
        console.log("함수안"+y);
        console.log("함수안"+z);  //전역함수z 로 나온다.
    }
    func();

    console.log("함수밖"+x);
    console.log("함수밖"+y);
    console.log("함수밖"+z);
}
결과 확인하기
함수안300 함수안400 함수안javascript 함수밖100 함수밖200 함수밖javascript

'전역 변수'는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만 '지역 변수'는 함수 블록{} 내에서만 사용할 수 있습니다.

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

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

{
    const x = 100;
    const y = 200;
    const z = "javascript";
    
    x = 300;         //Assignment to constant variable.
    y = 400;
    z = "react";

    console.log(x);
    console.log(y);
    console.log(z);
}
결과 확인하기
에러(안나옴)

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

배열은 여러개의 데이터를 배열한 순서대로 값을 저장한다.

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

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);    
}
결과 확인하기
100
200
javascript

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

arr[]를 없애고 간략하게 한 것이다.

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

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
}
결과 확인하기
100
200
javascript

08. 배열 : 데이터 저장(여러개): 표현방법3

new Array()를 없애고 []를 넣어 간략하게 한 것이다.

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

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
}
결과 확인하기
100
200
javascript

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

new Array()와 arr[]을 없애고 간략하게 한 것이다.

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

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
}
결과 확인하기
100
200
javascript

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

객체는 여러개의 데이터에 이름을 부여하고 그에 해당하는 값을 저장할 수 있습니다.

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

    console.log(obj[0]);
    console.log(obj[1]);
    console.log(obj[2]);
}
결과 확인하기
100
200
javascript

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

[]를 없애고 조금 간략하게 되었다(데이터에 이름을 넣었다.) 

{
    const obt = new Object();
    obj.a = 100;
    obj.b = 200;
    obj.c = "javascript";
                    
    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}
결과 확인하기
100
200
javascript

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

new Object()를 없애고 {}를 넣어 간략하게 되었다.

{
    const 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

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

obj.#를 {} 안에 넣어 간략하게 하였다.

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

    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}
결과 확인하기
100
200
javascript

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

배열 안에 객체가 들어가 있는 구조이다.

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

    console.log(obj[0].a);
    console.log(obj[0].b);
    console.log(obj[1].c);               
}
결과 확인하기
100
200
javascript

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

객체 안에 배열이 들어가 있는 구조이다.

{
    const obj = {
        a: 100,
        b: [200, 300],
        c: {x:400, y: 5000},
        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);
}
결과 확인하기
100
200
300
400
5000
javascript

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

객체 안에 변수값 저장합니다.

{
    const a = 100;
    const b = 200;
    const c = "javascript";

    const obj = {a, b, c}

    console.log(a);
    console.log(b);
    console.log(c);    
}
결과 확인하기
100
200
javascript

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

객체안에 실행문(함수)가 들어갈수 있다.

함수적용 방식 : function(){ console.log() }

{                
    const obj = {
        a:100,
        b: [200,300],
        c: "javascript",
        d: function(){
            console.log("javascript가 실행 되었습니다.");
        },
        e: function(){
            console.log(obj.c + "가 실행되었습니다.");                    
        },
        f: function(){
            console.log(this.c + "가 실행되었습니다."); //this는 자기자신을 표현할때사용
        }
    }

    console.log(obj.a);
    console.log(obj.b[0]);
    console.log(obj.b[1]);
    console.log(obj.b[2]); //undefined
    console.log(obj.c);
    obj.d()
    obj.e()
    obj.f()
        
        
    // console.log(obj.d); //(x)함수를 쓸때는 console.log까지 같이 뜨기에 이렇게쓰면안된다.
    // obj.d();  
}
결과 확인하기
100
200
300
undefined
javascript
javascript가 실행 되었습니다.
javascript가 실행 되었습니다.
javascript가 실행 되었습니다.

18. 식별자,예약자

식별자와 예약자를 정리 하였습니다.

{
    //식별자:변수명의 첫 글자에는 숫자나 특수문자가 올 수 없으나 예외적으로 특수문자 중 '_'나 '$'는 사용할 수 있습니다.
    var 1num = 10;  //X
    var %num = 10;  //X
    var _num = 10;  //O
    var $num = 10;  //O

    //예약자: 자바스크립트에서 특별한 용도를 가진 키워드를 의미하며, 변수명으로 사용할 수 없습니다.
    //자바 스크립트의 예약어
    //break, case, catch, continue, default, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, debugger, with ...
}

19. ++ 연산자 (전치,후치), 비트 연산자

'='연산자와 같이 사용이 되면 결과 값에 영향을 줍니다. 10진수를 2진수로 변경하여 구합니다.

{
    let hap, j, k, l;
    j = k = l = 1;
    hap = ++j + k++ + ++l;

    console.log(hap);  //k++는 =보다 우선순위가 늦기에 합을구할때는 적용되지않는다
    console.log(j);   
    console.log(k);   // 하지만 결과값으로는 2로나온다
    console.log(l);
}
{
    let num1 = 16, num2 = 40;
    let a = num1++;
    let b = --num2;

    console.log(a+b) // =이 된후에 값을 구하는 것이라 55가 나온다.
}
//비트 연산자 &(AND연산자), |(OR연산자), ^(XOR연산자) 10진수를 2진수로 변경하여 구함.
{
    let sum = 16;
    let num = 80;
    
    document.write(sum & num); //16과 80을 2진수로 변경해 비교했을때 두 수가 모두 1일경우에만 1로 해줍니다. 
    document.write(sum ^ num); //16과 80을 2진수로 변경해 비교했을때 두 수가 다를때 에만 1로 해줍니다. 
    document.write(sum | num); //16과 80을 2진수로 변경해 비교했을때 두 수중 하나라도 1일경우에 1로 해줍니다. 
}
결과 확인하기
5
2
2
2
16
64
80

20. 형변환 typeof

변수나 값의 자료형을 다른 자료형으로 변환하는 과정입니다.

{ 
    let x = 100, y = "200", z;
    const func = function(){}

    document.write(x);          //x값이 나옵니다.
    document.write(typeof(x));  //x는 숫자라고 알려 줍니다.
    document.write(y);          // y는 ""사이에 있으므로 문자입니다.
    
    document.write("
");

    document.write(typeof(y)); // y는 ""사이에 있으므로 문자입니다.
    y = Number (y);            // y를 숫자로 바꿔 주었습니다.
    document.write(typeof(y)); // y 가 숫자로 바뀌었습니다.

    document.write("
");
    
    document.write(z);          //없는값이므로 nudefined가 뜹니다.
    document.write(typeof(z));  //없는값이므로 nudefined가 뜹니다.
    document.write(func);       // 값이 나온다
    document.write(typeof(func));     //함수라고 알려 줍니다
}
결과 확인하기
100number200
stringnumber
nudefinednudefinedfunction(){}function

00.연산자

{
    const a = 500;
    const b = 1000;
        
    연산자
    console.log(a + b)
    console.log(a - b)
    console.log(a > b)
    console.log(a * b)
    console.log(a / b)
    console.log(a % b)                           
}
결과 확인하기
1500
-500
false
500000
0.5
500