“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
728x90
자바스크립트은 웹을 동적인 구현이 가능하게 하는 언어입니다.
동적인 구현이 이루어지기위해서는 변수에 데이터를 저장하는 것이 기본적이 중요한 역활을 하게 됩니다.
데이터를 저장하는 방법은 다양해 공부가 필요한 부분입니다.
간단하게 변수, 상수 배열 객체 별로 나누어지지만 그안에서 여러 가지 방법이 있습니다.
01.변수 : 데이터 저장
변수는 데이터를 저장하는 저장소입니다.
예전에는 var로 변수를 선언했지만 요즘은 let을 사용하는 경우가 많습니다.
{
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 |
변수에 데이터를 저장하여 선언하면 변수를 통해 데이터를 출력하는 방식입니다.
'var x = 100;'은 변수 x에 숫자 100을 저장함을 'console.log(x)'는 x의 값을 console로 출력함을 의미합니다.
02. 변수 : 데이터 저장 + 데이터 변경
변수는 데이터를 저장할 수도 있지만 변경도 가능합니다.
{
let x = 100;
let y = 200;
let z = "javascript"
x = 300;
y = 200;
z = "react";
console.log(x);
console.log(y);
console.log(z);
}
| 결과 : 300 200 react |
변수을 선언하고 변경할 수 있는데 이때 다시 변수를 선언하는 var나 let을 사용하지 않고 'x = 300;'으로 변수의 데이터를 변경할 수 있습니다. 변수를 다시 선언하게 되면 오류가 나기때문에 주의 해야합니다.
🤔var와 let의 차이
var는 데이터를 두번 저장되게되면 오류메세지 없이 출력이 됩니다.
하지만 let은 데이터를 두번 저장하게 되면 오류 메세지가 출력되는 것을 볼 수 있습니다.
03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가
변수는 데이터를 저장할 수도 있지만 변경도, 추가도 가능하다.
{
let x = 100;
let y = 200;
let z = "javascript";
x += 300; // x = x + 300
y += 400;
z += "react";
console.log(x);
console.log(y);
console.log(z);
}
| 결과 : 400 600 javascriptreact |
let x = 100으로 변수에 데이터를 선언 후 데이터를 추가 할 수 있는데 이 때 'x += 으로 300'을 추가 하게되면 'console.log'로 출력시 100+300이 된 값이 출력됩니다
x +=300은 x = x + 300라는 뜻입니다
04. 상수 : 데이터 저장 + 데이터 변경(x)
상수는 데이터 저장이 가능하나 변경은 불가능합니다.
{
const x = 100;
const y = 200;
const z = "javascript"
// x += 300; // Assignment to constant variable.
// y += 400;
// z += "react";
console.log(x);
console.log(y);
console.log(z);
}
| 결과 : 100 200 javascript |
상수는 데이터를 저장 할 수 있지만 변경 할수 없는 데이터 형으로 만약 x += 으로 데이터를 추가한다면 ‘Assignment to constant variable.’라는 창이 뜨면서 결과가 뜨지 않습니다 상수를 사용할 땐 데이터를 변경, 추가 할 필요없을 상황에서 사용하는 것이 좋습니다.
05. 배열 : 데이터 저장 여러개: 표현 방법1
배열은 데이터를 배열요소(element)로 저장하고 인덱스(index)로 찾아내는 정렬된 값의 집합입니다.
배열안에 데이터 여러개를 저장하고 그걸 검색해서 꺼낸다고 생각하시면 됩니다.
배열안에 저장하고 출력하는 방법에는 여러개가 있습니다.
{
const arr = new Array();
arr[0] = 100; // 0은 인덱스, 100은 엘레멘트입니다.
arr[1] = 200; // 1은 인덱스, 200은 엘레멘트입니다.
arr[2] = "javascript" // 2은 인덱스, "javascript"은 엘레멘트입니다.
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
| 결과 : 100 200 javascript |
배열에서 데이터를 선언할 때 'arr[0] = 100;'에서의 0은 인덱스로 값을 찾을 수 있는 번호입니다. 배열의 0번째 인덱스에 100이라는 숫자를 저장하여 console.log(arr[0]);로 출력하게 됩니다.
06. 배열 : 데이터 저장 여러개: 표현 방법2
자바스크립트에서는 중복되는 코드를 한줄로 줄이는 속기법들이 있습니다.
데이터를 저장하는 코드도 중복된다면 줄일 수 있습니다.
위 방법에는 중복되는 값 배정 코드를 한줄로 줄일 수있습니다.
{
const arr = new Array(100, 200, "javascript");
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
| 결과 : 100 200 javascript |
new Array로 받은 배열의 요소들은 자연스럽게 순서가 정해져 있어 출력할때 0부터 시작 된다는 것을 기억해야합니다.
07. 배열 : 데이터 저장 여러개: 표현 방법3
위 방법에서 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 |
new Array로 배열 선언하는 방법이 아닌 []로 배열을 선언하여 그 안에 값을 넣는 방식입니다.
08. 배열 : 데이터 저장 여러개: 표현 방법4
위 방법에서 중복되는 값 배정 코드와 new Array로 배열 선언하는 코드를 줄여 한줄로 만들 수 있다.
{
const arr = [100, 200, "javascript"];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
| 결과 : 100 200 javascript |
값을 선언하여 저장하는 코드를 모두 없애고 배열과 데이터를 한번에 선언하고 저장하는 방법입니다. 지금까지 중에 코드가 가장 짧은 방식입니다.
09. 객체 : 데이터 저장(키와값) : 표현방법1
지금까지 배열에서는 아이템에 대한 식별자(검색어)를 인덱스라고 했다면 객체에서의 식별자는 key라고 합니다.
배열과 비슷한 방법으로 표현하지만 new object를 선언하여 데이터를 저장하는 방법입니다.
{
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 |
객체에서는 object라는 단어를 사용하여 객체에 저장하고 있습니다. 배열과 비슷한 모습을 하였습니다.
10. 객체 : 데이터 저장(키와값) : 표현방법2
객체에서의 변수 선언은 []을 사용하지만 []가 없이 선언하는방법도 있습니다.
{
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
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"}
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
| 결과 : 100 200 javascript |
13. 객체 : 데이터 저장(키와값) : 표현방법5
변수 선언할 때 배열안에 다른 배열과 객체를 넣어 표현하는 방법도 있습니다.
{
const obj = [
{a: 100, b: 200},
{c: "javascript"}
];
console.log(obj[0].a); // 첫번째 배열에 a의 객체를 출력
console.log(obj[0].b);
console.log(obj[1].c);
}
| 결과 : 100 200 javascript |
14. 객체 : 데이터 저장(키와값) : 표현방법6
반대로 변수 선언할 때 객체 안에 다른 배열과 객체를 넣어 표현할 수도 있습니다.
{
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";
const obj = {a, b, c};
console.log(a);
console.log(b);
console.log(c);
}
| 결과 : 100 200 javascript |
16. 객체 : 데이터 저장(키와값) : 표현방법8
함수를 객체에 저장하여 출력하는 방식으로 객체의 값을 함수로 다시 불러 낼 수도 있습니다.
{
//함수 내용 포함
const obj = {
a: 100,
b: [100,300],
c: "javascript",
d: function(){
console.log("javascript가 실행되었습니다.") // 함수 출력1
},
e: function(){
console.log(obj.c+"가 실행되었습니다.") // 함수 출력2
},
f: function(){
console.log(this.c+"가 실행되었습니다.") // 함수 출력3
}
}
console.log(obj.a);
console.log(obj.b[0]);
console.log(obj.b[1]);
// console.log(obj.b[2]); // undefined뜸
console.log(obj.c);
// console.log(obj.d); // ' document.~' 까지 전부다 문자로 인식
obj.d(); // 객체를 출력
obj.e();
obj.f();
}
| 결과 : 100 100 100 javascript javascript 실행되었습니다. javascript 실행되었습니다. javascript 실행되었습니다. |