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

// 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);
결과보기
100
200
javascript

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

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

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

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

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

const arr = [100, 200, ["javascript", "jquery"]];
    
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2][0]);  //배열 안의 배열 선택
document.write(arr[2][1]);
결과보기
100
200
javascript
jquery

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

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

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++){    //i++ 는 1씩 증가하는 것
    document.write(arr[i]);    // i < 9 에 숫자대신 arr.length 써도 괜찮음
}
결과보기
100
200
300
400
500
600
700
800
900

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

const num = [100, 200, 300, 400, 500];
    
//for문을 이용해서 출력
for(let i = 0; i < num.length; i++){
    document.write(num[i]);         //let은 생략가능
}
document.write();
    
//forEach()를 이용해서 출력
num.forEach(function(el){         //콜백함수
    document.write(el);
});  
document.write();
        
//forEach() 3가지 인자(parameter)값
num.forEach(function(element, index, array){
    document.write(element);
    document.write(index);
    document.write(array);
})
결과보기
100200300400500
100200300400500
100
0
100,200,300,400,500
200
1
100,200,300,400,500
400
3
100,200,300,400,500
500
4
100,200,300,400,500

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

const arr = [100, 200, 300, 400, 500];
    
for( let i of arr){
    document.write(i);      //for() 간단하게 생략 가능
}
결과보기
100
200
300
400
500

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

const arr = [100, 200, 300, 400, 500];
    
for( let i in arr){
    // document.write(i);      //index가 나옴
    document.write(arr[i]);    //index 값을 배열의 순서대로 넣어주면 됨
}
결과보기
100
200
300
400
500

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

const arr = [100, 200, 300, 400, 500];
    
//forEach() 출력
arr.forEach(function(el){
    document.write(el);        
};
    
//map()
arr.map(function(el, index, array){
    document.write(el);             //forEach와 같음
    document.write(index);
    document.write(array);
});
결과보기
100
200
300
400
500
100
200
300
400
500
01234
100, 200, 300, 400, 500

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

const num = [100, 200, 300, 400, 500];
    
document.write(num);            //쉼표 존재
document.write(num[0], num[1], num[2], num[3], num[4]);     //쉼표없음
document.write(...num);         //쉼표없이 불어오는 것, 펼침연산자
결과보기
100,200,300,400,500
100200300400500
100200300400500

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

let a, b, c;                //변수 선언 후 배열을 쓸 수 있음
    
[a,b,c] = [100, 200, "javascript"]; 
    
document.write(a);
document.write(b);
document.write(c);
결과보기

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

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

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

const obj = {
    a: 100,
    b: 200,
    c: "javascript"
}
document.write(Object.keys(obj));       //데이터 값말고 키값을 불러 올 수 있음
document.write(Object.values(obj));     //값을 불러오는 것
document.write(Object.entries(obj));    //모든값 다 불러오는 것
결과보기
a,b,c100,200,javascripta,100,b,200,c,javascript

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

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);
결과보기
100200javascript

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

const obj = {
    a: 100,
    b: 200,
    c: "javascript"
}
    
for(let key in obj) {               //key는 마음대로 변경해도 상관없음
    document.write(obj[key]);
}
결과보기
100200javascript

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

const obj = [
    {a: 100, b: 200, c: "javascript"}
];
    
obj.map((el) => {
    document.write(el.a);
    document.write(el.b);
    document.write(el.c);
});                                 //function은 화살표 함수로 바꿀 수 있음
결과보기
100200javascript

18. 객체 : 데이터 불러오기 : hasOwnProperty()

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"));        //데이터가 있으면  true, 없으면 false
document.write("a" in obj);                             //약식 사용
document.write("b" in obj);               
document.write("c" in obj);               
document.write("d" in obj);
결과보기
truetruetruefalsetruetruetruefalse

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

//복사
const obj = {
    a: 100, 
    b: 200,
    c: "javascript"
}
const spread = { ...obj }   //복사하는 것

document.write(spread.a);
document.write(spread.b);
document.write(spread.c);
결과보기
100 200 javascript

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);
결과보기
100 200 javascript

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);
결과보기
100 200 javascript

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

const obj = {
    a: 100, 
    b: 200,
    c: "javascript"
}
const { a, b, c } = obj;     //바로 불러올 수 있음

document.write(a);
document.write(b);
document.write(c);
결과보기
100 200 javascript

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

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);
결과보기
100 200 javascript