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차 배열

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

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

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

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

배열 안에 저장된 갯수를 구할 수 있습니다.

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

    console.log(arr.length);    //배열의 갯수를 구할 땐 .length를 쓰면 된다.
}
결과 확인하기
3

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

여러개의 배열된 데이터를 for()문을 사용하여 데이터를 불러오는 방법입니다.

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

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

for()문

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]);

이렇듯 데이터에 일정한 규칙이 있고 입력해야하는 갯수가 많을 때 유용하다.

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

여러개의 배열된 데이터를 for()문을 이용해서 불러오는 방법입니다.
for( )문 안에 새로운 for( )문이 들어가 있는 것이다. ex) 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()

forEach문을 사용해 배열값을 실행하는 방법입니다.forEach( )문 안에는 함수가 들어가는 콜백 함수입니다. 

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

    num.forEach(function(element){
        document.write(element);
    });
}
결과 확인하기
100 200 300 400 500

forEach : 화살표 함수


num.forEach((el) => {
document.write(el);
});

결과 : 100 200 300 400 500


forEach : 화살표 함수 : 괄호 생략

num.forEach(el => {
document.write(el);
});

결과 : 100 200 300 400 500


forEach : 화살표 함수 : 중괄호 생략

num.forEach(el => document.write(el));


결과 : 100 200 300 400 500


forEach (값, 인덱스, 배열)

num.forEach(function(element, index, array){
document.write(element);
document.write(index);
document.write(array);
})


결과 : 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

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

for of 문은 문자열이나 배열과 같은 반복 가능 자료에서 사용하는 반복문입니다. forEach 문에서 사용했던 소스 코드를 for of 문에서도 사용할 수 있습니다. for of문은 element 값 출력하는데 사용합니다. 

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

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

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

for in문은 index값을 불러오는 방법입니다.

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

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

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

forEach문과 비슷하며, element(값) index(인덱스) array(배열)을 출력하는데 사용합니다.

{
    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

forEach와 map()의 차이점


forEach()가 배열 요소마다 한 번씩 주어진 함수(콜백)를 실행하는 특징을 가지고 있다면,
map()은 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과를 모아 새로운 배열을 반환한다는 특징을 가지고 있다.

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

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

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

    console.log(arr1, "
");
    console.log(...arr1,);  // 안에 for문이 들어가있음.
    console.log(...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 객체란 "key : value" 형태로 이뤄진 변수입니다.
"Object.keys()", "Object.values()"를 통해 이 Object객체의 key값들의 집합과, value값들의 집합을 추출할 수 있습니다.

{
    const obj = {
        a: 100,
        b: 200,
        c:"javascript"
    }
    console.log(Object.keys(obj));      // 방법1 : key만 불러옴
    console.log(Object.values(obj));    //방법2 : 값만 불러옴
    console.log(Object.entries(obj));   //방법3 : 둘다 불러옴
}
결과 확인하기
['a' , 'b', 'c']
[100, 200, 'javascript']
[Array(2), Array(2), Array(2)]
//0: ['a', 100]
//1: ['b', 200]
//2: ['c', 'javascript']
//length: 3

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
javascrip

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

for in문을 사용해서 객체의 데이터를 불러오는 방법입니다.

{
    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
javascrip

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)
    });
}
결과 확인하기
100
300
javascrip

map() 화살표


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

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

결과 확인하기
100
300
javascrip

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

객체에 특정 속성이 존재하는지 여부를 나타내는 불리언 값을 반환합니다. 해당 속성이 객체 자신의 속성으로 존재하면 true를 반환하고, 해당 속성이 존재하지 않으면 false를 반환합니다.

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

위에서 화살표로 사용하는 방법


{
console.log("a" in obj);
console.log("b" in obj);
console.log("c" in obj);
console.log("d" in obj);
}

결과 확인하기
true
true
true
false

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

펼침 연산자는 자바스크립트에서 배열, 객체, 문자열 등의 요소를 펼쳐서 개별 요소로 분리하는 연산자입니다. 데이터를 추가해서 불러올 수 있고, 두 개의 데이터를 합칠 수도 있습니다.

// 복사 기능
{
    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);
    console.log(spread.b);
    console.log(spread.c);
    console.log(spread.d);
}
결과 확인하기
100
200
javascript
react 
// 결합 기능
{
    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
react

객체 펼침연산자는 복사, 추가, 결합 기능이 있습니다.

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

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

 // 방법 1
{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const {a, b, c} = obj;

    console.log(a);
}
결과 확인하기
100 
// 방법 2. (이 문법을 제일 많이 씀.)
{
    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

키값을 그대로 써주지 않으면 undefined가 나옵니다.

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

console.log(x);
}



// 결과 : undefined