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], arr[1], arr[2]);
}
결과 확인하기
100
200
javascript

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

0 1 2 - 2가 문단 2의 첫번째를 불러오기 때문에 0이 붙게 됩니다.

 {
    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()

반복문의 경우 for 함수를 사용하게 된다.

{
    const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]

    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]);
    console.log(arr[9]);

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

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

여러개의 배열된 데이터를 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 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 2 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 3 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 4 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 5 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 6 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 7 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 8 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 9 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 10 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10

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

여러개의 배열된 데이터를 for문을 이용해서 불러오는 방법으로 for()문 안에 새로운 for()문이 들어가 있는 것입니다.

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

    //원초적 출력방식
    document.write(num[0],"
");

    //forEach 사용
    num.forEach(function(el){
        document.write(el,"
");
    });       
}
결과 확인하기
100
100
200
300
400
500

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

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

    //arr = i
    for(let i of arr){
        document.write(i);
    }
}
document.write("
");
결과 확인하기
100
200
300
400
500

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

for in문은 반복해서 객체의 값을 불러오는데 많이 사용되며 for in문은 index 인덱스 출력하는데 사용합니다.

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

    for(let i in arr){
        document.write(i);
    };
}
결과 확인하기
01234

메모

메모메모

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

자바스크립트 객체(object)의 속성(property)을 열거할 때 사용하는 반복문입니다.객체의 속성에 대해 반복하며, 반복할 때마다 해당 속성의 이름을 변수에 할당합니다.

{
    const num = [100, 200, 300, 400, 500];
    num.forEach(function(el, i, a){
        document.write(el, "
");
        console.log(i);
        console.log(a);
    });

    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. 배열 : 데이터 불러오기 : 배열 펼침 연산자 = 전개 구문

자바스크립트에서 배열, 객체, 문자열 등의 요소를 펼쳐서 개별 요소로 분리하는 연산자입니다.

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

    console.log(arr1);
    console.log(...arr1);
    console.log(...arr1, ...arr2);
}
결과 확인하기
Array
0:100
1:200
2:300
3:400
4:500
100 200 300 400 500
100 200 300 400 500 600 700

출력 방법

console.log(arr1) : [괄호]를 포함한 배열 자체를 불러온다.
console.log(...arr,) : ...으로 인해 배열 안의 값을 불러온다. ex) 100 200 300 400 500
console.log(...arr1, ...arr2) : 두개의 배열을 합친 값을 불러온다. ex) 100 200 300 400 500 600 700

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

배열 구조 분해 할당 (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"

문법과 형식

문법 : let [변수1, 변수2, ..., 변수N] = 배열;

[a, b, 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

{
    const obj = {
        a:100,
        b:200,
        c:"javascript"
    }
    console.log(Object.keys(obj));  // a, b, c 앞의 값을 불러오는 방법
    console.log(Object.values(obj));  // 100, 200, "javascript" 뒤의 값을 불러오는 방법
    console.log(Object.entries(obj));  // 전체를 불러오는 방법 *
}
결과 확인하기
Array
0:100
1:200
2:300
3:400
4:500
100 200 300 400 500
100 200 300 400 500 600 700

출력 방법

console.log(arr1) : [괄호]를 포함한 배열 자체를 불러온다.
console.log(...arr,) : ...으로 인해 배열 안의 값을 불러온다. ex) 100 200 300 400 500
console.log(...arr1, ...arr2) : 두개의 배열을 합친 값을 불러온다. ex) 100 200 300 400 500 600 700


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

객체의 속성을 변수에 할당하고 출력하는 기본적인 예제입니다.객체는 중괄호({})로 정의하며, 속성은 key:value 쌍으로 정의합니다. 

{
    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문은 '객체'의 속성을 순회할 때 사용합니다.obj 객체의 속성을 순회하며, 키와 값을 순서대로 출력하는 예제입니다.

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

for(let key in obj){
    console.log(key);           // key 
    console.log(obj[key]);      // value
}
}
결과 확인하기
a
100
b
200
c
javascript

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

obj 배열의 각 객체에 대해 map() 메소드를 호출하여 객체의 속성을 출력하는 예제입니다.map() 메소드는 배열의 각 원소에 대해 지정된 함수를 호출하고, 그 결과를 새로운 배열로 반환합니다. 

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

obj.map(function(el){    //익명함수 정의
    console.log(el.a);
    console.log(el.b);
    console.log(el.c);
});
}
결과 확인하기
100
300
javascript

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

객체의 hasOwnProperty() 메소드는 인자로 전달된 속성이 객체의 고유한 속성인지(상속받은 속성이 아닌지) 확인합니다.
해당 속성이 객체 자신의 속성으로 존재하면 true를 반환하고, 해당 속성이 존재하지 않으면 false를 반환합니다.
hasOwnProperty() 메소드를 사용하여 객체가 특정 속성을 가지고 있는지 확인하는 예제입니다. 

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

console.log(obj.hasOwnproperty("a")); //obj에 a라는 데이터가 있는가 true
console.log(obj.hasOwnproperty("b")); //obj에 b라는 데이터가 있는가 true
console.log(obj.hasOwnproperty("c")); //obj에 c라는 데이터가 있는가 true
console.log(obj.hasOwnproperty("d")); //obj에 d라는 데이터가 있는가 false   
}
결과 확인하기
true
true
true
false

hasOwnProperty( ) 약식

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

// 약식
console.log("a" in obj);    // obj 안에 (in) a가 있느냐. true
console.log("b" in obj);    // true
console.log("c" in obj);    // true
console.log("d" in obj);    // false
}

20. 객체 : 데이터 불러오기 : 객체 펼침 연산자(Spread Operator)

펼침 연산자는 자바스크립트에서 배열, 객체, 문자열 등의 요소를 펼쳐서 개별 요소로 분리하는 연산자입니다.
객체 펼침 연산자는 spread 연산자라고도 부르며, 주로 배열과 객체에서 사용됩니다. 주어진 배열이나 객체를 펼쳐서(iterate) 개별 요소나 속성으로 만들어주는 연산자입니다.
기존 객체에 새로운 속성을 추가하거나, 기존 속성의 값을 변경하거나, 두 개 이상의 객체를 병합할 수 있습니다.

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

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

데이터를 추가하거나 합칠 수 있습니다.

{ // 데이터 추가
const obj = {
    a: 100,
    b: 200,
    c: "javascript"
}
const spread = {...obj, d: "react"};    // 데이터를 추가로 입력해서 출력이 가능합니다.

console.log(spread.a);      // 100
console.log(spread.b);      // 200  
console.log(spread.c);      // javascript
console.log(spread.d);      // react
}

{ // 데이터 합치기입니다.
const obj1 = {
    a: 100,
    b: 200
}

const obj2 = {
    c: "javascript",
    d: "react"
}

const spread = {...obj1, ...obj2};      

console.log(spread.a);      // 100
console.log(spread.b);      // 200  
console.log(spread.c);      // javascript
console.log(spread.d);      // react
}

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

ES6에서 추가된 문법으로, 객체의 속성을 변수에 할당하는 방법을 간단하게 표현하는 문법입니다. 객체 구조 분해 할당을 사용하면, 객체의 각 속성을 개별 변수에 할당할 수 있습니다.

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

const {a, b, c} = obj;

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