- 01. 변수 : 데이터 불러오기
- 02. 상수 : 데이터 불러오기
- 03. 배열 : 데이터 불러오기
- 04. 배열 : 데이터 불러오기 : 2차 배열
- 05. 배열 : 데이터 불러오기 : 갯수 구하기 : length
- 06. 배열 : 데이터 불러오기 : for문
- 07. 배열 : 데이터 불러오기 : .forEach()
- 08. 배열 : 데이터 불러오기 : for of문
- 09. 배열 : 데이터 불러오기 : for in문
- 10. 배열 : 데이터 불러오기 : .map()
- 11. 배열 : 데이터 불러오기 : 펼침연산자
- 12. 배열 : 데이터 불러오기 : 배열구조분해할당
- 13. 객체 : 데이터 불러오기 : 기본
- 14. 객체 : 데이터 불러오기 : Object.
- 15. 객체 : 데이터 불러오기 : 변수
- 16. 객체 : 데이터 불러오기 : for in문
- 17. 객체 : 데이터 불러오기 : .map()
- 18. 객체 : 데이터 불러오기 : .hasOwnProperty()
- 19. 객체 : 데이터 불러오기 : 펼침연산자 - 복사
- 20. 객체 : 데이터 불러오기 : 펼침연산자 - 추가
- 21. 객체 : 데이터 불러오기 : 펼침연산자 - 결합
- 22. 객체 : 데이터 불러오기 : 비구조화 할당
- 23. 객체 : 데이터 불러오기 : 비구조화 할당
01. 변수 : 데이터 저장
{
var x = 100;
var y = 200;
var z = "javascript";
document.write(x);
document.write(y);
document.write(z);
}
결과보기
100
200
javascript
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, 200, "javascript"];
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
}
결과보기
100
200
javascript
200
javascript
04. 배열 : 데이터 불러오기 : 2차 배열
{
const arr = [100, 200, ["javascript","jquery"]];
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
document.write(arr[2][0]);
document.write(arr[2][1]);
}
결과보기
100
200
javascript, jquery
javascript
jquery
200
javascript, jquery
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(초기값; 조건식; 증감식){}
for( let i=0; i<arr.length; i++) {
document.write(arr[i]);
document.write(i); // 01234
}
}
결과보기
100
200
300
400
500
200
300
400
500
07. 배열 : 데이터 불러오기 : forEach()
{
const num = [100, 200, 300, 400, 500];
document.write(num[0]);
document.write(num[1]);
document.write(num[2]);
document.write(num[3]);
document.write(num[4]);
//for문
for( let i=0; i<num.length; i++) {
document.write(num[i], "<br>");
} // 100 200 300 400 500
//.forEach
num.forEach(function(el){
document.write(el);
}); // 100 200 300 400 500
//forEach( element, index, array)
num.forEach(function(element, index, array) {
document.write(element);
document.write(index);
document.write(array);
});
}
결과보기
//document.write();
100 200 300 400 500
//for문
100 200 300 400 500
//.forEach
100 200 300 400 500
//forEach( element, index, array)
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
100 200 300 400 500
//for문
100 200 300 400 500
//.forEach
100 200 300 400 500
//forEach( element, index, array)
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 num = [100, 200, 300, 400, 500];
for( let i of num ){
document.write(i);
}
}
결과보기
100 200 300 400 500
09. 배열 : 데이터 불러오기 : for in
{
const num = [100, 200, 300, 400, 500];
for( let i in num ){
document.write(i);
}
for( let i in num ){
document.write(num[i]);
}
}
결과보기
0 1 2 3 4
100 200 300 400 500
100 200 300 400 500
10. 배열 : 데이터 불러오기 : .map
{
const num = [100, 200, 300, 400, 500];
//.map: 메서드, 배열에서만 쓸 수 있음
num.map(function(el) {
document.write(el);
});
//map(element, index, array){}
num.map(function(element, index, array) {
document.write(element);
document.write(index);
document.write(array);
});
}
결과보기
//map()
100 200 300 400 500
//map(element, index, array){}
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
//map(element, index, array){}
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); //[]안 하나의 데이터
document.write(num[0], num[1], num[2], num[3], num[4]); // []안의 각자의 데이터로 표현
document.write(...num); // ... : 데이터값을 나열 해 불러 올 수 있다.
}
결과보기
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
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: "jajvascript"}
document.write(obj.a);
document.write(obj.b);
document.write(obj.c);
//거의 안 쓰는 문법
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));
document.write(Object.values(obj));
document.write(Object.entries(obj));
}
결과보기
a,b,c
100,200,javascript
a,100,b,200,c,javascript
100,200,javascript
a,100,b,200,c,javascript
15. 객체 : 데이터 불러오기 : 변수
{
const obj = { a: 100, b: 200, c: "jvascript" }
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 i in obj ){
document.write(obj[i]);
}
}
결과보기
100
200
javascript
200
javascript
17. 객체 : 데이터 불러오기 : map()
{
const obj = [{a:100, b:200, c:"javascript"}]
obj.map(function(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'));
//해석: obj 안에 ()가 있는 지
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
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