Top

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

데이터를 불러올 때 변수를 사용하는 방법입니다. let을 이용할 수 있으며 let을 생략에서 쉼표로 이어서 쓸 수도 있습니다.

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

let x =100,  //let을 생략해서 쉼표로 이어서 쓸 수 있음
    y = 200,
    z = "javascript";

document.write(x);
document.write(y);
document.write(z);
결과보기
100
200
javascript

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

데이터를 불러올 때 상수를 사용하는 방법입니다. const를 이용합니다. 

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

document.write(x);
document.write(y);
document.write(z);
결과보기
100
200
javascript

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

const arr = []안에 요소를 배열하여 데이터를 불러오는 방법입니다.

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

document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
결과보기
100
200
javascript

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

const arr = []안에 요소를 배열하되 안에 []를 사용하여 그 안에 요소를 또 배열하여 데이터를 불러오는 방법입니다.

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

document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2][0]);
document.write(arr[2][1]);
결과보기
100
200
javascript
jquery

05. 배열 : 데이터 불러오기 : 갯수 구하기

데이터를 불러올 때 배열를 사용할 수 있는데 배열의 갯수를 구할 수도 있습니다. 이 때 arr.length를 사용합니다.

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

document.write(arr.length) 
//lengh 라는 속성 : 속성을 ()가 없고 고유의 값임 : 배열의 갯수르 출력함<->메소드는 있음
결과보기
3

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(초기값, 조건식, 증감식)
    for(let i=0; i<arr.length; i++){
        document.write(arr[i]);
    }
결과보기
100
200
300
400
500

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

데이터 불러오기 방법 중 배열의 forEach()문이 있습니다. map()메서드와 거의 비슷하지만 따로 return하는 값이 없다는 차이가 있습니다.

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);
});           

//forEach() 3가지 인자(parameter)값
num.forEach(function(element, index, array){
    document.write(element);
    document.write(index);
    document.write(array);
});
결과보기
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 문은 반복할 수 있는 객체를 순회할 수 있도록 해주는 반복문입니다. 'for 변수 of 객체' 의 형태
Array, Map, Set 등이 해당되고 Object는 해당되지 않습니다.

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

for(let i of arr){
    document.write(i);
}
결과보기
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); //인덱스여서 순서알려주고, 01234
document.write(arr[i]); //arr여서 값을 배열함. 100200300400500
}
결과보기
0
100
1
200
2
300
3
400
4
500

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

map도 배열의 반복문의 역할을 합니다.
map()함수는 값과 인덱스를 인자로 받아 자동으로 for문을 돌려 값을 빼도로 해줍니다. 

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

//forEach 이용해서 값 출력

arr.forEach(function(element, index, array){ //데이터 불러올 때 값으로 불러옴
    document.write(element);
    document.write(index);
    document.write(array);  
});
       
arr.map(function(element, index, array){ //데이터 불러올 때 저장할 때도 배열로 저장함
    document.write(element);
    document.write(index);
    document.write(array);
    
}); //먼저 (function(){}); 이렇게 써줘야 안헷갈림
결과보기
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
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); //다같이 불러도 쉼표가 안나오는 펼침연산자
결과보기

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

배열구조분해할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript의 표현식입니다.

let a, b, c;
[a,b,c] = [100, 200, "javascript"];

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

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

객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입입니다.
Javascript는 객체 기반의 스크립트 언어이며 객체가 거의 Javascript의 모든 것을 이룹니다. 

const obj = {
    a : 100,
    b : 200,
    c : "javascript"
}
document.write(obj.a);
document.write(obj.b);
document.write(obj.c);
결과보기

14. 객체 : 데이터 불러오기 : Object

객체는 데이터를 불러오며 key와 value 값을 가져올 수 있으며 key와 value 값을 entry를 통해 모두 가져올 수 있습니다.

 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. 객체 : 데이터 불러오기 : 변수

객체는 변수를 통해서도 데이터를 불러올 수 있는데 변수에 객체를 지정한 후 document를 이용하여 변수를 대입하면 데이터를 불러올 수 있습니다.

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객체는 키와 값의 형태의 값을 가지는 객체입니다. 또한, 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"));   //데이터가 있냐 없냐에 따라 true, false 로 값이 나옴
document.write(obj.hasOwnProperty("b"));
document.write(obj.hasOwnProperty("c"));
document.write(obj.hasOwnProperty("d"));
document.write("a" in obj); //obj안에 a가 있냐 없냐를 알려달라.
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. 객체 : 데이터 불러오기 : 펼침연산자-추가

hasOwnProperty 메서드는 객체가 특정 프로퍼티에 대한 소유 여부를 반환합니다.
프로퍼티가 존재하면 true, 존재하지 않으면 false를 반환합니다. 

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. 객체 : 데이터 불러오기 : 펼침연산자 - 결합

hasOwnProperty 메서드는 객체가 특정 프로퍼티에 대한 소유 여부를 반환합니다.
프로퍼티가 존재하면 true, 존재하지 않으면 false를 반환합니다. 

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. 객체 : 데이터 불러오기 : 비구조화 할당

hasOwnProperty 메서드는 객체가 특정 프로퍼티에 대한 소유 여부를 반환합니다.
프로퍼티가 존재하면 true, 존재하지 않으면 false를 반환합니다. 

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