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

변수는 데이터를 저장하는 저장소 입니다. 이 저장소에는 숫자, 문자, 함수 객체 등을 저장할 수 있습니다. 

var x = 100;            //변수 x에 숫자 100을 저장함
var y = 200;            //변수 y에 숫자 200을 저장함
var z = "javascript";  //변수 z에 문자열 "javascript" 를 저장함
    
document.write(x);
document.write(y);
document.write(z);
결과 보기

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

상수(const)는 이미 선언한 상수에 대해 중복해서 선언할 수 없고, 상수의 값은 재지정할 수도 없습니다. 

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

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

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

배열은 여러개의 데이터를 저장할 수 있는 저장소 입니다. 표현 방법도 여러가지가 있습니다. 

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

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

04. 배열 : 데이터 불러오기 : 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]);
결과 보기

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

arr 배열이 가진 값이 몇개인지 알아보려면 length를 사용합니다. 

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

document.write(arr.length);
결과 보기

06. 배열 : 데이터 불러오기 : for()문

반복문이란 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 명령문입니다. 프로그램이 처리하는 대부분의 코드는 반복적인 형태가 많으므로, 가장 많이 사용되는 제어문 중 하나입니다. 

const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];

//document.write(arr[0], arr[1], arr[2], arr[3], arr[4], arr[5], arr[6], arr[7], arr[8]);

for(초기값, 조건식, 증감식)
for(let i=0; i<arr.length; i++){
    document.write(arr[i]);
}
결과 보기
100200300400500600700800900

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

forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행합니다. 

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
100200300400500
01234
100,200,300,400,500
100,200,300,400,500
100,200,300,400,500
100,200,300,400,500
100,200,300,400,500

08. 배열 : 데이터 불러오기 : for of

for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다. for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 합니다(직접 명시 가능). 

const arr = [100,200,300,400,500];
        
for(let i=0; i<5; i++){
    document.write(arr[i]);
}
for(let i of arr){              //of 요소값
    document.write(i);
}
결과 보기
100200300400500
100200300400500

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

for in 반복문은 객체의 속성들을 반복하여 작업을 수행할 수 있습니다. 모든 객체에서 사용이 가능합니다. for in 구문은 객체의 key 값에 접근할 수 있지만, value 값에 접근하는 방법은 제공하지 않습니다. 자바스크립트에서 객체 속성들은 내부적으로 사용하는 숨겨진 속성들을 가지고 있습니다. 그 중 하나가 [[Enumerable]]이며, for in 구문은 이 값이 true로 셋팅되어 속성들만 반복할 수 있습니다. 이러한 속성들을 열거형 속성이라고 부르며, 객체의 모든 내장 메서드를 비롯해 각종 내장 프로퍼티 같은 비열거형 속성은 반복되지 않습니다. 

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

for(let i in arr){          //in인덱스값
document.write(i); 
document.write(arr[i]);
}
결과 보기
01234
100200300400500

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

map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만듭니다. callback 함수는 (undefined도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출됩니다. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않습니다. 

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

arr.map(function(el){
    document.write(el);
});
arr.map(function(element, index, array){
    document.write(element);
    document.write(index);
    document.write(array);
});
결과 보기
100200300400500
100200300400500
01234
100,200,300,400,500
100,200,300,400,500
100,200,300,400,500
100,200,300,400,500
100,200,300,400,500

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

마침표 세 개(...)로 표시한다.
펼침 연산자의 가장 큰 장점은 조작(mutation)이나 부수 효과(side effect)로 인한 문제를 피할 수 있다는 점이다.
또한, push(), splice(), concat() 등의 배열 메소드를 외울 필요 없이 간결하게 코드를 작성할 수 있다.
특히 위 메소드들은 원본 배열을 변경하는데, 펼침 연산자는 원본 배열을 변경하지 않는다는 점에서 이점을 가진다. 

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

객체 데이터를 호출하여 불러올 수 있습니다. 

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

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));    //키와 값을 불러옴
결과 보기

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

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()으로 데이터를 불러올 수 있습니다. 

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()으로 데이터가 저장 되어 있는지 확인할 수 있습니다. 

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

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: "jqeury"}
    document.write(spread.a);
    document.write(spread.b);
    document.write(spread.c);
    document.write(spread.d);
}
결과 보기
100200javascriptjqeury

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

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
TOP