• 형변화, typeof()

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

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

{
    var x = 100;                //변수 x에 숫자 100을 저장함
    var y = "200";              //변수 y에 문자 200을 저장함
    var z = "javascript";       //변수 z에 문자 "javascript"를 저장함
    
     console.log(x);
     console.log(y);
     console.log(z);     
}
결과 확인하기
100
200
javascript

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

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

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

    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, ["javscript","react"]];

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

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

배열 안에 데이터의 갯수를 구하는 방법입니다.

{
    const arr = [100, 200, "javscript"];
            
    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[8]);  결과 : 100 200 300 400 .......900         
                                                                 
    for(let i = 0; i<9; i++){        // for(초기값; 조건식; 증감식)
        console.log(arr[i]);            // 실행문                                                                                                                              
    }
}
결과 확인하기
100 200 300 400 500 600 700 800 900

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

for()문 안에 for()문을 넣어 반복 실행함

{
    for(let i=1; i<=3; i++){
        console.log(i);
        for(let j=1; j<=3; j++){
            console.log(j);
        }
    }                                    
}
결과 확인하기
1
1
2
3
2
1
2
3

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

배열 객체의 메서드 중 하나입니다. 이 메서드를 사용하면 배열의 각 요소에 대해 콜백 함수를 실행할 수 있습니다.

{
    let arr = [10,20,30,40,50,60,70,80,90];

    //arr.forEach(function(element){      //콜백함수
    //    document.write(element);
    //});       
    //document.write("<br>");             //화살표 함수로 코드를 줄임
    
    //arr.forEach(el => {
    //    document.write(el);
    //});   
    //document.write("<br>")
    
    arr.forEach(el => document.write(el));             
}
결과 확인하기
102030405060708090

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

추가 정리

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

    //forEach
    num.forEach(function(el){
        document.write(el,"<br>");
    });
    document.write("<br><br>");
    
    //forEach : 화살표 함수
    num.forEach((el)=>{
        document.write(el, "<br>");
    });
    document.write("<br><br>");

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

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

    //forEach (값, 인덱스, 배열)
    num.forEach(function(element, index, array){
        document.write(element,"<br>");
        document.write(index,"<br>");
        document.write(array,"<br>");
    })       
}

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

ES6에서 도입된 반복문으로, 배열이나 이터러블 객체의 요소를 순회하는 데 사용되며, 간결하고 직관적인 코드 작성을 가능하게 합니다.

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

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

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

객체의 속성을 반복하는 유용한 방법입니다 배열에 사용하기보다는 객체에 더 적합합니다.

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

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

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

배열 안에 있는 데이터를 다시 배열로 불러오는 중요한 방법이다.

{
    const num = [100, 200, 300, 400, 500];
    
    num.forEach(function(el, i, a){
        console.log(el)
        console.log(i)
        console.log(a)
    });
    num.map(function(el, i, a){
        console.log(el)
        console.log(i)
        console.log(a)
    });
}
결과 확인하기
100200300400500

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

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

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

    console.log(arr1, "<br>");
    console.log(...arr1);
    console.log(...arr1, ...arr2)
}
결과 확인하기
[100, 200, 300, 400, 500] '<b>'
100 200 300 400 500
100 200 300 400 500 600 700

13. 배열 : 데이터 불러오기 : 배열 구조할당(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 클래스에 속한 keys(), values(), entries() 메소드를 사용하여 객체의 속성 정보를 추출하는 코드입니다.

{
    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']
[Array(2), Array(2), Array(2)]

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 루프를 사용한 것입니다.

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

JavaScript 배열 메소드 중 하나입니다. 이 메소드는 배열의 모든 요소에 대해 주어진 콜백 함수를 호출하고, 각 요소에서 반환된 결과를 새로운 배열로 반환합니다.

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

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

객체의 hasOwnProperty() 메소드는 주어진 속성 이름이 객체의 직접적인 속성인지 여부를 나타내는 불리언 값을 반환합니다.

{
    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")); //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. 객체 : 데이터 불러오기 : 객체 펼침연산자

JavaScript에서 새로 도입된 문법 중 하나로, ... 기호를 사용하여 객체를 복사하거나 병합할 수 있습니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const spread = {...obj};
                
    console.log(spread.a);  //100
    console.log(spread.b);  //200
    console.log(spread.c);  //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. 객체 : 데이터 불러오기 : 객체 구조분해할당

ECMAScript 6(ECMA-262)에서 새로 도입된 기능으로, 객체를 비구조화(destructuring)하여 그 값들을 개별적인 변수에 할당하는 것을 말합니다.

{
    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);
}
{
    let arr1 = [100, 200, 300, 400, 500];
    let arr2 = [600, 700];

    console.log(arr1, "<br>");
    console.log(...arr1);
    console.log(...arr1, ...arr2)
}
결과 확인하기
100
200
javascript
(5) [100, 200, 300, 400, 500] '<br>'
100 200 300 400 500
100 200 300 400 500 600 700