2023-01-19

객체와 함수

자바스크립트 필수 개념인 객체와 함수에 대해 자세히 알아보자!

객체

객체는 key, value로 구성되어 있는 프로퍼티의 집합이다.
자바스크립트는 객체 기반 언어이며 원시 값을 제외한 모든 값들이 객체다.

속성(property)

객체의 속성 즉, key는 문자열 또는 symbol 타입으로 구성할 수 있고, value는 모든 자료형을 할당할 수 있다.
넘버 타입이 키로 저장될 때 내부적으로 toString()을 호출해 문자열로 변환한다.
백준에서 알고리즘 문제를 풀다 보면 넘버 타입을 키로 저장하게 될 때, 수행 시간이 다소 증가하는 것을 볼 수 있다.
객체에 값이 함수일 경우 일반 함수와 비교하기 위해 메소드라고 부른다.

속성 정렬

객체는 속성에 순서를 보장하지 않는다.
단, 정수 프로퍼티(integer property)는 자동으로 정렬되고, 문자열은 추가된 순서로 정렬된다.

const user = {}
user[3] = 3
user[1] = 1
user[2] = 2
console.log(user)
// {
//  1: 1,
//  2: 2,
//  3: 3
//}

정수 프로퍼티란 변형 없이 정수와 문자열을 왔다 갔다 할 수 있는 것을 말한다. 예로 “30” → 30, 30 → “30”

프로퍼티 접근

객체의 프로퍼티 접근은 크게 두 가지 대괄호, 점 표기법이 있다.
점 표기법은 프로퍼티 key에 공백이 있다면 참조할 수 없고, 대괄호를 사용해 접근할 수 있다.

const user = {"hello lol": true};
console.log(user.hello lol) // error
console.log(user["hello lol"]) // good

객체 생성 방법

• 리터럴: 리터럴 객체 생성 코드를 만나면 내부적으로 new Object()를 사용해 생성한다.
  리터럴 객체는 간편하고 직관적이나 하나의 객체만 생성하기 때문에 재사용성에 좋지 않다.

let user = {} // '객체 리터럴' 문법

• Object 생성자 함수: new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성해 반환한다.

const person = new Object()

• 생성자 함수: 리터럴과 다르게 하나의 객체가 아닌 new 연산자를 사용해 구조가 동일한
  여러 인스턴스 객체를 생성할 수 있다.

function Person(name, age, email) {
  this.name = name
  this.age = age
  this.email = email
}

let person = new Person('John', 30, 'john@example.com')

객체의 종류

• 빌트인 객체: 선언할 필요 없이 전역적으로 사용할 수 있는 객체를 의미한다. 네이티브 객체라고도 불리운다.
  예로 Object, Array, Math, String, Number, RegExp, Map/Set 등의 객체를 말한다.
• 호스트 객체: 런타임 환경에서 제공하는 객체를 의미한다.
  예로 브라우저에서 제공하는 Document, Window, XMLHttpRequest, Console 등의 객체를 말한다.
• 사용자 정의 객체: 객체를 생성할 수 있는 방법으로 사용자가 만든 객체를 말한다.

함수

작업 수행 문들이 코드 블록에 감싸 하나의 실행 단위로 정의한 것이다.
함수를 사용하는 이유는 코드의 재사용과 가독성 이점에 있다.
함수는 일급 객체지만 일반 객체와 다르게 호출이 가능하다.

일급 객체

일급 객체의 조건은 아래와 같다.

• 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.
• 변수나 자료구조(배열, 객체 등)에 저장할 수 있다.
• 함수의 매개변수에 전달할 수 있다.
• 함수의 반환값으로 사용할 수 있다.

// 함수는 리터럴 생성이 가능하다.
const increase = function (num) {
  return ++num
}

// 함수는 자료구조에 저장할 수 있다.
const object = { increase }

// 함수의 매개변수에 전달 할 수 있다.
increaser(increase)

// 함수의 반환 값으로 사용할 수 있다.
const increaser = (fn) => {
  return fn
}

함수 생성 방법

• 함수 표현식: 일급 객체의 특성을 활용해서 리터럴 방식으로 정의 후 변수에 할당하는 것을 말한다.
  대체로 함수 표현식에서는 함수명을 생략하는 익명 함수를 사용한다.

const myFn = () => {} // 익명 arrow function
const myFn = function () {} // 익명 함수(anonymous function)

• 함수 선언문: 변수에 할당하지 않고 선언한 함수를 의미하며, 하나의 문이기 때문에 함수명을 생략할 수 없다.
  함수 선언문은 평가 단계에서 함수명과 동일한 이름을 갖는, 함수 개체를 참조하는 변수가 생성된다.
  즉 메모리 공간에 등록되어 호이스팅시 참조 에러가 발생하지 않고 수행할 수 있게 된다.

function myFn() {}

• Funtion 생성자 함수: Function 생성자 함수로 함수를 생성하는 방식은 일반적으로 사용하지 않는다.
  그 이유는 리터럴 방식으로 정의해도 생성자 함수를 호출해 생성하기 때문이다.

new Function(arg1, arg2, ...argN, functionBody)
var square = new Function('number', 'return number * number')
console.log(square(10)) // 100

매개변수(parameter)와 인수(argument)

매개변수는 함수 내에서 변수와 동일하게 메모리 공간을 확보하며, 함수에 전달한 인수는 매개변수에 할당된다.
만약 인수를 전달하지 않으면 매개변수는 undefined로 초기화된다.

• 인수가 원시 값인 경우: 원시 타입 인수를 함수에 매개변수로 전달할 때,
  매개변수에 값을 복사하여 함수로 전달하는 방식이다.
• 인수가 참조 값인 경우: 객체의 참조값이 매개변수에 저장되어 함수로 전달되는 방식이다.
  이때 함수 내에서 매개변수의 참조값이 이용하여 객체의 값을 변경했을 때,
  전달되어진 참조형의 인수값도 같이 변경된다.

function printName(name) {
  // 매개변수
  console.log(name)
}

printName('guk') // 인수

콜백 함수(call back function)

함수의 매개변수로 전달되어 내부에서 실행되는 함수를 말한다.
매개변수로 전달 받은 함수는 고차함수, 내부에서 호출되는 함수가 콜백 함수다.
아래 예제로 설명하면 filter는 고차함수, 내부에서 수행되는 화살표 함수는 콜백 함수다.

const arr = [].filter((i) => i === name)

화살표 함수와 일반 함수 차이

화살표 함수는 일반 함수와는 아래와 같은 차이가 있다.

• this 값을 갖지 않으며 상위 렉시컬 this를 참조한다. 즉, 동적으로 결졍된다.
  이러한 이유로 메서드를 정의할 때 화살표 함수 대신 일반 함수를 사용하는 경우가 많다.
• prototype 속성이 없어 constructors가 존재하지 않기 때문에 생성자 함수로서 활용할 수 없다.
  인터널 슬롯에는 함수 프로토 타입이 존재한다.

순수 함수와 비순수 함수

• 순수 함수: 동일한 입력에 대해 항상 동일한 결과를 반환하는 함수다.
  함수의 실행이 외부 상태를 변경하지 않으며, 외부 상태에도 영향을 주지 않는다.
  즉, 사이드 이팩트가 발생하지 않는다.

const increase = (n) => {
  return n + 1
}

• 비순수 함수: 함수의 실행이 외부 상태를 변경하거나, 외부 상태에 영향준다.
  외부 변수를 수정하거나, I/O 작업을 수행하거나, 예외를 발생시킨다. 즉, 사이드 이팩트가 발생한다.

let n = 0
const increase = () => {
  return ++n
}

참조

모던 자바스크립트 Deep Dive - 위키북스