220826(금)

🪴 성장일지

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명

JavaScript 객체 리터럴

객체란 뭘까

하나의 값만 나타내는 원시 타입과 다르게 객체는 다양한 타입의 값을 하나의 단위로 합쳐놓은 복합적인 자료구조이다.
또한 자바스크립트의 함수는 일급 객체이기에 값으로 취급할 수 있다.

일급 객체란?

• 변수에 할당할 수 있다.
• 다른 함수를 인자로 전달받을 수 있다.
• 다른 함수의 결과로 리턴될 수 있다.

객체는 크게 프로퍼티와 메서드로 구성된다.
조금 단순하게 생각하면 프로퍼티는 상태를 나타내는 값을 나타내고 메서드는 그 값을 참조하고 조작 가능한 동작이라고 생각할 수 있다.

아래 예시처럼, 자동차라는 객체를 만들었을 때 그 안에는 자동차가 움직인 distance(프로퍼티)가 있고 그 거리를 증가시키는 함수인 move(메서드)가 있다.
약간 어떤 특정 값과 기능을 가진 로봇을 만드는 기분..? 이라 생각하면 편하다.

var car = {
  distance: 0,
  move: function () {
    this.distance++;
  },
};

이처럼 객체를 통해 상태와 동작을 하나의 단위로 구조화할 수 있어 유용하며, 이렇게 객체의 집합으로 프로그램을 표현하는 프로그래밍 패러다임을 객체지향 프로그래밍이라고 한다.

객체 리터럴은 뭐지?

일반적으로 C++이나 자바같은 클래스 기반 객체지향 언어는 객체를 생성할 때, 미리 클래스를 만들고 new 연산자를 통해서 객체를 생성한다.
그런데 이게 웬걸, 자바스크립트는 객체를 표현하기 위한 표현법(리터럴)을 약속함으로써 아주 간단하게 객체를 생성할 수 있다.

• 객체 리터럴
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스(ES6에 추가됨)

위의 방법 중 객체 리터럴은 {}로 객체를 바로 생성할 수 있는 방법이다. 따로 클래스를 생성하고 new 연산자 없이도 바로 뿅 하고 객체를 만들 수 있다.

property/method, key/value

위 용어 4가지를 확실히 짚고 넘어가자.

var obj = {
  name: 'jayden', // 이 상태값을 나타내는 한 줄 자체가 property
  do: function () {
    console.log('Hello World!');
  }, // 이렇게 동작을 나타내는(value가 함수) 게 method
};
// 위에서 name과 do는 key, 'jayden'과 function() ~ 는 value에 해당한다.

JavaScript 다양한 함수들

즉시 실행 함수

함수 정의와 동시에 즉시 호출되는 함수로 단 한 번만 호출되며 다시 호출할 수 없다.

(function test() {
  console.log('즉시 실행');
})();

// test() 해도 실행 안됨. 에러 난다. (() 내의 함수 선언문은 선언문이 아닌 함수 리터럴로 평가되기 때문)

// 위와 ()의 위치만 바뀌고 이렇게 쓰기도 한다.
(function test() {
  console.log('즉시 실행');
})();

재귀 함수

함수가 자기 자신을 호출하는 것을 재귀 호출이라고 하고, 이런 재귀 호출하는 함수를 재귀 함수라고 한다.
재귀 함수를 사용하면 반복문 없이 같은 결과를 낼 수 있다. 또한, 재귀 함수는 반드시 재귀를 멈출 탈출 조건이 있어야한다.

// 재귀 함수를 이용해 구현한 팩토리얼
var factorial = function (n) {
  if (n <= 1) {
    return 1; // 이게 무한 재귀를 멈출 탈출 조건(없으면 계속 재귀재귀재귀재귀재귀재귀재귀재...)
  }
  return n * factorial(n - 1);
};

재귀 함수는 반복되는 처리를 반복문 없이 쓸 수 있다는 장점이 있으나!!! 무한 반복에 빠질 수 있기 때문에 특별히 재귀 함수가 더 직관적이고 편안한 경우가 아니라면 한정적으로 사용하는 게 낫다.

재귀 함수가 무한 반복되어서 함수마다의 실행 컨텍스트가 콜스택에 쌓이면 그게 바로 유명한 스택오버플로우

중첩 함수(내부 함수)

함수 내부에 정의된 함수

var outer = function () {
  var inner = function () {
    console.log('내부 함수입니당.');
  };
  inner();
};
outer();

위와 같은 식인데, 내부 함수(중첩 함수) 바깥은 외부 함수라고 부르며 ‘이게 뭐 복잡한 게 있나?’ 싶을 수 있지만
이 내부/외부 함수의 변수 참조 및 내부 함수의 외부 전달 등에 따라 클로저 현상이 일어난다.

콜백 함수

어떤 함수(고차 함수)의 인자로 전달되는 함수로, 고차 함수에게 그 제어권을 넘겨주는 함수를 말한다.
비동기 처리와 배열의 고차 함수에서 매우매우 중요한 개념이다.

// 예시1: 비동기 처리에서의 콜백 함수 활용
setTimeout(function () {
  console.log('비동기 처리~');
}, 3000);

// 예시2: 배열 고차 함수에서의 콜백 함수 활용
[1, 2, 3].forEach((value, index) => console.log(value, index));

순수 함수와 비순수 함수

• 순수 함수: 외부 상태에 의존하지 않고, 외부 상태를 변경하지도 않는 본인의 인자만을 갖고 노는 함수(동일한 인수가 전달되면 언제나 동일한 값이 나옴)
• 비순수 함수: 외부 상태에 의존도 하고, 외부 상태를 멋대로 바꾸기도 하고 깨랑까랑한 함수

// 순수 함수
var count = 0;

function pure(n) {
  return ++n
}

count = pure(count); // count에 1 할당
count = pure(count); // count에 2 할당
--------
// 비순수 함수
var count = 0;

function dirty() {
  return ++count;
}

dirty() // count에 1 할당됨
dirty() // count에 2 할당됨

비순수 함수를 사용함으로써 함수 내의 값이 아닌 외부의 값이 변경되는 것을 부수 효과라고 한다.
물론 이와 같은 효과를 활용할 수도 있지만, 코드가 길어질수록 비순수 함수의 부수 효과는 오류를 범할 확률을 높이므로 최대한 순수 함수를 사용하여 함수 본연의 값 외에는 바뀌지 않도록 하는 것이 좋다.