DAY 3

 

#2.7 Functions part One 

 

<function(함수)> : 계속 반복해서 사용할 수 있는 코드 조각

 

- 함수의 선언 → function 함수명() {실행코드} 

- 함수의 실행 → 함수명();

 

- 인수(argument) : 함수를 실행하는 동안 함수에게 어떤 정보를 보낼 수 있는 방법으로, () 안에 위치한다.

 

 

#2.8 Functions part Two

 

argument는 다음과 같이 받아올 수 있으며, 동시에 여러 개도 받아올 수 있다.

만약 정의한 함수에서 argument를 하나밖에 정의하지 않았는데, 실행 시킬 때 arguments를 여러 개 넣으면 맨 앞에 있는 argument만 실행된다.

function sayHello(myName) {
  console.log("Hello my name is " + myName);
}

sayHello("hayeon");
sayHello("minkyung");

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

plus(); // NaN = Not a Number(숫자가 아님)

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

divide(98, 20); // 4.9
divide(30, 15, 10); // 2
console.log(myName); // Uncaught ReferenceError, myName is not defined at ~~

 

함수 내에 선언한 임의의 argument는 함수 안에서만 존재한다.

sayHello의 myName도, plus와 divide 함수 안에 있는 a, b도 모두 각각의 함수 안에서만 존재하며, 이를 벗어나는 순간 그냥 존재하지 않는 것이 된다. 

 

object안의 function을 부르는 방법

- 선언 : object = { property명 : 함수선언 }

- 호출 :  object명.함수명();

 

argument를 넣는 방법도 위와 동일하다. 

 

const player = {
  name: "hayeon",
  sayHello: function(){
    console.log("Hello!");
  },
  sayMyAge: function(myAge){
    console.log("I'm " + myAge + " years old.");
  }
}

console.log(player.name);
player.sayHello();
player.sayMyAge(23);

 

 

#2.9 : 2.0~ 2.8 Recap

 

 

<let vs const>

: let은 기존 변수의 값을 업뎃하고 싶을 때 주로 사용하며 재할당이 가능, 재선언은 X. 그 이외에는 const를 사용한다.

let userName = "hayeon";
userName = "minkyung"; // 가능
// let userName = "yerin"; // 재선언 불가능

const age = 23;
// age = 23; // 재할당도 불가능

 

<null vs undefined>

null : 변수에 아예 값이 없음을 할당함.

undefined : 변수를 선언했으나 아직 값을 할당하지 않음 

 

<array>

const talking = [1, 2, "안녕하세요", 'schoolBoycott', false, null, undefined];
console.log(talking[3]); // schoolBoycott 출력

// const여도 배열 안의 값 변경, 추가, 삭제는 가능
talking[2] = "집보내주세요" // "안녕하세요"를 "집보내주세요"로 변경
talking.push('백수');

console.log(talking[2]);
console.log(talking[7]);

const의 object 값을 변경하는 것은 const 자체가 아닌 const 안에 있는 각 데이터의 값을 변경하는 것이므로 재할당하는 것이 아니기 때문에 문제없다.

 

 

#2.10 Recap II

 

<object>

const Player = {
  name:"hayeon",
  age:23,
}

// object 출력
console.log(Player);

// object 내의 property 변경 가능
Player.name="kimHaYeon";
console.log(Player.name);

// object에 새로운 property 추가 가능
Player.job="백수";
console.log(Player);

 

function은 위에서 이미 정리했으므로 생략,

 

<function으로 계산기 만들기>

const calculator = {
  plus: function (a, b) {
    console.log(a + b);
  },
  minus: function (a, b) {
    console.log(a - b);
  },
  multiple: function (a, b) {
    console.log(a * b);
  },
  divide: function (a, b) {
    console.log(a / b);
  },
  square: function (a, b) {
    console.log(a ** b);
  },
  rest: function (a, b) {
    console.log(a % b);
  },
};

calculator.plus(34, 23);
calculator.minus(54, 66);
calculator.multiple(22, 12);
calculator.divide(88, 22);
calculator.square(5, 5);
calculator.rest(834, 98);

 

 

#2.11 Returns 

 

위에서 만든 예제는 분명히 값을 출력해주지만 실제로 화면에 결과를 출력하기 위해서는 console.log이나 alert로는 해결할 수 없다.

 

const calculator = {
  plus: function (a, b) {
    alert(a + b);
  },
};

console.log(calculator.plus(987, 324));

실제로 결과 값을 받거나 화면에 출력할 수 없으며, 그냥 일시적으로 log나 alert로 출력하기만 한다.

 

function의 결과 값을 받기 위해서는 return 값을 줘야 한다.

 

const age = 23;

function calculateKrAge(ageOfForeigner){
  return ageOfForeigner + 2;
}
// return 값이 있다면, 함수를 실행했을 때 그 결과는 return 값으로 대체된다.
const KrAge = calculateKrAge(age);

console.log(KrAge);

 

return 값은 함수를 실행했을 때의 그 결과값이고, 위 코드는 결과적으로 25를 출력할 것이다.  

 

const age = 23;
function calculateKrAge(ageOfForeigner){
  ageOfForeigner + 2;
  return "hello";
}

const KrAge = calculateKrAge(age);
console.log(KrAge);

 

return값은 말 그대로 그 함수의 결과 값을 return해주기 때문에 위 코드에서는 "hello"가 출력될 것이다. 

즉 함수 calculateKrAge의 반환값을 저장한 KrAge의 값은 그냥 "hello"가 되며, 이를 콘솔에 출력할 것이다.

 

 

이 return 값을 이용해 위에서 만든 계산기 코드에서 계산 결과값을 출력하기 위해서 다음과 같이 수정한다.

 

const calculator = {
  plus: function (a, b) {
    return a + b;
  },
  minus: function (a, b) {
    return a - b;
  },
  multiple: function (a, b) {
    return a * b;
  },
  divide: function (a, b) {
    return a / b;
  },
  square: function (a, b) {
    return a ** b;
  },
  rest: function (a, b) {
    return a % b;
  },
};

calculator.plus(2, 3); // console에 당연하게 아무것도 뜨지 않는다.

// ------------------------------------------------------------------

const plusResult = calculator.plus(2, 3);
const minusResult = calculator.minus(plusResult, 10);
const multipleResult = calculator.multiple(10, minusResult);
const divideResult = calculator.divide(multipleResult, plusResult);
const squareResult = calculator.square(divideResult, multipleResult);

console.log(plusResult);
console.log(minusResult);
console.log(multipleResult);
console.log(divideResult);
console.log(squareResult);

 

해당 return 값을 받은 변수들로 다음과 같이 다른 함수의 인자값으로 접근할 수도 있다.