매일 조금씩

11/04 - Javascript(4) : 배열확장(spread연산자) / 사용자정의 객체 / 내장 객체 본문

빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정

11/04 - Javascript(4) : 배열확장(spread연산자) / 사용자정의 객체 / 내장 객체

mezo 2020. 11. 4. 19:25
728x90
반응형

복습 & 개념 정리

 

* 프로그램 언어

1.  자료          => 자료구조

            ㅇ 자료형

                     기본자료형 - 1개 데이터 저장

                     복합자료형 

                                - 동종자료형 : array

                                - 이종자료형 : 객체 (지금은 그냥 배열과비슷한데 여러가지 자료형이 섞이는 구나! 만 기억)

                                 

            ㅇ 변수/상수의 선언/초기화

            ㅇ 연산자

 

2.  제어

            ㅇ 조건에 의한 분기

            ㅇ 조건에 의한 반복

            ㅇ 기타

 

3.  라이브러리

            ㅇ 함수

                       사용자 정의 함수                           - 사용법

                                 - 선언적 함수

                                 - 익명 함수(화살표 함수)

 

익명함수 1
익명함수 2

 

                       내장 함수 (참고할 문서를 만들어놔라) - 내용

                                 - 입력/출력만 기억하면됨       - 정리

 

            ㅇ 객체

                       사용자 정의 객체

                                 - 복합자료형의 확장

                                 - 새로운 자료형을 선언

                                                 속성       변수(멤버변수/프로퍼티)

                                                 기능       함수(메서드)

                       내장 객체 (내장객체를 알고싶으면 그 안의 멤버변수와 메서드를 알아보면 된다.) P 13,14,15

                                 - 기본객체 - 자료형

                                 - BOM      - Browser 조작용 객체

                                 - DOM      - Html 조작용 객체

                       외부 객체 (Third Party) - API

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 배열 확장된 형태 

▷p411

비구조 할당 

  • 개념

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">    
    "use strict";

    const values = [1,2,3];
    console.log(values[0]);
    console.log(values[1]);
    console.log(values[2]);


    // 각 값을 변수 할당 
    let one, two, three;
    // one = values[0];
    // two = values[1];
    // three = values[2];

    // destructuring 비구조할당
    [one, two, three] = values;

    console.log(one);
    console.log(two);
    console.log(three);

    let [six, seven, eight] = values;
    console.log(six, seven, eight);

    // 갯수 안맞으면 맞는 만큼만 실행됨(에러안나고 빈곳이 undefind로 나옴)
    // ten 에는 10 값이 출력
    // []안에서 = 으로 값 넣으면 초기화와 같이 된다고 생각하면됨
    let [four, five, nine, ten = 10] = values;
    console.log(four, five, nine, ten);
    
    
</script>
</body>
</html>

 

 

  • 비구조 할당내의 배열(1)

 

 

 

 

 

  • spread 연산자  => ...

데이터를 나열해서 풀어쓰고 싶을 때 spread연산자를 사용한다.

데이터 앞에 ...이 붙으면 낱개로 나뉘어 진다.

string -> 문자

배열 -> 배열이 풀림(괄호가 사라짐)

 

       

 

      @ spread 연산자 응용 - 배열의 결합

 

 

 

 

       @ spread 연산자 응용 - 함수 인자값

 

 

  • 함수에 응용 (return 여러개)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

* 객체 - 사용자 정의 객체, 내장 객체

 

 사용자 정의 객체 

 

 

3가지로 생성할수 있다. (1) json, (2) 함수, (3) 클래스

 

자바스크립트를 이용한 객체 표기법

▷p.92, 112, 336

 

배열이랑 똑같이 객체 이름의 박스 안에 실제 데이터들의 주소가 담긴다. (참조)

배열과 같이 객체를 가리키는 이름이 데이터를 가리키는 화살표이다.

그래서 배열처럼 새로 정의한 변수에 객체를 할당하면 같은 객체 데이터를 가리키게 된다. 

멤버변수이름 = 프로퍼티 이름 = 키

 

 

( 1 ) json ( javascript object notation)으로 객체 생성

데이터제공용

{ }    <- 사용

 

만약 

let product1 = {
  
        name: '7D 건조망고',   
        type: '당절임',
        components: '망고, 설탕, 기타',
        region: '필리핀',


        eat: () => {   
            console.log(this.name, '맛있게 먹는다.');
        },
        
        test: () => {
            console.log('테스트 한다.');
        }
    };

이 객체정의를 갖다가 쓸 때,

               'name' 은 멤버변수명(= 프로퍼트 이름 = 키)이고   name 은 멤버변수이다.              따라서, 인덱스가 들어가는 자리에는  'name' 이 들어가게된다.

 

 

 

  • 객체의 멤버변수 선언과 호출

 

 

 

  • 객체 할당 (참조)

 

 

  • 객체의 메소드 선언과 호출

 

 

  • for문, in 검사

 

 

 

  • with ()함수

 

 

 

 

  • 동적 추가 / 삭제

 

 

 

( 2 ) 함수로 객체 생성

  • 함수로 여러개의 객체 생성하기

 

 

( 3 ) 생성자 함수로 객체 생성

  • 생성자 함수

  맨앞 글자가 대문자면 생성자 함수이다.

 

 

 

  • 프로토타입 객체의 프로퍼티

  객체마다 겹치는 프로퍼티나 메소드를 프로토타입으로 만들어서 공유하게 한다.

 

 

( 4 ) class 예약어로 객체 생성

 

 

 

@ 3가지 객체 생성 방법 비교

json      -     생성자함수(프로토타입 포함)      -     클래스

 

 

 

 

 

 

 내장 객체 

▷p116

▷p121 그림4-14

 

Object

String( ) - 문자열 조작 ▷p143

String( )의 메서드 다 외워라 ▷p143

String생성자도 존재함.

 

 

 

 

 

String

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">  
    // String 
    let stringFromLiteral = 'Hello String';
    let stringFromConstructor = new String('Hello String');

    // 사용법은 동일
    console.log(stringFromLiteral);     // 문자열
    console.log(stringFromConstructor); // 객체 (내장객체 String)

    let str1 = 'Hello World 안녕 Hello';

    console.log(str1.length);

    
    // 문자 하나(character)를 추출하는 방법
    let char1 = str1.charAt(0);
    console.log(char1);

    let char2 = str1.charAt(1);
    console.log(char2);
    

    // 맨마지막 문자
    let char3 = str1.charAt(str1.length-1);
    console.log(char3);


    // 문자열 추출
    // substr / substring / slice
    console.log(str1.substr(6,5));      // 시작위치, 개수
    console.log(str1.substring(6,11));  // 시작위치, 끝+1위치
    console.log(str1.slice(6,11));      // substring()과 같음
    

    // 검색
    console.log(str1.indexOf('l'));     // 문자가 처음 나오는 위치 (위치0부터)
    console.log(str1.indexOf('l', 4));  // (위치4부터)
    console.log(str1.lastIndexOf('l')); // (마지막부터)

    console.log(str1.indexOf('z')); // 없는 문자를 겈색해달라고 하면 -1을 리턴한다!
    

    // 치환
    console.log(str1.replace('Hello', '안녕')); // 전체를 바꾸지 않는다 처음거만 바꾼다.
    console.log(str1.replace(/Hello/g, '안녕'));    // 전체를 바꿔준다. /Hello/g -> 정규표현식


    // 대소문자 변환
    console.log('ABC'. toLowerCase());
    console.log('ABC'. toUpperCase());
    let cstr = 'ABC';
    console.log(cstr. toLowerCase());


    // 문자열 연결 : +      concatenate : 사슬 같이 잇다.
    console.log(str1.concat(1,2,3));    // str에 conacat의 인자들이 마지막에 다다닥 붙어서 나옴


    // 문자열 분리 - 배열로 받아야한다.   => 여러개의 데이터는 무조건 배열이 되기 때문.
    // , -> 구분자
    let sstr1 = '사과,딸기,수박';
    let arr1 = sstr1.split(',');
    console.log(arr1);
    for(let i in arr1){
        console.log(arr1[i]);
    }

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

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">  
    // 검색
    // include / startsWith / endsWith
    let target = '123가나다라456';

    // String 전용 메서드라서 그냥 숫자를 넣어도 안에서 문자열로 변함
    console.log(target.includes(2));
    console.log(target.includes('나'));
    console.log(target.includes('마'));


    console.log(target.startsWith(123));
    console.log(target.startsWith(23));

    console.log(target.endsWith(456));
    console.log(target.endsWith(23));
    

    let str = 'hello 123';
    console.log(typeof str.substr(6,3));
</script>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 @ 응용 문제 1 

string 'hong gil dong'을 입력받으면 'Hong Gil Dong'을 콘솔창에 출력한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">  
    /*
        함수이름 : initcap
        initcap('hong gil dong') => Hong Gil Dong
        string 클래스의 메서드를 사용해서
    */

    let initcap = function(sentence){
        let words = sentence.split(' ');
        
        console.log(words);
        let result = '';
        for(let i in words){
            //console.log(words[i]);
            // console.log(words[i].substring(0,1));   // 첫글자만
            // console.log(words[i].substring(1));     // 두번째부터 끝까지

            // result += words[i].substring(0,1).toUpperCase() + words[i].substring(1) + ' ';
            result += ' ';
            result += words[i][0].toUpperCase();
            for(let j = 1; j < words[i].length; j++){
                result += words[i][j]; 
            }
        }
        return result;
    }

    console.log(initcap('hong gil dong'));
</script>
</body>
</html>

 

 

 

 

 

 @ 응용 문제 2

 

주민등록번호 체계화 검사

예를들어, 

주민등록번호가 123456 - 1234567 일때 

맨 마지막 숫자7을 제외하고 나머지 숫자들을 앞에서부터

차례대로 x2, x3, x4, x5, x6, x7, x8, x9, x2, x3, x4, x5를 해서

각각을 다 더하고, 

더한값을 11로 나눈 나머지를 11에서 뺀후, 

그 값을 10으로 나눈 나머지를 구한다.

 

그 결과값이 주민등록번호의 마지막 자리인 숫자7과 일치하는지 확인하여

일치하면 '일치' 아니면 '불일치'를 콘솔창에 출력한다.

 

      1) for문 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">  

    let juminCheck = function(sentence){
        let num = sentence.split('-');
        let line = num[0] + num[1];
        
        // 숫자만 모은 string 
        console.log(line);

        let sum = 0;
        let multi = 0;

        let j = 2;

        for(let i = 0; i < line.length - 1; i++){
            if(i == 8){     // 8번째 숫자면 곱하는 값을 2로 리셋
                j = 2;
            }
            console.log(line[i], j);

            multi = Number(line[i])*j;
            sum += multi;
            j++;
        }

        let result = (11 - (sum % 11)) % 10;    // 최종 계산 결과
        if(Number(line[12]) == result){         // 마지막자리 숫자와 일치하면
            return '일치';
        }
        else{       // 일치하지 않으면
            return '불일치';
        }
    }
    
    console.log(juminCheck('950517-2814619'));

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

 

 

      2) while문 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">  

    let juminCheck = function(sentence){
        let num = sentence.split('-');
        let line = num[0] + num[1];

        // 숫자만 모은 string
        console.log(line);
        console.log(typeof line);

        let sum = 0;    // 곱한걸 다 더한 값
        let multi = 0;

        let i = 0;
        let j = 2;

        while(i < 8){
            //let tonum = Number(line[i]);
            //multi = tonum*j;

            //곱하기 *  때문에 line[i]이 자동으로 숫자로 변환됨
            //하지만 Number를 명시적으로 써주는게 좋음
            multi = Number(line[i])*j;
            console.log(typeof multi);

            sum += multi;
            i++;
            j++;
        }   //      i 가 8일 때 나옴
        
        j = 2;      // 곱하는 값을 2로 리셋

        while(i < 12){  // i = 9 ~ 마지막 바로 앞에 숫자까지
            //let tonum = Number(line[i]);
            //multi = tonum*j;
            multi = Number(line[i]) *j;
            sum += multi;
            i++;
            j++;
        }

        let result = (11 - (sum % 11)) % 10;    // 최종 계산 결과
        if(Number(line[12]) == result){         // 마지막자리 숫자와 일치하면
            return '일치';
        }
        else{       // 일치하지 않으면
            return '불일치';
        }
        
    }
    console.log(juminCheck('950517-2814619'));
</script>
</body>
</html>

 

 

      3) 배열, substring() 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">  

    const jumincheck = function(jumin){
        let strJumin = jumin.replace('-','');   // 주민번호 나누기
      
        let sum = 0;

        let bits = [2,3,4,5,6,7,8,9,2,3,4,5];
        for(let i = 0; i <= 11; i++){
            sum += Number(strJumin.substring(i,i+1)) * bits[i];
        }

        let last = Number(strJumin.substring(12,13));
        
        let result = (11 - (sum % 11)) % 10;
        

        if(last == result){
            return true;
        }else{
            return false;
        }
    };

    console.log('950517-2814619');

    if(jumincheck('950517-2814619')){
        console.log('맞다');
    }else{
        console.log('틀리다');
    }

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

'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' 카테고리의 다른 글

11/05 - Javascript (5) : 내장객체 > 기본객체 Number, Date, Math, Array, Map, Set  (0) 2020.11.08
[Tomcat] 브라우저에서 로그인이 필요하다고 뜨는 오류  (0) 2020.11.08
11/03 - Javascript (3) : 변수/ 함수/ 배열  (0) 2020.11.03
11/02 - Javascript(2) : 제어문 / 라이브러리  (0) 2020.11.02
10/30 - CSS 마무리, Javascript (1) : 자료형 / 연산자 / 조건문  (0) 2020.10.30
'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' Related Articles more