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);
결과보기
02. 상수 : 데이터 불러오기
상수 또한 데이터를 불러올 수 있습니다.
const x = 100;
y = 200;
z = "javascript"
document.write(x);
document.write(y);
document.write(z);
결과보기
03. 배열 : 데이터 불러오기
배열일 경우 데이터를 불러오는 방법은 여러가지 입니다. 그 중 첫번째 방법입니다.
const arr = [100, 200, "javascript"]
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
결과보기
04. 배열 : 데이터 불러오기 : 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]);
결과보기
05. 배열 : 데이터 불러오기 : 갯수 구하기
배열에서 데이터를 불러오는 세번째 방법은 갯수를 구하는 방법입니다.
const arr = [100, 200, "javascript"];
document.write(arr.length);
결과보기
06. 배열 : 데이터 불러오기 : for() 문
배열에서 데이터를 불러오는 네번째 방법으로 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(초기값, 조건식, 증감식)
for(let i = 0; i < arr.length; i++){
document.write(arr[i]);
};
결과보기
07. 배열 : 데이터 불러오기 : forEach() 문
배열에서 데이터를 불러오는 다섯번째 방법으로 forEach()문 일 경우 데이터를 불러오는 방법입니다.
const num = [100, 200, 300, 400, 500];
//forEach()
num.forEach(function(el, i, arr){ //el : element, i : index
document.write(el);
});
//forEach(element, index, array) : 3가지 인자(parameter)값(요소, 순서, 배열)
num.forEach(function(element, index, array){
document.write(element);
document.write(index);
document.write(array);
});
결과보기
100200300400500
01234
100,200,300,400,500
08. 배열 : 데이터 불러오기 : for of
배열에서 데이터를 불러오는 여섯번째 방법으로 for of를 쓰는 경우 데이터를 불러오는 방법 입니다.
const arr = [100, 200, 300, 400, 500];
for(let i of arr){ //for문 간략화, react 뷰에서 많이 쓰임
document.write(i);
}
결과보기
09. 배열 : 데이터 불러오기 : for in
배열에서 데이터를 불러오는 일곱번째 방법으로 for in를 쓰는 경우 데이터를 불러오는 방법 입니다.
const arr = [100, 200, 300, 400, 500];
for(let i in arr){ //for문 간략화, react 뷰에서 많이 쓰임
document.write(i); //index 값 도출
document.write(arr[i]); //요소 값 도출
}
결과보기
100200300400500
10. 배열 : 데이터 불러오기 : map()
배열에서 데이터를 불러오는 여덟번째 방법으로 map()을 쓰는 경우 데이터를 불러오는 방법 입니다.
const arr = [100, 200, 300, 400, 500]
//forEach문 이용해서 값을 출력해주세요! // 배열에서 불러와서 값으로 저장함
arr.forEach(function(el){
document.write(el);
console.log(el);
});
//map() // 배열에서 불러와서 배열로 저장(forEach랑 다른점)
arr.map(function(el){
document.write(el);
console.log(el);
});
arr.map(function(element, index, array){ //forEach 처럼 요소, 순서, 배열 가능
document.write(element);
document.write(index);
document.write(array);
});
결과보기
100200300400500 (console에서 확인 가능)
100200300400500
100200300400500 (console에서 확인 가능)
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
11. 배열 : 데이터 불러오기 : 펼침연산자
마침표 세개(...)로 표시하며 쉼표 없이 나열해서 보여주는 속성입니다.
const num = [100, 200, 300, 400, 500];
document.write(num, "<br>");
document.write(num[0],num[1],num[2],num[3],num[4],"<br>");
document.write(...num); //쉼표 없애고 데이터만 (펼침연산자)
결과보기
100200300400500
100200300400500
12. 배열 : 데이터 불러오기 : 배열구조분해할당
...
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);
결과보기
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)); //전체
결과보기
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);
결과보기
16. 객체 : 데이터 불러오기 : for in
...
const obj = {
a:100,
b:200,
c:"javascript"
}
for( let key in obj ){
document.write(obj[key]);
}
결과보기
17. 객체 : 데이터 불러오기 : map()
...
const obj = [
{a:100, b:200, c:"javascript"}
];
obj.map((el) => {
//document.write(el); //[Object Object] 안에 객체값이니까 객체 불러오는 걸 써야함
document.write(el.a);
document.write(el.b);
document.write(el.c);
});
결과보기
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 속 a에 데이터가 있는지 없는지
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.b);
결과보기
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);
결과보기
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);
결과보기
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);
결과보기
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);
결과보기
200
javascript