js 2일차 - 객체(1) _ 데이터관련, spread 연산자 + 얕은복사, 깊은복사

###########################################################################
###########################################################################
6장. 객체 (object) - **********************
###########################################################################

1. 종류 3가지
  ==> 자바처럼 상속과 비슷한 개념(프로토타입(prototype) 관계)으로 계층구조화 되어 있음.
      최상위 객체는 Object 이다.
  ==> 객체의 구성요소는 변수,메서드(정적메서드, 인스턴스 메서드),생성자를 가짐.
  1> 데이터(기본+참조) 관련 객체
      -문자관련 ==> String 객체가 관리
      -수치    ==> Number 객체가 관리
      -날짜    ==> Date 객체가 관리
      -배열    ==> Array 객체가 관리 (***************)
                 Set/Map 같은 컬렉션 제공됨(ES6)
      -JSON   ==> object 객체가 관리
  2> BOM ( Browser Object Model)
    - 웹 브라우저 관련 객체
    - 종류
      Window 객체
      Screen 객체
      Histroy 객체
      Location 객체
      Navigator 객체
  3> DOM ( Document Object Model )
   - html 문서 관련 객체
   - Document 객체 ( 자동으로 생성됨. document 변수로 참조 )

2. 데이터 관련 객체

1> 문자데이터 관련 객체

   - String 객체 관리
   - 생성방법 3가지

     가. 리터럴값만 이용 (권장)
        let s = "hello";

     나. new 생성자 이용
        let s2 = new String("hello");

     다.  생성자 이용
       let s3 = String("hello");

    - 문자열 표현방법 3가지
      가. 'hello' 이용
      나. "hello" 이용
      다. `hello` 이용( 백틱, template literal ) (*****************************)

        * 백틱장점 2가지
1> 변수삽입 가능: ${변수}이용
2> 들여쓰기, 엔터 같은 동작이 그대로 적용되어 출력포맷의 가독성이 높아진다.

    - 메서드 조회
     http://developer.mozilla.com

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js07_객체1_데이터관련1_String3_메서드</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        // 문자열 메서드
        // http://developer.mozilla.com
        let s = 'HeLlo';

        console.log("1. 문자열 길이: ", s.length);
        console.log("2. 특정문자얻기: ", s.charAt(0));
        console.log("3. 문자열 연결: ", s.concat("!!!", "###", "%%%%"));
        console.log("4. 특정문자 위치얻기: ", s.indexOf('H'));

        console.log("5. 부분열: ", s.substring(0, 4)); // 0 ~ 3 까지, substring(start, end)
        console.log("5-1. 부분열: ", s.substr(0, 4)); // 0 부터 4개, substr(start, end)
        console.log("6. 대문자: ", s.toUpperCase());
        console.log("7. 소문자: ", s.toLowerCase());

        console.log("8. 치환: ", s.replace('H', 'X'));

        console.log("9. 값포함여부: ", s.includes("He"));
        console.log("9-1. 값포함여부: ", s.includes("Xe"));

        console.log("10. 시작값 여부: ", s.startsWith("He"));
        console.log("11. 끝값 여부: ", s.endsWith("o"));

        let s2 = "      world       ";
        console.log("12. 공백제거: ", s2.trim()); // 양쪽공백제거
        console.log("12-1. 공백제거후 길이: ", s2.trim().length);

        let s3 = "홍길동/이순신";
        let result = s3.split("/"); // result 가 배열
        console.log("13. 구분자: ", result, result[0]); // result[0] 은 홍길동만 추출

        let s4 = "홍길동";
        console.log("14. 문자열반복: ", s4.repeat(3));
    </script>
</head>

<body>

</body>

</html>

2> 수치 데이터 관련 객체

   - 정수와 실수를 모두 관리한다.
   - Number 객체가 관리한다.

    - 생성방법 3가지

    가. 리터럴값만 이용 (권장)
        let n = 100;

     나. new 생성자 이용
        let n2 = new Number(100);

     다.  생성자 이용
       let n3 = Number(100);

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js07_객체1_데이터관련2_Number</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        // 수치 데이터 생성
        let s = 10; // number
        let s2 = new Number(10); // object
        let s3 = Number(10); // number

        console.log(s, s2, s3);
        console.log(typeof s, typeof s2, typeof s3);
    </script>
</head>

<body>

</body>

</html>

- Number객체 메서드 정리

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js07_객체1_데이터관련2_Number2_메서드</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        // 수치 데이터 메서드
        let n = 10;

        console.log("1. 문자열로 변경(10진수): ", n.toString());
        console.log("1-1. 문자열로 변경(2진수): ", n.toString(2));
        console.log("1-2. 문자열로 변경(8진수): ", n.toString(8));
        console.log("1-3. 문자열로 변경(16진수): ", n.toString(16));

        let n2 = 3.147743;
        console.log("2. 소수점 표현(정수): ", n2.toFixed());
        console.log("2-1. 소수점 표현(2째자리): ", n2.toFixed(2));
        console.log("2-2. 소수점 표현(5째자리): ", n2.toFixed(5));

        console.log("3-1. Number 의 최소값: ", Number.MIN_VALUE);
        console.log("3-2. Number 의 최소값: ", Number.MAX_VALUE);

        console.log("4-1. NaN 이냐: ", Number.isNaN(0));
        console.log("4-2. NaN 이냐: ", Number.isNaN(NaN));

        console.log("5-1. 정수냐: ", Number.isInteger(10));
        console.log("5-2. 정수냐: ", Number.isInteger(3.14));

        // "10" ---> 10 변경
        console.log("6. 문자열 -> 숫자: ", Number.parseInt("10"));
    </script>
</head>

<body>

</body>

</html>

3> 날짜 데이터 관련 객체

   - Date 객체가 관리.
   - 생성방법 2가지

      let d = new Date();

      let d2 = Date();

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js07_객체1_데이터관련3_Date</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        // 날짜 데이터 생성
        let d = new Date(); // obejct
        let d2 = Date(); // string

        console.log(d, d2);
        console.log(typeof d, typeof d2);
    </script>
</head>

<body>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js07_객체1_데이터관련3_Date2_메서드</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        // 날짜 데이터 생성
        let d = new Date(); // obejct

        console.log("1. 년도: ", d.getFullYear());
        console.log("2. 월: ", d.getMonth() + 1); // 범위가 0 ~ 11 이라서 +1 을 해줘야한다.
        console.log("3. 일: ", d.getDate());
        console.log("4. 시간: ", d.getTime());
        console.log("5. 분: ", d.getMinutes());
        console.log("6. 초: ", d.getSeconds());
        console.log("7. 밀리초: ", d.getMilliseconds());
        console.log("8. 요일: ", d.getDay()); // 5(2024-05-03기준); 일:0 , 월:1 ,..., 금:5,토:6

        // 원하는 날짜 설정
        d.setFullYear(2002);
        d.setMonth(7);
        d.setDate(15);

        console.log("9. 설정날짜: ", d);

    </script>
</head>

<body>

</body>

</html>

4> 배열 데이터 관련 객체

  - Array 객체가 관리
  - 특징: 자바의 List 처럼 동작됨.

  - 생성방법

    var n = [10,20,30];
    var n = [];

    var n = new Array();
    var n = new Array(10,20,30);

    var n = Array();
    var n = Array(10,20,30);

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js07_객체1_데이터관련4_Array</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        // 배열 데이터 생성
        var n = [10, 20, 30];
        console.log(n);
        var n = [];
        console.log(n);

        var n = new Array();
        console.log(n);
        var n = new Array(10, 20, 30);
        console.log(n);

        var n = Array();
        console.log(n);
        var n = Array(10, 20, 30);
        console.log(n);

    </script>
</head>

<body>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js07_객체1_데이터관련4_Array2_메서드</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        // Array 메서드
        var n = [10, 20, 30];

        // 1. 값 얻기
        console.log("1. 개별적인 인덱스 이용; ", n[0], n[1]);

        console.log("2. 일반 for 문: ");
        for (var i = 0; i < n.length; i++) {
            console.log(n[i]);
        }

        console.log("3. foreach 문 역할: ");
        /*
        자바
        for(int x : arr) {}

        JS
        for(var x of arr) {}
        for(var x in arr) {}
        */
        for (var x of n) {
            console.log(x);
        }

        console.log("3-1. foreach 문 (index, n[x])");
        for (var x in n) {
            console.log(x, n[x]);
        }

        // 2. 값추가 / 값삽입 / 값삭제 / 값변경
        var n2 = [10, 20, 30];
        console.log("4.배열 마지막에 값 추가");

        // index 로 추가가 가능하지만 push 권장
        // n2[3] = 40;
        // console.log(n2);

        n2.push(40);
        n2.push(50, 60, 70);
        console.log(n2); // 10 20 30 40 50 60 70

        console.log("5. 배열 마지막에 값 삭제");
        n2.pop(); // 위에서 추가한 70 삭제
        console.log(n2); // 10 20 30 40 50 60
        console.log(n2.pop()); // 삭제한 값이 반환 / 60

        console.log("6. 배열 중간에 값 삽입 및 삭제");
        /*
        array.splice(start[,deleteCount[, item1[,item2[, ...]]]])

        array.splice(0,3) ==> 0 부터 시작해서 3개 삭제
        array.splice(0,3,10,20) ==> 0 부터 시작해서 3개 삭제하고 10 과 20 삽입
        sarray.splice(0,0,10,20) ==> 0 부터 10 과 20 삽입
        */
        var n3 = [10, 20, 30];
        // n3.splice(0, 0, 40, 50, 60); // 0 부터 0개 삭제하고 40,50,60 삽입
        // n3.splice(1, 2, 40, 50, 60); // 1 부터 2개 삭제하고 40,50,60 삽입
        n3.splice(1, 2); // 1부터 2개 삭제
        console.log(n3);

        var n4 = [10, 20, 30, 40, 50, 60];
        console.log("7. 특정위치값 반환: ", n4.indexOf(20));
        // slice(start?: number | undefined, end?: number | undefined): number[]
        console.log("8. 부분열: ", n4.slice(0, 4)); // 10 20 30 40
        console.log("9. 거꾸로: ", n4.reverse()); // 60 50 40 30 20 10

        var n5 = [10, 20, 30, 40, 50, 60];
        console.log("10. 특정값으로 채우기: ");
        // fill(value), fill(value,start), fill(value,start,end)
        // n5.fill(100); // 100 100 100 100 100 100
        // n5.fill(100, 3) // 10 20 30 100 100 100
        n5.fill(100, 0, 3) // 100 100 100 40 50 60
        console.log(n5);

        var n6 = [10, 20, 30, 40, 50, 60];
        console.log("11. 배열안의 값으로 배열채우기: ");
        // copyWithin(targer, start), copyWithin(targer, start, end)
        // let new_array = n6.copyWithin(0, 3);
        // targer 0 위치에 3부터 시작해서 끝까지의 값을 복사
        // 40 50 60 40 50 60
        let new_array = n6.copyWithin(1, 2, 5);
        // targer 1 위치에 2부터 시작해서 4까지의 값을 복사
        // 10, 20, 30, 40, 50, 60 -> 10 30 40 50 50 60
        console.log(new_array);


        const elements = ['Fire', 'Air', 'Water']
        console.log("12. 배열의 문자열을 하나의 문자열로 조인(연결): ");
        console.log(elements.join()); // "Fire,Air,Water" 
        console.log(elements.join('-')); // "Fire-Air-Water" 
        console.log(elements.join(' ')); // "Fire Air Water"

        var n7 = [4, 2, 5, 1, 3];
        n7.sort();
        console.log("13. 오름차순 정렬: ", n7); // 1 2 3 4 5

        var n7 = [14, 22, 65, 1, 34];
        n7.sort();
        console.log("13-1. 오름차순 정렬: ", n7); // 1 4 22 34 65

        // 내림차순 정렬은 함수이용해서 명시적으로 구현해야 됨.
        var numbers = [4, 2, 5, 1, 3];
        numbers.sort(function (a, b) {
            // return a-b; // 오름차순
            return b - a; // 내림차순
        });
        console.log("13-2. 내림차순 정렬: ", numbers); // 5 4 3 2 1
        // sort(함수); <== 가능한 이유가 함수는 데이터이기 때문이다.

        // 기본반복(forEach), 가공(map), 필터링(filter)
        var n8 = [14, 22, 65, 1, 34];
        console.log("14. 기본 반복처리");
        // n8.forEach(function (v) {
        //     console.log(v); // value
        // });
        // n8.forEach(function (v, i) {
        //     console.log(v, i); // value, index
        // });
        n8.forEach(function (v, i, arr) {
            console.log(v, i, arr); // value, index, 배열
        });

        console.log("15. 가공처리(* 사용빈도 높음): ");
        // let new_array2 = n8.map(function (v) {
        //     // 가공전
        //     console.log(v);
        //     return v;
        // });
        // console.log(new_array2);
        let new_array2 = n8.map(function (v, i, arr) {
            // this -> { mesg: "hello" }
            // this.mesg -> "hello"
            console.log(v, i, arr, this, this.mesg);
            return v * 2;
        }, { mesg: "hello" });
        console.log(new_array2);

        console.log("16. 필터링: ");
        // let new_array3 = n8.filter(function () {
        //     return true; // 조건이 true 인 경우에만 반환됨.
        // });
        // console.log(new_array3);
        let new_array3 = n8.filter(function (v, i, arr) {
            // 조건: 짝수
            return v % 2 == 0; // 조건이 true 인 경우에만 반환됨.
        });
        console.log(new_array3); // [14, 22, 34]


        // 정적메서드
        console.log("17. 배열 생성1: Array.of(값,값2,값3)");
        var new_array4 = Array.of(10);
        var new_array4 = Array.of(10, 20, 30);
        console.log(new_array4); // [10, 20, 30]


        console.log("17-1. 배열생성2: Array.from(유사배열[,map함수]): ");
        var new_array5 = Array.from("Hello");
        console.log(new_array5); // ['H', 'e', 'l', 'l', 'o']

        var new_array6 = Array.from("Hello", function (v) {
            return v.toUpperCase();
        });
        console.log(new_array6); // ['H', 'E', 'L', 'L', 'O']




    </script>
</head>

<body>

</body>

</html>

3. spread 연산자 ( 전개구문 )(************************)

   기능: 배열|JSON 요소를 펼치는 기능으로서
        기존 배열을 펼쳐서 새로운 배열을 만들 때 사용함.

   문법: [...배열]

   예>

    // spread 연산자 (전개 구문)

     var n = [10,20,30];
     var x = n;  // 얕은 복사(주소값  복사, x 변경하면 n도 영향 받음)

     //1. 배열 복사
     var n2 = [...n];   // 깊은 복사 ( 실제값 복사, n2 변경해도 n은 영향 없음 )
     console.log(n2);


     //2. 기존 배열에 새로운 값을 추가
     var n = [10,20,30];
     var n2 = [...n, 40, 50]
     var n2 = [40, 50, ...n]
     console.log(n2);

     //3. 배열 연결
     var n = [10,20,30];
     var n2 = [100,200,300];

     var n3 = [...n, ...n2];
     console.log(n3);


     // 4. 문자열 전개
     var x = [...'hello'];
     console.log(x);  // ['h', 'e', 'l', 'l', 'o']

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js08_spread연산자_전개구문</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        // spread 연산자(전개구문)
        var n = [10, 20, 30];
        var x = n; // 얕은 복사(주소값 복사, x 를 변경하면 n도 영향 받음)

        // 1. 배열복사
        var n2 = [...n]; // 깊은 복사(실제값 복사, n2 변경해도 n은 영향 없음)
        console.log(n2); // [10, 20, 30] 

        // 2. 기존 배열에 새로운 값을 추가
        var n = [10, 20, 30];
        var n2 = [...n, 40, 50]; // [10, 20, 30, 40, 50]
        var n2 = [40, 50, ...n]; // [40, 50, 10, 20, 30]
        console.log(n2);

        // 3. 배열 연결
        var n = [10, 20, 30];
        var n2 = [100, 200, 300];
        var n3 = [...n, ...n2];
        console.log(n3); // [10, 20, 30, 100, 200, 300]

        // 4. 문자열 전개
        var x = [...'hello'];
        console.log(x); // ['h', 'e', 'l', 'l', 'o']

    </script>
</head>

<body>

</body>

</html>

'[study]이론정리 > HTML & CSS & JavaScript' 카테고리의 다른 글

js 3일차 - 객체(3) Window객체 (0)	2024.05.07
js 2일차 -객체(2) _ BOM (Browser Object Model) (0)	2024.05.03
js 2일차 - 1일차 정리 (0)	2024.05.03
js 1일차 - 연산자, 문장, 객체 (1)	2024.05.02
js 1일차 - 개요, 식별자, 변수, 상수 (1)	2024.05.02

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

yoon9i

js 2일차 - 객체(1) _ 데이터관련, spread 연산자 + 얕은복사, 깊은복사

'[study]이론정리 > HTML & CSS & JavaScript' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

js 2일차 - 객체(1) _ 데이터관련, spread 연산자 + 얕은복사, 깊은복사

'[study]이론정리 > HTML & CSS & JavaScript' 카테고리의 다른 글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역