Javascript : 데이터 저장하기

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 = 200;
    let z = "javascript";

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

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

결과 확인하기

400
600
"javascriptreact"

04. 상수 : 지역변수

자바스크립트에서 지역변수는 함수 내에서 선언된 변수로서, 해당 함수 내에서만 접근할 수 있는 변수를 말합니다. 지역변수는 함수가 호출될 때 생성되며, 함수가 종료되면 소멸합니다.


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

    function func(){
        let x = 300;   //지역 변수     
        let y = 400;
        z = "javascript" //전역변수

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

    console.log("함수 밖"+x)
    console.log("함수 밖"+y)
    console.log("함수 밖"+z)

05.상수 : 데이터 저장(여러개) : 표현방법1

상수는 데이터를 저장하고, 변경하고, 추가할 수 없습니다.


    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

배열은 데이터 저장 방법이 다양하다. 1-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]);

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

배열은 데이터 저장 방법이 다양하다. 1-1 보다 간략한 방법 1-2


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

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

결과 확인하기

100
200
"javascript"

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

배열은 데이터 저장 방법이 다양하다. 2-1


    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

배열은 데이터 저장 방법이 다양하다.2-1 보다 간략한 방법 2-2


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

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

결과 확인하기

100
200
"javascript"

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

객체는 데이터 저장을 키와 값이 있어야한다. 1-1


    const obj = 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

객체는 데이터 저장을 키와 값이 있어야한다. 조금 간략한 방법 1-1 보다 간략 1-2


    const obj = new Object();
    obj.a = 100;
    obj.b = 200;
    obj.c = "javascrit";

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

결과 확인하기

100
200
"javascript"

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

객체는 데이터 저장을 키와 값이 있어야한다.조금 간략한 방법 1-2 보다 간략 2-1


    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. 객체 : 데이터 저장(키와 값) : 표현방법5

객체는 데이터 저장을 키와 값이 있어야한다.조금 간략한 방법 2-1 보다 간략 2-2


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

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

    
    const x = 100;
    const arr = [100];            
    const obj = {a:100};

결과 확인하기

100
200
"javascript"

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

배열안 객체 [].a


    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

객체 안에 배열 {[]} (obj.b[])


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

결과 확인하기

100
200
300
400
500
"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

객체 안 배열 객체 함수가 들어간 값 구하기


    const j = "javascript"

    const obj = {
        a: 100,
        b: [200, 300],
        c: "javascript",
        d: function() {
            console.log ( javascrit가 실행 되었습니다.");
        },
        e: function() {
            console.log ( obj.j + "가 실행 되었습니다.");
        },
        f: function() {
            console.log ( this.c + "가 실행 되었습니다.");
        };
    };

    console.log(obj.a);
    console.log(obj.b[0]);
    console.log(obj.b[1]);
    console.log(obj.b[2]); //undefiend
    console.log(obj.c);
    console.log(obj.d); 안되는거
    obj.d();
    obj.e();
    obj.f();

결과 확인하기

100
200
300
undefiend
javascript
javascript가 실행되었습니다.
javascript가 실행되었습니다.
javascript가 실행되었습니다.

++ 식별자,예약자

식별자(Identifier)는 자바스크립트에서 변수, 함수, 클래스 등의 이름을 지정할 때 사용하는 단어나 문장입니다.

예약어(reserved words)는 자바스크립트에서 이미 사용되고 있거나 나중에 사용될 예정인 특별한 단어입니다.


    식별자

    let firstName = 'John';  // 변수명은 firstName
    function sayHello(name) {  // 함수명은 sayHello, 매개변수는 name
      console.log(`Hello, ${name}!`);
    }

    예약자

    break, case, catch, class, const, continue, debugger
    default, delete, do, else, enum, export, extends, false, finally
    for, function, if, implements, import, in, instanceof, interface
    let, new, null, package, private, protected, public, return
    static, super, switch, this, throw, true, try, typeof
    var, void, while, with, yield

결과 확인하기

연산자(전치,후치), 비트연산자

전치와 후치는 증감 연산자를 통해 수행됩니다. 증감 연산자는 변수의 값을 1 증가시키거나 감소시키는 역할을 합니다.


    {
        var score = 10;
        // score++;            
        // ++score;            
        var result = score++ 

        console.log(result,score)
    }

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

        console.log(hap);  
        console.log(j)   
        console.log(k)   
        console.log(l)   
    }

    {
        let a = 1, b = 2, c = 3, result;
        result = ++a + b++ + ++c;

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

    {
        let x= 7 , y =7, result;
        result = x < y ? ++x : y--;

        console.log(result)   
        console.log(x)        
        console.log(y)        
    }

    {
        let a,b,c, result;
        a = 20, b = 30, c = 30;

        result= a < b ? b++ : --c;

        console.log(result)
        console.log(a)
        console.log(b + c)
        console.log(c)
    }

    비트연산자

    let sum =80
    let num =16
    
    document.write(sum & num);
    document.write(sum ^ num);
    document.write(sum | num);
    document.write(sum << num);
    document.write(sum >> num);

결과 확인하기

11
11
11

5
2
2
2

8
2
3
4

7
7
6
30
20
61
30
비트연산자 결과 -- 16
64
80
5242880
0

비트연산자

비트 연산자는 컴퓨터에서 이진수(binary)를 다루는 데 사용되는 연산자로, 이진수를 비트(bit) 단위로 처리합니다.
이진수는 0과 1로 이루어진 숫자 체계이며, 컴퓨터에서 모든 데이터는 0과 1의 이진수 형태로 저장됩니다..

++ 형변환, type of

type of는 JavaScript에서 변수의 데이터 타입을 반환하는 연산자입니다. 다음과 같이 사용합니다.


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

    document.write(x);
    document.write(typeof(x));      //문자인지 숫자인지 구별 해주는  typeof
    document.write("
");

    document.write(y);
    y = Number(y);                  //우변을 좌변으로 넘긴다. 문자를 숫자로 바꾼다. 형 변환
    document.write(typeof(y));
    document.write("
");

    document.write(func);
    document.write(typeof(func));    //함수도 나온다.
    document.write("
");

결과 확인하기

100number
200number
function(){}