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

컴퓨터 프로그래밍에서 아직 알려지지 않거나 어느 정도까지만 알려져 있는 양이나 정보에 대한 상징적인 이름이다. 

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

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

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

상수는 변하지 않는 변수를 뜻한다. 

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

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

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

배열은 번호(인덱스)와 번호에 대응하는 데이터들로 이루어진 자료 구조를 나타낸다. 

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

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

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

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]);
결과보기
100
200
javascript
jquery

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

length를 붙여서 배열 속 갯수를 구할 수 있다. 

const arr = [100, 200, "javascript"];
document.write(arr.length);
결과보기
3

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]);
// document.write(arr[5]);
// document.write(arr[6]);
// document.write(arr[7]);
// document.write(arr[8]);

//for(초기값, 조건식, 증감식)
for (let i = 0; i < 9; i++){
    document.write(arr[i]);
}
for (let i = 0; i < arr.length; i++){
    document.write(arr[i]);
}
결과보기
100, 200, 300, 400, 500, 600, 700, 800, 900
100, 200, 300, 400, 500, 600, 700, 800, 900

07. 배열 : 데이터 불러오기 : 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);     //el = element
})     
//forEach 3가지 인자(parameter)값
num.forEach(function(element, index, array){
    document.write(element);
    document.write(index);
    document.write(array);
});
결과보기
100200300400500
100200300400500
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문은 인덱스 값을 출력한다.

const arr = [100, 200, 300, 400, 500];
for( let i in arr){
        document.write(i); 
}
결과보기
01234

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

메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. 

const arr = [100 ,200, 300, 400, 500];  // forEach문은 값을 값으로 저장
    arr.forEach(function(el){
    //document.write(el);
    //console.log(el);
});      //forEach 값

    arr.map(function(el){    // map은 값을 배열로 저장
    document.write(el);
    console.log(el);
});

    arr.map(function(el, index, array){ //forEach문과 마찬가지로 3가지 값이 모두 출력가능하다.
    //document.write(el);
    //document.write(index);
    //document.write(array); // map 값
});
결과보기
100200300400500

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. 배열 : 데이터 불러오기 : 배열구조분해할당

length를 붙여서 배열 속 갯수를 구할 수 있다. 

let a, b, c;
    [a, b, c] = [100, 200, "javascript"];
결과보기
100200javascript

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

length를 붙여서 배열 속 갯수를 구할 수 있다. 

  const obj = {
    a: 100,
    b: 200,
    c: "javascript"
}
결과보기
100200javascript

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

length를 붙여서 배열 속 갯수를 구할 수 있다. 

const arr = [100, 200, "javascript"];
document.write(arr.length);
결과보기
100200javascript

15. 객체 : 데이터 불러오기 : 변수

length를 붙여서 배열 속 갯수를 구할 수 있다. 

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

length를 붙여서 배열 속 갯수를 구할 수 있다. 

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

for (let key in obj) {
    // document.write(obj[key]);
}
결과보기
100200javascript

17. 객체 : 데이터 불러오기

가장 많이 쓰인다. 

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

obj.map((el) => {
    document.write(el.a);
    document.write(el.b);
    document.write(el.c);
});
결과보기
100,200,javascript

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

데이터안에 값이 있는지 없는지 확인할때 쓰인다. 

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

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

배열에 포함된 항목을 목록으로 바꿔주는 연산자이다.
펼침 연산자는 단독으로 쓰일 수 없음에 주의해야 한다.
배열에 포함된 항목을 목록으로 바꿨다면 이를 배열이나 객체 등에 담아줘야 한다. 변수에 담게 되면 에러가 발생한다. 

const obj = {
    a: 100,
    b: 200,
    c: "javasccript"
}
const spread = { ...obj } //복사의 기능
결과보기
100
200
javascript

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

배열이나 객체에 데이터를 추가할 수 있습니다. 

const obj = {
    a: 100,
    b: 200,
    c: "javasccript"
}
const spread = { ...obj, d: "jquery" } //추가의 기능
console.log("spread",spread.a);
console.log("spread",spread.b);
console.log("spread",spread.c);
console.log("spread",spread.d);
결과보기
100
200
javascript
jquery

21. 객체 : 데이터 불러오기 : 펼침연산자 - 결합

펼침연산자는 객체를 결합시킬 수 있습니다. 

const objA = {
    a: 100,
    b: 200
}
const objB = {
    c: "javascript",
    d: "jquery"
}
const spread = { ...objA, ...objB }
console.log("spread",spread.a);
console.log("spread",spread.b);
console.log("spread",spread.c);
console.log("spread",spread.d);
결과보기
100
200
javascript
jquery

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

비구조화 할당 문법을 사용하면 다음과 같이 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언할 수 있습니다. 

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

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

23. 객체 : 데이터 불러오기 : 객체구조분해할당

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. 

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