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);
결과보기
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]); // arr이 들어가면 ()를 치고 arr를 먼저 써준다.
document.write(arr[1]);
document.write(arr[2]);
결과보기
100
200
"javascript"

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

2개의 배열을 불러온다.

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

document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2][0]); //3번 째 배열 안에 첫번 째는 [2][0] 순으로 출력
document.write(arr[2][1]);
결과보기
100
200
javascript
jquery

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

배열 갯수를 구한다.

onst 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(let i = 0; i <arr.length; i++){
    document.write(arr[i]);
};
결과보기 100
200
300
400
500
600
700
800
900

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

forEach() 메서드는 배열에 활용이 가능한 메서드
파라미터로 주어진 함수를 배열 요소 각각에 대해 실행 

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

//forEach()를 이용해서 출력 : 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); // 중간에 쉼표가 나온다.
});
결과보기
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

반복 가능한 객체에 대해서 반복하고
각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프 생성 

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);
    document.write(arr[i]);
}
결과보기
100200300400500

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

callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용

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

//forEach를 이용해서 값을 출력
//arr.forEach(function(el){
//    document.write(el);
//    console.log(el)
//}); //데이터를 불러올 때 값으로 불러온다. | el, in, array 값 3가지 모두 불러 올 수 있다.

arr.map(function(el){
    document.write(element);
    document.write(index);
    document.write(array);
}); //데이터를 불러올 때 배열로 불러온다. | 일단 forEach 랑 map 은 같다고 이해한다. el, in, array 값 3가지 모두 불러 올 수 있다.
결과보기
100200300400500

11. 배열 : 데이터 불러오기 : 펼침연산자

배열에 포함된 항목을 목록으로 바꿔주는 연산자이다.

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

document.write(num); // 답 : 100, 200, 300, 400, 500
document.write(num[1], num[2], num[3], num[4]); // 쉼표 없이 나온다.
document.write(...num); // 위 출력값을 더 간단하게 출력하는 방법 (답은 위와 같다.)
결과보기
100,200,300,400,500

12. 배열 데이터 불러오기 : 배열구조 할당 (Destructruing assignment)

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 한다.

let a, b, c; // 변수만 선언 시킨 것

[a, b, c] = [100, 200, "javascript"]; // 구조를 재 배당해줘서 다시 만들어 준 것

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

13. 배열 데이터 불러오기 : 기본

callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용

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

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

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

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

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

for (let key in obj){
    document.write(obj[key]);
} // 뷰에서 많이 쓰인다.
결과보기
100200javascript

17. 배열 데이터 불러오기 : 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()

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); // 약식으로도 쓸 수 있다. (obj 안에 a 가 있는지 판별)
document.write("b" in obj);
document.write("c" in obj);
document.write("d" in obj);
결과보기
truetruetruefalsetruetruetruefalse

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

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

const spread = { ...obj }; // obj 안의 객체를 모두 복사해온다.

document.write(spread.a);
document.write(spread.b);
document.write(spread.c);

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

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

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

const spread = { ...obj, d: "jquery" }; // d 객체 추가

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

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

const objA = {
    a: 100,
    b: 200,
};
const objB = {
    c: "javascript",
    d: "jquery",
};

const spread = { ...objA, ...objB }; // obgA와 objB 결합

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

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

const obj = {
    a: 100,
    b: 200,
    c: "javascript",
};
const { a, b, c } = obj; // 최신 문법 (key 값)

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

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);
결과보기
100
200
javascript
👆🏻 맨 위로 올라가기