Top

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

데이터 저장 가능하며. 불러오기 가능

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];

document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
document.write(arr[3]);
document.write(arr[4]);

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

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

배열 데이터 불러오기 다섯번째 방법

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

num.forEach(function(el) {
    document.write(el);

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

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

배열 데이터 불러오기 일곱번째 방법

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

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

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

배열 데이터 불러오기 여덟번째 방법

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

arr.forEach(function(el) {
    document.write(el);
});
arr.forEach(function(element, index, array) {     //callback은 function쓰기
    document.write(elemet);
    document.write(index);
    document.write(array);
});

arr.forEach(function(el){
    document.write(el);
});
arr.map(function(element, index, array) {            //callback은 function쓰기
    document.write(element);
    document.write(index);
    document.write(array);
});
결과보기
100
200
300
400
500

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
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];
document.write[obj.b];
document.write[obj.c];
결과보기
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
100,200,javascript
a,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);
결과보기
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) => {   // el, i ,arr 사용 가능
    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); // 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