데이터 저장하기
자바스크립트에서 데이터를 저장하는 종류에는 변수 데이터 저장하기, 상수 데이터 저장하기, 배열 데이터 저장하기, 객체 데이터 저장하기가 있습니다.
먼저 순서 대로 알아보겠습니다.
변수
- 변수는 데이터를 저장하는 저장소입니다.
- 변수는 데이터를 저장할 수도 있지만 변경도 가능합니다.
- 변수는 저장된 기존 데이터에 추가도 가능합니다.
데이터 저장하기
See the Pen Untitled by dongjin6539 (@dongjin6539) on CodePen.
데이터 변경하기
See the Pen Untitled by dongjin6539 (@dongjin6539) on CodePen.
데이터 추가하기
See the Pen Untitled by dongjin6539 (@dongjin6539) on CodePen.
상수
- 상수는 데이터를 저장하는 저장소입니다.
- 상수는 데이터 변경이 안됩니다.
- 상수(const)는 이미 선언한 상수에 대해 중복 선언이 불가능하며 상수의 값을 재지정 할 수도 없습니다.
데이터 저장하기
See the Pen Untitled by dongjin6539 (@dongjin6539) on CodePen.
배열
- 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이다.
- 배열을 표현하는 방법에는 다양한 표현 방법이 있습니다.
- 배열할 때 나열되어 있는 값 순서는 0번부터 있는 것으로 확인하면 됩니다.
표현 방법 1
let arr = new Array( );
arr[키1] = 값1;
arr[키2] = 값2;
arr[키3] = "문자값1";
document.write(arr[키1]); → 값1
document.write(arr[키2]); → 값2
document.write(arr[키3]); → 문자값1
See the Pen Untitled by dongjin6539 (@dongjin6539) on CodePen.
표현 방법 2
let arr = new Array(값1, 값2, "문자값1");
document.write(arr[0]); → 값1
document.write(arr[1]); → 값2
document.write(arr[2]); → 문자값1
See the Pen Untitled by dongjin6539 (@dongjin6539) on CodePen.
표현 방법 3
let arr = [ ];
arr[키1] = 값1;
arr[키2] = 값2;
arr[키3] = "문자값1";
document.write(arr[키1]); → 값1
document.write(arr[키2]); → 값2
document.write(arr[키3]); → 문자값1
See the Pen 배열 : 데이터 저장하기 표현방법 3 by dongjin6539 (@dongjin6539) on CodePen.
표현 방법 4
let arr = [값1, 값2, "문자값1"];
document.write(arr[0]); → 값1
document.write(arr[1]); → 값2
document.write(arr[2]); → 문자값1
See the Pen 배열 : 데이터 저장하기 표현방법 4 by dongjin6539 (@dongjin6539) on CodePen.
객체
- 여러 개의 데이터를 하나의 변수에 저장하고 데이터가 추가되면 추가된 데이터를 식별해서 가져올 수 있다.
- 객체 표현하는 방법에는 다양한 표현 방법이 있습니다.
표현 방법 1
배열 형식으로도 입력할 수 있다.
let obj = new Object( );
obj[키1] = 값1;
obj[키2] = 값2;
obj[키3] = "문자값1";
document.write(obj[키1]); → 값1
document.write(obj[키2]); → 값2
document.write(obj[키3]); → 문자값1
See the Pen Untitled by dongjin6539 (@dongjin6539) on CodePen.
표현 방법 2
let obj = new Object( );
obj.키1 = 값1;
obj.키2 = 값2;
obj.키3 = "문자값1";
document.write(obj.키1); → 값1
document.write(obj.키2); → 값2
document.write(obj.키3); → 문자값1
See the Pen 객체 : 데이터 저장하기 표현방법 2 by dongjin6539 (@dongjin6539) on CodePen.
표현 방법 3
let obj = { };
obj.키1 = 값1;
obj.키2 = 값2;
obj.키3 = "문자값1";
document.write(obj.키1); → 값1
document.write(obj.키2); → 값2
document.write(obj.키3); → 문자값1
See the Pen 객체 : 데이터 저장하기 표현방법 3 by dongjin6539 (@dongjin6539) on CodePen.
표현 방법 4
let obj = {키1:값1, 키2:값2, 키3:"문자값1"};
document.write(obj.키1); → 값1
document.write(obj.키2); → 값2
document.write(obj.키3); → 문자값1
See the Pen 객체 : 데이터 저장하기 표현방법 4 by dongjin6539 (@dongjin6539) on CodePen.
표현 방법 5
배열 안에 객체가 있는 방법
let obj = [
{키1:값1, 키2:값2},
{키3:"문자값1"};
]
document.write(obj[0].키1); → 값1
document.write(obj[0].키2); → 값2
document.write(obj[1].키3); → 문자값1
See the Pen 객체 : 데이터 저장하기 표현방법 5 by dongjin6539 (@dongjin6539) on CodePen.
표현 방법 6
객체 안에 배열이 있는 방법
let obj = {
키1:값1,
키2: [값2, 값3],
키3: {x:값4, y:값5},
키4: "문자값1",
}
document.write(obj.키1); → 값1
document.write(obj.키2[0]); → 값2
document.write(obj.키2[1]); → 값3
document.write(obj.키3.x); → 값4
document.write(obj.키3.y); → 값5
document.write(obj.키4); → 문자값1
See the Pen 객체 : 데이터 저장하기 표현방법 6 by dongjin6539 (@dongjin6539) on CodePen.
표현 방법 7
키 값을 대신해서 변수를 입력시키는 방법
let 키1 = 값1;
let 키2 = 값2;
let 키3 = "문자값1";
let obj = {키1, 키2, 키3};
document.write(키1); → 값1
document.write(키2); → 값2
document.write(키3); → 문자값1
See the Pen 객체 : 데이터 저장하기 표현방법 7 by dongjin6539 (@dongjin6539) on CodePen.
표현 방법 8
함수 입력시키는 방법, 함수 안에 다른 키 값과 문자를 입력
let obj = {
키1: 값1,
키2: [값2, 값3],
키3: "문자값1",
키4: function( ){
console.log("문자값2가 실행되었습니다.");
},
키5: function( ){
console.log(obj.키3 + "가 실행되었습니다.");
},
키6: function( ){
console.log(this.키3 + "가 실행되었습니다.");
}
}
console.log(obj.키1); → 값1
console.log(obj.키2[0]); → 값2
console.log(obj.키2[1]); → 값3
console.log(obj.키3); → 문자값1
obj.키4( ); → 문자값2가 실행되었습니다.
obj.키5( ); → 문자값1가 실행되었습니다.
obj.키6( ); → 문자값1가 실행되었습니다.
See the Pen 객체 : 데이터 저장하기 표현방법 8 by dongjin6539 (@dongjin6539) on CodePen.
참고 홈페이지
https://dongjin6539.github.io/web2023/javascript/javascript01.html
