- 01. 변수 : 데이터 불러오기
- 02. 상수 : 데이터 불러오기
- 03. 배열 : 데이터 불러오기
- 04. 배열 : 데이터 불러오기 : 2차 배열
- 05. 배열 : 데이터 불러오기 : 갯수 구하기
- 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. 변수 : 데이터 불러오기
변수에 저장된 데이터 값을 불러올 수 있습니다.
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);
결과보기
200
javascript
02. 상수 : 데이터 불러오기
상수에 저장된 데이터 값을 불러올 수 있습니다. 상수는 const로 표기합니다.
const x = 100,
y = 200,
z = "javascript";
document.write(x);
document.write(y);
document.write(z);
결과보기
200
javascript
03. 배열 : 데이터 불러오기
배열에 저장된 데이터 값을 불러올 수 있습니다.
const arr = [100, 200, "javascript"];
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
결과보기
200
javascript
04. 배열 : 데이터 불러오기 : 2차 배열
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])
결과보기
200
javascript,jquery
javascript
jquery
05. 배열 : 데이터 불러오기 : 갯수 구하기
배열 내에 저장된 값의 갯수를 구할 수 있습니다.
const arr = [100, 200, "javascript"];
document.write(arr.length);
결과보기
06. 배열 : 데이터 불러오기 : for()문
자바스크립트는 배열이나 객체를 쉽게 다룰 수 있도록 반복문을 제공합니다. for문은 그 반복문 중 하나입니다.
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
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<length; i++){
document.write(arr[i]);
}
결과보기
200
300
400
500
07. 배열 : 데이터 불러오기 : forEach()
forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 반복하여 실행합니다.
const num = [100, 200, 300, 400, 500];
//for문을 이용해서 출력
for(let i = 0; i<num.length; i++){ //let 생략 가능
document.write(num[i]);
}
//forEach()를 이용해서 출력
num.forEach(function(element){
document.write(element);
});
//forEach()의 3가지 인자(parameter)값
num.forEach(function(element, index, array){
document.write(element);
document.write(index);
document.write(array);
});
결과보기
100 200 300 400 500
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()문에서 몇 가지 방법을 생략하여 for of 반복문을 사용할 수 있습니다.
const arr = [100, 200, 300, 400, 500];
for(let i of arr){ //for()문에서 생략된 방법
document.write(i);
}
결과보기
09. 배열 : 데이터 불러오기 : for in
for()문에서 몇 가지 방법을 생략하여 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() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
const arr = [100, 200, 300, 400, 500];
//forEach와 같은 값을 얻을 수 있음
arr.map(function(el){
document.write(el);
});
arr.map(function(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); //펼침연산자
결과보기
100200300400500
100200300400500
12. 배열 : 데이터 불러오기 : 배열구조분해할당
배열구조분해할당(Destructuring assignment)은 말 그대로 배열의 구조를 분해(destructurize)한 뒤 할당(assign)한다는 의미입니다.
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
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
for in을 사용하여 객체 내에 저장된 데이터 값을 불러올 수 있습니다.
const obj = {
a : 100,
b : 200,
c : "javascript"
}
for(let key in obj){
document.write(obj[key]);
}
결과보기
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);
});
결과보기
18. 객체 : 데이터 불러오기 : 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"));
document.write("a" in obj); //약식
document.write("b" in obj);
document.write("c" in obj);
document.write("d" in obj);
결과보기
true true true false
19. 객체 : 데이터 불러오기 : 펼침연산자 - 복사
펼침연산자(Spread Operator)는 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제할 때도 사용합니다.
const obj = {
a: 100,
b: 200,
c: "javascript"
};
const spread = { ...obj };
document.write(spread.a);
document.write(spread.b);
document.write(spread.c);
결과보기
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. 객체 : 데이터 불러오기 : 비구조화할당
비구조화할당 문법을 사용하면, 객체 내의 값을 추출하여 변수 혹은 상수(a, b, c)로 바로 선언할 수 있습니다.
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. 객체 : 데이터 불러오기 : 객체구조분해할당
객체구조분해할당 문법을 사용하면 객체의 속성을 해체하여 그 값을 개별 변수(name1, name2, name3)에 담을 수 있습니다.
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