JS - 연산자, Function

연산자의 활용1 - 변수초기화

일반적인 변수의 초기화

function fetchData(data) {
  var receivedData;
  if (data === undefined) {
    receivedData = localStorage.getItem('item');
  }
}
코드를 입력하세요

논리연산자를 활용

function fetchData(data) {
  var receivedData;
  receivedData = data || localStorage.getItem('item');
}

---

연산자 활용2 -조건문 대신 삼항 연산자

로직을 구현하다 if문을 중첩해서 활용하는 경우

if (data !== undefined) {
  num = 50;
  if (num > 10) {
    num = 100;
  } else {
    num = 0;
  }
}

이럴 때 if문 대신 삼항 연산자를 활용.

if (data !== undefined) {
  num = 50;
  num = num > 10 ? 100 : 0;
}

---

Function

함수란 특정 기능을 수행하는 코드의 단위.
이 코드의 모음은 반드시 1개 이상의 목적이 있어야함.

다른 프로그래밍 언어와 다르게 JS는 함수를 선언하는 방법이 2가지

// 함수 표현식
var sumNumbers = function(a, b) {
  return a + b;
};

// 함수 선언문
function sumNumbers(a, b) {
  return a + b;
}

? 함수 표현식과 같이 함수를 정의할 수 있는 이유는 JS는 함수도 변수나 인자로 취급할 수 있기 때문. --> 일급객체 (first-class citizens) 특징

---

함수형 사고와 함수형 프로그래밍

함수를 작성할 때는 가급적 단일책임원칙 을 지키자.
1개의 함수는 1개의 기능만 담당해야 한다는 프로그래밍 원칙
--> 재사용의 어려움

잘 설계된 함수

function sumNumbers(a, b) {
  return a + b;
}

함수명에서도 알수 있듯이 두 수의 합을 구하는 간단한 함수

단일 책임 원칙에서 벗어나는 함수

function sumNumbers(a, b) {
  var num = 1000;
  var data = {};

  $.get('domain.com/products/1').then(function(response) {
    data = response.data;
  });

  var total = a + b + num;
  return total;
}

위 함수는 sumNumbers라는 함수의 이름으로, 두수를 더하는 로직 이외에도 데이터 요청, 다른 숫자를 더하는 로직들이 엉켜 있음. 위와 같은 코드는 재사용하기가 어려움

함수 리팩토링

function sumNumbers(a, b) {
  return a + b;
}

function sumAll() {
  var num = 1000;
  var total = sumNumbers(0, 0) + num;
  return total;
}

function fetchData() {
  var data = {};
  $.get('domain.com/products/1').then(function(response) {
    data = response.data;
    return data;
  });
}