자바 프로그래밍_Day_58_자바스크립트 함수, 객체

2021. 11. 09

 

 

> 실습 코드와 출력 결과

 

   -> 04_함수.html

    <h3>화살표 함수(Arrow Function)</h3>
    <pre>
        ES6에 도입된 함수 선언 방법으로 function 키워드 대신 => 를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있다. 

        [표현법]
            - 매개 변수가 없을 때 : () => { ... } 
            - 매개 변수가 하나 일 때 : x => { ... }
            - 매개 변수가 두 개 이상일 때 : (x, y) => { ... }
            - 리턴 처리 
                - 처리할 라인이 여러 개라면 {}로 감싸서 처리해야 한다.
                (x, y) => { 
                    실행 구문; 
                    
                    return x * y; 
                }
                - 처리할 라인이 하나라면 {}와 return 문을 생략할 수 있다.
                (x, y) => x * y;
        
        * 기존 function과 this가 가리키는 대상이 조금 다르기 때문에 주의해야 한다. (javascript arrow function this)
    </pre>

    <hr>
    
    <h2>함수의 매개변수</h2>
    
    <h3>매개변수</h3>
    <p>
        함수 실행에 필요한 값을 외부에서 함수 내부로 전달할 때 매개변수를 통해서 매개값을 전달한다.(인수) <br>
        함수를 호출할 때 매개변수의 개수만큼 매개값을 전달하는 것이 일반적이지만 그렇지 않은 경우에도 에러가 발생하지 않는다.
    </p>
    
    <button id="btn2">실행 확인</button>

 

 

 

   -> 04_함수.js

// 함수의 매개변수
// 1) 매개변수
let btn2 = document.getElementById('btn2');

btn2.addEventListener('click', (event) => {
    // argTest('안녕하세요');
    // argTest('안녕하세요', '반갑습니다.');
    argTest();

    // console.log(arguments);  // 화살표 함수는 arguments를 생성하지 않는다.
    console.log(event);
    console.log(e.target);
});

// 매개변수 기본값을 지정하면 전달되는 매개값이 없을 경우 기본 값으로 사용한다.(ES6 부터 도입)
function argTest(value = '매개값 없음') {
    alert(value);
}

 

 

 

 

 

> 출력 결과

매개변수 실행 확인 전

매개변수 실행 확인 후

 

 

 

 

 

 

 

 

 

   -> 04_함수.html

    <h3>arguments</h3>
    <p>
        초과된 매개값이나 가변적으로 매개값을 함수 내부로 전달할 때는 arguments 객체를 사용한다. <br>
        (모든 매개값이 arguments 객체의 프로퍼티로 보관된다.)
    </p>
    
    <button id="btn3">실행 확인</button>
    
    <h3>매개변수에 this 요소 전달하기</h3>
    
    <!-- this(버튼 객체) : 이벤트가 발생했을 때의 이벤트가 발생한 요소-->
    <button onclick="thisTest(this)">버튼 1</button>
    <!-- <button>버튼 2</button>
        <input type="button" value="버튼3"> -->
        
    <hr>

 

 

 

 

   -> 04_함수.js

// 2) arguments
let btn3 = document.getElementById('btn3');

btn3.addEventListener('click', () => {
    let result = 0;
    // result = sum(11, 22, 33, 44);
    result = sum(128, 532);

    alert(`sum : ${result}`)
});

function sum() {
    let result = 0;

    console.log(arguments);
    console.log(arguments.length);
    console.log(typeof(arguments));

    for (let i = 0; i < arguments.length; i++) {       
        result += arguments[i];
    }

    return result;
}

// 3) 매개변수에 this 요소 전달하기
function thisTest(element) {
    console.log(this);      // window 객체(함수, 전역변수는 window에 포함되기 때문에)
    console.log(element);   // 이벤트가 발생했을 때의 이벤트가 발생한 요소
}

 

 

 

 

 

> 출력 결과

 

arguments 실행 확인

매개변수에 this 요소 전달을 위해 '버튼 1' 눌렀을 시 실행 화면

 

 

 

 

 

   -> 04_함수.html

    <h2>함수의 리턴</h2>
    <h3>일반적인 값 리턴</h3>
    
    <button onclick="returnTest();">실행 확인</button>
    
    <h3>익명 함수를 리턴하는 함수</h3>
    
    <label>이름 : <input type="text" id="userName"></label>
    <button id="btn4">실행 확인</button>
    
    <hr>

 

 

 

 

   -> 04_함수.js

// 함수의 리턴
// 1) 일반적인 값 리턴
function returnTest() {
    let random = ran();

    alert(`random : ${random}`)
}

function ran() {

    return parseInt(Math.random() * 100 + 1);
}

// 2) 익명 함수를 리턴하는 함수
let btn4 = document.getElementById('btn4');
btn4.addEventListener('click', () => {
    // let func = returnTest2();
    
    // func();

    // 직접 실행(호출)
    returnTest2()();
});

function returnTest2() {
    // 클로저
    //  - 내부함수가 사용하는 외부함수의 지역변수는 내부함수가 소멸할 때까지 소멸되지 않는 특성을 클로저라고 한다.
    let userName = document.getElementById('userName').value;

    return function() {
        alert(userName + '님 환영합니다.');
    }
}

 

 

 

 

> 출력 결과

함수의 리턴 실행 전 화면

일반적인 값 리턴 '실행 확안' 버튼 누른 후 출력 화면

익명 함수를 리턴하는 함수

 

 

 

 

 

> 내장 함수

메소드	비고
eval(String)	String을 자바스크립트 코드로 실행
isFinite(number)	number가 무한한 값인지 확인
isNaN(number)	number가 NaN인지 확인

* 변수의 무한대 값을 확인하거나 NaN을 확인할 때는 반드시 위의 함수를 사용(비교연산자 적용 X)

 

 

 

 

> 실습 코드와 출력 결과

 

   -> 04_함수.html

    <h2>내장 함수</h2>
    <h3>eval()</h3>
    <p>
        문자열을 자바스크립트 코드로 변환해서 실행하는 함수
    </p>

    <label>계산식 : <input type="text" id="calc"></label>
    <button id="btn5">실행 확인</button>

    <p id="p2"></p>

 

 

 

   -> 04_함수.js

// 내장 함수
//  1) eval()
let btn5 = document.getElementById('btn5');

btn5.addEventListener('click', () => {
    let p2 = document.getElementById('p2');
    let calc = document.getElementById('calc');

    p2.innerHTML += `실제 입력된 값 : ${calc.value} <br>`;
    p2.innerHTML += `eval() 후 : ${eval(calc.value)} <br>`
});

 

 

 

 

> 출력 결과

 

 

 

 

 

 

 

   -> 04_함수실습.html

<!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>
    <style>
        table {
            border:3px solid blue;
        }
        #result {
            height:50px;
            font-size:2em;
            font-weight:bold;
            text-align:right;
            border:1px solid black;
            width:210px;
            overflow:hidden;
        }
        button {
            font-size:1.5em;
            font-weight:bold;
            width:50px;
            height:50px;
        }
    </style>
</head>
<body>
    <h1>함수 실습</h1>

    <hr>

    <h3>계산기 만들기(내장 함수 사용)</h3>

    <div>
		<table>
			<tr>
				<td colspan="4">
					<div id="result">0</div>
				</td>
			</tr>
			<tr>
				<td>
					<button id="left" onclick="buttonClick(this.innerHTML);">(</button>
				</td>
				<td>
					<button id="right" onclick="buttonClick(this.innerHTML);">)</button>
				</td>
				<td>
					<button id="percent" onclick="buttonClick(this.innerHTML);">%</button>
				</td>
				<td>
					<button id="clear" onclick="buttonClick(this.innerHTML);">AC</button>
				</td>
			</tr>
			<tr>
				<td>
					<button id="seven" onclick="buttonClick(this.innerHTML);">7</button>
				</td>
				<td>
					<button id="eight" onclick="buttonClick(this.innerHTML);">8</button>
				</td>
				<td>
					<button id="nine" onclick="buttonClick(this.innerHTML);">9</button>
				</td>
				<td>
					<button id="devide" onclick="buttonClick(this.innerHTML);">/</button>
				</td>
			</tr>
			<tr>
				<td>
					<button id="four" onclick="buttonClick(this.innerHTML);">4</button>
				</td>
				<td>
					<button id="five" onclick="buttonClick(this.innerHTML);">5</button>
				</td>
				<td>
					<button id="six" onclick="buttonClick(this.innerHTML);">6</button>
				</td>
				<td>
					<button id="astric" onclick="buttonClick(this.innerHTML);">*</button>
				</td>
			</tr>
			<tr>
				<td>
					<button id="one" onclick="buttonClick(this.innerHTML);">1</button>
				</td>
				<td>
					<button id="two" onclick="buttonClick(this.innerHTML);">2</button>
				</td>
				<td>
					<button id="three" onclick="buttonClick(this.innerHTML);">3</button>
				</td>
				<td>
					<button id="minus" onclick="buttonClick(this.innerHTML);">-</button>
				</td>
			</tr>
			<tr>
				<td>
					<button id="zero" onclick="buttonClick(this.innerHTML);">0</button>
				</td>
				<td>
					<button id="dot" onclick="buttonClick(this.innerHTML);">.</button>
				</td>
				<td>
					<button id="equal" onclick="buttonClick(this.innerHTML);">=</button>
				</td>
				<td>
					<button id="plus" onclick="buttonClick(this.innerHTML);">+</button>
				</td>
			</tr>
		</table>
	</div>

    <script>
		var result = document.getElementById("result");
			
		function buttonClick(button){
				
			if(button == 'AC'){
				result.innerHTML = 0;
			}else if(button == '='){
				result.innerHTML = eval(result.innerHTML);

			}else{
				var str = button;
				
				if(result.innerHTML == '0'){
					result.innerHTML = str;
				}else{
					result.innerHTML += str;
				}
			}
		}
	</script>
</body>
</html>

 

 

 

 

> 출력 결과

 

 

 

 

 

 

 

객체

 

> 객체 선언 및 호출

   -> 객체는 키 값을 사용하여 속성(멤버 변수) 식별

   -> 중괄호를 사용하여 객체를 생성하고 [ ] 또는 .으로 요소 값에 접근

   -> 속성에 모든 자료형이 올 수 있으며 그 중 함수 자료형인 요소 : 메소드

   -> 객체 내에서 자신의 속성을 호출할 때 반드시 this키워드를 사용하고

   -> 객체의 모든 속성을 출력하려면 단순 for문이나 while문으로는 출력이 불가하니 for in문을 사용해야 함

* 식별자로 사용할 수 없는 문자(띄어쓰기, 특수문자)를 속성으로 사용할 경우 ‘ ‘로 묶어서 선언하고 접근 시에는 [ ]만 가능

 

 

 

 

   -> 선언 방법

var 변수 명(객체 명) = {
            속성(키 값) : 값,
            속성(키 값) : 값,
            속성(키 값) : 값
};

 

   -> 속성 값 접근

변수 명(객체 명)[‘요소 명(키 값)’];
또는
변수 명(객체 명).요소 명(키 값);

 

 

 

 

> 실습 코드와 출력 결과

 

 

   -> 05_객체.html

<!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>

    <style>
        .area {
            border: 1px solid;
            margin-top: 5px;
            width: 500px;
            height: 300px;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <h1>객체</h1>

    <hr>

    <h2>객체 선언</h2>
    <p>
        중괄호{}를 사용해서 객체를 생성하고 속성에는 모든 자료형이 올 수 있다. <br>
        객체는 키값을 사용해서 속성을 식별한다. <br>
        속성명에 공백이나 특수문자 등이 포함된 경우 따옴표로 묶어서 표기해야 한다.<br>
        또한 객체에서 접근 시 무조건 대괄호를 사용해야 객체의 속성에 접근이 가능하다.
    </p>

    <button id="btn1">실행 확인</button>

    <div id="area1" class="area"></div>
    <script src="./05_객체.js"></script>

</body>
</html>

 

 

 

   -> 05_객체.js

// 객체 선언
let btn1 = document.getElementById('btn1');

btn1.addEventListener('click', () => {
    let area = document.getElementById('area1');
    let product = {
        // 리터럴 사용한 객체 선언
        // 'pName'; '아이폰 12 미니'
        // '0': '배열 흉내',
        0: '배열 흉내',
        pName: '아이폰 12 미니',
        price: 1000000,
        brand: '삼성',
        brand: '애플',  // 중복 선언하게 되면 마지막에 선언된 프로퍼티가 덮어쓰게 된다.
        spec: ['OLED', 'IOS15']
    };

    // 속성명을 제시할 때 공백이나 특수문자가 들어가야 하는 경우 '', ""로 묶어줘야 한다.
    let user = {
        'user name' : '홍길동',
        'age!!' : 20
    }

    console.log(product);

    area.innerHTML = `product : ${product} <br><br>`;

    area.innerHTML += '객체명["속성명"]으로 접근하는 방법<br>';
    // area.innerHTML += `product[0] : ${product['0']}`/
    area.innerHTML += `product[0] : ${product[0]}<br>`
    area.innerHTML += `product['pName'] : ${product['pName']}<br>`
    area.innerHTML += `product['price'] : ${product['price']}<br>`
    area.innerHTML += `product['brand'] : ${product['brand']}<br>`
    area.innerHTML += `product['spec'][0] : ${product['spec'][0]}<br>`
    area.innerHTML += `product['spec'][1] : ${product['spec'][1]}<br><br>`
    
    area.innerHTML += '객체명.속성명으로 접근하는 방법<br>';
    // area.innerHTML += `product.0 : ${product.0} <br><br>`;
    area.innerHTML += `product.pName : ${product.pName}<br>`;
    area.innerHTML += `product.price : ${product.price}<br>`;
    area.innerHTML += `product.brand : ${product.brand}<br>`;
    area.innerHTML += `product.spec.0 : ${product.spec[0]}<br>`;
    area.innerHTML += `product.spec.1 : ${product.spec[1]}<br><br>`;

    area.innerHTML += '공백이나 특수문자가 속성명에 포함되어 있는 경우 대괄호를 이용해서 값을 가져올 수 있다.'
    // area.innerHTML += `user.user name : ${user."user name"}<br>`;
    area.innerHTML += `user['user name'] : ${user["user name"]} <br>`;
    // area.innerHTML += `user['age!!'] : ${user.age!!} <br>`;
    area.innerHTML += `user['age!!'] : ${user["age!!"]} <br>`;
});

 

 

 

 

> 출력 결과

 

 

 

   -> 객체 선언 '실행 확인' 버튼 누른 후 출력화면

 

 

 

 

 

 

 

   -> 05_객체.html

    <h2>객체의 메소드</h2>
    <p>
        객체의 속성 중 함수 자료형인 속성을 메소드라고 한다.
    </p>

    <button id="btn2">실행 확인</button>

 

 

 

 

   -> 05_객체.js

// 객체의 메소드
let btn2 = document.getElementById('btn2');

btn2.addEventListener('click', () => {
    let name = '도라지';

    let dog = {
        name: '백구',
        kind: '진돗개',
        eat: function(food) {
            // this를 명시적으로 꼭 써줘야 한다.(객체 내부의 속성에 접근하기 위해서는 'this.속성명'으로 작성해야 한다.)
            console.log(`${this.kind} 종류인 ${this.name}가 ${food}를 먹고 있네요!`);
        }
    };

    dog.eat('닭가슴살');
});

 

 

 

 

> 출력 결과

 

객체의 메소드 '실행 확인' 버튼을 누른 후 출력 화면

 

 

 

 

 

   -> 05_객체.html

    <h2>객체와 반복문</h2>
    <p>
        객체가 가지고 있는 모든 속성들에 순차적으로 접근하려면 <br>
        단순 for 문으로는 불가능하다. 따라서 for in 문을 사용해야 한다.
    </p>

    <button id="btn3">실행 확인</button>

 

 

 

 

   -> 05_객체.js

// 객체와 반복문
let btn3 = document.getElementById('btn3');

btn3.addEventListener('click', () => {
    let game = {
        title: '디아블로2',
        price: 40000,
        supportOS: ['win32', 'win64'],
        service: true
    };

    console.log(game);

    for (const key in game) {
        console.log(`key: ${key}, game[key]: ${game[key]}`);
    }
});

 

 

 

> 출력 결과

 

객체와 반복문 '실행 확인' 버튼 누른 후 출력 화면

 

 

 

 

 

> in / with 키워드

   -> in : 객체 내부에 해당 속성이 있는지 확인하는 키워드

   -> with : 코드를 줄여주는 키워드, 호출 시 객체 명 생략 가능

 

in 키워드
   -> 속성 명 in 변수 명(객체 명) // 있으면 true, 없으면 false

with 키워드
   -> with(변수 명(객체 명)){
                        속성 명;
        }

* with 미사용 시 : 변수 명(객체 명).속성 명;

 

 

 

 

 

> 객체 속성 추가 및 삭제

   -> 속성 및 메소드를 동적으로 추가/삭제 가능

 

-> 추가

변수 명(객체 명).속성 명 = ‘값’;
변수 명(객체 명).속성 명 = “값“;
변수 명(객체 명).속성 명 = function(){
            메소드 로직;
            [return [리턴 값];]
};


-> 삭제

delete(변수 명(객체 명).속성 명);

 

 

 

 

 

   -> 05_객체.html

    <h2>객체의 속성 추가 및 삭제</h2>
    <p>
        객체를 생성한 이후에 새로운 속성을 추거하거나 제거할 수 있다.
        (동적으로 속성을 추가/제거)
    </p>

    <button id="btn4">실행 확인</button>

 

 

 

   -> 05_객체.js

// 객체의 속성 추가 및 삭제
let btn4 = document.getElementById('btn4');

btn4.addEventListener('click', () => {
    // let student = {
    //     name: '홍길동',
    //     age: 20,
    //     job: '의적',
    //     whoAreYou: () => {
    //         let str = '';
    
    //         for (const key in this) {
    //             if(key !== 'whoAreYou') {
    //                 str += `${key}: ${this[key]} `;
    //             }
    //         }
    
    //         return str;
    //     }
    // }

    // 빈 객체 선언
    let student = {};

    // 객체에 속성 추가
    student.name = '당나귀';
    student.age = 20;
    student['job'] = '동물';

    // 객체에 메소드 추가
    student.whoAreYou = function () {
        let str = '';

        for (const key in this) {
            // if(key !== 'whoAreYou') {}
            if(typeof(this[key]) !== 'function') {
                str += `${key}: ${this[key]}`;
            }
        }

        return str;
    };

    console.log(student);
    console.log(student.whoAreYou());
    console.log(('job' in student))
    
    delete(student.job);

    console.log(student);
    console.log(student.whoAreYou());
    console.log(('job' in student))
});

 

 

 

 

> 출력 결과

객체의 속성 추가 및 삭제