01. 변수 : 데이터 불러오기
let x = 100,
y = 200,
z = "javascript";
alert(x); // 창이 뜨면서 답이 나옴
alert(z);
alert(y);
console.log(x) // 검사 페이지에 답이 나옴
console.log(y)
console.log(z)
결과보기
100
200
javascript
// console 값
100
200
javascript
200
javascript
// console 값
100
200
javascript
02. 상수 : 데이터 불러오기
const x = 100,
y = 200,
z = "javascript";
document.write(x);
document.write(y);
document.write(z);결과보기
100
200
javascript
200
javascript
03. 배열 : 데이터 불러오기
const arr = [100, 500, 1000, "배열"];
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
document.write(arr[3]);
document.write(arr.length); // 갯수가 답으로 나옴
for(let i = 0; i < arr.length; i++) { // for문 '외우기'
document.write(arr[i]);
} 결과보기
100
500
1000
배열
4
100
500
1000
배열
500
1000
배열
4
100
500
1000
배열
04. 배열 : 데이터 불러오기 : 2차 배열
const arr = [100, 200, ["javascript", "jquery"]];
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2][0]); //javascript만 출력
document.write(arr[2][1]) //jquery만 출력 결과보기
100
200
javascript
jquery
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.lenth; i++){
document.write(arr[i]);
}
결과보기
100
200
300
400
500
200
300
400
500
07. 배열 : 데이터 불러오기 : forEach()
const num = [100, 200, 300, 400, 500];
//forEach()
num.forEach(function(el){
document.write(el);
});
//forEach(function(el, index, array)
num.forEach(function(el, index, array){
document.write(element); //100200300400500
document.write(index); // 01234 가 나옴
document.write(array); // 100,200,300,400,500
});
결과보기
100
200
300
400
500
01234
100
200
300
400
500
200
300
400
500
01234
100
200
300
400
500
08. 배열 : 데이터 불러오기 : for of
const arr = [100, 200, 300, 400, 500];
for( let i = 0; i < arr.lenth; i++){
document.write(arr[i]);
}
for( let i of arr){
document.write(i);
} 결과보기
100
200
300
400
500
100
200
300
400
500
200
300
400
500
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
200
300
400
500
10. 배열 : 데이터 불러오기 : map()
const arr = [100, 200, 300, 400, 500];
// forEach 이용해서 값을 출력
arr. forEach(function(el) { // forEach와 map은 num로는 안나온다.
document.write(el);
console.log(el) //검사로 값이 나옴
});
arr.forEach(function(el, index, array){
document.write(el); //100200300400500
document.write(index); //01234 가 나옴
document.write(array); // 100,200,300,400,500
});
arr.map(function(el){
document.write(el);
console.log(el) //검사로 값이 나옴
}); 결과보기
100
200
300
400
500
console로 값이 나옴
100
200
300
400
500
100200300400500
01234
100,200,300,400,500
100
200
300
400
500
200
300
400
500
console로 값이 나옴
100
200
300
400
500
100200300400500
01234
100,200,300,400,500
100
200
300
400
500
11. 배열 : 데이터 불러오기 : 펼침연산자
const num = [100, 200, 300, 400, 500];
document.write(num); //100,200,300,400,500
document.write(num[0],num[1],num[2],num[3],num[4]); //100200300400500
document.write(...num); //100200300400500 결과보기
100,200,300,400,500
100200300400500
100200300400500
100200300400500
100200300400500
12. 배열 : 데이터 불러오기 : 배열구조분해할당
let a,b,c;
[a,b,c] = [100,200,"javascript"];
document.write(a);
document.write(b);
document.write(c); 결과보기
100
200
javascript
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
200
javascript
14. 객체 : 데이터 불러오기 : Object
const obj = {
a : 100,
b : 200,
c : "javascript"
}
document.write(Object.keys(obj,)); //a,b,c를 불러오기
document.write(Object.values(obj)); //값을 불러오기
document.write(Object.entries(obj)); //a,b,c와 값 모두 부르기결과보기
a,b,c
100,200,javascript
a,b,c,100,200,javascript
100,200,javascript
a,b,c,100,200,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
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) => {
document.write(el.a)
document.write(el.b)
document.write(el.c)
}) 결과보기
100
200
javascript
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); //hasOwnProperty를 생략하면 이렇게 한다.
document.write("b" in obj);
document.write("c" in obj);
document.write("d" in obj); 결과보기
ture
ture
ture
false
ture
ture
ture
false
ture
ture
false
ture
ture
ture
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
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
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
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
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
200
javascript