01. 변수 : 데이터 불러오기

데이터는 불러올수있습니다.

let x = 100,            //,로 이어서 쓸수있습니다.
     y = 200, 
     z = "javascript";
document.write(x);
document.write(y);
document.write(z);
결과보기

02. 상수 : 데이터 불러오기

상수도 불러올수있습니다.

const x = 100,
         y = 200,
         z = "javascript";
document.write(x);
document.write(y);
document.write(z);
결과보기

03. 배열 : 데이터 불러오기

배열도 불러올수있습니다.

const arr = [100, 200, "javascript"]; // arr에 100, 200, "javascript" 담기
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
결과보기

04. 배열 : 데이터 불러오기 : 2차 배열

2차배열도 불러올수있습니다.

const arr = [100, 200, ["javascript", "jqyery"]]; // 배열안에 배열 가능합니다.
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2][0]);
document.write(arr[2][1]);
결과보기

05. 배열 : 데이터 불러오기 : 갯수 구하기

배열의 길이수도 구할수있습니다.

const arr = [100, 200, "javascript"];
document.write(arr.length);
결과보기

06. 배열 : 데이터 불러오기 : for()문

for()문은 반복되는 동작을 수행합니다.

const arr = [100, 200, 200, 300, 400, 500, 600, 700, 800, 900];
for(let i=0; i < arr.length; i++){
    document.write(arr[i]);
}
결과보기
100
200
300
400
500
600
700
800
900

07. 배열 : 데이터 불러오기 : forEach()문

forEach()문은 반복되는 동작을 수행합니다.

const num = [100, 200, 300, 400, 500];
const ex = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'k', 'l', 'm'];
//forEach() 3가지 인자(parameter) 값
ex.forEach(function(element, index, array){
    document.write(array + "의 " + index +"번째 요소 : " + element + "<br>");
});
num.forEach(function(elment){
    document.write(elment);
});
결과보기
a,b,c,d,e,f,g,h,k,l,m의 0번째 요소 : a
a,b,c,d,e,f,g,h,k,l,m의 1번째 요소 : b
a,b,c,d,e,f,g,h,k,l,m의 2번째 요소 : c
a,b,c,d,e,f,g,h,k,l,m의 3번째 요소 : d
a,b,c,d,e,f,g,h,k,l,m의 4번째 요소 : e
a,b,c,d,e,f,g,h,k,l,m의 5번째 요소 : f
a,b,c,d,e,f,g,h,k,l,m의 6번째 요소 : g
a,b,c,d,e,f,g,h,k,l,m의 7번째 요소 : h
a,b,c,d,e,f,g,h,k,l,m의 8번째 요소 : k
a,b,c,d,e,f,g,h,k,l,m의 9번째 요소 : l
a,b,c,d,e,f,g,h,k,l,m의 10번째 요소 : m
100
200
300
400
500

08. 배열 : 데이터 불러오기 : for of

for of 문은 배열의 값을 출력합니다.

const arr = [100, 200, 300, 400, 500];
for(let i of arr){
    document.write(i); //value 출력
}
결과보기
100
200
300
400
500

09. 배열 : 데이터 불러오기 : for in

for in 문은 배열의 인덱스을 출력합니다.

const arr = [100, 200, 300, 400, 500];
for(let i in arr){     
    document.write(i); // 배열은 인덱스 출력, 객체는 Key 출력 
}                      // (배열도 객체처럼보면 0: 100, 1: 200...4: 500이므로 key 값을 출력하는거와 마찬가지입니다.)
결과보기
0
1
2
3
4

10. 배열 데이터 불러오기 : map();

map() 은 forEach() 와 유사하지만 forEach()는 Arry 요소를 제공된 함수로 한 번 실행하지만,
map() 은 Arry 요소가 제공된 함수로 호출될때 새로운 array를 생성합니다. 

const arr = [100, 200, 300, 400, 500];
arr.forEach(function(el){ //저장할때 값을 저장
    document.write(el);
});

arr.map(function(el){ //저장할때 배열을 생성하여 저장
    document.write(el);
});
const ex = ['a','b','c','d','e','f','g','h','k','l','m'];
//map() 3가지 인자(parameter) 값
ex.map(function(element, index, array){ 
    document.write(array + "의 " + index +"번째 요소 : " + element);
});
결과보기
100
200
300
400
500
100
200
300
400
500
a,b,c,d,e,f,g,h,k,l,m의 0번째 요소 : a
a,b,c,d,e,f,g,h,k,l,m의 1번째 요소 : b
a,b,c,d,e,f,g,h,k,l,m의 2번째 요소 : c
a,b,c,d,e,f,g,h,k,l,m의 3번째 요소 : d
a,b,c,d,e,f,g,h,k,l,m의 4번째 요소 : e
a,b,c,d,e,f,g,h,k,l,m의 5번째 요소 : f
a,b,c,d,e,f,g,h,k,l,m의 6번째 요소 : g
a,b,c,d,e,f,g,h,k,l,m의 7번째 요소 : h
a,b,c,d,e,f,g,h,k,l,m의 8번째 요소 : k
a,b,c,d,e,f,g,h,k,l,m의 9번째 요소 : l
a,b,c,d,e,f,g,h,k,l,m의 10번째 요소 : m

11. 배열 : 데이터 불러오기 : 펼침연산자

펼침연산자는 배열을 한번에 불려올때 쓰입니다.

const num = [100, 200,300,400,500];
document.write(num);
num.forEach(el => document.write(el));
document.write(...num);
결과보기

12. 배열 : 데이터 불러오기 : 배열구조분해할당(Destructuring Assignment)

배열구조분해할당은 변수에 각각 값을 넣어줄수있습니다.

let a, b, c;
[a, b, c] = [100, 200, "javascript"];
document.write(a);
document.write(b);
document.write(c);
결과보기

13. 객체 : 데이터 불러오기 : 기본

배열은 key을 통해 데이터를 불러올수있습니다

const obj = {
    a : 100,
    b : 200,
    c : "javascript"
};
document.write(obj.a);
document.write(obj.b);
document.write(obj.c);
결과보기

14. 객체 : 데이터 불러오기 : Objct

Object 를 이용해 다양한 메서드로 key와 value를 불러옵니다.

const obj = {
    a : 100,
    b : 200,
    c : "javascript"
};
document.write(Object.keys(obj));    // 객체의 key만 불러옴
document.write(Object.values(obj));  // 객체의 value 불러옴
document.write(Object.entries(obj)); // 객체 key, value 둘다불러옴
결과보기

15. 객체 : 데이터 불러오기 : 변수

변수안에 객체의 값을넣어 출력을 할수 있습니다.

let result = document.querySelector(".sample15_result");
const obj = {
    a : 100,
    b : 200,
    c : "javascript"
};
        
const name1 = obj.a;
const name2 = obj.b;
const name3 = obj.c;
document.write(name1);
document.write(name2);
document.write(name3);
결과보기

16. 객체 : 데이터 불러오기 : for in

for in 을 이용하여 할수 있습니다.

const obj = {
    a : 100,
    b : 200,
    c : "javascript"
};
for(let key in obj) {
    document.write(obj[key]);
}
결과보기

17. 객체 : 데이터 불러오기 : map()

map을 이용하여 할수있습니다

const obj = [
{a: 100, b : 200, c : "javascript"}
];
obj.map(el => {
    document.write(el.a);
    document.write(el.b);
    document.write(el.c);
});
결과보기

18. 객체 : 데이터 불러오기 : hasOwnProperty() //true,false

true인지 false인지 나타낼수있습니다.

const obj = {
    a : 100,
    b : 200,
    c : "javascript"
};
document.write(obj.hasOwnProperty("a"));
document.write(obj.hasOwnProperty("b"));
document.write(obj.hasOwnProperty("c"));
document.write(obj.hasOwnProperty("d"));
document.write("a" in obj);
document.write("b" in obj);
document.write("c" in obj);
document.write("d" in obj);
결과보기

19. 객체 : 데이터 불러오기 : 펼침연산자 - 복사

객체를 복사합니다.

//복사의 의미
const obj = {
    a: 100,
    b: 200,
    c: "javascript",
};
const spread = { ...obj };
document.write(spread.a;);
document.write(spread.b;);
document.write(spread.c;);
결과보기

20. 객체 : 데이터 불러오기 : 펼침연산자 - 추가

객체를 복사하는 동시에 추가합니다.

//추가의 의미
const obj = {
    a: 100,
    b: 200,
    c: "javascript",
};
const spread = { ...obj, d: "jquery" };
document.write(spread.a;);
document.write(spread.b;);
document.write(spread.c;);
document.write(spread.d;);
결과보기

21. 객체 : 데이터 불러오기 : 펼침연산자 - 결합

다수의 객체를 결합합니다.

//결합의 의미
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;);
결과보기

22. 객체 : 데이터 불러오기 : 비구조화 할당

비구조화 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

let result = document.querySelector(".sample22_result");
const obj = {
    a: 100,
    b: 200,
    c: "javascript",
};
const { a, b, c} = obj;
document.write(a);
document.write(b);
document.write(c);
결과보기

23. 객체 : 데이터 불러오기 : 객체구조분해할당

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

let result = document.querySelector(".sample23_result");
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);
결과보기