Vanilla JS - 기본문법(2)

1. JS 함수와 객체의 관계 

- 프로그래밍에서 함수란, 어떤 기능을 의미한다. 그리고 해당 기능을 구현하기 위해서 어떤 코드의 집합으로 구성되어있다.

- 이전 포스팅에서 출력을 위해 사용했던, console.log()에서 log라는 부분이 하나의 함수이다. 

 

그렇다면 앞부분에 있는 console이라는 것은 무엇인가? 

- 저번 포스팅에서 객체가 갖고 있는 특정 key의 value를 출력하기 위해서 다음과 같은 코드를 사용했다.

const myInfo = {
 name: "abc",
 location: "Seoul, Korea",
 gender: "Male",
 handsome:"true",
 favFood: [
     {
    	name: "Kimchi",
        healthy: true
     },
     {
     	name: "Hamburger",
        healthy: false
     }
 ]
}

console.log(myInfo.favFood)

 

 

[결과]

 

- 위 코드의 출력문을 살펴보면, console.log 와 myInfo.favFood 라는 부분이 동일한 구조를 갖는다. 

- 그렇다면, console은 객체이고 log라는 key가 갖는 value를 호출하는 것 아닐까? 그리고 이런 방식으로 동작하는 것이 함수라는 개념이 아닐까? 확인해보자. 

console.log(console)

 

 

[결과]

 

- 놀랍게도 처음에 출력했던 myInfo.favFood와 console은 동일한 구조의 자료구조를 출력한다. 자세히 보면, 각 key마다 value 안에 또 다른 자료구조를 갖고 있는 것을 확인할 수 있다. 

 

- 결과적으로, console은 객체이며 log라는 key가 갖고 있는 value를 호출해서 사용하는 것 그리고 이런 방식으로 동작하는 것이 바로 함수라는 개념이다.

---

2. JS 함수 선언 방식

 

a) 기본적인 함수

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


sayHello();

 

[결과]

 

 

b) 매개변수(argument)를 갖는 함수

function sayHello(toSomeone){
  console.log('Hello', toSomeone);
}

sayHello("Raphael");

 

[결과]

 

c) 한개 이상의 매개변수를 갖는 함수

function sayHello(name, age){
  console.log('Hello, my name is ', name, 'I am', age, 'years old.');
}

sayHello("Raphael", 100);

 

 

[결과]

---

3. 더 개선된 함수 만들기 

 

function sayHello(name, age){
  console.log('Hello, my name is ', name, 'I am', age, 'years old.');
}

sayHello("Raphael", 100);

 

- 위의 코드처럼, 매개변수를 사용하는 방식은 굉장히 구리다. 공백도 신경써야 하며 출력을 해본 뒤에 다시 고쳐야한다. 

- 굉장히 귀찮은 작업이며 효율이 떨어진다는 것을 알 수 있다. 그러므로 선택자를 이용하여 한번에 해결하는 방법을 알아보자. 

 

 

a) 백틱(Backtick)과 선택자 

function sayHello(name, age){
  console.log(`Hello, my name is ${name}. I am ${age} years old.`);
}

sayHello("Raphael", 100);

 

- 위의 코드에서 알아야할 개념이 2가지가 있다. 첫번째는 Backtick, 두번째는 선택자이다, 

- 백틱은 큰 따옴표도, 작은 따옴표도 아니다. 비유를 하자면, 작은 따옴표를 반대로 쓴 모습이다. 비교해보자. 

 

- 작은 따옴표: ' ' 

- 큰 따옴표: " "

- 백틱: ` ` 

 

- 백틱은 키보드에서 숫자 1 키의 왼쪽에 위치한다. 흔히 물결표시를 사용하기 위해서 누르는 키이다.

- 이 백틱을 사용하므로써, 선택자를 사용할 수 있게 된다. 

 

- 선택자는 ${ } 와 같은 형식으로 사용할 수 있으며, 중괄호 내부에는 매개변수의 이름이 들어간다.  

 

[결과]

 

 

b) return 사용 

- 함수의 결과값을 다른 변수에 담아서 사용하고 싶다면, 반드시 return을 사용해야 한다. 그 이유를 살펴보자.

function sayHello(name, age){
  console.log(`Hello, my name is ${name}. I am ${age} years old.`);
}

const test1 = sayHello("Raphael", 100);

console.log(test1)

 

 

[결과]

- 위의 결과를 보면 const test1 = sayHello("Raphael", 100); 에서 함수가 실행되어 "Hello, my name is Raphael. I am 100 years old."가 출력되었다.

 

-이 후 함수의 결과 값을 담은 test1을 출력해보니 undefined 라고 출력된다. 왜 이런 결과가 발생하는 걸까? 

 

- 그 이유는, 함수가 아무 값도 반환(return)하지 않기 때문이다. 함수의 결과부에 return을 사용하면 이를 해결할 수 있다.

 

function sayHello(name, age){
 return `Hello, my name is ${name}. I am ${age} years old.`;
}

const test1 = sayHello("Raphael", 100);

console.log(test1)

 

[결과]

---

4. 간단한 계산기 함수 만들기 

- 지금까지 배운 내용을 토대로 간단한 계산기 함수를 만들어보자. 

- calculator라는 이름의 객체를 만들어 내부에 key를 기능의 이름을, value는 함수를 작성하면 된다. 

- 기능은 사칙연산과 제곱근이며 2개의 매개변수를 사용한다. 

 

const calculator = {
  plus: function(a,b){
    return a + b;
  },
  minus: function(a,b){
    return a - b;
  },
  multiple: function(a,b){
    return a*b;
  },
  division: function(a,b){
    return a/b
  },
  power: function(a,b){
    return a**b
  }
}

const plus = calculator.plus(5,5);
const minus = calculator.minus(10,5);
const multiple = calculator.multiple(10,5);
const division = calculator.division(10,5);
const power = calculator.power(5,2);

console.log(`5 + 5 = ${plus}`);
console.log(`10 - 5 = ${minus}`);
console.log(`10 * 5 = ${multiple}`);
console.log(`5 ^ 2 = ${power}`);

 

 

[결과]