23.03.07 학습일지

이준영·2023년 3월 7일

JavaScript js 함수

복습

구문 = 모듈화(라이브러리)

함수 중심 - 구조적 프로그래밍 : c
객체 중심 - 객체 지향 프로그래밍 : c++/java
--> javascript는 두 개 다 사용

함수(function)

자료
제어

선언하는 방법

선언함수 - function 이용(전통적)
익명함수 - 변수나 상수에 할당하여 사용 (최신(이쪽을 많이 써가는 추세), 일급함수 - 함수 중심 프로그래밍)
=>화살표 함수(lambda) - 익명함수를 화살표 개념으로 쓴 것

종류

사용자 정의 함수 - 개발자가 선언
내장 함수 - 프로그램 내에서 제공되는 함수

<-- 여기까지 복습

=>화살표 함수(lambda)

익명함수를 화살표 개념으로 쓴 것

<head>
    <script type="text/javascript">
        //익명 함수
        const doFunc1 = function() {
            console.log('doFunc1 호출');
        };
        //화살표 함수
        const doFunc2 = () => {
            console.log('doFunc2 호출');
        };
        //매개변수 넣은 화살표 함수
        const doFunc3 = (one) => {
            console.log('doFunc3 호출 : ' + one);
        }
        //리턴(정식)
        const doFunc4 = (one, two) => {
            return one + two;
        }
        //리턴을 간단하게 줄인 것(결과  doFunc4와 동일)
        const doFunc5 = (one, two) => one + two;
    </script>
</head>
<body>
    <script type="text/javascript">
        doFunc1();

        doFunc2();
        
        doFunc3(10);
        
        console.log('결과 : ' + doFunc4(10, 20));
    </script>
</body>

자바스크립트에서 매개변수 가진 함수는 호출할 시 매개변수 없어도 호출 가능하다.

<head>
    <script type="text/javascript">
        const doFunc1 = function(data1, data2) {
            console.log('doFunc1 호출 : ' + data1);
            console.log('doFunc1 호출 : ' + data2);
        };
    </script>
</head>
<body>
    <script type="text/javascript">
        doFunc1(10, 20);  //정석
        //무조건 호출됨, data부분이 undefined로 출력(하나 집어넣어도 동일)
        doFunc1();
    </script>
</body>

매개변수에 직접 초기값을 넣을 수 있다.

(일반적인 경우는 아니고 특수한 경우에 사용)

<head>
    <script type="text/javascript">
        const doFunc1 = function(data1, data2=10) { -->직접 초기값 넣기
            console.log('doFunc1 호출 : ' + data1);
            console.log('doFunc1 호출 : ' + data2);
        };
    </script>
</head>
<body>
    <script type="text/javascript">
    doFunc1();
    </script>
</body>

scope

선언이 영향을 미치는 영역 (선언은 위에 써주는 것이 기본이나 항상 우선적으로 읽힌다.)
지역(local)/전역(static) 변수

<head>
    <script type="text/javascript">
        // scope : 선언이 영향을 미치는 영역
        //선언한 변수들이 함수 내부에도 영향을 미친다(지역 변수가 없을 때), 선언은 항상 우선적으로 읽힌다.
        //선언은 위쪽
        //전역변수
        let one= 100;
        var two = 200;
        const doFunc1 = function() {
            //지역변수 --> 내부에서 사용하고 종료
            let one= 110;
            var two = 210;
            console.log('doFunc1 호출 : ' + one);
            console.log('doFunc1 호출 : ' + two);
        };
        console.log('one : ' + one);
        console.log('two : ' + two);
    </script>
</head>
<body>
    <script type="text/javascript">
        doFunc1();
    </script>
</body>

scope는 함수에도 적용된다.

<head>
    <script type="text/javascript">
        const outer = function() {
            //내부 함수 - 내부적으로 선언한 함수는 밖에서 선언해줘야 함
            //이 안에서만 사용할 때 쓴다.
            const inner1 = function(){
                console.log('inner1 호출');
            }
            const inner2 = function(){
                console.log('inner2 호출');
            }

            console.log('outer 호출');
            
            //밖에서 선언
            inner1();
            inner2();
        };
    </script>
</head>
<body>
    <script type="text/javascript">
        outer();
    </script>

내장함수

자료형 변환

Number() - 숫자형변환
parseInt()/parseFloat() - 정수형 / 실수형 변환
String() - 문자형변환
Boolean() - 불린형변환

Number()

<body>
    <script type="text/javascript">
        let data1 = '10';
        let data2 = '20';

        // + : 문자열 연결
        let sum = data1 + data2;
        //숫자형 변환(Number)
        let sum2 = Number(data1) + Number(data2);

        console.log(sum);
        console.log(sum2);

        let data3 = '10일';
        //NaN - Not a Number, 글자가 포함되어 있으면 숫자로 바꾸기 불가능
        console.log(Number(data3));
        //parseInt는 숫자만 추출하여 변환해줌(앞에 숫자가 있어야 함, Number와 다른점)
        console.log(parseInt(data3));
        //실수형으로 변환
        console.log(parseFloat(data3));
    </script>
</body>

Number - 문자가 포함되어 있으면 변환 불가능(NaN)
parseInt(Float) - 숫자만 추출하여 변환 가능(앞에 문자가 있을 시 NaN)

isNaN()

숫자가 아니면 true 숫자면 false
isXXX - true/false (주로 제어문과 같이 씀)

console.log( isNaN('1'));
console.log( isNaN('1e'));
console.log( isNaN('e1'));

String()

문자열 변환

<body>
   <script type="text/javascript">
       let data1 = 10;
       let data2 = 20;

       let sum = data1 + data2;
       //문자열 변환
       let sum2 = String(data1) + String(data2);
       //공백을 이용하여 변환 가능
       let sum3 = data1 + '' +data2;
       
       console.log(sum);
       console.log(sum2);
       console.log(sum3);
   </script>
</body>

Boolean()

불린형변환 - true/false

console.log(Boolean(5+4));
console.log(Boolean("Hi~"));
console.log(Boolean("")); -->빈 공간은 false
console.log(Boolean(0)); --> 0도 false
console.log(Boolean(undefined)); -->이것도 false

alert()

알림창

<script type="text/javascript">
alert = 경고(알림)창
alert('알림창');
</script>

confirm()

확인창

        //confirm = 확인창(if문과 결합하여 자주 사용)
         if(confirm('확인창')){
            console.log('확인 선택');
        }
        else {
            console.log('취소 선택');
        }
        ->누르는 거에 따라 콘솔 창에 출력

prompt

입력창

    <script type="text/javascript">

        //입력창
        // prompt('입력창');  -->일반 입력창
        // prompt('입력창', '초기값');  -->초기값이 입력되어 있는 입력창
        
        //변수에 할당하여 사용(취소시 null값 출력)
        let value = prompt('입력창', '초기값');
        console.log(value);
        
        if(value){
            //console.log에 사용되는 문자열 연결 연산
            console.log('확인',value);
        }
        else {
            console.log('취소');
        }
    </script>

타이머 함수

setTimeout(변수, 시간)

시간 후 실행

<body>
    <script type="text/javascript">
        const work = function() {
            console.log('work 함수 실행')
    };
    console.log('시작');
    
    //setTimeout(work, 3000); //초 설정(3000이면 3초)
    
    //callback함수 이용하여 setTimeout - 시스템이 실행
    setTimeout(function() {
        console.log('work 함수 실행');   
    }, 3000);
    console.log('끝');    --> 시작과 끝이 실행되어도 3초 후에 실행됨(실행이 각각 진행된다(스레드))

</script>
</body>

setInterval(변수, 시간)

시간마다 실행

    setInterval(function() {
        console.log('work 함수 실행');   
    }, 3000);  --> 3초마다 실행
    console.log('끝');
    
    --> 웹 브라우저 종료되기 전까지 3초마다 계속 실행됨

clearInterval(변수)

타이머 종료

예시

    <script type="text/javascript">
        let counter = 0;

        let timer = setInterval(() => {   // --> 타이머 시작
            console.log("안녕하세요?");
            counter++;

            if(counter == 5)
                //counter가 5이면 타이머 종료
                clearInterval(timer);
            
        }, 2000);
    </script>

eval

문자열을 실행문으로 바꿔줌

    <script type="text/javascript">
        let expr1 = '2 + 3';
        //eval => 문자열을 실행문
        console.log(eval(expr1)); //5 출력

        let expr2 = '';
        expr2 += 'let num1 = 10;';
        expr2 += 'let num2 = 20;';
        expr2 += 'alert(num1 + num2);';

        eval(expr2);
    </script>

html과 함수의 연동

on + 이벤트기능 을 사용하여 함수와 연동한다.

<head>
    <script type="text/javascript">
        const doFunc1 = function() {
            console.log('doFunc1 호출');

        };
    </script>
</head>
<body>
    <script type="text/javascript">
        //호출
        //doFunc1();
    </script>
    <!-- 이벤트(: 동작) 필요 -> on + 이벤트종류 -->
    <input type="button" value="함수 호출" onclick="doFunc1()">
    <button onclick="doFunc1()">함수 호출~</button>
    <a href="javascript:doFunc1()">함수 호출</a>

함수호출 클릭시 콘솔창에 doFunc1 출력

배열(= array, 확장 자료형)

변수 / 상수 - 1개 값만 저장 가능
여러 개의 값을 저장 - 배열

배열명 = [값, 값, 값, ...]

    <script type="text/javascript">
        //배열의 선언
        let arr1 = []; // 값이 없는 배열
        //같은 종류 데이터를 입력(일반적으로)
        let arr2 = [10, 20, 30, 40]; //4개의 숫자가 있는 배열
        let arr3 = ['10', '20', '30', '40']; //4개의 문자가 있는 배열

        console.log(arr2);
        
        //배열의 타입은 객체
        console.log(typeof arr2);
        
        //배열 인덱스 접근 방법
        console.log(arr2[0]);
        console.log(arr2[1]);
        
		//배열 각 인덱스 값 수정
        arr2[0] = 100;
        arr2[1] = 200;

        console.log(arr2);
        
        //배열 값의 갯수(중요)
        console.log(arr2.length);
    </script>

전체 데이터를 for문을 통해 출력(암기)

for(let i = 0; i<arr2.length; i++) {
console.log(arr2[i]);
}

for문을 이용하여 배열 값의 합계 구하기

    <script type="text/javascript">
    //배열 값의 합계..
    let arr2 = [10, 20, 30, 40]; //4개의 숫자가 있는 배열
    let sum = 0;
    for(let i = 0; i<arr2.length; i++) {
        sum += arr2[i];
    }

    console.log('arr2 배열의 합은 ' + sum);
    </script>

배열 선언 방법

let arr1 = [10, 20, 30, 40]; //4개의 숫자가 있는 배열

let arr2 = Array(10, 20, 30); //Array 사용

let arr3 = new Array(10, 20, 30); //new 사용

상향된 for문

for...in 문

for(변수 in 객체)

    <script type="text/javascript">
    //배열 값의 합계..
    let arr1 = [10, 20, 30, 40]; //4개의 숫자가 있는 배열

    for(let i in arr1){
        //console.log(i);  -->인덱스 값 출력

        console.log(arr1[i], i);  --> 값, 인덱스  출력
    }


    </script>

for...of 문

문자열이나 배열과 같은 반복 가능 자료에서 사용하는 반복문

    <script type="text/javascript">
      const students = ["Park", "Kim", "Lee", "Kang"];
      
      for(student of students) {   --> students를 student 변수에 넣어주기
        document.write(`${student}.`);
      }
    </script>
    --> students이 하나씩 출력

문자열 / 배열

문자열도 배열처럼 취급할 수 있다.

    <script type="text/javascript">
        let str1 = ['a', 'b', 'c', 'd', 'e'];
        //문자열 = 문자배열
        let str2 = 'abcde';

        console.log(str1.length);
        console.log(str2.length);

        console.log(str1[0]);
        console.log(str2[0]);
		
        for(let value of str2) {
        	console.log(value);
    }
    </script>

함수 / 배열

    <script type="text/javascript">
    //배열과 함수
    
    //가변인자(인자의 갯수를 자유롭게 결정하고 싶을 때)
    const doFunc2 = function() {
        //arguments - 파라미터에 대한 배열
        console.log(arguments.length);  --> (argument[0]을 출력하게 되면 0번째의 값 나옴)
    };

    doFunc2(10);
    doFunc2(10, 20);
    doFunc2(10, 20, 30);

    </script>

가변인자(...numbers)

argments와 같은 기능 수행

    <script type="text/javascript">
        function addNum(...numbers) {
            let sum = 0;

            for( let number of numbers)
            sum += number;

            return sum;
        }

        console.log(addNum(1, 3));
        console.log(addNum(1, 3, 5, 7));
    </script>

응용 - 어떤 값을 주든 최댓값을 출력하는 함수

방법1 (정석 for문 사용)

<head>
    <script type="text/javascript">
        let max = 0;
        const viewMaxValue = function() {
            for(let i = 0; i < arguments.length; i++){
                if(max < arguments[i]){
                    max = arguments[i];
                }
            }
            return max;
        };
    </script>
</head>
<body>
    <script type="text/javascript">
		viewMaxValue(10, 9, 21, 44, 92, 22, 28, 77, 101, 19, 22);

        console.log('최댓값은 ' + max + '입니다.');
    </script>
</body>

방법2 (for of 이용)

<head>
    <script type="text/javascript">
        let max = 0;
        const viewMaxValue = function() {
            for(const value of arguments) {
            	if(max <= value) {
                	max = value;
                }
            }
            return max;
        };
    </script>
</head>
<body>
    <script type="text/javascript">
        viewMaxValue(10, 9, 21, 44, 92, 22, 28, 77, 101, 19, 22);

        console.log('최댓값은 ' + max + '입니다.');
    </script>
</body>

참조 자료형(배열)

주소를 참조하여 데이터를 저장하는 것, 기존 저장 방식과는 다른 형태이다.

<body>
    <script type="text/javascript">
        let num1 = 10;
        let num2 = num1;    --> 10 값 대입( 값 자체를 전달하는 것 = 깊은 복사)
        console.log(num1, num2);  --> 둘 다 10 출력

        num1 = 20;
        console.log(num1, num2);   --> num1에 20이 대입되어 20,10 출력
        //참조 자료형( -> 객체 ) - 데이터 저장 구조가 기존것과는 다름
        let arr1 = [1, 2, 3];
        let arr2 = arr1;  --> 1,2,3의 주소를 참조하여 대입된 것(주소, 참조값을 전달 = 얕은 복사)

        console.log(arr1[0], arr1[1], arr1[2]);
        console.log(arr2[0], arr2[1], arr2[2]);

        arr1[0] = 100;
        arr1[1] = 200;
        arr1[2] = 300;   --> 값이 바뀜에 따라 참조하고 있던 arr2까지 같이 바뀌는 것

        console.log(arr1[0], arr1[1], arr1[2]);
        console.log(arr2[0], arr2[1], arr2[2]);    --> 둘 다 100, 200, 300으로 값이 같다.
    </script>
</body>

다차원 배열

2차원(행/열), 3차(x,y,z)... 이상의 배열
동일하게 array, new 등을 사용하여 배열 선언 가능하다.

<body>
    <script type="text/javascript">
        //다차원 배열 - 2차원(행/열), 3차(x,y,z)... 이상의 배열
        let arr1 = [
            [10, 20, 30], 
            [40, 50, 60],
            [70, 80, 90],
        ];

        console.log(arr1);
        console.log(arr1[0]);
        console.log(arr1[0][2]);
        console.log(arr1[2][1]);
    </script>
</body>

데이터 구조 : arr1은 3개의 배열을 가지고 있고 각각의 배열에는 각 수가 있다고 생각하기

직접 그려본 것..

        console.log(arr1.length);    --> arr1[0], arr1[1], arr1[2] 3개라고 생각
        console.log(arr1[0].length); --> arr1[0][0], arr1[0][1], arr1[0][2] 3개
        
        //전체 데이터 값 구하기
        for(let i = 0; i < arr1.length; i++) {
        	for(let j = 0; j<arr1[i].length; j++){
            	console.log(arr1[i][j]); -->전체 데이터 가져옴
            }
        }

for in,,을 활용하여 전체 값 구한 것

        for(let i in arr1) {
        	for(let j in arr1[i]){
            	console.log(arr1[i][j]);
            }
        }

3차원 배열

복잡하긴 하나 2차원 하는 거랑 비슷하다.

    <script type="text/javascript">
        //3차원 배열
        let arr1 = [
            [
                [1, 2, 3],
                [10, 20, 30]
            ],            
            [
                [4, 5, 6],
                [40, 50, 60]
            ]

        ];  -->3차원 배열 선언

		//3차원 배열 전체 값 구하기
        for(i in arr1){
            for(j in arr1[i]) {
                for(t in arr1[i][j]){
                    console.log(arr1[i][j][t]);
                }

            }
        }
    </script>

객체

자동차 등 - 복합적인 형태 표현 하기 위해 객체 사용(새로운 자료형 만듦)
여러가지 자료들 하나로 묶은 것

객체는
속성 - 변수나 상수
기능 - 함수
로 나뉜다.

자료형 - 보통 class 많이 씀
자료형 + 데이터 - object(객체)

ex> 자동차

그랜저
소나타
아반떼

-> 공통적인 내용 추출(추상화: abstraction)하여
-> 자동차 선언(개념) (개념은 정의지만 진리는 아니다)
-> 문법 추가하여(c,js,java ...)
-> class(설계도) 만듦 (인스턴스화 시키기) (설계도로 만든 객체 - 인스턴스)
-> 위의 각 자동차에 데이터를 추가하여 각각의 변수를 만듦(그랜저변수, 소나타변수, 아반떼변수)

객체 종류

사용자 정의 클래스 - 문법
내장객체
기본 - 자료형
문서 - DOM(Document Object Model)
웹브라우저 - BOM(Browser Object Model)
객체로 나뉨
외부객체(내장객체보다 훨씬 많이 쓰임)

사용자 정의 클래스 선언 방법

class 클래스이름 {
}

-> 사용자 정의 클래스 객체변수로 할당

let 객체변수명 = new 클래스이름();

객체변수명을 통해 속성과 기능에 접근할 수 있다

멤버 변수 선언 및 초기화(생성자)

    <script type="text/javascript">
        //Student1 클래스 선언
        class Student1 {

        }
        class Student2 {
            //속성 : 변수형태 - 멤버변수(멤버상수)
            //기능 : 함수형테 - 메서드
            
            //생성자(특수 함수) - 멤버 변수의 초기화(name, kor, mat이 student2의 변수가 된다.)
            constructor() {
                this.name = '홍길동';
                this.kor = 90;
                this.mat = 92;
            }
        }

        //stu1 객체변수(인스턴스) 선언, new = 메모리 생성 연산자
        let stu1 = new Student1();  --> 객체 생성

        let stu2 = new Student2();
        
        console.log(typeof stu1);  --> object 타입 출력
		
        // . -> 메모리 참조 연산자
        console.log(stu2.name);  -> .을 통하여 참조(접근)
        console.log(stu2.kor);
        console.log(stu2.mat);
    </script>

변수의 값 변경하거나 / 다른 변수에 할당 가능(얕은 복사)

    <script type="text/javascript">
        //변수 값 변경도 가능
        stu2.name = '박문수';
        stu2.kor = 96;

        console.log(stu2.name);
        console.log(stu2.kor);
        
        //stu2의 주소값 stu3에 할당(얕은 복사)
        let stu3 = stu2;
    
        console.log(stu3.name);
        console.log(stu3.kor);

    </script>

new 연산자로 만들어진 객체 이름이 동일하다 하여도 같은 객체가 아니다

new연산자와 객체 초기화

<body>
    <script type="text/javascript">
        class Student1 {
            constructor() {
                this.name = '홍길동';
                this.kor = 90;
                this.mat = 92;
            }
        }

        class Student2 {
            constructor(name, kor, mat) {
                //this.name은 멤버 변수(필드), name은 지역 변수
                this.name = name;
                this.kor = kor;
                this.mat = mat;
            }
        }
        //new로 인하여 각자 다른 객체를 사용하는 것임
        let stu1 = new Student1();
        let stu2 = new Student1();

        console.log(stu1.name);
        console.log(stu2.name);
        
        //stu1과 2가 다른 객체를 참조하고 있는 것을 보여줌
        stu2.name = '박문수';
		
        //각각 다른 결과가 출력됨
        console.log(stu1.name);
        console.log(stu2.name);
		
        //생성자에서 초기화하지 않고 객체를 생성시에 직접 초기화가 가능하다.
        let stu3 = new Student2('박문수', 90, 91);
        let stu4 = new Student2('이몽룡', 80, 89);

        console.log(stu3);
        console.log(stu4.name);
    </script>
</body>

메서드

객체의 동작을 지정하는 함수(일반 함수 선언방법과 비슷하다)

    <script type="text/javascript">
        class Student1 {
            constructor() {
                this.name = '홍길동';
                this.kor = 90;
                this.mat = 92;
            }

            //메서드
            getSum(){
                console.log('getSum 호출',this.name);
                console.log('getSum 호출',this.kor);
            }
        }

        let stu1 = new Student1;
        stu1.getSum();
    </script>

응용 예 - 생성자와 메서드

<body>
    <script type="text/javascript">
        class Book2 {
        
        	//생성자
            constructor(title, pages, done){
            this.title = title;
            this.pages = pages;
            this.done = done;
            }
            
            //메서드
            finish() {
                let str = "";
                this.done === false ? str = "읽는 중" : str = "완독";
                return str;
            }
        }
		
        //객체 생성 과정에서 직접 변수 초기화
        let book1 = new Book2("웹 표준의 정석", 648, false);
        let book2 = new Book2("점프 투 파이썬", 360, true);
		
        console.log(`${book1.title} - ${book1.pages}쪽 - ${book1.finish()}`);
        console.log(`${book2.title} - ${book2.pages}쪽 - ${book2.finish()}`);
    </script>
</body>

함수로 만드는 객체

함수로도 객체를 만들 수 있다.(생성자 함수)

    <script type="text/javascript">
        //생성자 함수
        const makeStudent = function() {
            this.name = '박문수';
            this.kor = 90;
            this.mat = 92;
        };

        let stu1 = new makeStudent();

        console.log(typeof stu1);
        console.log(stu1.name);
    </script>

JSON(Javascript Object Notation)

객체의 표기법 중 하나(new가 자동으로 돼서 나옴)

객체명 = {
키(속성명): 값,
키(속성명): 값,
...
}

    <script type="text/javascript">
        let stu1 = {
            name: '박문수',
            kor: 90,
            mat: 80
        };
        
        console.log(typeof stu1);
        console.log(stu1.name);
        console.log(stu1.kor);
        
        //배열처럼 접근 가능
        console.log(stu1['kor']);
    </script>

이준영

끄적끄적

이전 포스트

2023.3.6 일지

다음 포스트