[바닐라 JS로 크롬 앱 만들기] functions

함수가 없다면..

console.log("Hello my name is Spring");
console.log("Hello my name is Summer");
console.log("Hello my name is Autumn");
console.log("Hello my name is Winter");

끝에 있는 이름만 달라지는데, 똑같은 코드를 계속 써줘야 한다 
굉장히 비효율적이다. 
-> 함수를 사용해서 반복되는 코드를 줄이자!

---

함수 만들고 호출하기

function sayHello(x) {
    console.log('Hello!');
}

sayHello();
sayHello();
sayHello();

이 경우 sayHello 함수가 같은 동작(Hello!출력)을 하기 때문에 그다지 쓸모가 없다.

argument를 받아서 그 argument에 따라 다르게 출력하도록 만들자!

 

argument 사용하기

function sayHello(nameOfPerson) { 
	//argument 받아서
    console.log(nameOfPerson); //사용
}

sayHello('Spring'); //함수에 argument 보내기
sayHello('Summner');
sayHello('Autumn');
sayHello('Winter');

 

인자를 여러개 사용할 수 있다!

function sayHello(nameOfPerson, age) {
    console.log('Hello my name is ' + nameOfPerson + " and I'm " + age);
}

sayHello('Spring', 10);
sayHello('Summner', 25);
sayHello('Autumn', 73);
sayHello('Winter', 50);

---

plus, divide 함수를 만들어보자~

# 호출시 argument를 보내지 않는다면? 오류1

console.log(a, b);

function plus(a, b) {
    console.log(a, b);
}

plus();

 

# 호출시 argument를 보내지 않는다면? 오류2

console.log(a + b);

function plus(a, b) {
    console.log(a + b);
}

plus();

NaN : Not a number. 연산과정에서 잘못된 입력을 받았음을 나타내는 기호이다.

 

a, b 없이 함수를 호출할 수 있다. 잘못된 결과가 나오긴 하지만.

 

 

# 제대로 실행시켜보자

function plus(a, b) {
    console.log(a + b);
}

plus(8, 16);

실행시키면 자바스크립트가 a는 8로, b는 16으로 바꾼다.

 

# divide 함수 추가하기

function plus(a, b) {
    console.log(a + b);
}

function divide(c, d) {
    console.log(c / d);
}

plus(8, 16);
divide(100, 7);

 

위 코드에서 a, b는 plus 함수 안에서만 존재한다. 따라서 plus 함수 안에서만 사용할 수 있다. plus 함수의 밖에서 a, b, 를 사용하려고 하면(line 7), 아래와 같은 에러가 발생한다.

function plus(a, b) {
    console.log(a + b);
}

plus(8, 16);

console.log(a);

---

object를 만들자!

const player = {
    name: 'Spring',
    sayHello: function (otherPersonsName) {
        console.log('Hello, ' + otherPersonsName + '!');
    },
};

console.log(player.name);
player.sayHello('Summer');
player.sayHello('Autumn');
player.sayHello('Winter');

---

계산기 만들기

const calculator = {
    add: function (a, b) {
        console.log(a + b);
    },
    minus: function (a, b) {
        console.log(a - b);
    },
    multiply: function (a, b) {
        console.log(a * b);
    },
    divide: function (a, b) {
        console.log(a / b);
    },
    power: function (a, b) {
        console.log(a ** b);
    },
};

const a = 100;
const b = 2;
calculator.add(a, b);
calculator.minus(a, b);
calculator.multiply(a, b);
calculator.divide(a, b);
calculator.power(a, b);