4/6(목) IT K-DT(26일차) / 11.사용자정의함수~16-4.form객체

11. 사용자 정의 함수 (function)

11-1. 함수 선언식

11-2. 함수 표현식

12. 디폴트 매개변수

12-1. 디폴트 매개변수

12-2. 나머지 매개변수

13. 화살표 함수

13-1. 매개변수가 없을 경우

13-2. 매개변수가 있을 경우

14. 객체(Object)의 생성법

14-1. 리터럴 표기법(Object Literal)

14-2. 생성자 함수를 이용 (Constructor Function)

14-3. 클래스를 이용 (Class)

15. 상속

16. 객체(Object)의 종류

16-1. Math 객체

16-2. String 객체

16-3. Date 객체

16-4. form 객체

16-4-1. 폼 접근하기

16-4-2. id 입력상자에 접근하기

과제

11. 사용자 정의 함수 (function)

하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록.
필요할 때마다 호출하여 해당 작업을 반복해서 수행.
코드를 재활용하기 위해 사용.

11-1. 함수 선언식

    function 함수명 (매개변수1, 매개변수2 ...) {
        실행문;
        ...
        return 값;
    }

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

예) func2의 함수에 각각의 data를 입력한 결과.

function func2(num) {
            console.log(`전달받은 매개변수의 값: ${num}`);
        }

        func2( ); // undefined로 출력. (에러 출력이 아님.)
        func2(10);
        func2('apple'); // apple 출력
        func2(true); // true 출력

  예) func3 함수를 이용해서 start에서 end까지의 합계를 구하는 식.

        function func3(start, end) {
            let sum = 0;

            for (let i=start; i<=end; i++) {
                sum += i;
            }

            console.log(`${start}부터 ${end}까지의 총합: ${sum}`);
        }

예) func4 함수를 이용하여 특정 내용만을 반환하는 식.

        function func4() {
            return '🍈';
        }

        ~~func4();~~ // 이대로 실행하면 출력이 되지 않는다.
        ~~console.log(func4);~~ // 위의 세 줄이 출력.
        console.log(func4()); // '🍈'만 출력.

        const present = func4();
        console.log(present); // '🍈'만 출력.

11-2. 함수 표현식

    const 변수명 = function (매개변수1, 매개변수2 ...) {
        실행문;
        ...
        return 값;
    }

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

일반적으로 2번째 방법인 '함수 표현식'의 사용을 권장함.

12. 디폴트 매개변수

12-1. 디폴트 매개변수

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

    function 함수명 (매개변수1=값1, 매개변수2=값2, ...) {
        실행문;
        ...
        return 값;
    }

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

예)
        function func5(num1=1, num2=1){
            console.log(`num1의 값:${num1}, num2의 값:${num2}`);
            console.log(`${num1} * ${num2} = ${num1 * num2}`);
        }

        func5(); // 'num1의 값:1, num2의 값:1', '1*1=1' 이 출력. 기본값으로 num1=1, num2=1이 세팅되어있기 때문.
        func5(10,3); // 'num1의 값:10, num2의 값:3', '10*3=30'

12-2. 나머지 매개변수

생략 접두사('...')를 사용해서 특정 위치의 인수부터 마지막 인수까지 한 번에 지정.

    function 함수명 ( 매개변수1, ...매개변수2 ) {
        실행문;
        ...
        return 값;
    }

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

값1='매개변수1'

값2~값5='...매개변수2 '

호이스팅(hoisting)
JavaScript에서 변수(var)와 함수 선언(function declaration)을 해당 스코프(scope)의 최상단으로 끌어올리는 현상.
인터프리터가 변수와 함수의 메모리공간을 선언 전에 미리 할당하는 것.

var로 선언한 변수 : 호이스팅 시 undefined로 변수를 초기화시킴.

let, const로 선언한 변수 : 호이스팅 시 변수를 초기화시키지 않음.
→ 변수 호이스팅을 하려면 var가 아니라 let으로 선언하는 것을 추천.

변수(var) 호이스팅

        console.log(a); // undefined
        var a = 10; ← 호이스팅됨.

▼

        var a;
        console.log(a); // undefined
        a = 10; 처럼 인식됨. 오류 발생

함수 선언(function declaration) 호이스팅

        foo(); // Hello, World!

        function foo() {
        console.log('Hello, World!'); ← 호이스팅됨.
        }

▼

        function foo() {
        console.log('Hello, World!');
        }

        foo(); // Hello, World! 처럼 인식됨. 정상적으로 실행.

13. 화살표 함수

ES6(ECMAScript 2015)에서 추가된 새로운 함수 정의 방식.
기존의 function 키워드를 사용하여 함수를 정의하는 것보다 '=>' 를 사용하여 간단하게 정의.
함수 내부가 단일 표현식(single expression)인 경우에는 중괄호({})와 return 키워드를 생략 가능.
항상 익명.

13-1. 매개변수가 없을 경우

        const 함수명 = ( )  => {
            실행문;
            ...
        }

예)
const func1 = ( ) => console.log('안녕하세요 Javascript');
func1();

13-2. 매개변수가 있을 경우

        const 함수명 = (매개변수1, 매개변수2, ...) => {
            실행문;
            ...
        }

        const 함수명 = (매개변수1, 매개변수2, ...) => 실행문;
// 위의 줄을 한 줄로 줄일 수 있음.

예)
const func2 = (x, y) => console.log(`두 수의 합: ${x+y}`);
func2(10,3);

매개변수가 1개인 경우, 소괄호의 생략이 가능.

const 함수명 = 매개변수1 => 실행문;

예)

const func3 = x => x * x;
~~func3(10);~~ // 이대로 출력하면 오류가 발생.

const result = func3(10);
console.log(`10의 제곱: ${result}`);
python의 람다함수와 유사한 개념. 값을 전달받으면서 return하는 특성이 있기 때문에
result로 return을 해주어야 정상적으로 출력이 가능하다.

1부터 100까지의 합을 화살표함수를 이용해서 구하는 방법.
(두 줄 이상이므로 return을 통해 반환해주는 작업이 필요.)

  const func4 = (x, y) => { // x = 1, y = 100 으로 대입.

            let sum = 0;
            for (let i=x; i<=y; i++) {
                sum += 1;
            }

            return sum;
        }

        const total = func4(1, 100);
        console.log(`1부터 100까지의 합: ${total}`);

나이에 따른 출력값을 삼항연산자를 이용해서 구하는 방법.

let age = prompt('나이를 입력하세요');

const isAdult = (age>19) ? ( ) => console.log('성인입니다.') : () => console.log('미성년입니다.')
isAdult();

14. 객체(Object)의 생성법

이름과 값을 갖는 속성(property)들을 포함.

프로퍼티(property)
객체(Object) 내부의 변수(Variable) 혹은 함수(Function).
이름과 값으로 구성된 정렬되지 않는 집합.

프로퍼티 메소드(property method): 저장된 함수.(=함수 프로퍼티)

예)
const person = {    // person: 객체.

  name: 'John', // name: 변수 프로퍼티.
age: 30,      // age: 변수 프로퍼티.

greet: function() {   // greet: 함수 프로퍼티.
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

14-1. 리터럴 표기법(Object Literal)

가장 일반적인 객체 생성 방식. 중괄호({})를 사용하여 객체를 생성하고, 프로퍼티를 추가함.

    const 객체명 = {

        프로퍼티명1: 값1,
        프로퍼티명2: 값2,
        ...

        프로퍼티명n: function(){
            실행문;
            ...
        }
    }

예)

    const dog = {
        name: '루시',
        age: 13,
        color: 'white',
        birthday: '20091210',

        getBirthday: function(){
            return this.birthday;
        }
    }

this. : self와 유사한 개념. 프로퍼티에 접근하는 접근자의 의미.

    console.log(dog.name);
    console.log(dog['name']);

    console.log(dog.age);
    console.log(dog['age']);

    console.log(dog.color);
    console.log(dog['color']);

    console.log(dog.birthday);
    console.log(dog['birthday']);

    console.log(dog.getBirthday());
    console.log(dog['getBirthday']());

    for (let i in dog) {
        console.log(`i:${i}, dog[${i}]:${dog[i]}`);
    }

14-2. 생성자 함수를 이용 (Constructor Function)

생성자 함수를 정의하고, new 연산자를 사용하여 객체를 생성,초기화하는 방식.
객체를 생성할 때 사용하는 함수: 생성자.
새롭게 생성되는 객체를 초기화하는 역할.
같은 형태의 객체를 여러 개 생성할 때 유리함. (예: 루시, 뽀미의 코드 참고)

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

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

        this.프로퍼티명n = function(){
            실행문;
            ...
        }
    }

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

예)

    function Person(name, age) {

        this.name = name;
        this.age = age;

        this.greet = function() {
            console.log(`이름: ${this.name} , 나이: ${this.age}`);
        };
    }

    const john = new Person('조윤재', 30);

예)

function Dog(name, color){
        this.name = name;
        this.color = color;

        this.eat = function(){
            return `${this.name}는 먹습니다`;
        }
    }

    const Rucy = new Dog('루시', 'white');

    console.log(Rucy.name);
    console.log(Rucy.color);
    console.log(Rucy.eat());

    const PPomi = new Dog('뽀미', 'white');

    console.log(PPomi.name);
    console.log(PPomi.color);
    console.log(PPomi.eat());

14-3. 클래스를 이용 (Class)

ES6부터 추가된 클래스(Class)를 사용하여 객체를 생성하는 방식.
생성자 함수를 이용하는 방법과 동일한 원리로 작동.

    const 클래스명 = class {

        constructor (매개변수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, ...);

예)

const Person = class {

constructor (name, age) {
            this.name = name;
            this.age = age;
        }

        greet() {
            console.log(`이름: ${this.name} , 나이: ${this.age}`);
        }

    }

    const name = new Person('조윤재', 30);

예)
const User = class  {

constructor (userid, name, age) {
            this.userid = userid;
            this.name = name;
            this.age = age;
        }

        getUserid() {
            return `아이디는 ${this.userid} 입니다.`;
        }

    }

    const apple = new User ('apple', '김사과', 20);

    console.log(apple.userid);
    console.log(apple.name);
    console.log(apple.age);
    console.log(apple.getUserid());

15. 상속

클래스 기반의 객체지향 언어와 다름. (클래스 기반의 '상속'과 다른 개념.)
JavaScript는 프로토타입 기반의 객체 지향 언어.

프로토타입(Prototype)
모든 객체는 프로토타입(Prototype)이라는 객체를 갖고 있음.
모든 객체는 프로토타입(Prototype)으로부터 프로퍼티(Property)와 프로퍼티 메소드(Property method)를 상속받음.
모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받게 되며,
상속되는 정보를 제공하는 객체를 프로토타입(Prototype)이라고 정의함.
프로토타입 객체는 다른 객체가 상속할 수 있는 속성과 메서드를 정의하는데 사용됨.

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

Dog.prototype : Dog 생성자 함수로 생성된 객체의 프로토타입 객체.
이 객체는 Dog 생성자 함수에서 정의한 메서드나 속성 등을 포함하며,
이를 상속받은 객체들은 이 객체에 정의된 메서 드와 속성을 사용할 수 있음.

Object.prototype : JavaScript의 모든 객체가 상속하는 기본 프로토타입 객체.
이 객체는 자바스크립트에서 제공하는 메서드 와 속성을 포함하며, 모든 객체에서 이를 사용할 수 있음.
따라서 Dog 객체 역시 Object.prototype에 정의된 메서드와 속성을 사용할 수 있음.

프로토타입의 수정 (상속받는 틀 자체가 수정되므로 내용 자체가 수정되어버림.)

        Dog.prototype.birthday = '20091210';

        Dog.prototype.run = function(){
            return this.name + '는 달립니다.';
        }

        console.log(`생년월일:${Rucy.birthday}, run:${Rucy.run()}`);
        console.log(`생년월일:${PPomi.birthday}, run:${PPomi.run()}`);

16. 객체(Object)의 종류

16-1. Math 객체

수학에서 자주 사용하는 상수와 함수들을 미리 구현한 JavaScript의 표준 내장 객체.

(방정식, 함수, 행렬, 미/적분, 선형대수)

min()

가장 작은 수. 매개변수가 전달되지 않으면 Infinity를 반환.

max()

가장 큰 수. 매개변수가 전달되지 않으면 -Infinity를 반환.

round()

소수점 반올림 (첫번째 자리에서)

floor()

소수점 버림.

ceil()

소수점 올림.

random()

0과 1사이의 무작위 소수.

console.log(Math.min()); // infinity
        console.log(Math.max()); // - infinity

        console.log(Math.min(1,10,-10,1000,0,'-100')); // -100  (자동 형변환)
        console.log(Math.min(1,10,-10,1000,0,'마이너스백')); // NaN  ('마이너스백'이라는 비교할 수 없는 값이 목록에 존재)

        console.log(Math.round(10.49)); // 10
        console.log(Math.round(10.5)); // 11
        console.log(Math.round(-10.5)); // -10
        console.log(Math.round(-10.51)); // -11

        console.log(Math.floor(10.49)); // 10
        console.log(Math.floor(10.5)); // 10
        console.log(Math.floor(-10.5)); // -11
        console.log(Math.floor(-10.51)); // -11

        console.log(Math.ceil(10.49)); // 11
        console.log(Math.ceil(10.5)); // 11
        console.log(Math.ceil(-10.5)); // -10
        console.log(Math.ceil(-10.51)); // -10

        const rm = Math.random();
        console.log(rm);


        // 1부터 10까지의 자연수를 랜덤하게 뽑는 방법

        const num = Math.random();
        console.log(Math.floor(num*10)+1);

16-2. String 객체

const str1 = 'JavaScript';
const str2 = new String('JavaScript');

str1 == str2 // true
str1 === str2 // false
(type은 동일하나, 각각 리터럴표기법과 생성자함수사용법을 이용하기 때문에 false가 출력.)

length

길이. (property.)

indexOf()

처음으로 등장하는 문자/문자열 위치를 인덱스로 반환.

charAt()

인덱스 위치를 문자를 반환.

includes()

문자/문자열의 포함 여부를 반환.

substring()

시작 인덱스부터 종료직전 인덱스까지의 문자열 추출.

substr()

시작 인덱스부터 특정 갯수만큼 문자열 추출.

replace()

치환.

split()

구분자를 기준으로 나눔.

trim()

앞뒤 공백 제거.

toUpperCase()

모두 대문자 변환.

toLowerCase()

모두 소문자 변환.

메소드 체인(Method chaining)
Javascript에서 객체 지향 프로그래밍을 구현할 때 사용하는 기법.
여러 개의 메서드 호출을 연결하여 하나의 표현식으로 표현하는 것.

예) str3.trim().toLowerCase()

16-3. Date 객체

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

new Date(): 현재 날짜 시간을 저장한 객체.
new Date('날짜 문자열'): 특정 날짜 시간을 저장한 객체.
new Date('밀리초'): 1970년 1월 1일 0시 0분 0초를 기준으로 해당 밀리초만큼 지난 날짜 시간을 저장한 객체.
new Date(년, 월, 일, 시, 분, 초, 밀리초): 해당 날짜 시간을 저장한 객체.

console.log(new Date()); // Thu Apr 06 2023 14:40:56 GMT+0900 (한국 표준시)
console.log(new Date(2023,4,6)); // 연도를 2자리로 사용하면 1900년도로 출력. ('23'=1923년, '2023'=2023년)
// '월'의 칸은 '현재 월-1'을 입력. (3='4월')

        const current_time = new Date(2023, 3, 6, 14, 44, 00)
        console.log(current_time); // Thu Apr 06 2023 14:44:00 GMT+0900 (한국 표준시)

        console.log(`현재 연도: ${current_time.getFullYear()}`);
        console.log(`현재 월: ${current_time.getMonth()+1}`);
        console.log(`현재 일: ${current_time.getDate()}`);
        console.log(`현재 시간: ${current_time.getHours()}`);
        console.log(`현재 분: ${current_time.getMinutes()}`);
        console.log(`현재 초: ${current_time.getSeconds()}`);

연도(year)
2자리로 연도를 표기: 1900년~1999년
4자리로 연도를 표기: 2000년~

월(month)
0(1월) ~ 11(12월)

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

    const 함수명 = function(){
        실행문;
        ...
    }
    const st = setTimeout(함수명, 밀리초);

const hello = function(){
            alert('안녕하세요 Javascript');
        }
        const st = setTimeout(hello, 5000); // 5000밀리초(5초) 후에 'hello'를 호출.

        clearTimeout(st); // 해당 st를 취소.

clearTimeout()
setTimeout()를 취소.

setInterval()
일정 시간 마다 매개변수로 제공된 함수를 실행.

        const hello = function(){
            console.log('안녕하세요. Javascript');
        }
        const st = setInterval(hello, 3000); // 3초에 1번씩 '안녕하세요. Javascript'가 출력.

        const clearInter = function(){
            clearInterval(st);
            console.log('hello()가 중지되었음.');
        }

clearInterval()
setInterval()을 취소.

Web API 객체
웹 브라우저에서 제공하는 JavaScript API. 이 객체를 통해 웹 브라우저와 상호작용하며,
웹 애플리케이션을 개발할 때 필요한 다양한 기능을 제공.

Window 객체
웹 브라우저의 창이나 탭을 표현하기 위한 객체. 브라우저 창의 표현이 가능.
JavaScript 코드에서 별다른 선언 없이 사용할 수 있는 BOM(Browser Object Model)의 일부.

예) window.alert()
window.confirm()
window.prompt() // 일반적으로 앞의 window는 생략해서 사용.

16-4. form 객체

일반적인 폼 요소에 접근할 때 사용.
document.forms 컬렉션을 이용해서도 접근할 수 있음.

16-4-1. 폼 접근하기

name으로 찾는 방법.
const frm = document.myform;
const frm = document.forms['myform'];

여러 개의 폼 중 인덱스 0의 위치의 폼.
const frm = document.forms[0];

전체 element 중 id로 검색하라는 의미. → id로 찾는 방법.
const frm = document.getElementById('regform');

16-4-2. id 입력상자에 접근하기

name으로 찾는 방법.
const userid = frm.userid;

const userid = document.forms['myform'].elements['userid'];

여러 개의 폼 중 인덱스 0의 위치의 폼.
const userid = document.forms['myform'].elements[0];

여러 개의 폼 중 인덱스 0의 위치의 폼 + 인덱스 0의 위치의 요소.
const userid = document.forms[0][0];

전체 element 중 id로 검색하라는 의미. → id로 찾는 방법.
const userid = document.getElementById('id');

       <form action='#' name='frm1'>
            <input type='text' name='userid' id='id' placeholder='아이디를 입력하세요'><br>
            <input type='password' name='userpw' placeholder='비밀번호를 입력하세요'>
        </form>

        <form action='#' name='frm2'>
            <input type='search' name='search' placeholder='검색어를 입력하세요'>
        </form>

        <script>
            const frm1 = document.frm1;
            console.log(frm1.userid.placeholder); // frm1의 폼에서 name이 userid인 placeholder를 출력.

            const frm2 = document.frm2;
            console.log(frm2.search.placeholder); // frm2의 폼에서 name이 search인 placeholder를 출력.

            document.getElementById('id').value = 'apple'; // userid의 칸에 'apple'.
            document.forms['frm1'].elements['userpw'].value = '1004'; // userpw의 칸에 '1004'.
            document.forms[1].elements[0].value = '코리아IT아카데미' // search의 칸에 '코리아IT아카데미'.
        </script>

과제

예제1

가위바위보를 하는 프로그램을 만들기.

예제2

중복값이 없도록 로또번호를 예상하는 프로그램 만들기

flag
주로 조건을 판별하거나 반복문에서 특정 조건을 만족할 때에만 실행될 수 있는 코드 블록 등을 제어하기 위해 사용되는 변수.
일반적으로 불리언 값 (true 또는 false)을 저장.

예를 들어, 어떤 함수가 반복적으로 실행될 때, 그 함수 내부에서 flag 변수를 사용하여 특정 상태가 되었을 때만 함수를
실행하도록 제어할 수 있음.

또 다른 예로, 검색 결과 중에서 특정 조건을 만족하는 결과를 찾았는지를 확인할 때 flag 변수를 사용할 수 있음.
검색이 진행될 때, flag 변수가 true로 설정되어 있는지 여부에 따라 검색이 계속되거나 중지될 수 있음.

예제3

웹사이트에 시계 적용하기

저작자표시 비영리 변경금지

yj.cho

4/6(목) IT K-DT(26일차) / 11.사용자정의함수~16-4.form객체