01. 변수 : 데이터 불러오기
변수를 불러오는 방법입니다. let은 첫 번째에 쓰면 그 후로는 생략 가능합니다.
// let x = 100;
// let y = 200;
// let z = "javascript";
let x = 100,
y = 200, //let 생략 가능
z = "javascript";
document.write(x);
document.write(y);
document.write(z);
결과보기
200
javascript
02. 상수 : 데이터 불러오기
상수 데이터 불러오는 방법입니다.
const x = 100,
y = 200,
z = "javascript"
document.write(x);
document.write(y);
document.write(z);
결과보기
200
javascript
03. 배열 : 데이터 불러오기
배열 데이터 불러오는 방법입니다. index는 첫 번째가 0이라는 점 주의하십시오.
const arr = [100, 200, "javascript"];
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
결과보기
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]);
결과보기
200
javascript
jquery
05. 배열 : 데이터 불러오기 : 갯수 구하기
배열데이터의 갯수를 구하는 방법입니다. arr.length를 사용합니다.
const arr = [100, 200, "javascript"];
document.write(arr.length); //method는 괄호가 필요하지만 property는 필요 없음
결과보기
06. 배열 : 데이터 불러오기 : for()문
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(let i=0; i<arr.length; i++){ //위처럼 하나씩 출력하는 것이 아니라 한 번에 할 수 있음
document.write(arr[i]);
}
결과보기
07. 배열 : 데이터 불러오기 : forEach()
forEach() 이용하여 배열 데이터 불러오는 방법입니다. 요소, 인덱스, 배열 순서로 불러올 수 있습니다. 인자로 콜백함수를 받아옵니다.
const num = [100, 200, 300, 400, 500];
num.forEach(function(el){ //요소만 출력
document.write(el);
});
num.forEach(function(element, index, array){ //function(요소, 인덱스, 배열값) 순서
document.write(element);
document.write(index);
document.write(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
for of를 이용하여 배열 데이터 불러오는 방법입니다. 아래 예시를 보시면 for()문과의 차이를 알 수 있습니다.
const arr = [100, 200, 300, 400, 500];
for{let i=0; i<arr.length; i++}{ //for문 쓸 때
document.write(arr[i]);
}
for(let i of arr){ //for문 쓸 때보다 간단하게 쓸 수 있음
document.write(i);
}
결과보기
200
300
400
500
//여기까지 for문 값 100
200
300
400
500
09. 배열 : 데이터 불러오기 : for in
for in을 이용하여 배열 데이터 불러오는 방법입니다. for in은 기본적으로 인덱스를 출력하지만 모든 요소를 출력할수도 있습니다.
const arr = [100, 200, 300, 400, 500];
for(let i in arr){
document.write(i); //for in은 기본적으로 인덱스 출력
document.write(arr[i]); //for in으로 모든 요소 출력하는 법
}
결과보기
200
300
400
500
10. 배열 : 데이터 불러오기 : map()
map()을 이용하여 배열 데이터 불러오는 방법입니다. forEach처럼 요소, 인덱스, 배열값을 모두 출력할 수 있습니다.
const arr = [100, 200, 300, 400, 500];
//forEach 이용해서 값 출력
//arr.forEach(function(el){
//document.write(el);
//})
//arr.forEach(function(element, index, array){
//document.write(element);
//document.write(index);
//document.write(array);
//})
arr.map(function(el){
document.write(el);
})
arr.map(function(element, index, array){ //forEach처럼 element, index, array출력 가능
document.write(element);
document.write(index);
document.write(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. 배열 : 데이터 불러오기 : 펼침연산자(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); // 펼침연산자
결과보기
12. 배열 : 데이터 불러오기 : 배열구조분해할당(Destructruing assignment)
배열구조분해할당은 변수를 한 번에 선언하고 변수에 데이터를 저장하는 방법입니다.
let a, b, c; //변수 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
Object를 이용하여 객체 데이터를 불러오는 방법입니다. 키, 값을 따로 불러올 수 있습니다.
const obj = {
a : 100,
b : 200,
c : "javascript"
}
document.write(Object.keys(obj)); //키 불러오는 법
document.write(Object.values(obj)); //값 불러오는 법
document.write(Object.entries(obj)); //키, 값 모두 불러오는 법
결과보기
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
for in을 사용하여 객체 데이터를 불러오는 방법입니다.
const obj = {
a : 100,
b : 200,
c : "javascript"
}
for (let key in obj){ //key가 아닌 다른 이름 사용 가능
document.write(obj[key])
}
결과보기
17. 객체 : 데이터 불러오기 : map()
map()을 이용하여 객체 데이터를 불러오는 방법입니다. 요소(element), 인덱스(index), 배열값(array)을 모두 출력할 수 있습니다.
const obj = [
{a: 100, b: 200, c: "javascript"}
];
obj.map((el)=>{ //요소 출력
document.write(el.a);
document.write(el.b);
document.write(el.c);
})
결과보기
18. 객체 : 데이터 불러오기 : hasOwnProperty()
hasOwnProperty()를 이용하여 객체 데이터를 불러오는 방법입니다. hasOwnProperty()는 데이터가 있는지 확인하는 것이기 때문에 true, false로 출력합니다.
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")); //"d"는 없기 때문에 false 출력
document.write("a" in obj); //약식으로 줄여서 쓸 수 있음
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.c)
결과보기
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);
결과보기
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);
결과보기
22. 객체 : 데이터 불러오기 : 비구조화 할당
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const { a, b, c } = obj;
document.write(a);
document.write(b);
document.write(c);
결과보기
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);