(17)Javascript_기본문법(3)

사용자 정의 함수(function)

- 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록

- 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있음

- 코드를 재활용

 

1. 함수 선언식

    function 함수명(매개변수1, 매개변수2 ..){

        함수가 호출되었을 때 실행할 문장;

        ...

        return 값;

    }

 

    함수명(값1, 값2 ...);

 

2. 함수 표현식(권장)

    const 변수명 = function(매개변수1, 매개변수2 ..){

        함수가 호출되었을 때 실행할 문장;

        ...

        return 값;

    }

 

    변수명(값1, 값2 ...)

 

디폴트 매개변수

- 매개변수의 값을 설정하는 것

- 매개변수의 값을 정하지 않으면 기본값을 변수에 저장

 

    function 함수명(매개변수1 = 값1, 매개변수2 = 값2 ...){

        함수가 호출되었을 때 실행할 문장;

        ...

        return 값;

    }

 

    함수명();

    함수명(값1, 값2, ...);

 

나머지 매개변수

생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지막 인수까지 한 번에 지정할 수 있음

 

    function 함수명(매개변수1, ...매개변수2){

        함수가 호출되었을 때 실행할 문장;

        ...

        return 값;

    }

 

    함수명(값1, 값2, 값3, 값4, 값5);

    

호이스팅(hoisting)

- 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것

- var로  선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화

- let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화 하지 않음

 

    함수 정의                           인터프리팅 결과

    func1();                            function func1(){

    ...               함수 호이스팅         ...;

    function func1(){ ---->             }

        ...;

    }                                   func1();

    func2();                                    let func2;

    let func2 = function(){  변수 호이스팅       func2(); func

        ...;                    ---->           function func2(){

    }                                               ...;

                                                }

화살표 함수

- function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현

- 화살표 함수는 항상 익명

 

매개변수가 없을 경우

const 함수명 = () => {

    함수가 호출되었을 때 실행될 문장;

    ...

}

 

const 함수명 = () => 함수가 호출되었을 때 실행될 문장;

 

매개변수가 있을 경우

const 함수명 = (매개변수1, 매개변수2 ..) => {

    함수가 호출되었을 때 실행될 문장;

    ...

}

 

const 함수명 = (매개변수1, 매개변수2 ..) => 함수가 호출되었을 때 실행될 문장;

 

✔ 매개변수가 1개인 경우는 소괄호를 생략할 수 있음

const 함수명 = 매개변수1 => 함수가 호출되었을 때 실행될 문장;

 

객체(Object)

프로퍼티를 가지고 있는 집합

 

프로퍼티(property)

- 이름과 값으로 구성된 정렬되지 않은 집합

- 프로퍼티는 함수도 저장할 수 있음 -> 프로퍼티 메소드

 

객체를 생성하는 방법

1. 리터럴 표기법

    const 객체명 = {

        프로퍼티명1: 값1,

        프로퍼티명2: 값2,

        ...

        프로퍼티명n: function(){

            해당 프로퍼티가 호출되면 실행할 문장;

            ...

        }

    }

 

2. 생성자를 이용

- 객체를 만드는 함수

 

    function 생성자명(매개변수1, 매개변수2, ...){

        this.프로퍼티명1 = 값1;

        this.프로퍼티명2 = 값2;

        ...

        this.프로퍼티명n = function(){

            해당 프로퍼티가 호출되면 실행할 문장;

            ...

        }

    }

 

    const 객체명1 = new 생성자명(값1, 값2, ...);

    const 객체명2 = new 생성자명(값1, 값2, ...);

    ...

    const 객체명n = new 생성자명(값1, 값2, ...);

 

- new 연산자를 사용하여 객체를 생성하고 초기화할 수 있음

- 객체를 생성할 때 사용하는 함수를 생성자라고 함

- 새롭게 생성되는 객체를 초기화하는 역할

- 같은 형태의 객체를 여러개 생성할 때 유리

3. 클래스를 이용

- ECMA Script6에 추가된 객체 생성 방법

- 내부적으로 생성자를 이용한 객체 새성 방법과 동일하게 작동

 

    const 클래스명 = class{

        constructo(매개변수1, 매개변수2, ...){

            this.프로퍼티명1 = 값1;

            this.프로퍼티명2 = 값2;

            ...

        }

        메소드명(매개변수1, 매개변수2, ...){

            해당 프로퍼티가 호출되면 실행할 문장;

            ...

        }

    }

 

    const 객체명1 = new 클래스명(값1, 값2, ...);

    const 객체명2 = new 클래스명(값1, 값2, ...);

    ...

    const 객체명n = new 클래스명(값1, 값2, ...);

 

상속

- 클래스 기반의 객체지향 언어와 다름

- 자바스크립트는 프로토타입 기반의 객체 지향 언어

✔ 프로토타입(prototype)

- 모든 객체는 프로토타입이라는 객체를 가지고 있음

- 모든 객체는 프로토타입으로부터 프로퍼티와 프로퍼티 메소드를 상속받음

- 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며 상속되는 정보를 제공하는 객체를 프로토타입이라고 함

 

    const dog = new Dog(); // Dog.prototype, Object.prototype

Math 객체

수학에서 자주 사용하는 상수와 함수들을 미리 구현한 자바스크립트 표준 내장 객체, 비교할 수 없는 값이 포함되어 있으면 NaN을 반환

min(): 가장 작은 수를 반환. 매개변수가 전달되지 않으면 infinite를 반환

max(): 가장 큰 수를 반환. 매개변수가 전달되지 않으면 -infinite를 반환

round(): 소수점 첫번째 자리에서 반올림하여 그 결과를 반환

floor(): 소수점을 버림

ceil(): 소수점을 올림

random(): 0보다 크거나 같고 1보다 작은 무작위 소수를 반환

 

String 객체

 

const str1 = 'Javascript';

const str2 = new String('Javascript');

 

str1 == str2 // true

str1 === str2 // false

 

length: 문자열의 길이를 반환하는 프러퍼티

indexOf(): 특정 문자나 문자열이 처음으로 등장하는 위치를 인덱스로 반환

charAt(): 특정 문자열에서 전달 받은 인덱스에 위치한 문자를 반환

includes(): 특정 문자열에서 전달 받은 문자열이 포함되어 있는지 여부를 반환

substring(): 전달 받은 시작 인덱스부터 종료 인덱스 바로 직전까지의 문자열을 추출

substr(): 전달 받은 시작 인덱스부터 전달 받은 갯수만큼 문자열을 추출

replace(): 원본 문자열의 일부를 전달 받은 문자열로 치환

split(): 구분자를 기준으로 나눈 후 나뉜 문자열을 하나의 배열에 저장

trim(): 문자열의 앞 뒤 공백을 제거

toUpperCase(): 문자열을 모두 대문자로 변환

toLowerCase(): 문자열을 모두 소문자로 변환 

 

Date 객체

날짜, 시간 등을 쉽게 처리할 수 있는 내장 객체

 

연도(year)

- 2자리로 연도를 표기: 1900년 ~ 1999년

- 4자리로 연도를 표기: 2000년 ~

 

월(month)

- 0 ~ 11 ,0(1월),11(12월)

 

Date 객체를 생성하는 방법

new Date(): 현재 날짜 시간을 저장한 객체가 생성

new Date('날짜 문자열'): 해당 특정 날짜와 시간을 저장한 객체가 생성

new Date('밀리초'): 1970년 1월 1일 0시 0분 0초를 기준으로 해당 밀리초 만큼 지난 날짜와 시간을 저장한 객체가 생성

new Date(년, 월, 일, 시, 분, 초 ,밀리초): 해당 날짜와 시간을 저장한 객체가 생성

 

window 객체

웹 브라우저의 창이나 탭을 표현하기 위한 객체들이며 웹 브라우저는 window 객체를 이용하여 브라우저 창을 표현할 수 있음

 

    window.alert()

    window.confirm()

    window.prompt()

 

setTimeout()

일정 시간이 지난 후 매개변수로 제공된 함수를 실행

 

    const 함수명 = function() {

        실행문

    }

 

    const st = setTimeout(함수명, 밀리초);

 

clearTimeout()

일정 시간후에 일어날 setTimeout()를 취소함

 

clearInterval()

일정 시간마다 일어날 setInterval()를 취소함

 

form 객체

- 일반적인 폼 요소에 접근할 때 사용

- document.forms 컬렉션을 이용해서 접근할 수 있음

 

    <form name = 'myform' id='regform' method = 'post' action='#'>

        아이디 : <input type = "text" name = "userid" id = "id"> <br>

        비밀번호 : <input type = "password" name = "userpw" id = "pw"> <br>

 

    </form>

 

폼 접근하기

const frm = document.myform; // name

const frm = document.forms['myform']; // name

const frm = document.forms[0]; // 한 문서의 여러개의 폼 중 첫번째 폼

const frm = document.getElementById('regform'); // id 

 

아이디 입력상자에 접근하기

const userid = frm.userid; // name

const userid = document.forms['myfrom'].elements[0]; // 한 문서의 myform 폼 중 첫번째 요소

const userid = document.forms['myfrom'].elements['userid']; // name

const userid = document.forms['myfrom'].elements[0][0]; // 한 문서의 여러개의 폼 중 첫번째 폼에 첫번째 요소

const userid = document.getElementById('id');