01. 변수 : 데이터 저장

변수는 데이터를 저장하는 저장소 입니다. 이 저장소에는 숫자, 문자, 함수, 객체 등을 저장할 수 있습니다.

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 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의 값에 300을 더해줌
y += 400;       // 변수 y의 값에 400을 더해줌
z += "jquery";       // 변수 z의 문자열에 "jquery"를 더해줌

document.write(x);
document.write(y);
document.write(z);
결과보기

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

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

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

function fun() {
    let x = 100;        //지역변수
    let z = "javascript";       //지역변수
    x = 200;       //지역변수 100 -> 200
    y = 300;       //전역변수 200 -> 300

    document.write("함수 안");
    document.write(x);
    document.write(y);
    document.write(z);
}

document.write("함수 밖");
document.write(x);
document.write(y);
document.write(z);
결과보기
함수 안
200
300
javascript
함수 밖
100
300
undifined

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

상수는 데이터를 저장 할 수는 있지만 변경 할 수는 없습니다. 상수(const)는 이미 선언한 상수에 대해 중복해서 선언할 수 없고, 상수의 값은 재지정할 수도 없습니다.

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

x = 300     // 변경할 수 없음
y = 400
z = "jquery"

document.write(x);      // 변수 x의 값은 100으로 출력됨
document.write(y);      // 변수 y의 값은 200으로 출력됨
document.write(z);      // 변수 z의 문자열은 "javascript"로 출력됨
결과보기

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

배열은 여러개의 데이터를 저장할 수 있는 저장소로 표현 방법도 여러가지가 있습니다.

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

객체는 키와 값으로 구성된 데이터 값을 저장합니다.

const obj = new Object();

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

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

객체를 표현하는 여섯번째 방법입니다.(객체 속에 변수)

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

객체를 표현하는 일곱번째 방법입니다.(객체 속에 함수)

const obj = {
    a : 100,
    b : [200, 300],     // 객체 속에 배열
    c : {x:400, y:500},     // 객체 속에 객체
    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.c.x);
document.write(obj.c.y);
document.write(obj.d);
obj.e();      //실행문을 재실행할 수 없으므로 document.write를 제거
obj.f();
obj.g();
결과보기
100
200
300
400
500
javascript
"자바스크립트가 실행되었습니다."
javscript"자바스크립트가 실행되었습니다."
javscript"자바스크립트가 실행되었습니다."