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

//let x = 100;
//let y = 200;
//let z = "javascript";

let x = 100,        //let을 중복하지 않고 변수 지정이 가능합니다.
    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
결과보기
3

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

컴퓨터 프로그래밍에서 for 루프는 반복문의 일종으로, 특정한 부분의 코드가 반복적으로 수행될 수 있도록 합니다.

const arr = [100, 200, 300, 400, 500];

for (let i = 0; i < arr.length; i++) {       // i의 값에 1씩 더하여 값을 도출하며, 배열의 갯수인 5가 되면 중지합니다.
    document.write(arr[i]);
}
결과보기
100
200
300
400
500

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

foreach 반복문은 오직 Array 객체에서만 사용가능합니다.

const num = [100, 200, 300, 400, 500];

    // num.forEach(function(element) {
    //     document.write(element);     // 100,200,300,400,500 출력
    // })

num.forEach(function (element, index, array) {
document.write(element);
document.write(index);
document.write(array);
})
결과보기
100
200
300
400
500
// element 출력

0
1
2
3
4
// index 출력

100,200,300,400,500
100,200,300,400,500
100,200,300,400,500
100,200,300,400,500
100,200,300,400,500
// array 출력

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

const arr = [100, 200, 300, 400, 500];

for (let i of arr) {
    document.write(i);
}
결과보기
100
200
300
400
500

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

for in 반복문 : 객체의 모든 열거 가능한 속성에 대해 반복합니다.

const arr = [100, 200, 300, 400, 500];

for (let i in arr) {
    document.write(arr[i]);     //arr이 없다면 index값 출력
}
결과보기
100
200
300
400
500

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

map함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용합니다.

const arr = [100, 200, 300, 400, 500];

// arr.forEach(function (el) {
//     document.write(el);
//     console.log(el);
// });

// arr.map(function(el) {
//     document.write(el)       //forEach와 같은 값 출력
//     console.log(el);
// });

arr.map(function(element, index, array) {
    document.write(element);
    document.write(index);
    document.write(array);
});
결과보기
100
200
300
400
500
// element 출력

0
1
2
3
4
// index 출력

100,200,300,400,500
100,200,300,400,500
100,200,300,400,500
100,200,300,400,500
100,200,300,400,500
// array 출력

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

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

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

let a, b, c;

[a, b, c] = [100, 200, "javascript"];

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

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

const obj = {
    a: 100,
    b: 200,
    c: "javascript"
}

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

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, c // keys값
100, 200, javascript // values값
a, 100, b, 200, c, javascript // entries값

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

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

const obj = {
    a: 100,
    b: 200,
    c: "javascript"
}

for (let key in obj) {
    document.write(obj[key]);
}
결과보기
100
200
javascript

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

const obj = [{
    a: 100, b: 200, c: "javascript"
}];

obj.map((el) => {       // element값을 출력
    document.write(el.a);
    document.write(el.b);
    document.write(el.c);
});
결과보기
100
200
javascript

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"));
document.write("a" in obj);
document.write("b" in obj);
document.write("c" in obj);
document.write("d" in obj);
//데이터 유,무 확인을 위해 사용하기도 함
결과보기
true
true
true
false
true
true
true
false

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
jquery

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
jquery

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