티스토리 뷰

development/html javascript CSS

[JavaScript] 데이터타입(2) object, array, function / splice(), push()

Happyoon ~ 2021. 10. 8. 18:18
728x90
반응형

1. 자바스크립트에서 순서가 있는 정보는 array에, 순서가 없는 정보는 object에 담아 관리한다. 

2. 배열은 파이썬과 유사하고, 배열에 아이템 추가는 push함수를 사용한다.

3. splice함수는 삭제, 끼워넣기 기능을 수행할 수 있다.

삭제 시, splice(삭제를 시작할 index, 삭제할 갯수)로 사용하고,

끼워넣기 시, splice(끼워넣을 인덱스, 삭제할 갯수 0개, 새로운 item)으로 사용한다. 

4. 배열에는 주로 한가지 데이터 타입을 담는 것이 일반적이다. 

   => 따라서, 여러가지 데이터 타입을 한번에 관리하기 위해 배열에 plain object type 역시 담을 수 있다. 

6. function도 데이터 타입의 일종이다. 

   => 따라서 오브젝트에 함수도 담을 수 있다. 

7. 함수 선언법은 let f1 = function(){ }와 같다.

 

예제1

plain object와 arrary 예시.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<h1>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>javascript data type</h1>
    <script>
        //순서가 있는 정보는 array, 없는 정보는 object에 담아 관리한다.
        //상품 하나의 정보
        let bag = {name : "숄더백", price:"10000원",color:"검정색"};
        let one = "만두";
        let two = "고기";
        let three ="케이크";
        let four = "스시";
        let five = "떡볶이";

        //순서가 있는 데이터 관리하는 법 => array 사용 
        let foods = ["만두","고기","케이크","스시","떡볶이"];

        //배열의 특정방 참조해서 대입하기
        let a = foods[0];
        let b = foods[1];
        let c = foods[2];

        //배열의 특정방 참조해서 수정하기 
        foods[0] = "피자";
        foods[1] = "파스타";
        
        //배열에 아이템  추가하기
        foods.push("돈까스");
        foods.push("햄버거");

        //배열의 방의 갯수 참조
        let size = foods.length;

        //배열의 특정 인덱스의 방 1개 삭제하기
        // .splice(삭제를 시작할 index, 삭제할 갯수)
        foods.splice(4,1);


        //배열의 특정 인덱스에 아이템 끼워 넣기
        //.splice(끼워넣을 인덱스, 방을 없애지 않을거니 0, 새로운 아이템)
        foods.splice(1,0,"떡볶이");

                
    </script>
</body>
</html>

 

 

 

예제2

배열에 plain object 담고 각각 자료형 살펴보기.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //배열에는 주로 한가지 type의 데이터만 담는게 일반적이다.
        
        //배열에 number type 담기
        let nums = [10,20,30];

        //배열에 string type 담기
        let names = ["김구라","해골","원숭이"];

        //배열에 boolean type 담기
        let data = [true,false,false,true,true];

        //배열에 plain object type 담기
        let members = [
            {num:1,name:"김구라",isMan:true},
            {num:2,name:"해골",isMan:false},
            {num:3,name:"원숭이",isMan:true}
        ];

        let a = members; //array
        let b = members[0]; //object
        let c = members[0].num; //number
        let d = members[0].name; //string
        let e = members[0].isMan; //boolean

    </script>
</body>
</html>

 

 

 

예제3

버튼을 눌러 함수가 실행되도록 구현.

함수에서

let f2 = f1; 

으로하면, f2에 f1에 들어있는 참조값을 대입한다는 의미.

따라서 f2의 데이터 타입도 함수!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Step01_dataType6</title>
</head>
<body>

    <!-- 버튼을 누르면 car1함수가 실행되도록 만들어보기 -->
    <button onclick="car1.drive()">달리자</button>
   

    <script>
        //number type 데이터를 만들어서 num1이라는 변수에 대입하기
        let num1 = 10;
        //object type 데이터를 만들어서 obj라는 변수에 대입
        let obj = {};
        //array type 데이터를 만들어서 arr이라는 변수에 대입
        let arr = [];
        //function type 데이터를 만들어서 f1이라는 변수에 대입
        
        let f1 = function(){
            console.log("하나");
            console.log("둘");
            console.log("셋");
        };

        //f1에 들어있는 참조값을 f2에 대입(복사)하기
        let f2 = f1;
        
        let car1 = {
            name : "테슬라",
            drive:function(){
                console.log("달려요!");
            }

        };


    </script>
</body>
</html>
반응형

'development > html javascript CSS' 카테고리의 다른 글

[JavaScript] 이벤트처리 / EventListener, id / querySelector  (0) 2021.10.08
[JavaScript] 데이터타입(3) 함수, undefined  (0) 2021.10.08
[JavaScript] 데이터 타입(1) boolean, number, string  (0) 2021.10.08
[JavaScript] 함수 이용하기  (0) 2021.10.08
[JavaScript] object와 function  (0) 2021.10.07
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함