자바스크립트 : 데이터 저장하기

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를 300으로 변경
y = 400;    // y를 400으로 변경
z = "jquery"    // z를 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 x1 = 100;    // 전역변수
let y1 = 200; 

function func(){
    let x1 = 100;    // 지역변수
    let z1 = "javascript";   //지역변수
    x1 = 200;   // 지역변수 x1의 100이 200으로 변경됨
    y1 = 300;   // 지역변수에 y1이 없으면 전역변수 y1의 값을 바꿈

    document.write("함수 안");
    document.write(x1);
    document.write(y1);
    document.write(z1); 
}

document.write("함수 밖");
document.write(x1);
document.write(y1);
document.write(z1);

결과보기

함수 안
200
300
Javascript

함수 밖
100
300
javascript

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

상수는 데이터를 저장 할 수 있지만 변경은 하지 못한다.

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

표현 방법 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

표현 방법 2

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

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

결과보기

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

표현 방법 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

표현 방법 4

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

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

결과보기

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

객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합

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

표현 방법 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

표현 방법 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

표현 방법 4

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

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

결과보기

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

표현 방법 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

표현 방법 6

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

document.write(obj.a);
document.write(obj.b);
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

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

표현 방법 8

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.b);
document.write(obj.c.x);
document.write(obj.c.y);
document.write(obj.c); //객체를 선택해 달라고 나온다.
document.write(obj.d);
(obj.e()); // 객체에서 함수를 실행 시킬 땐 document를 작성하지 않는다.
(obj.f());
(obj.g());

결과보기

100
200
300
200,300
400
500
[object Object]
javascript
자바스크립트가 실행되었습니다.
javascript가 실행되었습니다.
javascript가 실행되었습니다.