01. 변수 : 데이터 불러오기
변수 안에 저장된 데이터를 불러오는 방법입니다.
{
let x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
결과 확인하기
100 200 javascript
02. 상수 : 데이터 불러오기
상수 안에 저장된 데이터를 불러오는 방법입니다.
{
const x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
결과 확인하기
100 200 javascript
03. 배열 : 데이터 불러오기
배열 안에 저장된 데이터를 불러오는 방법입니다.
{
const arr = [100, 200, "javascript"];
console.log(arr[0], arr[1], arr[2]);
}
결과 확인하기
100 200 javascript
04. 배열 : 데이터 불러오기_2차 배열
배열 안에 저장된 데이터를 불러오는 방법입니다.
대괄호안에 배열을 사용해 값을 불러옵니다.
{
const arr = [100, 200, ["javascript","react"]];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2][0]);
console.log(arr[2][1]);
}
결과 확인하기
100
200
javascript
react
200
javascript
react
05. 배열 : 데이터 불러오기_갯수 구하기
배열 안에 저장된 데이터 갯수를 구하는 방법입니다.
{
const arr = [100, 200, "javascript"];
console.log(arr.length);
}
결과 확인하기
3
06. 배열 : 데이터 불러오기_for()문
배열 안에 저장된 데이터를 for()문 이용해 값을 불러오는 방법입니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
//console.log(arr[0]);
//console.log(arr[1]);
//console.log(arr[2]);
//console.log(arr[3]);
//console.log(arr[4]);
//console.log(arr[5]);
//console.log(arr[6]);
//console.log(arr[7]);
//console.log(arr[8]);
// for(초기값; 조건식; 증감식;){
//실행문
// }
for(let i=0; i<9; i++){
console.log(arr[i]);
}
}
결과 확인하기
100
200
300
400
500
600
700
600
900
200
300
400
500
600
700
600
900
07. 배열 : 데이터 불러오기 : 중첩 for()문
중첩 for()문 이용해 값을 불러오는 방법입니다.
{
for( let i=1; i<=10; i++ ){
console.log("i : " + i);
for( let j=1; j<=10; j++ ){
console.log("j : " + j);
}
}
}
결과 확인하기
i : 1, i : 2, .... i : 10
j : 1, j : 2, .... j : 10
08. 배열 : 데이터 불러오기 : forEach()
forEach문을 사용해 데이터를 불러옵니다.
{
const num = [100, 200, 300, 400, 500];
//for문
for(let i=0; i<num.length; i++){
document.write(num[i]);
}
//forEach문
num.forEach(function(el){
document.write(el);
});
}
결과 확인하기
100 200 300 400 500
09. 배열 : 데이터 불러오기 : for of
for of문을 사용해 데이터를 불러옵니다.
{
const arr = [100,200,300,400,500];
for(let i of arr){
document.write(i);
}
}
결과 확인하기
100 200 300 400 500
10. 배열 : 데이터 불러오기 : for in
for in문을 사용해 데이터를 불러옵니다.
{
const arr = [100,200,300,400,500];
for(let i in arr){
document.write(arr[i]);
}
}
결과 확인하기
100 200 300 400 500
11. 배열 : 데이터 불러오기 : map()
map()을 사용해 데이터를 불러옵니다. 데이터값, 키값, 배열
{
const num = [100,200,300,400,500];
num.forEach(function(el, i, a){ //데이터값
console.log(el);
console.log(i);
console.log(a)
});
num.map(function(el, i, a){ //배열
console.log(el);
console.log(i);
console.log(a)
});
}
결과 확인하기
100 200 300 400 500
12. 배열 : 데이터 불러오기 : 배열 펼침연산자(spread Operator)
자바스크립트에서 배열, 객체, 문자열 등의 요소를 펼쳐서 개별 요소를 분리하는 연산자입니다.
{
let arr1 = [100, 200, 300, 400, 500];
let arr2 = [600, 700];
console.log(arr1);
console.log(...arr1);
console.log(...arr1, ...arr2);
}
결과 확인하기
[100, 200, 300, 400, 500]
100 200 300 400 500
100 200 300 400 500 600 700
100 200 300 400 500
100 200 300 400 500 600 700
13. 배열 : 데이터 불러오기 : 배열구조분해할당(Array destructuring assignment)
배열의 요소를 개별 변수에 할당하는 방법 중 하나입니다.
이를 통해 배열이 각 요소를 개별 변수로 분리하여 사용할 수 있습니다.
{
let a, b, c;
[a, b, c] = [100, 200, "javascript"];
console.log(a);
console.log(b);
console.log(c);
}
결과 확인하기
100
200
javascript
200
javascript
14. 객체 : 데이터 불러오기 : 기본
객체에 저장된 데이터를 불러오는 기본 방법입니다.
{
const obj = {
a : 100,
b : 200,
c : "javascript"
}
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
100
200
javascript
200
javascript
15. 객체 : 데이터 불러오기 : Object
object를 사용해 키, 데이터, 배열 값을 불러옵니다.
{
const obj = {
a : 100,
b : 200,
c : "javascript"
}
console.log(Object.keys(obj));
console.log(Object.values(obj));
console.log(Object.entries(obj));
}
결과 확인하기
['a', 'b', 'c']
[100, 200, 'javascript']
[Array(2), Array(2), Array(2)]
[100, 200, 'javascript']
[Array(2), Array(2), Array(2)]
16. 객체 : 데이터 불러오기 : 변수
변수를 사용해 데이터를 불러옵니다.
{
const obj = {
a : 100,
b : 200,
c : "javascript"
}
const name1 = obj.a;
const name2 = obj.b;
const name3 = obj.c;
console.log(name1);
console.log(name2);
console.log(name3);
}
결과 확인하기
100
200
javascript
200
javascript
17. 객체 : 데이터 불러오기 : for in
for in문을 사용해 데이터를 불러옵니다.
{
const obj = {
a : 100,
b : 200,
c : "javascript"
}
for(let key in obj){
console.log(key);
console.log(obj[key]);
}
}
결과 확인하기
a
100
b
200
c
javascript
100
b
200
c
javascript
18. 객체 : 데이터 불러오기 : map()
map()문을 사용해 데이터를 불러옵니다.
{
const obj = [
{a: 100, b: 300, c: "javascript"}
]
obj.map((el) => {
console.log(el.a)
console.log(el.b)
console.log(el.c)
});
}
결과 확인하기
100
300
javascript
300
javascript
19. 객체 : 데이터 불러오기 : hasOwnProperty()
hasOwnProperty()를 사용해 데이터가 있으면 true, 없으면 false를 출력시킵니다.
{
const obj = {
a : 100,
b : 200,
c : "javascript"
}
console.log(obj.hasOwnProperty("a"));
console.log(obj.hasOwnProperty("b"));
console.log(obj.hasOwnProperty("c"));
console.log(obj.hasOwnProperty("d"));
console.log("a" in obj);
console.log("b" in obj);
console.log("c" in obj);
console.log("d" in obj);
}
결과 확인하기
true
true
true
false
true
true
true
false
true
true
false
true
true
true
false
20. 객체 : 데이터 불러오기 : 객체 펼침연산자
배열에 포함된 항목을 목록으로 바꿔주는 연산자입니다.
마침표 세개(...)로 표시합니다.
// 복사
{
const obj = {
a : 100,
b : 200,
c : "javascript"
}
const spread = {...obj};
console.log(spread.a);
console.log(spread.b);
console.log(spread.c);
}
// 추가
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const spread = {...obj, d: "react"};
console.log(spread.a);
console.log(spread.b);
console.log(spread.c);
console.log(spread.d);
}
// 결합
{
const obj1 = {
a: 100,
b: 200
}
const obj2 = {
c: "javascript",
d: "react"
}
const spread = {...obj1, ...obj2}
console.log(spread.a);
console.log(spread.b);
console.log(spread.c);
console.log(spread.d);
}
결과 확인하기
100
200
javascript
100
200
javascript
react
100
200
javascript
react
200
javascript
100
200
javascript
react
100
200
javascript
react
21. 객체 : 데이터 불러오기 : 객체 구조분해할당
배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현방법입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const {a:name1, b:name2, c:name3} = obj;
console.log(name1);
console.log(name2);
console.log(name3);
}
결과 확인하기
100
200
javascript
200
javascript