TIL 21.09.26 Javascript

✏️ 함수

함수는 가급적 한가지 일만 하고, 매개 변수는 최대 3개 이내로 작성을 권장한다.

✏️ 함수를 표현하는 방법

1. 함수 선언식

function func(arg1, arg2, ...argN) {
  expression;
}

2. 함수 표현식 (Function Expressions)

const func = function (arg1, arg2, ... argN) {
  expression;
}

3. 화살표 함수 (Arrow Function)

const func = (arg1, arg2, ... argN) => expression;

expressin 부분을 return 처리한다.

✏️ 함수 호출

자바스크립트 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않는다.

const func = function(x, y, z) {
  return x;
}

위와 같이 작성해도 error를 내지 않는다.

undefined 변수가 들어올 경우 값 초기화 지정 가능

const func = function(x, y = 10) {
  console.log(x+y);
}

func(20) // output: 30

func() // NaN => x에 undefiend 값이 들어가고, NaN => console.log(undefined + 10)

dynamic parameter

1. 매개변수를 명시하지 않아도 매개변수를 사용할 수 있다.

const arg = function() {
  console.log(arguments)
}

arg(1, 2) // [Arguments] {'0': 1, '1': 2}

const func = function() {
  console.log(arguments[0] - arguments[1]);  // 인자로 들어온 값을 arguments에 저장
}

func(10); // NaN => 10 - undefined이므로

func(10, 20, 30); // -10 => 10 - 20

2. return 에 대하여

기본 return 값은 undefined 이며 break와 같은 역할을 한다.

✏️ 재귀함수

함수 스스로 자신을 참조해 호출하면서 동일한 코드가 계속 수행되는 함수 호출 방법.

특정 조건이 됐을 때 호출이 중단되도록 기저조건(exit code)이 필요.

재귀 함수는 stack에 의해서 관리되어진다.

//Factorial
const recursive = function(num) {
  return num * recursive(num-1)
}

//Fibonacci
const recursive = function(num) {
    if (num < 0) return "Nothing"
    if (num == 0) return 0
    if (num == 1) return 1
    return recursive(num-1) + recursive(num-2)
}

✏️ 콜백함수 (Callback Function)

콜백함수(Callback Function)란 다른 함수의 매개변수로 전달되어 수행되어지는 함수

function callback_func() {
  console.log("I'm callback function");
}

콜백함수를 넘기는 이유?

아래 계산기를 만드는 코드를 통해 이해할 수 있는데 필요한 함수를 고차함수에 인자로 넣어 줌으로써 
고차함수 calculator 하나를 통해 계산기를 만들 수 있다.

function add(x,y) {
  return x + y;
}
function sub(x,y) {
  return x - y;
}
function mul(x,y) {
  return x * y;
}
function div(x,y) {
  return x / y;
}

function calculator(callback, x, y) {
  return callback(x, y)
}

✏️ 고차함수 (Higher-ordr-Function)

매개변수를 통해 함수를 받아 호출하는 함수, 고차함수는 인자로 콜백함수의 주소 값을 받는다.

function callback() {
    console.log("I'm callback function");
  }
  
function higher_order_func(callback) {
    console.log("I'm higher-order function");
    callback(); //call
}

higher_order_func(callback); // I'm higher-order function
                             // I'm callback function

✏️ call by *

✏️ call by value

값에 의한 복사로 함수 내에서 매개 변수 값을 변경시켜도 영향이 미치지 않음

원시타입을 매개 변수로 넘겼을 때 발생

아래 코드를 살펴보면 값에 대한 복사가 이루어졌을 때에는(매개변수 b에 변수 a가 들어가게 될 때에는) b = a = 1
의 과정을 거쳐 b라는 새로운 메모리 공간에 값 '1'이 저장되기 때문에 'b = b + 1'이 있어도 a에 영향을 미치지 
않아 console.log(a);를 했을 때 output이 '1'임을 알 수 있다.

let a = 1;
let add = function(b) {b = b + 1}; // callee
add(a); // caller
console.log(a); // output: 1

✏️ call by reference

주소에 대한 복사로 함수 내에서 매개 변수 내 값을 변경시키면 원본 데이터에도 영향을 받음

객체타입(object type)을 매개변수로 넘겼을 때 발생

아래 코드를 통해 call by reference에 대해 알아보자.

함수 add는 매개변수 b를 갖는다. add(a); 함수 호출을 통해 매개변수 b에 a라는 객체가 담기게 되면 매개변수 
b는 a객체의 주소 값을 값으로 갖게 되고(참조하게 되고) 객체 a는 {v: 1}이 있는 메모리 주소를 값으로 갖고 
있으므로 (참조하고 있으므로) add(a); 호출시 a가 참조하고 있는 a.v에 접근하게 되므로 원본 데이터에 영향을 
끼치게 되는 것이다.

var a = {v: 1};
var add = function (b) {b.v = b.v + 1;}; //callee
add(a); //caller
console.log(a.v); //output: 2

✏️ 함수의 표현

✏️ 함수의 주소값

아래의 코드를 통해 add_2 변수 또한 add_1 함수와 동일한 기능을 하는 것을 볼 수 있는데
이를 통해 변수 add_2에 함수 add_1의 주소값이 들어가 있다는 사실을 알 수 있다.

function add_1(x,y) {
  return x + y;
}

const add_2 = add_1
console.log(add_2(1,2)); // output: 3

add2에 add1의 어떤 것이 복사가 됐는지 내부를 통해 살펴보기로 하자.

console.log(Object.getOwnPropertyDescriptors(add_1));
console.log(Object.getOwnPropertyDescriptors(add_2));

위 console.log를 통해 각각 add_1과 add_2의 내부이다. 비교해 보면 알 수 있듯이 동일하다.

⭐ add_1, add_2 변수의 이름만 다를 뿐 내용은 같고 이를 통해 add_2가 add_1이 가리키고 있는 메모리주소만을
   참조하고 있다는 점을 알 수 있다. 즉 함수도 객체의 요소로서 메모리 공간에 저장되는 것이다.
{
  length: { value: 2, writable: false, enumerable: false, configurable: true },
  name: {
    value: 'add_1',
    writable: false,
    enumerable: false,
    configurable: true
  },
  arguments: {
    value: null,
    writable: false,
    enumerable: false,
    configurable: false
  },
  caller: {
    value: null,
    writable: false,
    enumerable: false,
    configurable: false
  },
  prototype: { value: {}, writable: true, enumerable: false, configurable: false }
}
{
  length: { value: 2, writable: false, enumerable: false, configurable: true },
  name: {
    value: 'add_1',
    writable: false,
    enumerable: false,
    configurable: true
  },
  arguments: {
    value: null,
    writable: false,
    enumerable: false,
    configurable: false
  },
  caller: {
    value: null,
    writable: false,
    enumerable: false,
    configurable: false
  },
  prototype: { value: {}, writable: true, enumerable: false, configurable: false }
}

✏️ 함수의 저장 및 호출

위에서 함수가 변수에 저장될 때 요소로서 저장이 되는 것을 살펴보았다. 이번에는 함수가 리스트 객체에 담겨 있을
때 함수를 호출하는 방법에 대해서 살펴보자.

function f1() {
  console.log('f1 호출');
}

f1(); // f1 호출

let list = [1, "john", function f2() {console.log('f2 호출');}]
list[2](); // f2 호출

let obj = {
  name : "john",
  age: 27,
  f3() {
    console.log('f3 호출');
  }
}

obj.f3(); // f3 호출

✏️ 메서드의 이해

객체에 저장된 값이 함수인 경우, 이를 메서드(method)라고 부름

user라는 객체가 있을 때 메모리상에서 어떻게 저장되는지 보여주는 도식화이다. 여기서 hello_func이 메서드가 되고
메서드는 또다른 주소 값을 참조하고 있는 것을 볼 수 있다.

✏️ this

메서드에서 객체 내부의 속성(property) 값에 접근할 수 있는 지시자

함수 코드 block안에서 this를 사용시 함수와 동일 선상에 있는 공간의 property의 값에 접근할 수 있다.

여기서 property로 name, age가 있다.

this 예제

let user = {name: 'john'};
let admin = {name: 'admin'};

function hello() {
  console.log("Hello " + this.name);
}

user.func = hello;
admin.func = hello;

user.func(); // output: Hello john
admin.func(); // output: Hello admin

✏️ Number

지수 표기법

아주 큰 숫자나 아주 작은 숫자를 표기하기 위해 지수표기법(e)로 0의 개수를 대체 표기 가능

let billion = 1e9; //10**9

let us = 1e-6; // 왼쪽으로 6번 소수점 이동

진법 표기법

0x => 16진수
0o => 8진수
0b => 2진수

console.log(0x0f); // output: 15
console.log(0o17); // output: 15
console.log(ob1111); // output: 15

Number 상수값

지수로 표기되는 양수 최대 값
Number.MAX_VALUE

지수로 표기되는 양수 최소 값
Number.MIN_VALUE

안전하게 표기되는 양수 최대값
Number.MAX_SAFE_INTEGER

안전하게 표기되는 음수 최소값
Number.MIN_SAFE_INTEGER

무한대 양수 값
Number.POSITIVE_INFINITY

무한대 음수 값
Number.NEGATIVE_INFINITY

부동 소수점으로 정의되지 않거나 표현할 수 없는 값
NUMBER.NaN

대표 메서드

Number.toString();

String(Number);

Number + ""

자리수 표현

Number.toFixed(n)

소수점 n번째까지 보여주는데 n+1에서 반올림해서 보여준다.

toPrecision(n)

정수자리 포함 n번째까지 보여주고 n+1에서 반올림해서 보여준다.

대표 메서드 2

Number 자료형 확인

Number.isNaN()

Number.isFinite()

정수와 실수 형 변환

Number.parseInt()

Number.parseFloat()