2023.04.10 JavaScript의 함수작성법,객체활용

목차

1. JavaScript의 함수작성법

• 함수의 기본
• ✔함수와 메모리
• ✔함수 작성법 팁
• 매개변수의 기본값
• 콜백함수, 활용법, 문제
• 원시값과 객체값의 비교
• ✔자바 스크립트에만 존재하는 코드

2. JavaScript의 객체 활용법

• 객체 생성(기본 리터럴법으로 생성)
• 객체의 출력법
• 프로퍼티 추가하기
• 프로퍼티 삭제하기
• 동적으로 속성에 접근하기
• 객체에 프로퍼티 추가해주는 함수 만들기
• 객체에 프로퍼티 삭제해주는 함수 만들기
• 객체 생성하는 함수 만들기
• 생성자 만들기
• 생성된 생성자를 이용하여 객체 생성하기
• 생성된 객체를 출력

---

1. JavaScript의 함수작성법

1-1. 함수의 기본

• 매개 변수 두 수를 입력 받아 Sum을 출력해주는 함수

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

                       함수 호출시 실행할 문장;

             }

        // ✔함수의 기본 
        function sum(num1, num2){
            console.log('sum()호출!!');
            return num1 + num2;
        }

        const result = sum(10, 3);
        console.log(result);
        console.log('-------------');

 

1-2. ✔함수와 메모리

- 위 소스코드 이어서 사용합니다. 

 

-사용법 

       const 함수명 = 이전함수명;

        // ✔함수와 메모리
        // add의 상수에 sum함수를 저장한다. (같은 메모리를 저장할테니깐!!!)
        const add = sum;		// 위에서 add상수에 sum함수를 담아주었다!
        console.log(sum(10,3));
        console.log(add(10,3)); 
        console.log('-------------');

1-3. ✔함수 작성법 팁

• 조건식이 있을 때 조건을 만족하지 않는 경우 함수도입부분에서 함수를 미리 종료 시키는게 속도면 에서 빠르고 가독성도 높힐수 있는 방법이다. 

        // ✔✔함수의 작성팁 !!!
        // 조건식이 있을 때 조건을 만족하지 않는 경우 함수 도입부분에서 
        // 함수를 미리 종료 시키는게 속도도 빠르고 가독성도 높힐수 있는 방법이다.
        function print(num){
            if(num <= 0) return; // 이부분이 팁 !
            console.log(num);
        }
        print(10);
        print(-5);// -5 이기 때문에 num값이 0보다 작아서 그냥 짜름;
        console.log('-------------');

-5의 값은 0보다 작기때문에 출력되지 않습니다. 

1-4. 매개변수의 기본값

• 매개변수의 기본값을 정의 해주지 않으면 무조건 undefined이고 undefined와의 연산은 NaN이다.!!
• arguments(매개변수): 함수의 전달된 인수에 해당하는 Array 형태의 객체!! 

        // ✔매개변수의 기본값
        // 매개변수의 기본값을 정의 해주지 않으면 무조건 undefined이고 
        // undefined와의 연산은 NaN이다.!!
        // arguments(매개변수): 함수의 전달된 인수에 해당하는 Array 형태의 객체!! 
        function total(num1=0, num2=0){
            console.log(num1);
            console.log(num2);
            console.log('arguments:', arguments);       //아규먼트 객체형태를 찍어준다.
            console.log('arguments:', arguments[1]);    //아규먼트 [1]인덱스에 있는값
            return num1 + num2 ;
        }
        console.log(total()); //매개변수가 없을때! 
        console.log(total(10,3));// 멀쩡한 매개변수 전달.
        console.log('-------------');

1-5. 콜백함수, 활용법, 문제

• 화살표함수 익명 함수 이면서, 매개변수 a,b 두개를 받아 a와 b를 더해주고 리턴 해주는 화살표함수

// 콜백 함수
const calc_add = (a, b) => a+b; // 화살표함수 익명 함수 이면서, 매개변수 a,b 두개를 받아 a와 b를 더해주고 리턴 해주는 화살표함수
const calc_multiply = (a,b) => a*b;

console.log(calc_add(10,5));
console.log(calc_multiply(10,5));

// 콜백함수로 만들어보기
function calculater(num1, num2, action){ //action이라는 변수를 선언
    if(num1 <0 || num2 < 0) return; // 일단 처음으로 걸러낼꺼 걸러내기!! num1 또는 num2 가 0 보다 작으면 돌려보내!!
    const result = action(num1, num2);
    console.log(result);
    return result;
}

calculater(4,2, calc_add); //계산할 매개변수를 넣고 계산할 함수명을 입력!!
calculater(4,2, calc_multiply); //계산할 매개변수를 넣고 계산할 함수명을 입력!!
console.log('-------------');

문제)

• 특정 숫자를 입력하면(매개변수로) 해당 숫자까지를 출력해주는것 
  예) 5를 입력하면 1,2,3,4,5를 출력
• 특정 숫자를 입력하면 해당 숫자의 제곱을 출력
  예) 4를 입력하면 16이 출력
• 위 두개의 식을 함수로 만들고 두함수의 기능을 모두 사용할수 있는 iterate()를 만들어보자.

        function num_list(num){
            for(let i = 1; i<=num; i++ ){
                console.log(i);
            }
        }
        
        function PP (num){
            return num*num;          
        }
        
        function iterate(num, action){
            if(num < 0 ) return;
            const result = action(num);
            console.log(result);
            return result;
        }
        
        iterate(4, num_list);
        iterate(4, PP);
        console.log('-------------');

1-6. 원시값과 객체값의 비교

• 윈시값: 값에 의한 복사
• 객체값: 참조에 의한 복사(메모리 주소)

        // 원시값과 객체값의 비교 
        // 원시값: 값에 의한 복사
        // 객체값: 참조에 의한 복사(메모리 주소)
        function display(num){
            num = 10;
            console.log(num);
        }

        const value = 5;
        display(value);
        console.log(value);

        function displayObj(obj){
            // 실제 원시 데이터를 바꾸는 함수는 좋지 않다!!!! 함수에서는 계산만 하는것이 좋다고 생각한다.
            obj.age = 13; // 객체의 값을 변경하는것은 좋지 못함 !🤢
            console.log(obj);
        }
        const dog = {name:'루시', age:14};
        // displayObj(dog);    // dog이라는 객체를 만들어 주소값을 매개변수로 보내줬다. 
        console.log(dog); //주소 자체를 바꾸기 때문에 바뀐 값으로 출력된다. 

        // ✔자바스크립트에만 존재 하는 코드 (원본코드를 건드리니지 않고 값은 변경하는 방법)
        function changeAge (obj){ 
            return {...obj, age:13}; // obj를 복사해라 !! 하지만 메모리주소값은 변한다. 
        }

        dog2 = changeAge(dog);
        console.log(dog2);
        console.log('-------------');

 

---

2. JavaScript의 객체 활용법

2-1.객체 생성(기본 리터럴법으로 생성)

• 키값에 하이푼(-), 띄어쓰기, 특수문자 넣고 싶을땐, 싱클쿼터(' ')안에 넣어주면 된다.

// 객체 생성 (리터럴법으로 생성)
let dog = {
    name : '루시',
    age : 14,
    'dog-weight' : 3.5, // 키값을 하이푼(-),띄어쓰기,특수문자를 넣고 싶을땐 '' 안에 넣어줘야한다.
    ['dog-height'] : 0.8

}

 

2-2.객체의 출력법

        // **객체의 출력법
        console.log(dog.name);
        console.log(dog['age']);

 

2-3.프로퍼티 추가하기

        // **프로퍼티 추가하기
        dog.family = '포메라니안';
        console.log(dog.family);
        console.log(dog['family']);

 

2-4.프로퍼티 삭제하기

        // **프로퍼티 삭제법
        delete dog['dog-height'];
        console.log(dog['dog-height']);
        console.log('------------------');

2-1~2-4까지 통 소스

        // 객체 생성 (리터럴법으로 생성)
        let dog = {
            name : '루시',
            age : 14,
            'dog-weight' : 3.5, // 키값을 하이푼(-),띄어쓰기,특수문자를 넣고 싶을땐 '' 안에 넣어줘야한다.
            ['dog-height'] : 0.8
        }

        // **객체의 출력법
        console.log(dog.name);
        console.log(dog['age']);

        // **프로퍼티 추가하기
        dog.family = '포메라니안';
        console.log(dog.family);
        console.log(dog['family']);

        // **프로퍼티 삭제법
        delete dog['dog-height'];
        console.log(dog['dog-height']);
        console.log('------------------');

---

2-5.동적으로 속성에 접근하기

        // **동적으로 속성에 접근하기 !
        function getValue(obj, key){ // 객체 이름, 키값 
            // dog.name에 접근 하고 싶을때
            return obj[key];// 입력받은 객체에 키값에 해당하는값을 보여주세요
        }
        console.log(getValue(dog, 'name'));

 

2-6.객체에 프로퍼티 추가해주는 함수 만들기

        // 객체에 프로퍼티 추가해주는 함수
        function addKey(obj, key, value){// 객체이름, 키값, 추가하고자하는값 
            obj[key] = value;
        }
        addKey(dog, 'dog-height', 0.7);
        console.log(dog);

 

2-7.객체에 프로퍼티 삭제해주는 함수 만들기

        // 객체에 프로퍼티 삭제해주는 함수
        function deleteKey(obj, key){
            delete obj[key];
        }
        deleteKey(dog, 'dog-height');
        console.log(dog);
        console.log('------------------');

 

2-8.객체 생성하는 함수 만들기

        function makeObj(name, age){
            return {name, age}; // ,(콤마)를 기준으로 만들어 졌기때문에 name과 age의가 모두 키값이 된다. 
        }
        console.log(makeObj('apple',20));

        const apple = {
            name : 'apple',
            display: function(){
                console.log(`${this.name}:🍎`);
                }
        }
        const orange = {
            name : 'orange',
            display: function(){
                console.log(`${this.name}:🍊`);
            }
        }

        console.log(apple);
        apple.display();
        console.log(orange);
        orange.display();

---

2-9.생성자 만들기

        //생성자 만들기
        function Fruit(name, emoji){
            this.name = name;
            this.emoji = emoji;
            this.display = () => {
                console.log(`${this.name}: ${this.emoji}`);
            }
        }

2-10.생성된 생성자를 이용하여 객체 생성하기

        //생성된 생성자를 이용하여 객체 생성
        const apple2 = new Fruit('apple', '🍎');
        const orange2 = new Fruit('orange', '🍊');

2-11.생성된 객체를 출력

        // 생성된 객체를 출력 
        console.log(apple2);
        apple2.display();
        console.log(orange2);
        orange2.display();
        console.log('------------------');