3월 14일 (1) JavaScript - 함수 파라미터, 객체

함수 function

하나의 기능을 처리하기 위한 명령문들의 묶음

전체 코드를 분할하여 개발과 이후 유지보수를 수월하게 할 수 있다.

연습법) 함수 없이 그냥 코드를 짜본다 -> 반복된 코드를 찾아서 함수로 묶는다. -> 기능적으로 코드를 묶는다.

함수의 파라미터(parametre - 인자, 인수 등)

함수의 코드가 처리될 때 필요한 값

함수에서 파라미터를 저장하기 위해 사용하는 변수를 매개변수라고 한다.

파라미터의 개수는 제한 없음(반면에 return은 하나밖에 없다. only one)

컴퓨터의 입장에서는 함수 원본을 가지고 와서 사본을 복사해서 처리함. 값을 반영할 수 있도록 하는 것이 필요하다, 그 값을 인수, 인자라고 함.

변수는 공간이기 때문에 이동을 할 수 없다. 함수는 다른 공간에 저장이 되어있기 때문에 변수에 들어가 있는 값을 전달해주어야 한다. 직접적으로 변수에 들어 있는 값을 함수에서 바로 쓸 수가 없게 되어 있기 때문에 복사해서 값을 가지고 가는데, 이를 파라미터라고 한다. 복사되어서 전달되는 변수를 매개 변수라고 한다. 그래서 이름이 같거나 달라도 상관이 없다.

파라미터와 매개변수의 개수는 동일해야 한다.

같은 이름의 함수를 여러 개 만들면, 마지막에 작성한 함수만 사용.(자바스크립트는 오류로 처리 하지 않는다!)

다른 프로그래밍 언어는 파라미터와 매개변수의 개수가 동일하지 않으면 오류가 발생한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>함수의 파라미터</title>
</head>
<body>
    <script>
        function somefunc() { //실행이 되지 않음, 실행되면 NaN이 아니라 1, 없는 함수가 됨
            let sum = 1; // 2번을 없애고 사용한 경우 받을 공간이 없기 때문에 1만 출력
            return sum;
        }

        function somefunc(x) { //함수 이름이 같은 경우 함수도 순서가 있어서 두번째 것만 실행됨
            let sum = x + 1;
            return sum;
        }

        let n1 = somefunc(); // x를 넣어주지 않았기 때문에 NaN이 뜬 것
        document.write(`함수 호출 인자 없음 : ${n1}<br>`);

        let n2 = somefunc(5); // 하나의 값을 넣어주었기 때문에 5 + 1 이 수행됨
        document.write(`함수 호출 인자 1개 : ${n2}<br>`);

        let n3 = somefunc(3, 4); // 인자를 하나만 받아서 사용 3 + 1 이 수행됨, 두번째 값은 버림
        document.write(`함수 호출 인자 2개 : ${n3}<br>`);

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

기본 매개 변수 (default parameter)

함수의 인자를 설정할 때 기본 값을 설정할 수 있음, 함수를 호출할 때 파라미터를 넣지 않으면, 설정한 기본값을 사용.

function add(a = 1, b = 0, c) { // 초기화하는 방식 변수에 값을 지정

return a + b + c;// c를 추가했을 경우, NaN 출력

}

let n4 = add(4, 6); // 정상적인 사용법

document.write(`계산결과 : ${n4}<br>`);

let n5 = add(); // 아무 값도 넣지 않았을 때, 함수에 있는 값을 씀

document.write(`계산결과 : ${n5}<br>`);

가변 파라미터 처리(...)

파라미터 0개부터 다수의 파리미터를 처리할 수 있다.

function func (...arge){...}

arge라는 이름의 배열이 생성되고, 파라미터가 없는 경우와 많은 경우를 모두 처리할 수 있다.

아무 값도 넣지 않으면 빈배열이 만들어진다.

//가변 파라미터 처리

function sumNumber(...args){

console.log(args);

let sum = 0;

for(let v of args){ // 배열 원소 꺼내기

sum += v;

}

document.write(`누적결과: ${sum}<br>`);

}

let n6 = sumNumber();

let n7 = sumNumber(1);

let n8 = sumNumber(1, 2);

let n9 = sumNumber(1, 2, 3, 4, 5, 6, 7, 8, 9);

이벤트 처리

1. html의 onXXX 속성을 사용하여 요소에서 발생하는 이벤트를 해당 함수와 연동하는 방법

마우스 이벤트의 onclick, select 요소의 onchange 등

2. addEventListener로 자바스크립트에서 모두 처리하는 방법 p 581

addEventListener (선택한요소에 이벤트 처리기를 부여)

문법)

선택요소.addEventListener(event, fuction);

event : 인식할 이벤트, 필수

function : 실행할 기능, 필수

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 처리</title>
</head>

<body>
    <h4 id="msg">FOCUS NULL</h4>
    <input id="txtinput" type="text">
</body>
<script>
    const m = document.querySelector("#msg");
    const ti = document.querySelector("#txtinput");

    ti.addEventListener("focus", () => {
        m.innerHTML = "FOCUS IN";
    });

    ti.addEventListener("blur", () => {
        m.innerHTML = "FOCUS OUT";
    });

    ti.addEventListener("keyup", (e) => { //이벤트 객체를 파라미터로 넣음
        console.log(e);
        m.innerHTML = e.keyCode;
        //문제 : 220번 키코드는 어떤 키의 번호일까요?
        if(e.keyCode == 220) {
            alert("NONO");
            ti.value = "";
        }
    });
</script>

</html>

자바스크립트의 데이터

숫자(Number)
문자열(String)
논리값(true/false)
정해지지않음(undefined) 아무것도 안 넣으면
데이터 없음(null)
배열(array)
객체(object)

=> 변수에 저장할 수 있는 데이터

객체(Object)

요즘 사용하는 프로그래밍 언어는 객체를 활용하는 방식인 객체 지향 프로그래밍 언어임

(OOP. Object Oriented Programming)

문제 해결을 위한 코드(명령어)를 객체 단위로 작성하는 프로그래밍 기법

◎ 데이터 구조적 관점에서의 비교

변수 < 배열 < 객체(정보를 저장)

객체란?

실체(존재)하는 모든 사물(것)

컴퓨터 과학에서 객체 또는 오브젝트(object)는
클래스에서 정의한 것을 토대로 메모리(실제 저장공간)에
할당된 것으로 프로그램에서 사용되는 데이터 또는
식별자에 의해 참조되는 공간을 의미하며, 변수, 자료 구조,
함수 또는 메소드가 될 수 있다. - 위키백과

객체 = 데이터(정보) + 기능(행위)

= 변수(정보를 담을 공간) + 함수(기능적인 부분) -> 멤버(member)

변수나 함수만 묶어서 객체를 만들어도 된다.

예 ) 계산기 객체 = 두 값을 저장하는 변수 + 4가지 기능(사칙연산)

가계부라는 하나의 프로그램에서 객체(계산기)를 활용할 수 있도록 하는 것이 객체지향 프로그래밍 방식이다.

메소드(method) - 객체 안에 존재하는 함수

자바스크립트에서 사용하는 객체 = html 요소(문서 객체 document object)

예)

ti 객체.addEventListener 변수 ("blur", () => {

m.innerHTML = "FOCUS OUT";

}) 메소드;

DOM(Document Object Model)

객체를 작성하는 문법(방법)

선언

let 객체명 = {

멤버변수 : 값, - 멤버변수, 여러 개 들어갈 수 있음

멤버메소드 : function(p) {...} - 익명함수, 멤버 메소드, 여러 개 들어갈 수 있음

}

사용) 객체명.멤버변수(초기값) = 변경값;

객체명.멤버메소드(p);

예) 10명에 대한 인적 정보를 저장하고 활용하기 위한 객체

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>인적정보처리객체</title>
</head>
<body>
    <script>
        let person = {
            name : "홍길동",
            age : 1,
            gender : "남자",
            aging : function(){
                this.age++;
            }
        }

        console.log(`이름 : ${person.name}`);
        console.log(`나이 : ${person.age}`);
        console.log(`성별 : ${person.gender}`);
        person.aging();
        console.log(`나이 : ${person.age}`);
    </script>
</body>
</html>

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

'공부기록 > JavaScript' 카테고리의 다른 글

3월 15일 JavaScript - 객체(Object) (0)	2023.03.15
3월 14일 (2) JavaScript - 객체 date, DOM (2)	2023.03.14
3월 13일 (2) JavaScript - 변수 범위, 함수 표현식, 이벤트 (0)	2023.03.13
3월 13일 (1) JavaScript - 함수 (0)	2023.03.13
3월 10일 JavaScript - 배열 (0)	2023.03.10

새롭게 공부시작하기

3월 14일 (1) JavaScript - 함수 파라미터, 객체

'공부기록 > JavaScript' 카테고리의 다른 글

티스토리툴바

3월 14일 (1) JavaScript - 함수 파라미터, 객체

'공부기록 > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바