JavaScript - function, object 예제

✔ function 

//✔ 1. 함수의 기본 - 자바스크립트에서는 함수도 메모리로 인식
function sum(num1, num2){
        console.log('sum() 호출!');
        return num1 + num2;
        }// 선언형

// sum() 호출!
// 13

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

//✔ 2.함수의 메모리
        const add = sum;
        console.log(sum(10,3));
        console.log(add(10,3)); // 위와 동일한 결과 값

// sum() 호출!
// 13

//✔ 3. 함수 작성법(팁!)
        function print(num){
        if(num <0 ){
        return // return은 값을 전달을 해주는 역할도 있지만 함수의 종료도 가능하다. 
        // return 하위에 있는것은 실행을 해주지 않는다. 위 상황에서는 return이
        // 무엇을 돌려주는지 없기 때문에 undefined를 주고 아무것도 나오지 않는다.
        }
        console.log(num);
        }

        print(10);
        print(-1);

// ✔ 4. 매개변수의 기본값은 무조건 undefined
        function total(num1 =0, num2=0){
        console.log(num1);
        console.log(num2);
        console.log('arguments :',arguments);
        // 무엇이 들어왔는지 확인하기 위한 argument
        console.log('arguments[0] :',arguments[0]);
        return num1 + num2;
        }

        console.log(total()); //초기값을 선언해주면 undefined는 나오지 않는다.
        console.log(total(10,3));

// ✔ 5. 콜백 함수 - 함수를 변수를 이용하여 사용
        const calc_add = (a, b) => a+b; //return도 자동 화살표함수
        const calc_multiply = (a, b) => a*b;
        console.log(calc_add(10,5));
        console.log(calc_multiply(10,5));

        function calculator(num1, num2, action){
        if(num1<0 || num2<0){
        return;
        }
        const result = action(num1, num2);
        console.log(result);
        return result;
        }

        calculator(4, 2, calc_add); //함수 자체를 매개변수로 사용
        calculator(4, 2, calc_multiply);


        console.log('-----------------------------')

// ✔ 문제.
// 1. num으로 전달받은 숫자를 1부터 출력 (만약 5를 전달했다면 1 2 3 4 5 출력)
// 2. num으로 전달받은 숫자의 제곱을 출력(만약 2를 전달했다면 4를 출력)
// function iterate(num, action){

// }

        const calc_num = (a) => {for(let i=1; i<=a; i++){ console.log(i);}}
        const calc_d = (a) =>  console.log(a**2);

        function iterate(num, action){
        action(num);
        }

        iterate(6, calc_num)
        iterate(8,calc_d)

        console.log('-----------------------------')

// ✔ 6. 원시값과 객체값의 비교
// 원시값 : 값에 의한 복사
// 객체값 : 참조에 의한 복사(메모리주소)

        function display(num) {
        num =10;
        console.log(num); //10
        }
        const value = 5;
        display(value);
        console.log(value); //5


// 객체는 참조한 내용이 메모리에 저장되어 있어 주소값도 변경을 한다.
        function displayObj(obj){
        obj.age =12; // 👿 이런 방식은 사용하지 말자!
        console.log(obj);//12
        }
        const dog = {name:'Kucy', age:24};
        displayObj(dog);
        console.log(dog);//12

// 복사
        function changeAge(obj){
        return { ...obj,name:'sdfsd', age: 10}
        }

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

✔ object

✔ let dog = {
        name: 'Lucy',
        age:13,
        'dog-weight':30.5,
        ['dog-height']:0.8
        }
        console.log(dog);
        console.log(dog.name);
        console.log(dog['age']);

        dog.family = 'firedog';
        console.log(dog);
        console.log(dog.family);

        delete dog['dog-height'];
        console.log(dog);
        console.log(dog['dog-height']);

        console.log('---------------------------------------------------------------------------');

//✔ 동적으로 속성에 접근하고 싶을 때
        function getValue(obj, key){
        //dog.name
        return obj[key]
        }

        console.log(getValue(dog, `name`));

        console.log('---------------------------------------------------------------------------');


//✔ 문제.
// 필드를 추가 - addKey - obj, 키, 값
// 필드를 삭제 - deleteKey - obj, 키

        function addkey(obj, key, value){
        obj[key] = value;
        }
        function deleteKey(obj, key){
        delete obj[key]
        }


        addkey(dog, 'dog-heigh', 80);
        deleteKey(dog, 'dog-heigh');
        console.log(dog);

        console.log('---------------------------------------------------------------------------');
        //✔
        const x = 0;
        const y = 0;
// const coord = {x: x, y: y};
        const coord = {x, y};
        console.log(coord);


//✔  객체 생성 함수
        function makeObj(name, age){
        return{ // 객체 생성
        name, age
        };
        }
        console.log(makeObj('apple', 20));

        console.log('---------------------------------------------------------------------------');

//✔  생성자로 만들기
        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();

        console.log('---------------------------------------------------------------------------');

        function Fruit(name, emoji){
        this.name = name;//객체로 만들어주면 본인 객체를 의미함
        this.emoji = emoji;
        this.display = () =>{
        console.log(`${this.name}: ${this.emoji}`)
        }
        //return this; 생략가능 생성자를 이용한다면
        } // 틀이나 생성자가 있고 이를 메모리에 올리는 것

        const apple2 = new Fruit('appel', '🍎'); // 올린걸 복제하여 새로운 객체를 만드는 것을 인스턴스라고 한다.
        const orange2 = new Fruit('orange', '🍎');

        console.log(apple2);
        apple2.display();
        console.log(orange2);
        orange2.display();