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차 배열

2차 배열은 배열 안에 배열이 들어있는 배열을 말합니다. 다음은 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
600
700
800
900

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

배열의 데이터를 element, index, array값을 불러옵니다.

const num = [100,200,300,400,500]; forEach 쓰고 콜백 함수 (매개변수)

index=i 
el,i,arr 뽑아낼 수 있다.

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

forEach(el,i, arr)
num.forEach(function(el,i,arr){
document.write(el)
document.write(i)
document.write(arr)
});
결과보기
100200300400500

100200300400500

100200300400500

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

배열에 있는 데이터를 요소 값으로 불러옵니다.

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()

map을 이용해서 forEach와 같이 데이터를 불러올수 있습니다.

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

forEach((){}); 이용해서 값을 출력해주세요    
arr.forEach(function(el){
document.write(el);
//console.log(el)
});

num.forEach(function(element,index,array){
document.write(element);
document.write(index);
document.write(array);
});


forEach map 같게 불러냄. 콜백 안에 function

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);
});
결과보기
100
200
300
400
500

100
200
300
400
500

0
1
2
3
4

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

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. 배열 : 데이터 불러오기 : 배열구조분해할당

배열구조분해할당 방식으로 데이터를 불러옵니다.

let a, b, c;

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

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

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

기본적인 객체의 데이터 불러오기 방법입니다.

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

document.write(obj.a);
document.write(obj.b);
document.write(obj.c);
결과보기
100200javascript

14. 객체 : 데이터 불러오기 : 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 모두 불러오기
결과보기
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);
결과보기
100200javascript

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

for in을 이용해서 데이터를 불러옵니다.

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

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

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

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

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

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

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

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

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

const { a, b, c } = obj

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

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