Leeyanggoo
[JS] 자바스크립트 데이터 저장하기 : 변수 배열 객체 본문
01. 변수 : 데이터 저장
변수는 데이터를 저장하는 저장소다.
var x = 100; //변수 x에 숫자 100을 저장함
var y = 200; //변수 y에 숫자 200을 저장함
var z = "javascript"; //변수 z에 문자 "javascript"를 저장함
console.log(x); //100
console.log(y); //200
console.log(z); //javascript
변수는 3가지 선언자가 있다.
변수는 var, let, const 3가지의 선언자가 있다.
'var'은 동일한 변수로 재선언도 가능하고, 이미 선언된 변수에 새로운 값을 재할당 할 수 있다.
'let'은 동일한 변수로 재선언은 불가능하지만, 이미 선언된 변수에 새로운 값을 재할당 할 수 있다.
'const'는 동일한 변수로 재선언도 불가능하고, 이미 선언된 변수에 새로운 값도 재할당 할 수 없다.
'var'은 재선언에 대한 문제 때문에 잘 쓰이지 않고, 상황에 따라 let과 const를 사용하는 것이 좋다.
변수는 var(선언자) x(변수) = 100(데이터)로 변수에 데이터를 저장한다.
02. 변수 : 데이터 저장 + 데이터 변경
변수는 데이터를 저장할 수도 있지만 변경도 가능하다.
let x = 100;
let y = 200;
let z = "javascript";
x = 300; //데이터 변경
y = 200;
z = "react";
console.log(x); //100
console.log(y); //200
console.log(z); //javascript
선언된 변수에 값을 재할당 할 수 있다.
x, y, z에 각각 데이터를 저장했어도 이후의 재선언으로 변경이 가능하다.
다만 let은 데이터의 변경이 아닌 let x = 300;과 같은 동일 변수의 재선언은 불가능하다.
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); //400
console.log(y); //600
console.log(z); //javascriptreact
연산자를 통해 데이터를 추가할 수 있다.
변수를 이용해서 연산이 가능하다.
연산자에는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자 등이 있다.
04. 상수 : 데이터 저장 + 데이터 변경(X)
상수는 데이터 저장은 가능하나 변경은 불가능하다.
const x = 100;
const y = 200;
const z = "javascript";
x = 300;
y = 400;
z = "react"; //상수에 저장한 값은 바꿀 수 없습니다.
console.log(x);
console.log(y);
console.log(z); //undefined
상수를 정하는 선언자 'const'
const를 통해 선언한 변수는 '상수'라고 하며 let과 같이 중복 선언이 불가능하다.
또한 상수는 값을 재지정할 수도 없다.
05. 배열 : 데이터 저장(여러 개) : 표현방법1
배열은 여러 데이터를 저장한다.
const arr = new Array();
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript";
console.log(arr[0]); //100
console.log(arr[1]); //200
console.log(arr[2]); //javascript
다양한 데이터를 저장하는 배열
선언자 const로 변수 arr에 배열 생성자 'Array()'로 배열을 저장한다. 'new'는 변수의 타입을 정하는 자바스크립트 연산자다.
배열에서의 대괄호([])에 넣는 숫자는 배열의 위치를 가리키는 숫자이며, 인덱스(index)라고 한다.
인덱스는 0부터 시작하며 양의 정수만 가능하다.
06. 배열 : 데이터 저장(여러 개) : 표현방법2
저장된 여러 개의 데이터를 한 줄에 나타낸다.
const arr = new Array(100, 200, "javascript");
console.log(arr[0]); //100
console.log(arr[1]); //200
console.log(arr[2]); //javascript
저장된 데이터를 표시하는 여러 방법이 있다.
각각의 인덱스에 저장된 데이터를 일일이 나열하지 않고 배열 생성자 Array()안에 나타내면 코드가 간결해진다.
07. 배열 : 데이터 저장(여러 개) : 표현방법3
대괄호([])는 배열을 만드는 기호이다.
const arr = [];
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript";
console.log(arr[0]); //100
console.log(arr[1]); //200
console.log(arr[2]); //javascript
배열 선언을 간단히 해보자.
배열을 선언했던 new Array()는 대괄호([])로 함축적이고 직관적으로 표현이 가능하다.
08. 배열 : 데이터 저장(여러 개) : 표현방법4
배열을 좀 더 직관적으로 표현한다.
const arr = [100, 200, "javascript"];
console.log(arr[0]); //100
console.log(arr[1]); //200
console.log(arr[2]); //javascript
가장 직관적인 표현방법
배열 생성자 Array()의 괄호 안에 데이터를 저장했듯이, 대괄호([]) 안에 데이터를 나타내는 것도 가능하다.
코드는 함축적이고 직관적으로 적어야 유지 및 보수에 좋기 떄문에 최대한 그렇게 적을 수 있도록 노력해야 한다.
09. 객체 : 데이터 저장(키와 값) : 표현방법1
객체의 키에 배열 방식 적용이 가능하다.
const obj = new Object();
obj[0] = 100;
obj[1] = 200;
obj[2] = "javascript";
console.log(obj[0]); //100
console.log(obj[1]); //200
console.log(obj[2]); //javascript
객체는 키(key)와 값(value)으로 이뤄진다.
객체는 키로 값을 불러온다. 그 키와 값들은 속성(property)이라고 부른다.
객체 변수로 선언된 obj는 배열 방식([])을 키로 이용하여 값을 저장하고 불러올 수 있다.
10. 객체 : 데이터 저장(키와 값) : 표현방법2
객체는 키를 호출할 때 "변수명.키"로 한다.
const obj = new Object();
obj.a = 100;
obj.b = 200;
obj.c = "javascript";
console.log(obj.a); //100
console.log(obj.b); //200
console.log(obj.c); //javascript
객체의 키를 부르는 방법
앞서 배열은 대괄호([])에 인덱스를 넣어 데이터를 불러왔다면, 객체는 "변수명.키"로 데이터를 불러온다.
11. 객체 : 데이터 저장(키와 값) : 표현방법3
중괄호({})는 객체를 만드는 기호이다.
const obj = {};
obj.a = 100;
obj.b = 200;
obj.c = "javascript";
console.log(obj.a); //100
console.log(obj.b); //200
console.log(obj.c); //javascript객체 선언을 간단히 해보자.
앞서 배열의 선언을 대괄호([])로 했듯이, 객체는 중괄호({})로 표현한다. 'new Object'보다 더 직관적인 표현 방법이다.
12. 객체 : 데이터 저장(키와 값) : 표현방법4
객체의 키와 값은 콜론(:)으로 한 쌍으로 표현할 수 있다.
const obj = {a:100, b:200, c:"javascript"};
console.log(obj.a); //100
console.log(obj.b); //200
console.log(obj.c); //javascript
객체 속성의 표현방법
객체는 키와 값의 구조로 되어 있으며 이들을 속성(property)이라고 부른다.
속성은 콜론(:)을 기준으로 왼쪽에 키, 오른쪽에 값으로 '키:값'으로 표현한다.
13. 객체 : 데이터 저장(키와 값) : 표현방법5 : 배열 안에 객체
배열 안에 객체가 들어간 형식의 데이터 저장도 가능하다.
const obj = [
{a: 100, b: 200},
{c: "javascript"}
];
console.log(obj[0].a); //100
console.log(obj[0].b); //200
console.log(obj[1].c); //javascript
배열 안에 들어간 객체를 호출하는 방법
배열 안에 들어간 객체 하나하나가 배열의 인덱스라고 본다.
배열을 먼저 호출한 뒤([])에 객체의 키로 저장된 값(키:값)을 부른다([].키).
14. 객체 : 데이터 저장(키와 값) : 표현방법6 : 객체 안에 배열, 중첩 객체
객체는 여러 데이터 타입이 중첩된 데이터의 저장이 가능하다.
const obj = {
a: 100,
b: [200,300],
c: {x:400, y:500},
d: "javascript"
}
console.log(obj.a); //100
console.log(obj.b[0]); //200
console.log(obj.b[1]); //300
console.log(obj.c.x); //400
console.log(obj.c.y); //500
console.log(obj.d); //javascript
중첩된 데이터 타입을 호출하는 방법
객체 속에 들어간 여러 중첩된 데이터 타입을 호출할 땐 HTML의 부모, 자식 요소를 생각하면 된다.
처음 지정하는 객체를 부모 요소라 보고 그 안에 들어간 속성이나 배열, 객체를 자식 요소라고 생각한다.
class 안의 id를 지정할 때 "#class .id"라고 하듯이 "변수명.키"로 시작해서 그 안에 속한 데이터를 한 번 더 부르는 것이다. (변수명.키[] 또는 변수명.키.키)
15. 객체 : 데이터 저장(키와 값) : 표현방법7
객체는 변수를 속성으로 저장할 수 있다.
const a = 100;
const b = 200;
const c = "javascript";
const obj = {a, b, c};
console.log(a); //100
console.log(b); //200
console.log(c); //javascript
속성이 변수인 객체 호출 방법
앞서 변수로 선언된 변수명을 객체에 저장하고 그 변수명만 호출하면 값을 볼 수 있다.
16. 객체 : 데이터 저장(키와 값) : 표현방법8
객체의 속성으로 함수가 들어갈 수 있다. 함수를 호출할 땐 다른 문법이 필요하다.
const j = "javascript";
const obj = {
a: 100,
b: [200, 300],
c: "javascript",
d: function(){
console.log("javascript가 실행되었습니다.");
},
e: function(){
console.log(obj.c + "가 실행되었습니다."); //(obj.c = j = "javascript")
},
f: function(){
console.log(this.c + "가 실행되었습니다.") //this.는 자신이 속한 객체를 가리킨다.
}
}
console.log(obj.a); //100
console.log(obj.b[0]); //200
console.log(obj.b[1]); //300
console.log(obj.b[2]); // undefined 정의할 수 없는, 값이 지정되지 않은 경우
console.log(obj.c); //javascript
console.log(obj.d); //ƒ (){console.log("javascript가 실행되었습니다.");}
obj.d(); //javascript가 실행되었습니다.
obj.e(); //javascript가 실행되었습니다.
obj.f(); //javascript가 실행되었습니다.
함수 호출 방법
함수의 생성자는 function()으로 실행문을 통해 호출한다. 실행문은 ()를 붙여써야 한다.
실행문을 쓰지 않은 'console.log(obj.d);'의 경우
ƒ (){
console.log("javascript가 실행되었습니다.");
}
라는 의도하지 않은 데이터 값이 도출된다.
불러오려는 값 중에 이미 존재하는 속성 값이 있다면, 해당 속성 값을 지닌 변수나 객체, this를 통해 대체할 수 있다.
