Top

01. 변수 : 데이터 불러오기

변수는 데이터를 저장할 뿐만 아니라 저장되어 있는 데이터를 호출할 수도 있습니다.

//let x = 100;
//let y = 200;
//let z = "javascript";

let x = 100,
        y = 200,
        z = "javascript";

document.write(x,"<br>");
document.write(y,"<br>");
document.write(z);
결과보기
100
200
javascript

02. 상수 : 데이터 불러오기

상수는 이미 선언한 경우 값을 재지정할 수 없습니다. 다음은 상수를 선언하고 호출하는 방법입니다.

const x = 100,
            y = 200,
            z = "javascript";

document.write(x,"<br>");
document.write(y,"<br>");
document.write(z);
결과보기
100
200
javascript

03. 배열 : 데이터 불러오기

배열에는 하나 이상의 값을 저장할 수 있습니다. 다음은 배열에 저장된 값을 불러오는 방법입니다.

const arr = [100, 200, "javascript"];

document.write(arr[0],"<br>");
document.write(arr[1],"<br>");
document.write(arr[2]);
결과보기
100
200
javascript

04. 배열 : 데이터 불러오기 : 2차 배열

2차 배열은 배열 안에 배열이 들어있는 배열을 말합니다. 다음은 2차 배열에 저장된 값을 불러오는 방법입니다.

const arr = [100, 200, ["javascript", "jquary"]];       //이런 배열을 이차배열이라고 함

document.write(arr[0],"<br>");
document.write(arr[1],"<br>");
document.write(arr[2][0],"<br>");
document.write(arr[2][1]);
결과보기
100
200
javascript
jquary

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],"<br>");

//for(초기값, 조건식 증감식)
for(let i=0; i<arr.length; i++){    //i가 배열의 수(5)보다 작은동안 해당 명령을 반복
    document.write(arr[i],"<br>");
}
결과보기
100200300400500
100
200
300
400
500

07. 배열 : 데이터 불러오기 : forEach()

forEach()를 통해 배열의 요소, 자릿값, 배열 전체를 불러올 수 있다.

const num = [100, 200, 300, 400, 500];
    
for(let i=0; i<num.length; i++){
    document.write(num[i]);     //for문을 이용한 출력
}

//forEach()를 이용해서 출력
num.forEach(function(el){       //el은 element의 줄임. element를 써도 된다.
    document.write(el);
});

//forEach()의 3가지 인자(parameter)값
num.forEach(function(element, index, array){
    document.write(element,"<br>");        //배열의 요소를 불러옴
    document.write(index,"<br>");      //요소의 자릿값을 불러옴
    document.write(array,"<br>");      //배열
});
결과보기
100200300400500

100200300400500

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 는 배열의 요소값을 불러온다.

const arr = [100, 200, 300, 400, 500];

for( let i of arr ){    //배열의 요소 값을 불러온다.
    document.write(i);
}
결과보기
100200300400500

09. 배열 : 데이터 불러오기 : for in

for in 은 배열의 자리값을 불러온다.

const arr = [100, 200, 300, 400, 500];

for( let i in arr ){        //배열의 인덱스 값을 불러온다.
    document.write(i,"<br>");    //01234 출력
    document.write(arr[i],"<br>"); //다음과 같이 작업하면 요소 값을 출력할 수 있다.
};
결과보기
0
100
1
200
2
300
3
400
4
500

10. 배열 : 데이터 불러오기 : map()

map()은 forEach처럼 요소와 자릿값, 배열전체를 불러올 수 있다.

const arr = [100, 200, 300, 400, 500];

arr.forEach(function(el){   //콜백함수는 ()안에 'function(){}'가 한 세트
    document.write(el,"<br>");
});

arr.map(function(el, i, array){   //forEach처럼 map도 요소, 자리값, 배열전체를 불러올 수 있다. 거의 같다고 보면 된다. 
    document.write(el,"<br>");
    document.write(i,"<br>");
    document.write(array,"<br>");
});
결과보기
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

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
100200300400500
100200300400500

12. 배열 : 데이터 불러오기 : 배열구조분해할당

배열구조분해할당은 기존의 구조를 부순 후 값을 재할당하는 방식으로 사용된다.

let a, b, c;

[a,b,c] = [100, 200, "javascript"]; //변수에 각각 동일한 위치에 있는 배열의 값을 할당한다.

document.write(a);  //100
document.write(b);  //200
document.write(c);  //javascript
결과보기
100200javascript

13. 객체 : 데이터 불러오기 : 기본

객체를 불러오는 기본적인 이름은 변수의 이름 뒤에 ".키값"을 붙이는 것이다.

const obj = {
    a : 100,
    b : 200,
    c : "javascript"
}

document.write(obj.a);
document.write(obj.b);
document.write(obj.c);
결과보기
100200javascript

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

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);
결과보기
100200javascript

16. 객체 : 데이터 불러오기 : for in

객체는 for in문을 활용해서 불러오는 방법도 있다.

const obj = {
    a : 100,
    b : 200,
    c : "javascript"
}

for( let i in obj ){    //여기서 i는 키 값이 된다.
    document.write(obj[i]);
}
결과보기
100200javascript

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);
});
결과보기
100200javascript

18. 객체 : 데이터 불러오기 : hasOwnProperty()

hasOwnProperty()는 객체 속에 해당하는 키와 값의 유무를 확인해주는 메소드이다. 결과 값은 true와 false로 나타낸다.

const obj = {
    a : 100,
    b : 200,
    c : "javascript"
}
document.write(obj.hasOwnProperty("a"));    //해당 키 값과 내용이 있는지 없는지 확인하고, 그 결과를 true/false로 알려준다.
document.write(obj.hasOwnProperty("b"));
document.write(obj.hasOwnProperty("c"));
document.write(obj.hasOwnProperty("d"));    //false
//아래는 약식 표현
document.write("a" in obj);
document.write("b" in obj);
document.write("c" in obj);
document.write("d" in obj);
결과보기
truetruetruefalse
truetruetruefalse

19. 객체 : 데이터 불러오기 : 펼침연산자 - 복사 

const obj = {
    a: 100,
    b: 200,
    c: "javascript"
}
const spread = { ...obj }

document.write(spread.a);
document.write(spread.b);
document.write(spread.c);
결과보기
100200javascript

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);
결과보기
100200javascriptjquery

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);
결과보기
100200javascriptjquery

22. 객체 : 데이터 불러오기 : 비구조화 할당 

const obj = {
    a: 100,
    b: 200,
    c: "javascript"
}

const { a, b, c } = obj;

document.write(a);
document.write(b);
document.write(c);
결과보기
100200javascript

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);
결과보기
100200javascript