01. 변수 : 데이터 불러오기
변수에 데이터를 불러옵니다. let을 한 번 언급했다면 그 다음부터는 생략합니다.
{
// let x = 100;
// let y = 200;
// let z = "javascript";
let x = 100,
y = 200,
z = "javascript";
document.write(x);
document.write(y);
document.write(z);
}
결과보기
200
javascript
02. 상수 : 데이터 불러오기
상수에 데이터를 불러옵니다. const를 한 번 언급했다면 그 다음부터는 생략합니다.
{
const x = 100,
y = 200,
z = "javascript";
document.write(x);
document.write(y);
document.write(z);
}
결과보기
200
javascript
03. 배열 : 데이터 불러오기
배열에 데이터를 불러옵니다. 배열 괄호 안의 첫 번째 칸은 arr[0]부터 시작합니다.
{
const arr = [100, 200, "javascript"];
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
}
결과보기
200
javascript
04. 배열 : 데이터 불러오기 : 2차 배열
배열 안에 배열을 넣는 방식의 2차 배열이며 출력 시 arr[2][0] 이런 식으로 입력합니다.
{
const arr = [100, 200, ["javascript", "jquery"]];
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2][0]);
document.write(arr[2][1]);
}
결과보기
200
javascript
jquery
05. 배열 : 데이터 불러오기 : 갯수 구하기
배열의 갯수를 출력하며 length를 사용합니다.
{
const arr = [100, 200, "javascript"];
document.write(arr.length);
}
결과보기
06. 데이터 불러오기 : for()문
데이터 출력 시 같은 반복 작업을 하기 번거롭기 때문에 탄생한 방법입니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
// document.write(arr[0]);
// document.write(arr[1]);
// document.write(arr[2]);
// document.write(arr[3]);
// document.write(arr[4]);
// document.write(arr[5]);
// document.write(arr[6]);
// document.write(arr[7]);
// document.write(arr[8]);
// 위처럼 반복하기 귀찮아 탄생한 방법
//for(초기값, 조건식, 증감식)
/*
for(let i = 0; i < 9; i++){
document.write(arr[i]);
}
*/
// 숫자 대신 arr.length를 넣으면 데이터의 갯수가 바뀌어도 따로 변경해줄 필요 X.
for(let i = 0; i < arr.length; i++){
document.write(arr[i]);
}
}
결과보기
200
300
400
500
600
700
800
900
07. 배열 : 데이터 불러오기 : forEach()
기존의 for()문보다 더 간략화된 방법이며 3가지 인자값 출력도 가능합니다.
{
const num = [100, 200, 300, 400, 500];
//for문을 이용해서 출력
for(let i = 0; i < num.length; i++){
document.write(num[i]);
}
//forEach()를 이용해서 출력
num.forEach(function(el){
document.write(el);
});
//forEach() 3가지 인자(파라미터)값
num.forEach(function(element, index, array){
document.write(element); // 배열 안의 값 하나 출력
document.write(index); // 배열의 번호 출력
document.write(array); // 배열 안의 데이터 전부 출력
});
}
결과보기
200
300
400
500
100
200
300
400
500
100
0
100,200,300,400,500
200
1
100,200,300,400,500
300
2
100,200,300,400,500
400
3
100,200,300,400,500
500
4
100,200,300,400,500
08. 배열 : 데이터 불러오기 : for of
기존의 forEach()문보다 더 간략화된 방법입니다.
{
const arr = [100, 200, 300, 400, 500];
for(let i of arr){
document.write(i);
}
}
결과보기
200
300
400
500
09. 배열 : 데이터 불러오기 : for in
for of()문과 사용 방법에는 of 대신 in을 사용한다는 점과 출력 시 arr[i]라고 적어줘야 하는 점 외에는 차이가 없습니다.
{
const arr = [100, 200, 300, 400, 500];
for(let i in arr){
// document.write(i);
document.write(arr[i]);
}
}
결과보기
200
300
400
500
10. 배열 : 데이터 불러오기 : map()
arr. 뒤에 map을 써주는 점 빼고는 forEach()문과 사용 방법이 동일합니다.
{
const arr = [100, 200, 300, 400, 500];
//forEach
arr.forEach(function(el){
document.write(el);
console.log(el); // Chrome에서 검사(F12)에 들어간 후 console 창에서만 확인 가능
});
arr.forEach(function(element, index, array){
document.write(element);
document.write(index);
document.write(array);
});
//map() , forEach문과 큰 차이 없음
arr.map(function(el){
document.write(el);
console.log(el);
});
arr.map(function(element, index, array){
document.write(element);
document.write(index);
document.write(array);
});
}
결과보기
200
300
400
500
100
0
100,200,300,400,500
200
1
100,200,300,400,500
300
2
100,200,300,400,500
400
3
100,200,300,400,500
500
4
100,200,300,400,500
11. 배열 : 데이터 불러오기 : 펼침연산자
배열에 저장된 값들을 쉼표 없이 한 번에 출력할 수 있도록 해주는 연산자로 마침표 3개(...)로 표시합니다.
{
const num = [100, 200, 300, 400, 500];
// 기존의 방법
// document.write(num); // num을 한꺼번에 부르면 쉼표有
// document.write(num[0],num[1],num[2],num[3],num[4]); // 따로 부르면 쉼표無
// 펼침연산자
document.write(...num); // 이렇게 쓰면 num 데이터를 쉼표없이 모두 부를 수 있음.
}
결과보기
200
300
400
500
12. 배열 : 데이터 불러오기 : 배열구조분해할당
배열이나 객체의 속성을 해체시킨 후 그 값을 개별 변수에 담을 수 있도록 만든 표현식입니다. 맨 처음 값 없이 변수를 선언한 다음 그 변수들에 배열을 저장시키는 방식이죠.
{
let a, b, c; // 값 없이 변수만 선언 - 이것만으로는 콘솔창에서 undefined라고 뜸
[a, b, c] = [100, 200, "javascript"]; // 개별 변수에 배열을 저장하는 방식
// 출력 시 개별 변수명 쓸 것
document.write(a);
document.write(b);
document.write(c);
}
결과보기
200
javascript
13. 객체 : 데이터 불러오기 : 기본
객체를 불러오는 가장 기본이 되는 방법입니다.
{
const obj = {
a : 100,
b : 200,
c : "javascript"
}
document.write(obj.a);
document.write(obj.b);
document.write(obj.c);
}
결과보기
200
javascript
14. 객체 : 데이터 불러오기 : Object
key값, values값, 또는 key값과 values를 전부 부르는 entries 방식이 있습니다. 나이, 성별, 이름 등의 속성명을 불러오고 싶을 때 사용합니다.
{
const obj = {
a : 100,
b : 200,
c : "javascript"
}
document.write(Object.keys(obj)); // key값 (속성명) 부르기
document.write(Object.values(obj)); // obj값 전체(쉼표有) 부르기
document.write(Object.entries(obj)); // key값 values 전부 부르기
}
결과보기
b
c
100,200,javascript
a,100,b,200,c,javascript
15. 객체 : 데이터 불러오기 : 변수
객체 a, b, c를 obj 객체 안에 담은 다음, 그 a, b, c 객체 데이터를 name1, name2, name3라는 상수 안에 저장 후 출력합니다.
{
const obj = {
a : 100,
b : 200,
c : "javascript"
}
// 객체 a, b, c를 다른 이름을 가진(name1,2,3) 상수 const에 저장
const name1 = obj.a;
const name2 = obj.b;
const name3 = obj.c;
document.write(name1);
document.write(name2);
document.write(name3);
}
결과보기
200
javascript
16. 객체 : 데이터 불러오기 : for in
for문을 간략화 한 방식 중 하나로 "for(let 요소값 in obj)" 이런 식으로 써 줍니다.
출력 시 document.write(obj[key]); 이런 식으로 출력합니다.
{
const obj = {
a : 100,
b : 200,
c : "javascript"
}
// for(let 요소값 in obj)
for(let key in obj){
document.write(obj[key]);
}
}
결과보기
200
javascript
17. 객체 : 데이터 불러오기 : map()
map 괄호 안의 펑션 괄호는 항상 element, index, array 순서로 이루어져 있으며 이를 e, i, a 와 같은 약자로 사용할 수도 있습니다. element를 el로 요약해도 무방합니다.
{
const obj = [
{a: 100, b: 200, c: "javascript"}
];
// element, index, array를 e, i ,a로도 쓸 수 있음
// element = el
obj.map((el) => {
document.write(el.a);
document.write(el.b);
document.write(el.c);
});
}
결과보기
200
javascript
18. 객체 : 데이터 불러오기 : hasOwnProperty()
데이터를 출력하지 않고 true와 false로 출력시킵니다.
데이터가 있으면 true를, 없으면 false를 출력시킵니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
// 데이터 출력이 아닌 true/false를 출력시킴
// 데이터가 있으면 true, 없으면 false
// document.write(obj.hasOwnProperty("a")); // true
// document.write(obj.hasOwnProperty("b")); // true
// document.write(obj.hasOwnProperty("c")); // true
// document.write(obj.hasOwnProperty("d")); // d라는 객체는 없으므로 false
// 약식(略式)
document.write("a" in obj);
document.write("b" in obj);
document.write("c" in obj);
document.write("d" in obj);
}
결과보기
true
true
false
19. 객체 : 데이터 불러오기 : 펼침연산자 - 복사
객체를 복사하는 방법 중 하나로 상수 obj의 값을 spread 상수에 저장하여 document.write(spread.a) 이런 식으로 응용할 수 있으며, 가독성이 높고 사용하기 편리합니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const spread = { ...obj }
document.write(spread.a);
document.write(spread.b);
document.write(spread.c);
}
결과보기
200
javascript
20. 객체 : 데이터 불러오기 : 펼침연산자 - 추가
19번에서와 사용하는 방식은 같으며, spread 상수 안에 [, d: "jquery"]와 같은 방식으로 obj 상수에 d라는 데이터를 추가할 수 있습니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const spread = { ...obj, d: "jquery" }
document.write(spread.d);
}
결과보기
21. 객체 : 데이터 불러오기 : 펼침연산자 - 결합
objA, objB 상수 두 개를 spread 상수에 결합시켜 편리하게 응용할 수 있습니다.
{
const objA = {
a: 100,
b: 200
}
const objB = {
c: "javascript",
d: "jquery"
}
const spread = { ...objA, ...objB }
document.write(spread.a);
document.write(spread.b);
document.write(spread.c);
document.write(spread.d);
}
결과보기
200
javascript
jquery
22. 객체 : 데이터 불러오기 : 비구조화 할당
obj 상수 안의 데이터를 const { a, b, c } 객체에 할당시키는 방식입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const { a, b, c } = obj;
document.write(a);
document.write(b);
document.write(c);
}
결과보기
200
javascript
23. 객체 : 데이터 불러오기 : 객체구조분해할당
상수 obj 안의 데이터 a,b,c의 데이터명을 각각 name1, name2, name3로 재정의 할 수 있습니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const { a: name1, b: name2, c: name3 } = obj;
document.write(name1);
document.write(name2);
document.write(name3);
}
결과보기
200
javascript