자바스크립트에서 데이터를 저장하는 방법은 여러 가지가 있습니다.
변수(variables): 자바스크립트에서 변수는 데이터를 저장하기 위해 가장 일반적으로 사용되는 방법입니다. 변수를 선언하고 값을 할당할 수 있습니다. 변수는 숫자, 문자열, 불린 값, 배열, 객체 등 다양한 데이터 타입을 저장할 수 있습니다.
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. 변수 : 데이터 저장 + 데이터 변경
변수는 데이터를 저장 할수도 있지만 변경도 가능합니다.
var x = 100;
var y = 200;
var z = "javascript";
x = 300; //변수 x를 숫자 300으로 변경함
y = 200; //변수 y를 숫자 200으로 변경함
z = "react"; //변수 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; // y = y + 400
z += "react"; // z = z + "react"
console.log(x)
console.log(y)
console.log(z)
// 결과 : 400, 600, javascriptreact*연산자 : 변수로 연산이 가능합니다
변수를 이용해서 연산이 가능하고, 연산에는 산술연산자, 대입연산자, 비교연산자, 논리 연산자, 비트 연산자, 삼향 연산자가 있습니다.
04. 상수 : 데이터 저장 + 데이터 변경(x)
상수는 데이터 저장은 가능하나 변경은 불가합니다. 상수(const)는 이미 선언한 상수에 대해 중복 선언이 불가능 하며 상수의 값을 재지정 할 수도 없습니다. const로 지정된 상수를 변경하였으나 오류 메세지 Assignment to constant variable.로 변경하지 못하였습니다.
const x = 100;
const y = 200;
const z = "javascript";
//x = 300; //Assignment to constant variable.
//y = 400; //Assignment to constant variable.
//z = "react"; //Assignment to constant variable.
console.log(x);
console.log(y);
console.log(z);
// 결과 : 100, 200 , javascript
배열(arrays): 배열은 여러 개의 값을 저장하기 위한 자료 구조입니다. 배열에는 인덱스를 사용하여 값을 저장하고 검색할 수 있습니다. 배열은 동일한 데이터 타입의 값을 저장하는 데 가장 적합합니다.
05. 배열 : 데이터 저장(여러개): 표현방법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]);
// 결과 : 100, 200, javascript
06. 배열 : 데이터 저장(여러개): 표현방법2
배열의 첫 번째 요소는 100이고, 두 번째 요소는 200이며, 세 번째 요소는 javascript입니다.
생성된 배열이 arr 변수에 할당됩니다.
const arr = new Array(100, 200, "javascript")
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
// 결과 : 100, 200, javascript
07. 배열 : 데이터 저장(여러개): 표현방법3
배열은 데이터를 여러개 저장할 수 있습니다.
const arr은 빈 배열을 선언합니다.
arr[0] = 100은 배열의 첫 번째 요소에 100을 할당합니다.
arr[1] = 200은 배열의 두 번째 요소에 200을 할당합니다.
arr[2] = "javascript"은 배열의 세 번째 요소에 "javascript"를 할당합니다.
new Array가 빠지고 식을 간결하게 지정합니다.
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
08. 배열 : 데이터 저장(여러개): 표현방법4
배열 안에 값을 지정하여 식을 더욱 단순화 하였습니다.
const arr은 배열을 선언하고, 세 개의 요소 100, 200, "javascript"을 가지고 초기화합니다.
const arr = [100, 200, "javascript"];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
// 결과 : 100, 200, javascript
객체(objects): 객체는 이름-값 쌍을 저장하기 위한 자료 구조입니다. 객체에는 속성 이름과 값을 지정하여 값을 저장할 수 있습니다. 객체는 여러 개의 데이터 타입을 저장하는 데 적합합니다.
09. 객체 : 데이터 저장(키와 값) : 표현방법1
const obj는 새로운 객체를 선언합니다.
obj[0] = 100은 객체에 0이라는 이름의 프로퍼티를 생성하고, 해당 프로퍼티에 100을 할당합니다.
obj[1] = 200은 객체에 1이라는 이름의 프로퍼티를 생성하고, 해당 프로퍼티에 200을 할당합니다.
obj[2] = "javascript"은 객체에 2라는 이름의 프로퍼티를 생성하고, 해당 프로퍼티에 "javascript"를 할당합니다.
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"
10. 객체 : 데이터 저장(키와 값) : 표현방법2
각 데이터와 키의 값을 직접 지정합니다.
const obj는 새로운 객체를 선언합니다.
배열 0,1,2 대신 a,b,c와 같이 직접 키를 적용하여 값을 내었습니다.
다음 예시는 a, b, c라는 이름의 프로퍼티를 가진 객체를 생성하고, 각 프로퍼티에 접근하여 값을 출력하는 예시입니다.
const obj = new Object();
obj.a = 100;
obj.b = 200;
obj.c = "javascript";
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
// 결과 : 100, 200, "javascript"
11. 객체 : 데이터 저장(키와 값) : 표현방법3
각 데이터와 키의 값을 직접 지정합니다.
const obj는 빈 객체를 선언합니다.
const obj = {}; 문법은 객체를 생성하고, {} 내부에 프로퍼티를 추가하는 방법입니다. new Object() 문법과 동일한 결과를 반환합니다.
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"
12. 객체 : 데이터 저장(키와 값) : 표현방법4
각 데이터와 키의 값을 직접 지정합니다.
const obj는 객체를 선언합니다.
객체 리터럴 구문 {a:100, b:200, c:"javascript"}를 사용하여 객체를 초기화합니다.
obj.a, obj.b, obj.c를 통해 객체의 프로퍼티에 접근하여 값을 출력합니다.
const obj = {a:100, b:200, c:"javascript"};
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
// 결과 : 100, 200, "javascript"
13. 객체 : 데이터 저장(키와 값): 표현방법5 : 배열안의 객체
배열 내부에 객체를 추가하고, 배열 내부 객체의 프로퍼티에 접근하여 값을 출력하는 예시입니다.
이를 통해 객체와 배열을 혼합하여 자료구조를 구성할 수 있음을 보여줍니다.
배열 안의 순서는 ','로 구분하여 a와 b는 obj[0], c는 obj[1]이 됩니다.
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"
14. 객체 : 데이터 저장(키와 값): 표현방법6 : 객체 안의 배열
객체 안의 배열 값은 obj.b[0]과 같이 배열 안의 값을 불러줘야 합니다.
obj.b를 호출하면 [200, 300]같이 배열이 통째로 불러집니다.
객체 내부에 a, b, c, d 프로퍼티를 추가합니다.
obj.a, obj.b[0], obj.b[1], obj.c.x, obj.c.y, obj.d를 통해 객체의 프로퍼티에 접근하여 값을 출력합니다.
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"
15. 객체 : 데이터 저장(키와 값): 표현방법7
const a = 100, const b = 200, const c = "javascript"는 각각 변수 a, b, c를 선언하고 값을 할당합니다.
const obj = {a, b, c}는 객체 리터럴 내에서 각 변수 이름을 사용하여 객체 obj를 선언합니다.
객체 리터럴에서 프로퍼티의 이름을 생략하면 자동으로 변수 이름이 프로퍼티 이름으로 할당됩니다.
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"16. 객체 : 데이터 저장(키와 값): 표현방법8
함수를 이용하여 객체를 표현했습니다.
const j = "javascript"는 문자열 "javascript"를 변수 j에 할당합니다.
obj.b[2]는 배열내에 세번째 값이 없으므로 정의되지 않습니다.
함수의 값을 호출하기 위해서는 console.log가 아닌 obj.d()를 호출합니다.
a, b, c는 숫자, 배열, 문자열 값을 갖는 프로퍼티입니다.
d, e, f는 함수를 값으로 갖는 프로퍼티입니다.
함수는 실행문을 의미합니다.
const j = "javascript";
const obj = {
a: 100,
b: [200,300],
c: "javascript",
d: function(){
console.log("javascript가 실행되었습니다.");
},
e: function() {
console.log(obj.c + "가 실행되었습니다.");
// console.log(j + "가 실행되었습니다.")
},
f: function(){
console.log(this.c + "가 실행되었습니다."); //this 자기 자신을 표현하지만 여러가지 표현도 가능
}
}
console.log(obj.a);
console.log(obj.b[0]);
console.log(obj.b[1]);
// console.log(obj.b[2]); //undifined
console.log(obj.c);
// console.log(obj.d); //(x)
obj.d();
obj.e();
obj.f();
// 결과 : 100, 200, 300, javascript, javascript가 실행되었습니다., javascript가 실행되었습니다., javascript가 실행되었습니다.