Javascript

01. var 변수 : 데이터 저장

변수는 데이터를 저장하는 저장소이다. 이 저장소에는 숫자, 문자, 함수, 객체 등을 저장할 수 있다.
var를 이용한 변수 선언방법은 동일한 변수의 중복 선언이 가능하다. 이러한 점 때문에 오류가 생기는 일이 발생하여 let을 이용한 변수 선언 방법이 새로 생겨났다.

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

    document.write(x);
    document.write(y);
    document.write(z);
}

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

변수는 데이터 저장 뿐만아니라 변경도 가능하다. 이때 데이터가 변경되면서 기존 데이터는 사라진다.
let은 var와 같은 변수 선언 기능을 가지고 있으나 var와 달리 이미 선언한 변수에 대하여 중복 선언이 "불가능" 하다.

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

    x = 300;        //변수  x의 값이 100에서 300으로 변경됨
    y = 400;        //변수  y의 값이 200에서 400으로 변경됨
    z = "jquery";    //변수  z의 값이 "javascript"에서 "jquery"으로 변경됨

    document.write(x);
    document.write(y);
    document.write(z);
}

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

변수는 데이터를 추가하는 것이 가능하다.

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

    x += 300;        //변수  x의 값이 100 + 300이 되어 값은 400이 된다.
    y += 400;        //변수  x의 값이 200 + 400이 되어 값은 600이 된다.  (- +,-,*,/ 모두 가능)
    z += "jquery";    //변수  z의 값이 "javascript" + "jquery"이 되어 값은 javascriptjquery가 된다.

    // x += 300은 x = x + 300과 같은 식이다 : **오른쪽 값을 왼쪽 변수에 대입시킨다고 봐야함(수학과는 다르다.)

    document.write(x);
    document.write(y);
    document.write(z);
}

04. 변수의 종류 : 지역 변수 + 전역변수

변수는 어디에 쓰냐에 따라 지역변수와 전역변수로 나뉜다.
전역 변수는 함수 블록 {} 밖이나 안에서 자유롭게 사용 가능하지만, 지역 변수는 함수 블록 {} 내에서만 사용 할 수 있다.

{
    let x1 = 100;        //전역변수
    let y1 = 200;

    function func(){
        let x1 = 101;               //지역변수
        let z1 = "javascript";    //지역변수
        x1 = 200;                   //지역변수 100 --> 200
        y1 = 300;                   //전역변수 200 --> 300

        document.write("함수 안");
        document.write(x1);
        document.write(y1); //전역변수지만 {}안밖으로 자유롭기 때문에 출력이 가능하다.
        document.write(z1);
    }   

    func()
    document.write("함수 밖");
    document.write(x1);
    document.write(y1);
    document.write(z1);  //undifined - 지역변수라서 함수 밖에서는 출력이 불가하다.
}

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

상수(const)는 이미 선언한 상수를 중복해서 선언할 수 없고, 상수에 지정된 값을 변경할 수 없다.
즉 데이터를 변경하거나 중복하는 것이 "불가능"하다.

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

    //x = 300;      //상수는 데이터를 변경할 수 없다.
    //y = 400;
    //z = "jquery";

    document.write(x);
    document.write(y);
    document.write(z);
}

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

배열은 여러개의 데이터를 순차적으로 저장할 수 있는 저장소이다. 보통 상수를 사용해서 표현한다.
배열의 기본 문법 : const(let으로 선언해도 무방) arr = new Array();
[] = 배열 {} = 블록

{
    const arr = new Array();

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

    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
}

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

()안에 한 번에 값을 선언해주는 약식 방법이다.

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

    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
}

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

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

    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
}

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

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

    document.write(arr[0]);
    document.write(arr[1]);
    document.write(arr[2]);
}

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

객체는 키와 값으로 구성된 데이터 값을 저장한다.
객체의 데이터는 '이름 : 값'의 쌍으로 이루어져 있으며 이를 속성(properties)이라 칭한다.

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

    document.write(obj[0]);
    document.write(obj[1]);
    document.write(obj[2]);
}

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

{
    const obj = new Objext();
    obj.a = 100;
    obj.b = 200;
    obj.c = "javascript";

    document.write(obj.a);
    document.write(obj.b]);
    document.write(obj.c);
}

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

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

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

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

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

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

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

객체는 키와 값으로 구성된 데이터 값을 저장한다. 객체 안에 배열과 객체를 저장할 수 있다.

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

document.write(obj[0].a);
document.write(obj[0].b);
document.write(obj[1].c);
}

15. 객체 : 데이터 저장(키와 값) : 표현방법6 - 객체 속의 배열 **

가장 많이 사용하는 표현 방법으로 객체 안에 배열을 저정할 수 있다.

{
    const obj = {
        a: 100,
        b: [200, 300],
        c: {x:400, y:500},
        d: "javascript"
    }

    document.write(obj.a);
    document.write(obj.b[0]);
    document.write(obj.b[1]);
    document.write(obj.c.x);
    document.write(obj.c.y);
    document.write(obj.d);
}

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

react에서 많이 사용하며 객체 속에 변수를 저장할 수 있다.

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

    const obj = {a, b, c}  //즉 객체를 만들어서 변수를 객체에 넣었다고 볼 수 있다.

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

17. 객체 : 데이터 저장(키와 값) : 표현방법8 - 객체 속에 함수 **

객체 = object

{
    const obj = {
        a : 100,
        b : [200, 300],
        c : {x:400, y:500}, //배열은 나오지만 객체를 정확히 명시하지 않아 값이 object가 뜸. 즉 c의 값이 x인지 y인지 또다른 값인지를 인식하지 못함.
        d : "javascript",
        e : function(){
            document.write("자바스크립트가 실행되었습니다.");
        },
        f : function(){
            document.write(obj.d + "가 실행되었습니다.");
        },
        g : function(){
            document.write(this.d + "가 실행되었습니다.");
        }
    }

    document.write(obj.a);
    document.write(obj.b[0]);
    document.write(obj.b[1]);
    document.write(obj.b);
    document.write(obj.c.x);
    document.write(obj.c.y);
    document.write(obj.c);
    document.write(obj.d);
    obj.e();  //이미 위에 함수에서 출력을 실행시켰기 때문에 document.write()를 빼야 한다.
    obj.f();
    obj.g();
}