🪴 성장일지

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

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

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

JavaScript 객체 리터럴

객체란 뭘까

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

일급 객체란?

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

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

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

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

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

객체 리터럴은 뭐지?

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

• 객체 리터럴
• 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('즉시 실행');
})();

재귀 함수

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

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

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

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

중첩 함수(내부 함수)

함수 내부에 정의된 함수

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

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

콜백 함수

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

// 예시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 할당됨

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

undefined