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

변수 안에 저장된 데이터를 불러오는 방법입니다.
괄호안에 문자를 입력해 값을 불러옵니다. 

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

    console.log(x, y, z);
}
결과 확인하기
100 200 javascript

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

상수 안에 저장된 데이터를 불러오는 방법입니다.
괄호안에 문자를 입력해 값을 불러옵니다. 

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

    console.log(x, y, z);
}
결과 확인하기
100 200 javascript

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

배열 안에 저장된 데이터를 불러오는 방법입니다.

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

    console.log(arr[0])
    console.log(arr[1])
    console.log(arr[2])
}
결과 확인하기
100
200
javascript

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

배열 안에 저장된 데이터를 불러오는 방법입니다.
대괄호 안에 배열을 사용해 값을 불러옵니다. 

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

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2][0]);
    console.log(arr[2][1]);
}
결과 확인하기
100
200
javascript
react

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

length를 이용해 데이터의 갯수를 구하는 방법입니다.

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

    console.log(arr.length)
}
결과 확인하기
3

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

아래의 공식을 통해 데이터를 불러옵니다.
기본적인 반복문 중 하나입니다.
대입은 초기값, 조건식, 실행문, 증감식 순으로 하면 이해하기 편합니다. 

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

    //기존의 방법을 활용하면 되지만, 데이터가 많아질 경우 복잡해질 수 있습니다.

    //console.log(arr[0]);
    //console.log(arr[1]);
    //console.log(arr[2]);
    //console.log(arr[3]);
    //console.log(arr[4]);
    //console.log(arr[5]);
    //console.log(arr[6]);
    //console.log(arr[7]);
    //console.log(arr[8]);
    
    // for()문을 쓰면 번거로움 없이 값을 불러올 수 있습니다.
    // for()문 공식 :for(초기값; 조건식; 증감식;){
                            //실행문
                     //}

    for(let i=0; i<9; i++){
        console.log(arr[i]);
    }
}
결과 확인하기
100
200
300
400
500
600
700
800
900

for()문 공식

for(초기값; 조건식; 증감식){실행문}

07. 배열 : 데이터 불러오기_중첩 for()문

아래의 공식을 통해 데이터를 불러옵니다.
for문 안에 for문이 있는 방식으로 여러 개의 데이터를 불러올 수 있습니다. 

{
    for(let i=1; i<=10; i++){
        console.log("i : "+i);
        for(let j=1; j<=10; j++){
            console.log("j:"+j);
        }
    }
}
결과 확인하기
i:1 ~ i:10
j:1 ~ j:10

08. 배열 : 데이터 불러오기_forEach()

forEach문은 for문을 간결하게 사용할 수 있는 메소드입니다.
기존에 for()문에 있는 초깃값이나 조건식, 증감식 등등 생략하고 forEach()공식을 통해 데이터를 불러올 수 있습니다. 

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

    document.write(num[0]);
    document.write(num[1]);
    document.write(num[2]);
    document.write(num[3]);
    document.write(num[4]);

    //for문을 사용해서 출력
    for(let i=0; i<num.length; i++){
        document.write(num[i]);
    }

    //forEach문 사용해서 출력 (el은 element를 간결하게 적은 것이다.)
    num.forEach(function(el){
        document.write(el);
    });

    //forEach문 : 화살표 함수
    num.forEach((el) => {
        document.write(el);
    });

    //forEach문 : 화살표 함수, 괄호 생략
    num.forEach(el => {
        document.write(el);
    });

    //forEach문 : 화살표 함수, 괄호 생략, 중괄호 생략
    num.forEach(el => document.write(el));

    //forEach (값, 인덱스, 배열)
    num.forEach(function(element, index, array){
        document.write(element);
        document.write(index);
        document.write(array);
    })
}
결과 확인하기
100200300400500 *6
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

forEach문 작성방식

배열명.forEach(function(요소명){실행문});

09. 배열 : 데이터 불러오기_for of

for문을 간결하게 쓰기 위해 생겼습니다.

{
    const arr = [100, 200, 300, 400, 500];
            
    for(let a of arr){
        document.write(a);
    }
}
결과 확인하기
100200300400500

10. 배열 : 데이터 불러오기_for in

객체의 열거 가능한 '속성들'을 순회할 수 있도록 해줍니다.
객체의 key값에 접근 가능하고, value값에는 직접 접근 불가합니다.
모든 객체에서 사용 가능합니다. 

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

11. 배열 : 데이터 불러오기_map()

Map 객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션입니다.
아무 값(객체와 원시 값)이라도 키와 값으로 사용할 수 있습니다. 

{
    const num = [100, 200, 300, 400, 500];
            
    num.map(function(el, i, a){
        console.log(el);
        console.log(i);
        console.log(a);
    });    
}
결과 확인하기
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]

12. 배열 : 데이터 불러오기_배열 펼침연산자(Spread Operator)

펼침 연산자(spread operator)는 배열, 객체 또는 문자열 등을 펼쳐서(iterate) 개별 요소로 분리할 수 있습니다.
배열에서 펼침 연산자를 사용하면 배열의 각 요소를 개별적인 값으로 분리하여 전달할 수 있습니다.,
배열끼리의 결합도 가능합니다. 

{
    let arr1 = [100, 200, 300, 400, 500];
    let arr2 = [600, 700];

    console.log(arr1, "<br>"); //배열로 값이 출력됨. 
    console.log(...arr1,);  //개별적인 값으로 분리하여 출력됨.
    console.log(...arr1, ...arr2); //arr1과 arr2의 개별적인 값이 같이 출력됨.
}
결과 확인하기
[100, 200 300, 400, 500]
100, 200, 300, 400, 500
100, 200, 300, 400, 500, 600, 700

13. 배열 : 데이터 불러오기_배열 구조분해할당(Destructuring assignment)

배열 구조 분해 할당(Array destructuring assignment)은 배열이나 객체의 값들을 추출하여 변수에 할당할 수 있습니다.
이를 통해 코드의 가독성과 유지보수성을 높일 수 있습니다. 

{
    let a, b, c;

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

    console.log(a);
    console.log(b);
    console.log(c);
}
결과 확인하기
100
200
javascript

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

객체에 저장되어있는 데이터를 불러오는 방법 중 가장 기본적인 방법입니다. 

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}
결과 확인하기
100
200
javascript

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

객체에서 Object를 사용하여 특정 속성 값을 불러오는 방법은 다음과 같습니다.
객체에서 속성 이름을 변수로 사용해야 할 때는 Object 문법을 사용하는 것이 유용합니다. 

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    console.log(Object.keys(obj)); //키의 값만 불러옴.
    console.log(Object.values(obj)); //인덱스 값만 불러옴.
    console.log(Object.entries(obj)); //둘 다 불러옴.
}
결과 확인하기
['a', 'b', 'c']
[100, 200, 'javascript']
['a', 100]
['b', 200]
['c', 'javascript']

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

변수에 저장하여 데이터(변수)를 불러옵니다.

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

    const name1 = obj.a;
    const name2 = obj.b;
    const name3 = obj.c;

    console.log(name1);
    console.log(name2);
    console.log(name3);
}
결과 확인하기
100
200
javascript

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

for...in문은 객체의 속성을 열거하기 위한 반복문입니다.
for...in문은 객체의 속성 중 열거 가능한(enumerable) 속성을 대상으로 하며, 해당 객체의 프로토타입 체인 상에 정의된 속성은 제외됩니다. 

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    for(let key in obj){
        console.log(key); //키의 값만 불러옴
        console.log(obj[key]); //저장된 값을 불러옴
    }
}
결과 확인하기
a
100
b
200
c
javascript

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

객체의 map() 메서드는 배열의 map() 메서드와 유사한 기능을 하며, 객체의 속성을 순회하면서 속성 값을 변환하여 새로운 객체를 생성합니다.
첫 번째 매개변수는 현재 속성의 값, 두 번째 매개변수는 현재 속성의 이름(키), 세 번째 매개변수는 원본 객체 그 자체입니다.
콜백 함수는 반환값을 갖는 함수로 작성되며, 이 값은 새로운 객체의 속성 값으로 사용됩니다.배열 안에 객체가 있는 구조에서 주로 쓰입니다. 

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

    obj.map(function(el){
        console.log(el.a);
        console.log(el.b);
        console.log(el.c);
    });

    //화살표 함수
    obj.map((el) => {
        console.log(el.a);
        console.log(el.b);
        console.log(el.c);
    });
}
결과 확인하기
100
300
javascript

19. 객체 : 데이터 불러오기_hasOwnProperty()

hasOwnProperty() 메서드는 객체가 특정 속성(프로퍼티)을 가지고 있는지를 검사하는 JavaScript 내장 메서드입니다.
이 메서드는 인자로 전달된 속성의 이름이 객체의 직속 속성(즉, 객체 자신이 직접 가지고 있는 속성)인 경우에만 true를 반환하고, 상속받은 속성이거나 속성이 없는 경우에는 false를 반환합니다. 

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    console.log(obj.hasOwnProperty("a")); //true
    console.log(obj.hasOwnProperty("b")); //true
    console.log(obj.hasOwnProperty("c")); //true
    console.log(obj.hasOwnProperty("d")); //flase

    // 약식으로 쓰는 방법
    console.log("a" in obj);
    console.log("b" in obj);
    console.log("c" in obj);
}
결과 확인하기
true
true
true
false

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

객체 펼침 연산자(Object spread operator)는 JavaScript에서 객체를 펼쳐서 새로운 객체를 만들기 위한 문법입니다. 이 연산자는 ...으로 표시됩니다.
객체 펼침 연산자를 사용하면 기존 객체의 속성을 새로운 객체에 포함시키면서, 새로운 속성을 추가하거나 덮어쓸 수 있습니다. 

{
    // 기본 형태
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const spread = {...obj}

    console.log(spread.a);
    console.log(spread.b);
    console.log(spread.c);

    // 추가가 가능하다.
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const spread = {...obj, d:"react"}

    console.log(spread.a);
    console.log(spread.b);
    console.log(spread.c);
    console.log(spread.d);

    // 결합이 가능하다.
    const obj1 = {
        a: 100,
        b: 200
    }
    const obj2 = {
        c: "javascript",
        d: "react"
    }
    const spread = {...obj1, ...obj2}

    console.log(spread.a);
    console.log(spread.b);
    console.log(spread.c);
    console.log(spread.d);
}
결과 확인하기
100
200
javascript

100
200
javascript
react

100
200
javascript
react

21. 객체 : 데이터 불러오기_객체 구조분해할당(비구조화 할당)

객체 구조 분해 할당(Object Destructuring Assignment)은 객체의 속성들을 변수에 할당하는 방식을 간편하게 처리할 수 있도록 도와주는 문법입니다.
객체 구조 분해 할당을 이용하여 객체의 속성들을 각각 변수에 할당할 수 있습니다. 

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const {a, b, c} = obj;
    
    console.log(a);
    console.log(b);
    console.log(c);

    // 객체 구조 분해 할당을 이용하여 변수 이름을 변경할 수도 있습니다.
    
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const {a:name1, b:name2, c:name3} = obj;
    
    console.log(name1);
    console.log(name2);
    console.log(name3);
}
결과 확인하기
100
200
javascript

100
200
javascript

객체 구조 분해 할당은 배열에서도 사용할 수 있습니다. 배열의 경우에는 대괄호([])를 사용합니다.