이 글은 '모던 자바스크립트 DeepDive'를 참고하여 작성되었습니다.

13.1 스코프란?

식별자는 자신이 선언된 위치에 의해 자신을 참조할 수 있는 유효 범위가 결정된다. 스코프는 식별자가 유효한 범위를 말한다.

var x = 'global';

function foo() {
    var x = 'local';
    console.log(x);
}

foo();

console.log(x);

위 예시에서 자바스크립트는 이름이 같은 두 변수(x)에 대해 어떤 변수를 참조해야 할 지 결정(식별자 결정)한다. 바깥 영역에 선언된 x 변수는 어디서든 참조할 수 있지만, foo 함수 내부에서 선언된 x 변수는 foo 함수 내부에서만 참조할 수 있으며, 두 개의 x 변수는 식별자 이름이 동일하지만 스코프가 다른 별개의 변수다.

식별자는 값을 구별하여 식별해 낼 수 있는 고유한 이름을 말하기 때문에 유일해야 하지만 우리가 컴퓨터를 사용할 때 다른 폴더 내에서는 동일한 파일을 사용할 수 있듯이 프로그래밍 언어에서는 스코프를 통해 식별자인 변수 이름의 충돌을 방지하여 같은 이름의 변수를 사용할 수 있도록 한다. 즉, 스코프 내에서의 식별자는 유일해야 하지만, 다른 스코프에는 같은 이름을 사용할 수 있다.

13.2 스코프의 종류

13.2.1 전역과 전역 스코프

전역이란 코드의 가장 바깥 영역을 말하며, 전역은 전역 스코프를 만든다. 따라서 전역에 선언한 변수는 전역 스코프를 갖는 전역 변수가 되어 어디서든 참조할 수 있다.

13.2.2 지역과 지역 스코프

지역이란 함수 몸체 내부를 말하며, 지역 스코프를 만든다. 따라서 지역에 선언한 변수는 지역 스코프를 갖는 지역 변수가 되어 자신이 선언된 지역과 하위 지역에서만 참조할 수 있다. 즉, 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다.

13.3 스코프 체인

함수는 중첩될 수 있으므로 함수의 지역 스코프도 중첩될 수 있다. 이는 스코프가 함수의 중첩에 의해 계층적 구조를 갖는다(스코프 체인)는 것을 의미한다.

• outer 함수: 전역에 선언
• inner 함수: outer 함수 내부에 선언

위 예시와 같이 모든 스코프는 하나의 계층적 구조로 연결되며, 최상위 스코프는 전역 스코프다. 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하면서 선언된 변수를 검색한다.

스코프 체인은 물리적인 실체로 존재한다. 위 예시와 유사하게 렉시컬 환경을 실제로 생성해, 변수 선언이 실행되면 렉시컬 환경에 변수 식별자가 key로, 변수 할당이 실행되면 식별자에 해당하는 값을 변경한다. 변수 검색도 렉시컬 환경 상에서 일어난다.

13.3.1 스코프 체인에 의한 변수 검색

자바스크립트 엔진은 스코프 체인을 따라 변수를 참조하는 코드의 스코프에서 시작해 상위 스코프 방향으로 이동하며 변수를 검색한다. 위 예시에서 y를 검색할 경우에는 inner > outer > 전역 순서를 따른다. 하위 스코프로 내려가면서 식별자를 검색하는 경우는 없기 때문에 상위 스코프에서 유효한 변수는 하위 스코프에서 참조할 수 있지만 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수는 없다.

13.3.2 스코프 체인에 의한 함수 검색

함수도 식별자에 할당되기 때문에 스코프를 갖는다. 따라서 변수 검색과 동일한 로직으로 함수를 검색한다.

13.4 함수 레벨 스코프

지역은 함수 몸체 내부를 말하기 때문에 지역 스코프는 코드 블록이 아니라 함수에 의해서 생성된다. var 키워드로 선언된 변수는 함수의 코드 블록만을 지역 스코프로 인정(함수 레벨 스코프)한다.

블록 레벨 스코프는 모든 코드블록에 대해 지역 스코프를 만든다.

var x = 1;

if (true) {
    var x = 10;
}

console.log(x); // 10


var i = 10;

for (var i = 0; i < 5; i++) {
    console.log(i);
}

console.log(i); // 5

// 코드 블록은 지역 스코프로 인정되지 않아
// x와 i가 중복 선언됨

단, let과 const 키워드는 블록 레벨 스코프를 지원한다.

13.5 렉시컬 스코프

var x = 1;

function foo () {
    var x = 10;
    bar();
}

function bar () {
    console.log(x);
}

foo(); // 1
bar(); // 1
// bar 함수가 호출된 곳이 어디든 관계없이
// bar 함수는 자신이 정의된 스코프인 전역 스코프를 기억한다.
// → 함수의 상위 스코프는 정의된 곳에 의해 결정되므로 여기서의 상위 스코프는 전역이 되어 foo 함수 내부에서 호출되었을 지라도 전역 x를 참조

자바스크립트는 렉시컬 스코프를 따르므로 어디서 호출했는지가 아니라 함수를 어디서 정의했는지에 따라 상위 스코프를 결정한다. 함수가 호출된 위치는 상위 스코프 결정에 어떠한 영향도 주지 않는다.

함수의 상위 스코프는 언제나 자신이 정의된 스코프이며 함수의 상위 스코프는 함수 정의가 실행될 때 정적으로 결정된다. 함수 정의가 실행되어 생성된 함수 객체는 이렇게 결정된 상위 스코프를 기억한다.

useReducer란?

리액트 상태 관리로 가장 많이 사용되는 훅은 useState일 것입니다. 하지만 상태를 관리할 때 useState를 사용하는 것 말고도 useReducer를 사용하는 방법이 있습니다.

const [state, dispatch] = useReducer(reducer, initialState);

• state는 사용할 상태, dispatch는 액션을 발생시키는 함수입니다.
• 첫번째 파라미터는 reducer 함수
• 두번째 파라미터는 초기 상태입니다.

useState 남용의 문제점

개발을 하다보면 한 컴포넌트에 수많은 useState를 작성하게 되는 경우가 있습니다.

import { useState } from "react";

function EditCalendarEvent() {
  const [startDate, setStartDate] = useState();
  const [endDate, setEndDate] = useState();
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [location, setLocation] = useState();
  const [attendees, setAttendees] = useState([]);

  return (
    <>
      <input value={title} onChange={(e) => setTitle(e.target.value)} />
      {/* ... */}
    </>
  );
}

위 예시는 달력 이벤트를 업데이트하는 컴포넌트입니다.

이 컴포넌트의 문제는 아래와 같습니다.

• useState가 남용되어 어떤 상태를 관리하고 있는지 한 눈에 알기 어렵고
• 세이프가드가 없습니다.
  • 종료 날짜를 시작 날짜 이후로 선택할 수 있다든가
  • 제목이나 설명에 글자 수 제한을 건다든가

useState를 어떻게 대체할 수 있을까?

useReducer 를 사용하면 위와 같은 문제를 해결할 수 있습니다.

useReducer를 사용하면 A에서 B로의 변환을 제어할 수 있기 때문입니다. 위 예시 코드는 아래와 같은 형태로 개선될 수 있습니다.

import { useReducer } from "react";

function EditCalendarEvent() {
  const [event, updateEvent] = useReducer(
    (prev, next) => {
    // 이벤트를 검증하고 변환하여 상태가 항상 유효할 것을 한 곳에서 관리하며 보장합니다.
      return { ...prev, ...next };
    },
    { title: "", description: "", attendees: [] }
  );

  return (
    <>
      <input
        value={event.title}
        onChange={(e) => updateEvent({ title: e.target.value })}
      />
      {/* ... */}
    </>
  );
}

useReducer를 사용하면 상태를 한 곳에서 관리하며 상태 변환을 제어할 수 있는 함수를 추가함으로써 언제나 유효하다는 것을 보장한다는 이점을 갖습니다.

아까 언급했던 useState로 상태를 따로따로 관리할 경우 세이프 가드가 없다는 문제를 useReducer로 해결해봅시다!

import { useReducer } from "react";

function EditCalendarEvent() {
  const [event, updateEvent] = useReducer(
    (prev, next) => {
      const newEvent = { ...prev, ...next };
      // 시작 날짜가 종료 날짜 이후가 될 수 없음을 보장
      if (newEvent.startDate > newEvent.endDate) {
        newEvent.endDate = newEvent.startDate;
      }
      // 제목이 100자를 넘을 수 없음을 보장
      if (newEvent.title.length > 100) {
        newEvent.title = newEvent.title.substring(0, 100);
      }
      return newEvent;
    },
    { title: "", description: "", attendees: [] }
  );

  return (
    <>
      <input
        value={event.title}
        onChange={(e) => updateEvent({ title: e.target.value })}
      />
      {/* ... */}
    </>
  );
}

언제 useState를 useReducer로 대체해야할까?

useState를 사용하는 곳 대부분은 useReducer로 대체될 수 있습니다. 하지만 보통의 경우 useState를 사용해도 괜찮기 때문에 관리하는 상태 값이 적다면 useState를, 관리하는 값이 많아지고 상태의 구조가 복잡해진다면 useReducer를 사용하는 것도 하나의 방법일 것 같습니다.

결국은 우리의 선택!

이 글은 다음 글을 참고하여 작성되었습니다.

https://react.vlpt.us/basic/20-useReducer.html

https://velog.io/@eunbinn/a-cure-for-react-useState-hell

나는 보통 styled-components를 사용하면서 어떤 요소를 감쌀 때 Container와 Wrapper를 혼용해서 사용하곤 했었다. 하지만 이러한 사소한 네이밍 개선이 코드 가독성을 높여준다고 생각해서 Container와 Wrapper의 네이밍 차이를 알아보았다!

Container와 Wrapper를 사용하는 경우

일반적으로 두 용어 다 요소를 포함한다는 의미를 지니며, 클래스 용어로 자주 사용된다고 한다. 기본적으로 차이를 두지 않고서 사용해도 무방하지만, 엄격하게 구분을 한다고 하면 프로그래밍 관행 상으로 container와 wrapper의 차이를 파악하는 것이 가능하다고 한다.

원론적인 의미 구분

container : 하나 이상의 요소

wrapper: 하나의 요소를 포함

프로그래밍 세계에서 일반적으로

• container는 하나 이상의 요소를 포괄하는 개체를 지칭하는 의미를 지니며,
• wrapper는 하나의 개체만을 포함하는 것을 뜻한다고 한다.

예시

<ul class="items-container">
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
</ul>

위 예시는 다른 글에서 가져온 예시다.

위 예시처럼 wrapper는 하나의 요소를 감싸며 그 요소에 padding 등의 속성을 줄 경우 사용하는 것이 좋고, container는 여러 요소를 묶을 때 사용하는 것이 좋을 것 같다.

참고한 글

https://uxdev.org/entry/CSS-%ED%81%B4%EB%9E%98%EC%8A%A4-%EB%84%A4%EC%9D%B4%EB%B0%8D-%EC%8B%9C-container-vs-wrapper-%EC%B0%A8%EC%9D%B4-%EA%B5%AC%EB%B6%84%ED%95%98%EA%B8%B0

아래는 리액트 공식문서에 나와있는 useCallback과 useMemo에 대한 설명입니다.

useCallback: 메모이제이션된 콜백을 반환합니다.

콜백의 메모이제이션된 버전을 반환할 것입니다. 그 메모이제이션된 버전은 콜백의 의존성이 변경되었을 때에만 변경됩니다. 이것은, 불필요한 렌더링을 방지하기 위해 참조의 동일성에 의존적인 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용합니다.

useMemo: 메모이제이션된 값을 반환합니다.

useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산 할 것입니다. 이 최적화는 모든 렌더링 시의 고비용 계산을 방지하게 해 줍니다. 배열이 없는 경우 매 렌더링 때마다 새 값을 계산하게 될 것입니다.

그렇다면 useCallback과 useMemo는 정말 성능 향상에 도움이 될까?

https://haragoo30.medium.com/usememo-usecallback%EC%9D%84-%EC%96%B8%EC%A0%9C-%EC%8D%A8%EC%95%BC%EB%90%98%EB%82%98-6a5e6f30f759

위 글의 결론은 작은 규모에서 useMemo, useCallback을 사용했을 떄 성능이 오히려 나빠지거나 미미하게 좋아졌고, 규모가 커질 때는 조금씩 성능상의 이점이 늘어났지만 그 효과가 미비했습니다.

https://velog.io/@hyunjine/React-Rendering-Optimization

또다른 예시를 보여주는 블로그에서도 useCallback으로 감싼 함수는 그렇지 않은 함수보다 더 많은 일(함수를 정의하는 일, 의존성 배열의 값을 정의하는 일)을 하기 때문에 초기 렌더링에 더 느리게 실행되며, 그 이후에는 의존성 배열의 참조 동일성 체크 때문에 함수를 새로 만드는 것과 결국엔 비슷한 시간이 걸렸습니다.

즉, 저희가 사용해온 대부분의 방식의 useCallback과 useMemo는 쓸모가 없습니다..!

진짜 필요한 순간은 언제일까?

컴포넌트가 렌더링 되는 순간은 3가지입니다.

1. state가 바뀔 때
2. props가 바뀔 때
3. 부모가 렌더링 될 때

부모 컴포넌트의 렌더링은 자식 컴포넌트의 렌더링을 초래합니다.

const App = () => {
  const [state, setState] = useState(1);

  return (
    <div>
      <button onClick={() => setState(state + 1)}>{state}</button>
      <Page />
    </div>
  );
};

const Page = () => <Item />;

위 예시에서 Page는 state도 props도 없지만 부모 컴포넌트가 렌더링 되었다는 이유만으로 렌더링됩니다.

이런 순간이 React.memo()가 필요한 순간입니다.

const PageMemoized = React.memo(Page);

const App = () => {
  const [state, setState] = useState(1);
  const onClick = () => {
    console.log('Do something on click');
  };

  return (
    <div>
      <PageMemoized onClick={onClick} />
    </div>
  );
};

하지만, 위 예시에서도 아쉬운 점이 있습니다.

아래는 부모 컴포넌트인 App이 리렌더링 될 경우의 순서입니다.

1. App 리렌더링
2. onClick 새로 생성
3. PageMemoized 컴포넌트의 props가 바뀌었는지 체크
4. onClick은 새로 생성된 함수이므로 props가 바뀌었다고 생각하여
5. PageMemoized가 리렌더링

의도한 바와 다르게 Page 컴포넌트는 리렌더링 되었습니다. 이 때 필요한 것이 useCallback입니다.

const PageMemoized = React.memo(Page);

const App = () => {
  const [state, setState] = useState(1);
  const onClick = useCallback(() => {
    console.log('Do something on click');
  }, []);

  return (
    <PageMemoized onClick={onClick} />
  );
};

위처럼 사용했을 때가 되어서야 onClick은 새로 생성되지 않고 memo된 Page 또한 렌더링되지 않습니다.

React에서 무거운 계산은 컴포넌트를 리렌더링하고 업데이트하는 계산입니다. 따라서 React가 의도한 useMemo는 renderTree 내부의 특정 부분을 메모할 때 사용하는 것입니다.

useMemo와 useCallback은 첫 렌더링 때 React가 그 값을 캐시해야 합니다. 따라서, 초기 렌더링에 유리하도록 필요없는 useMemo와 useCallback을 없애고 리렌더링은 변경되어야하는 부분에만 일어나게 만드는 것이 애플리케이션을 최적화 하는 좋은 방식입니다.

이 글은 아래 글들을 참조하여 작성되었습니다.

https://velog.io/@hyunjine/React-Rendering-Optimization

https://haragoo30.medium.com/usememo-usecallback%EC%9D%84-%EC%96%B8%EC%A0%9C-%EC%8D%A8%EC%95%BC%EB%90%98%EB%82%98-6a5e6f30f759

이 글은 Kent C.Dodds의 useEffect vs useLayoutEffect와 Jaewang Lee의 useEffect 와 useLayoutEffect 의 차이는 무엇일까?를 참고하여 작성되었습니다.
https://kentcdodds.com/blog/useeffect-vs-uselayouteffect
https://medium.com/@jnso5072/react-useeffect-%EC%99%80-uselayouteffect-%EC%9D%98-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C-e1a13adf1cd5

useEffect

대부분의 경우 useEffect를 사용합니다. 클래스 컴포넌트의 componentDidMount와 componentDidUpdate, componentWillUnmount를 대체합니다.

한가지 주의할 점은 componentDidMount와 componentDidUpdate는 렌더링 이후 동기적으로 실행되지만 useEffect는 React가 컴포넌트를 렌더링한 후 실행되며 effect 콜백은 브라우저 페인팅을 막지 않는다는 것입니다. 이는 성능적으로 유리하며 당신이 의도한 바와 부합할 확률이 높습니다.

그러나, 렌더된 시점으로부터 effect 콜백이 DOM과 상호작용하는 그 사이의 시간동안 당신의 effect 콜백이 (DOM node ref를 이용해) DOM과 상호작용을 하고 이 DOM과의 상호작용이 DOM node의 외관을 변화시킨다면 당신은 useLayoutEffect를 사용해야 합니다. 그렇지 않으면 유저는 당신의 DOM 변화가 적용될 때마다 화면이 깜빡거리는 것을 볼 수 있게 될 겁니다. 이 순간만이 당신이 useEffect가 아니라 useLayoutEffect를 써야하는 순간입니다.

state 변화 → 컴포넌트 렌더 → 페인트 → useEffect

useLayoutEffect

useLayoutEffect는 리액트가 모든 DOM 상호작용을 끝낸 직후 동기적으로 실행됩니다. 만약 (scroll position이나 다른 style 요소들이 필요한 순간과 같이) 당신이 DOM 측정을 수행한 다음 DOM 변경 혹은 상태 업데이트를 통해 동기적으로 재렌더링해야 하는 경우 유용할 수 있습니다.

스케줄링 관점에서 이는 componentDidMount와 componentDidUpdate와 동일하게 동작합니다. 당신의 코드는 DOM이 업데이트 된 직후, 그리고 브라우저가 그러한 변화를 그릴 기회를 paint하기 전에 실행될 것입니다.(사용자는 브라우저가 리페인트되기 전까지 변화를 볼 수 없습니다.)

state 변화 → 컴포넌트 렌더 → useLayoutEffect → 페인트

useLayoutEffect는 내부 코드가 모두 실행된 후 painting 작업을 하므로 로직이 복잡할 경우 사용자가 레이아웃을 보는데까지 오랜 시간이 걸릴 수 있다는 단점이 있습니다. 그래서 기본적으로는 useEffect만을 사용하기가 권장됩니다.

요약

• useEffect: DOM이랑 상호작용 할 필요가 없거나 당신의 DOM 변화가 관찰 불가능할 경우(대부분의 경우에 useEffect를 사용합니다)
• useLayoutEffect: DOM과 상호작용 해야하거나 DOM 측정을 해야 할 경우

참고

Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정
Paint: 실제 스크린에 Layout을 표시하고 업데이트하는 과정

개발을 하다보면 내가 생각하기에 보기 좋은 함수 이름을 정하게 되는 경우가 많다. "handler나 event 이름은 이렇게 지어야해!" 라는 무조건적인 규칙이 없기도 하고, 팀 내에서 팀원들끼리 이렇게 하자고 정한다 해도 앞부분만 규칙을 따라가고 뒷부분은 각자 쓰고싶은 대로 쓰게 됐는데..

내 눈에는 보기 좋은 함수 이름이 누군가의 눈에는 좋지 못한 이름이고, 내 눈에는 보기 좋지 않은 함수 이름이 누군가의 눈에는 좋은 이름이라니! 정확한 답이 없을 때 의견을 좁히는 건 너무나 힘든 일이다.

티끌모아 태..산....?

이러한 의견 대립이 생길 때마다 자주 등장하는 결론은 "사소한 문제니 넘어가죠" 였는데, 이런 사소함이 쌓여서 프로젝트 내 전체 코드의 통일성이나 가독성을 저하시키는 게 되는건 아닐까? 라는 생각이 마음 한구석에 자리잡고 있었다.

우연히 읽게 된 좋은 글 등장!

Jake Trent라는 분에 의해 쓰인 글이다. 이 글의 모든 저작권은 이 분께 있음을 밝힌다.

https://jaketrent.com/

https://github.com/jaketrent

Event Handler Naming in React (2017.03.09)

FOR PROPS

props 이름을 정할 때에는 보통 onClick처럼 built-in 이벤트 핸들러 컨벤션과 맞춰서 on을 prefix로 사용한다.

이벤트 핸들러 컨벤션과 동일하게 on을 접두사로 사용함으로써, 우리는 이벤트 핸들러 함수를 감싼 것이라고 선언하는 것이다.

FOR FUNCTION NAMES

함수 이름도 동일한 패턴을 따르되, prefix를 on 대신 handle을 사용한다.

예시

<MyComponent onAlertClick={handleAlertClick} />

이렇게 하면
on은 이벤트가 여기에 연결되어 있음을 알 수 있고,
handle은 이벤트가 실행될 때 호출되는 것임을 알 수 있다.

이 때, 다른 동사를 사용하지 않고 click이라는 동사를 사용했는데, 이는 다른 동사와 함께 쓰여도 무관하다. click 대신 handleAlertDismiss와 같이 사용해도 된다는 말인데 사용하는 동사가 실제 동작을 보여주기에 더 나은 방식이라면 꼭 click이 아닌 다른 동사를 mapping 시켜도 좋다는 뜻이다.

MORE COMPLICATED NAMING

네이밍은 더 복잡해질 수도 있다. 필자는 보통 명사 > 동사 순으로 함수를 작성한다고 한다. 그룹화해서 보기 쉽기 때문이라고 하는데 아래 예시를 보면 더 이해가 쉽다.

예시

<MyComponent1
    onClickAlert={handleClickAlert}
    onHoverAlert={handleHoverAlert}
/>

<MyComponent2
    onAlertClick={handleAlertClick}
    onAlertHover={handleAlertHover}
/>

MyComponent1의 props보다 MyComponent2의 props를 보는게 alert에 관련된 props를 한 눈에 볼 수 있어서 훨씬 더 편하다. 알파벳 순으로 정렬까지 해주면 더 좋다.

COMPONENT SPLITTING

컴포넌트를 어디서 어떻게 자를지에 대해서는 수많은 논의를 가져올 수 있는 주제이고, 각자의 방식을 찾는 예술이다.

네이밍과 관련지어 생각했을 때, 만약 당신이 한 모듈 안에서 많은 이벤트 핸들러를 정의하고 있다면 당신이 추상화를 잘 했는지에 대해 다시 한번 생각해보고 더 나은 캡슐화를 위해 나눠볼 수 있겠다.

예를 들어, form.js라는 파일에서 onRegisterSubmit, onLoginSubmit이라는 함수를 갖게 됐을 때 이는

• registeration-form.js의 onSubmit
• login-form.js의 onSubmit

위 예시와 같이 좀 더 단순해진 이름을 사용하는 두개의 파일로 나뉠 수 있다.

USING BUILT-IN HANDLER NAMES

onClick과 onSubmit 같은 리액트 내장 이벤트 핸들러 이름을 그대로 갖다 쓰는 것은 실수를 유발할 수 있으므로 조심해야한다.

// props로 onClick={handleClick}을 내려준 상황이라고 가정
const MyComponent = (props) => {
    return <div {...props}><button>이 버튼의 onClick은 어떻게 될까..?</button></div>
}

위 예시 같은 상황에서는 onClick에 이벤트 버블링이 일어나게 되고 예기치 않은 동작이 실행될 수 있다.

마치며

내 코드를 처음 봐도 쉽게 이해할 수 있었으면 좋겠다. 유지보수가 쉬운 코드였으면 좋겠다. 가독성이 좋은 코드였으면 좋겠다. 나는 좋은 코드를 쓰는 개발자가 되었으면 좋겠다!

이 글은 '모던 자바스크립트 DeepDive'를 참고하여 작성되었습니다.

12.1 함수란?

프로그래밍에서 함수란 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 함수는 값이며, 함수를 구분하기 위해 식별자인 함수 이름을 사용할 수 있다.

• 매개변수: 함수 내부로 입력을 전달받는 변수
• 인수: 입력
• 반환값: 출력

함수는 함수 정의를 통해 함수를 생성하고, 인수를 매개변수를 통해 함수에 전달하면서 명시적으로 실행(함수 호출)한다. 함수를 호출하면 코드블록을 실행하고, 실행 결과(반환값)를 반환한다.

12.2 함수를 사용하는 이유

함수는 코드의 재사용 측면에서 매우 유용하다.

함수를 사용하지 않고 같은 코드를 중복해서 작성하면 그 함수를 수정해야 할 때 중복된 횟수만큼 수정해야한다. 함수는 코드의 중복을 억제하고 재사용성을 높임으로써 유지보수의 편의성과 코드의 신뢰성을 높이는 효과가 있다.

12.3 함수 리터럴

함수 리터럴은 function 키워드, 함수 이름, 매개 변수 목록, 함수 몸체로 구성된다.

// 변수 f에 함수 add가 할당되었다.
// 즉, 함수 리터럴은 평가되어 값을 생성한다.
var f = function add(x, y) {
    return x + y;
}

함수 이름

• 식별자다.
• 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자다 ???
• 함수 이름은 생략 가능하다.

매개변수 목록

• 소괄호로 감싸고 쉼표로 구분한다.
• 매개변수 목록은 순서에 의미가 있다.
• 매개변수는 변수와 동일하게 취급된다. → 식별자 네이밍 규칙 준수

함수 리터럴도 평가되어 값을 생성하며 이 값은 객체다. 하지만 일반 객체와 달리 함수는 호출할 수 있으며 일반 객체에는 없는 함수 객체만의 고유한 프로퍼티를 갖는다.

12.4 함수 정의

함수 정의란 함수를 호출하기 전에 매개변수, 실행할 문들, 반환할 값을 지정하는 것이다.

12.4.1 함수 선언문

함수 선언문은 함수 리터럴과 형태가 동일하다. 단, 함수 선언문은 함수 이름을 생략할 수 없다.

예시

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

// 불가능
function (X, y) {
    return x + y;
}

함수 선언문은 함수 이름을 생략할 수 없다는 점을 제외하면 함수 리터럴과 형태가 동일하기 때문에 기명함수 리터럴은 함수 선언문 혹은 함수 리터럴 표현식으로 해석될 가능성이 있다. 즉, 기명 함수 리터럴은 코드 문맥(함수 리터럴을 변수에 할당하거나 피연산자로 사용하면 함수 리터럴 표현식으로 해석)에 따라 해석이 달라질 수 있다.

// 기명 함수 리터럴
// 함수 선언문으로 해석
function foo() { console.log('foo'); }

foo(); // foo

// 기명 함수 리터럴
// 함수 리터럴 표현식으로 해석
(function bar() { console.log('bar'}; )

bar(); // ReferenceError: bar is not defined

위 예제에서 연산자 내에 있는 함수 리터럴 bar는 함수 리터럴 표현식으로 해석된다.

함수 선언문은 함수 이름을 생략할 수 없다는 점을 제외하면 함수 리터럴과 형태가 동일하지만, 함수 선언문으로 선언된 함수(foo)는 호출할 수 있으나 함수 리터럴 표현식으로 생성된 함수(bar)는 호출할 수 없다는 것에서 차이를 갖는다. 왜냐하면, 함수 리터럴에서 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자이므로 함수 몸체 외부에서는 함수 이름으로 함수를 호출할 수 없기 때문이다.

이와 달리, 자바스크립트 엔진은 함수 선언문으로 함수 객체를 생성할 때, 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성해 거기에 함수 객체를 할당한다.

즉, 함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출한다.

12.4.2 함수 표현식

자바스크립트의 함수는 일급 객체(값의 성질을 갖는 객체)다. 함수는 일급 객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있는데 이를 함수 표현식이라고 한다. 함수 표현식의 함수 리터럴은 함수 이름을 생략하는 것이 일반적이다.

var add = function foo(x, y) {
    return x + y;
}

// 함수 객체를 가리키는 식별자로 호출
console.log(add(2, 5));

// 함수 이름은 함수 몸체 내부에서만 유효한 식별자
console.log(foo(2, 5)); // ReferenceError: foo is not defined

함수를 호출할 때는 함수 이름이 아니라 함수 객체를 가리키는 식별자를 사용해야 하므로 함수 이름으로 함수를 호출할 수 없다.

함수 선언문과 함수 표현식은 유사하게 동작하는 것처럼 보이지만, 함수 선언문은 표현식이 아닌 문이고 함수 표현식은 표현식인 문이라는 차이가 있다.

12.4.3 함수 생성 시점과 함수 호이스팅

함수 선언문으로 정의한 함수와 함수 표현식으로 정의된 함수의 생성 시점은 다르다.

함수 선언문

• 함수 호이스팅 발생
• 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행
• 함수 이름과 동일한 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당
• 함수 선언문 이전에 함수를 참조할 수 있으며 호출할 수 있다.

함수 표현식

• 변수 호이스팅 발생
• 변수에 할당되는 값이 함수 리터럴인 문
• 변수 선언문과 변수 할당문을 한 번에 기술한 축약 표현과 동일하게 동작
• 변수 선언은 런타임 이전에 실행되어 undefined로 초기화되지만
• 변수 할당문은 런타임에 평가되므로, 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.

예시

// 함수 참조
console.dir(add); // add(x, y) ← 함수 호이스팅
console.dir(sub); // undefined ← 변수 호이스팅

// 함수 호출
console.log(add(2, 5)); // 7 ← 함수 호출 가능
console.log(sub(2, 5)); TypeError: sub is not a function ← 함수 호출 불가능

// 함수 선언문
function add(x, y) {
    return x + y;
}

// 함수 표현식
function sub(x, y) {
    return x - y;
}

따라서 함수 표현식으로 정의한 함수는 반드시 함수 표현식 이후에 참조 또는 호출해야 한다.

12.4.4 Function 생성자 함수

Function 생성자 함수로 함수를 생성하는 것은 일반적이지 않고 바람직하지 않다. 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작한다.

// 빌트인 함수인 Function 생성자 함수 이용
// new 연산자 생략 가능
var add = new Function('x', 'y', 'return x + y');

12.4.5 화살표 함수

function 키워드 대신 => 를 사용해 좀 더 간략한 방법으로 함수를 선언하는 방식이다. 화살표 함수는 익명함수로 정의한다. 화살표 함수는 기존 함수보다 표현이 간략하며 내부 동작 또한 간략화되어 있다.

const add = (x, y) => x + y;

12.5 함수 호출

함수를 호출하면 현재 실행 흐름을 중단하고 호출된 함수로 실행 흐름을 옮긴다.

12.5.1 매개변수와 인수

함수 외부에서 함수 내부로 값을 전달할 필요가 있는 경우 매개변수를 사용해 인수를 전달한다.

매개변수

• 함수를 정의할 때 선언
• 함수 몸체 내부에서 변수와 동일하게 취급
• 함수 호출 → 매개변수 생성 후 undefined로 초기화 → 인수 할당
• 함수 몸체 외부에서 참조할 수 없다.
• 매개변수의 개수와 인수의 개수는 다를 수 있으며, 인수가 할당되지 않은 매개변수의 값은 undefined, 초과된 인수는 무시된다.

12.5.2 인수 확인

ES6에서 도입된 매개변수 기본값을 사용하면 인수 체크 및 초기화를 간소화할 수 있다.

예시

// a, b, c에 부적절한 타입이 들어올 가능성(문자열이 들어올 가능성)
// 인수가 매개변수 개수만큼 전달되지 않을 가능성
// 두 가지를 한번에 체크 및 초기화 가능

function add(a = 0, b = 0, c = 0) {
    return a + b + c;
}

12.5.3 매개변수의 최대 개수

매개변수의 최대 개수에 대해 명시적으로 제한하고 있지는 않지만, 매개변수는 코드를 이해하는 데 방해되는 요소이므로 이상적인 매개변수 개수는 0개이며 적을수록 좋다.(이상적인 함수는 한 가지 일만 해야 하며 가급적 작게 만들어야 한다.) 매개변수는 최대 3개 이상을 넘지 않을 것을 권장하며 그 이상의 매개변수가 필요하다면 객체를 인수로 전달하는 것이 유리하다.

객체를 인수로 사용할 경우

• 프로퍼티 키만 정확히 지정하면 매개변수 순서를 신경쓰지 않아도 된다.
• 프로퍼티 키를 통해 명시적으로 인수의 의미가 설명되므로 코드의 가독성이 좋아진다.

12.5.4 반환문

return 키워드와 표현식으로 이뤄진 반환문을 사용해 반환할 수 있다.

반환문

• 함수의 실행을 중단 후 함수 몸체를 빠져나간다.
• return 뒤의 표현식을 평가해 반환
• 함수 호출 표현식은 반환값으로 평가된다.
• 반환문이 생략될 경우 마지막 문까지 실행한 후 undefined 반환
• 함수 내부에서만 사용가능

12.6 참조에 의한 전달과 외부 상태의 변경

매개변수도 함수 몸체 내부에서 변수와 동일하게 취급되므로 매개변수 또한 타입에 따라 값에 의한 전달, 참조에 의한 전달 방식을 그대로 따른다.

원시 타입 인수

• 값 자체가 복사되어 전달
• 원본 훼손 X

객체 타입 인수

• 참조 값이 복사되어 전달
• 참조 값을 통해 객체가 변경되므로 원본 훼손 ㅇ

12.7 다양한 함수의 형태

12.7.1 즉시 실행 함수

함수 정의와 동시에 즉시 호출되는 함수를 즉시 실행 함수라고 한다. 단 한 번만 호출되며 다시 호출할 수 없다.

(function() {
    var a = 3;
    var b = 5;
    return a * b;
}())

익명 함수를 사용하는 것이 일반적이지만 기명 즉시 실행 함수도 사용할 수 있다. 하지만 그룹연산자 ()내의 기명 함수는 함수 선언문이 아니라 함수 리터럴로 평가되기 때문에 함수 외부에서 식별자를 참조할 수 없으므로 즉시 실행 함수를 다시 호출할 수 없다는 것은 동일하다.

(function foo(){
    var a = 3;
    var b = 5;
    return a * b;
}());

foo(); // ReferenceError

즉시 실행 함수는 반드시 그룹연산자 ()로 감싸야 한다.

// 1번 케이스
function (){}()

// 함수 선언문은 함수 이름을 생략할 수 없다.


// 2번 케이스
function foo(){}()

// 위와 같이 실행할 경우
// 세미콜론 자동 삽입 기능에 의해 함수 뒤에 ; 가 붙는다
// function foo(){};(); 의 형태가 된다.
// 따라서 함수 선언문 뒤의 ()는 함수 호출 연산자가 아니라 그룹 연산자로 해석되고
// 그룹 연산자에 피연산자가 없기 때문에 에러가 발생한다.

그룹 연산자의 피연산자는 값으로 평가되므로 함수를 그룹 연산자로 감싸면 함수 리터럴로 평가되어 함수 객체가 된다.

즉시 실행 함수도 일반 함수처럼 값을 반환할 수도 있고 인수를 전달할 수도 있다.

var res = (function() {
    var a = 3;
    var b = 5;
    return a * b;
}());

var res2 = (function (a, b){
    return a * b;
}(3, 5));

12.7.2 재귀 함수

재귀 함수는 재귀 호출(함수가 자기 자신을 호출)을 수행 하는 함수를 말한다. 함수 이름은 함수 몸체 내부에서만 유효하므로 함수 이름을 사용해 자기 자신을 호출할 수도 있고, 함수 표현식의 경우 식별자로도 재귀 호출을 할 수 있다(단 외부에서 호출할 때는 반드시 식별자로 함수를 호출). 재귀 함수는 자기 자신을 무한 호출하기 때문에 재귀 호출을 멈출 수 있는 탈출 조건을 반드시 만들어야 한다.

재귀 함수는 무한 반복에 빠질 위험이 있기 때문에 재귀 함수를 사용하는 것이 직관적으로 이해하기 쉬울 때만 한정적으로 사용한다.

12.7.3 중첩 함수

함수 내부에 정의된 함수를 중첩 함수 또는 내부 함수라고 한다. 중첩 함수를 포함하는 함수는 외부 함수 라고 한다. 중첩 함수는 외부 함수 내부에서만 호출할 수 있다.

12.7.4 콜백 함수

함수의 일부가 다르면 매번 함수를 새롭게 정의해야 한다. 해결 방법으로는 함수를 합성하는 방법이 있다. 공통 로직은 미리 정의해두고, 변경 로직은 추상화해서 전달하는 것이다. 함수는 일급 객체이므로 매개변수를 통해 함수로 전달할 수 있다.

함수의 매개변수를 통해 다른 함수 내부로 전달되는 함수를 콜백함수라고 하며 매개변수를 통해 함수 외부에서 콜백 함수를. 전달 받은 함수를 고차함수라고 한다. 고차 함수는 콜백 함수의 호출 시점을 결정해서 호출하며, 콜백 함수에 인수를 전달할 수 있다.

콜백함수로 전달된 함수 리터럴은 고차 함수가 호출될 때마다 평가되어 함수 객체를 생성하므로, 콜백 함수가 자주 호출되거나 다른 곳에서 호출 될 필요가 있다면 외부에서 콜백 함수를 정의한 뒤 고차 함수에 전달하는 것이 효율적이다.

콜백 함수는 함수형 프로그래밍 패러다임뿐만 아니라 비동기 처리에 활용되는 중요한 패턴이다.

setTimeout(function() {
    console.log('1초 경과');
}, 1000);

콜백 함수는 배열 고차 함수에서도 사용된다.
map, filter, reduce

12.7.5 순수 함수와 비순수 함수

순수 함수

• 어떤 외부 상태에 의존하지도 변경하지도 않는
• 부수 효과가 없는 함수
• 동일한 인수가 전달되면 언제나 동일한 값을 반환
• 오직 인수에게만 의존해 값을 생성해 반환
• 인수에 의해 반환 값이 달라지므로 일반적으로 하나 이상의 인수를 전달 받는다.

비순수 함수

• 외부 상태에 의존하거나 외부 상태를 변경하는
• 부수 효과가 있는 함수

함수가 외부 상태를 변경하면 상태 변화를 추적하기 어렵기 때문에, 순수 함수를 사용하는 것이 좋다.

함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 외부 상태를 변경하는 부수효과를 최소화해서 불변성을 지향하는 프로그래밍 패러다임이다.

이 글은 '모던 자바스크립트 DeepDive'를 참고하여 작성되었습니다.

자바스크립트가 제공하는 데이터 타입은 원시 타입과 객체 타입으로 구분할 수 있다.

원시 타입과 객체 타입의 차이점

• 원시 값은 변경 불가능한 값 / 객체 타입 값은 변경 가능한 값
• 원시 값은 변수에 할당하면 변수에 실제 값이 저장된다. / 객체는 변수에 할당하면 참조 값이 저장된다.
• 원시 값을 다른 변수에 할당하면 값이 복사되어 전달 된다.(값에 의한 전달) / 객체는 원본의 참조값이 복사되어 전달(참조에 의한 전달)

11.1 원시 값

11.1.1 변경 불가능한 값

원시 값은 변경 불가능한 값이다.
즉, 원시 값을 할당한 변수에 새로운 원시 값을 재할당 하면 이전 원시값을 변경하는 것이 아니라 새로운 메모리 공간을 확보하고 재할당한 원시 값을 저장한 후 변수가 새롭게 재할당한 원시값을 가리킨다.

불변성

위 그림과 같이 원시 값은 값을 직접 변경할 수가 없기 때문에 변수 값을 변경하기 위해서는 새로운 메모리 공간을 확보하고, 재할당한 값을 저장한 후, 참조하던 메모리 공간의 주소를 변경한다. 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없다.

11.1.2 문자열과 불변성

예시

var str = 'string';
str[0] = 'A';

console.log(str); // string

위 예시와 같이, 문자열은 배열과 유사하게 각 문자에 접근할 수 있지만, 이미 생성된 문자열의 일부 문자를 변경해도 반영되지 않는다. 문자열은 변경 불가능한 값, 읽기 전용 값으로서 변경할 수 없기 때문이다. 이처럼 원시 값은 예기치 못한 변경으로서 자유롭기 때문에 데이터의 신뢰성을 보장한다.

11.1.3 값에 의한 전달

변수에 원시 값을 갖는 변수를 할당하면 할당 받는 변수에는 할당 되는 변수의 원시값이 복사되어 전달되는 데 이를 값에 의한 전달이라고 한다.

예시

var score = 80;
var copy = score;
score = 100;

score 변수와 copy 변수가 숫자 값 80을 갖는다는 점에서는 동일하지만 80은 각각 다른 메모리 공간에 저장된 별개의 값이다. 따라서, score 변수의 값을 변경하더라도 copy 변수의 값에는 어떠한 영향도 주지 않는다.

엄격하게 표현하면 변수에는 값이 전달되는 것이 아니라 메모리 주소가 전달되기 때문에 값에 의한 전달이라는 용어가 적절하지 않을 수 있다. 단, 전달된 메모리 주소를 통해 메모리 공간에 접근하면 값을 참조할 수 있다.

중요한 것은 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 서로 간섭할 수 없다는 것이다.

11.2 객체

객체는 프로퍼티 개수가 정해져 있지 않고, 동적으로 추가, 삭제될 수 있다. 또한 프로퍼티 값에 제한도 없기 때문에 객체는 확보해야할 메모리 공간의 크기를 사전에 정해 둘 수 없다. 따라서 객체는 원시 값과는 다른 방식으로 동작하도록 설계되어 있다.

11.2.1 변경 가능한 값

객체는 변경 가능한 값이다. 원시 값이 할당된 변수는 메모리 주소를 통해 원시 값에 접근할 수 있다. 하지만 객체가 할당된 변수는 메모리 주소를 통해 접근하면 참조 값에 접근할 수 있다. 참조 값은 메모리 공간의 주소 그 자체다.

위 그림과 같이, 객체를 할당한 변수를 참조하면 메모리에 저장되어 있는 참조 값을 통해 실제 객체에 접근한다. '변수는 객체를 참조하고 있다', '변수는 객체를 가리키고 있다'라고 표현하는 이유다.

객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있다. 재할당 없이 프로퍼티 동적 추가, 삭제, 프로퍼티 값 갱신 등이 가능하다. 객체는 변경 가능한 값이기 때문에 메모리에 저장된 객체를 직접 수정할 수 있고, 이 때 객체를 할당한 변수에 재할당을 하지 않았기 때문에 참조 값은 변경되지 않는다.

위와 같이 객체를 관리하는 이유는, 객체를 변경할 때마다 이전 값을 복사해서 새로 생성하는 방식이 명확하고 신뢰성이 보장될 수는 있어도, 크기가 매우 클 수도 있고, 크기가 일정하지 않으며, 프로퍼티 값이 객체일 수도 있어서 비용이 많이 들기 때문이다. 따라서, 메모리를 효율적으로 사용하기 위해 객체는 변경 가능한 값으로 설계되어 있다.

이러한 구조적 단점에 따른 부작용이 있다면, 여러개의 식별자가 하나의 객체를 공유할 수 있다는 것이다.

11.2.2 참조에 의한 전달

예시

var person = {
    name: "Lee",
}

var copy = person; // 얕은 복사

person과 copy는 저장된 메모리 주소는 다르지만 동일한 참조 값을 갖는다.(두 개의 식별자가 하나의 객체를 공유하는 상황) 따라서, 원본 또는 사본 중 어느 한쪽에서 객체를 변경하면 서로 영향을 주고 받는다.

예시

var person = {
    name: "Lee",
}

var copy = person; // 얕은 복사

console.log(copy === person); // true

copy.name = 'Kim';
person.address = 'Seoul';

console.log(person); // {name: 'Kim', address: "Seoul"};
console.log(copy); // {name: 'Kim', address: "Seoul"};

값에 의한 전달과 참조에 의한 전달 모두 메모리 공간에 저장되어 있는 값을 복사해서 전달한다는 면에서는 동일하다. 다만 그 값이 원시 값이냐 참조 값이냐에 따른 차이만 있을 뿐이다.

이 글의 '모던 자바스크립트 DeepDive'를 참고하여 작성되었습니다.

10.1 객체란?

자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 모든 것(원시 값을 제외한 나머지 값)이 객체이다.

원시 타입

• 단 하나의 값만 나타낸다.
• 변경 불가능한 값(immutable value)

객체

• 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조
• 변경 가능한 값(mutable value)
• 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 key와 value로 구성된다.

자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 이 때, 프로퍼티 값으로 함수가 사용될 경우 메서드라 부른다. 이처럼 객체는 프로퍼티와 메서드로 구성된 집합체다.

• 프로퍼티: 객체의 상태를 나타내는 값
  
• 메서드: 프로퍼티를 참조하고 조작할 수 있는 동작
• 이처럼 객체는 프로퍼티와 메서드를 모두 포함할 수 있기 때문에 상태와 동작을 하나의 단위로 구조화할 수 있어서 유용하다.

10.2 객체 리터럴에 의한 객체 생성

클래스 기반 객체지향 언어는 클래스를 사전에 정의하고 필요한 시점에 new 연산자와 함께 생성자를 호출해 인스턴스를 생성하는 방식으로 객체를 생성한다. 자바스크립트는 프로토타입 기반 객체지향 언어로서 다양한 객체 생성 방식(객체 리터럴, Object 생성자 함수, 생성자 함수, Object.create 메서드, 클래스)을 지원한다.

객체 리터럴

객체 생성에서 가장 일반적이고 간단한 방법으로 중괄호 내에 0개 이상의 프로퍼티를 정의한다. 객체 리터럴에 프로퍼티를 포함해 객체를 생성함과 동시에 프로퍼티를 만들 수도 있고, 객체를 생성한 이후에 프로퍼티를 동적으로 추가할 수도 있다.

10.3 프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구분된다.

프로퍼티 키

• 빈 문자열을 포함하는 모든 문자열 또는 심벌 값이 들어올 수 있으나 일반적으로 문자열을 사용한다.
• 프로퍼티 값에 접근할 수 있는 이름으로서 식별자 역할을 한다.
• 식별자 네이밍 규칙을 반드시 따를 필요는 없지만, 식별자 네이밍 규칙을 따르지 않는 이름에는 따옴표를 사용한다.(권장 X)
• 문자열 또는 문자열로 평가되는 표현식을 사용해 프로퍼티 키를 동적으로 생성 가능하다. 이 때, 사용할 프로퍼티 키를 []로 묶어야 한다.
• 빈 문자열을 프로퍼티 키로 사용해도 되지만 키로서 의미를 갖지 못하므로 권장되지 않는다.
• 문자열이나 심벌 값 외의 값을 프로퍼티 키에 사용하면 암묵적 타입 변환을 통해 문자열이 된다.(프로퍼티 키로 숫자를 사용할 경우 내부적으로 문자열로 변환)
• 존재하는 키를 중복 선언하면 나중에 선언한 프로퍼티 키가 먼저 선언한 프로퍼티 키를 덮어쓴다.

10.4 메서드

프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 부른다. 즉, 메서드는 객체에 묶여 있는 함수를 의미한다.

10.5 프로퍼티 접근

프로퍼티에 접근하는 방법은 두가지이다.

1. 마침표 표기법(.): 객체.프로퍼티키
2. 대괄호 표기법([...]): 객체['프로퍼티키']
   • 접근 연산자 내부에 지정하는 프로퍼티 키는 따옴표로 감싼 문자열이어야 한다.
   • 식별자 네이밍을 준수하지 않는 프로퍼티 키일 경우엔 대괄호 표기법을 사용한다.

좌측에는 객체로 평가되는 표현식을 기술하고, 마침표 우측 혹은 대괄호 내부에는 프로퍼티 키를 지정해 접근한다. 이 때, 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다.

10.6 프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.

10.7 프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.

10.8 프로퍼티 삭제

delete 연산자는 객체의 프로퍼티를 삭제한다. 존재하지 않는 프로퍼티를 삭제하면 에러없이 무시된다.

예시

var person ={
    name: 'Lee'
};

person.age = 20; // 프로퍼티 동적 생성

delete person.age; // 프로퍼티 삭제
delete person.address; // 에러 발생 x

10.9 ES6에서 추가된 객체 리터럴의 확장 기능

10.9.1 프로퍼티 축약 표현

프로퍼티 값으로 변수를 사용하는 경우, 변수 이름과 프로퍼티 키가 동일하다면 프로퍼티 키를 생략할 수 있다. 프로퍼티 키는 변수 이름으로 자동 생성된다.

예시

let x = 1, y = 2;

const obj = {x, y};

console.log(obj); // {x: 1, y: 2}

10.9.2 계산된 프로퍼티 이름

ES5에서는 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성하기 위해서는 객체 리터럴 외부에서 대괄호 표기법([...])을 사용해야 했으나, ES6에서는 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있다.

예시

const prefix = "prop";
let i = 0;

const obj = {
    [`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i,
};

console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}

10.9.3 메서드 축약 표현

ES6에서는 메서드를 정의할 때 function 키워드를 생략한 축약 표현을 쓸 수 있다.

예시

const obj = {
    name: 'Lee',
    sayHi() {
        console.log('하이' + this.name);
    }
};

console.log(obj.sayHi()); // 하이 Lee

이 글은 kakaoTech의 '섬세한 ISFP의 코드 가독성 개선 경험' 영상을 보고 작성되었습니다.

1. 정확한 단어 고르기

1-1. 다른 뜻을 가진 단어와 구분하기

예시: load와 fetch

const data = await loadData();

• load는 가져와서 싣다
• fetch는 가져오다

즉, loadData는 가져와서 싣는 것까지 완결된 상태이다.
이를 다시 data 변수에 할당하면 가져온다는 뜻이 중복된다.

좋은 예시

const data = await fetchData();
const success = await loadData();

react query 라는 data fetching 라이브러리 예시

isLoading과 isFetching이라는 변수를 지원한다. 이 때, 데이터가 없을 때 최초로 한 번만 바뀌는 변수는 isLoading이다. isLoading은 가져와서 싣는 것이기 때문에 한 번 isLoading이 true가 되면 계속 true인 상태가 되는 것이다.

이처럼 용어를 제대로 알고 사용하는 것은 라이브러리 용법을 익히거나 코드를 읽을 때 수월해지도록 도와줄 수 있다.

예시: get과 query

expect(screen.getByText('Username')).toBeInTheDocument();
expect(screen.queryByText('Username')).toBeInTheDocument();

• get은 가져오다
• query는 질문하다

getByText와 queryByText의 차이는 getByText는 결과가 없으면 Error를 던지고, queryByText는 결과가 없으면 null을 반환한다.

왜일까?

가져온다는 말은 결과를 당연히 가져올 것으로 기대하지만 질문하는 것은 질문으로 그치기 때문에 결과가 없을 수도 있기 때문이다. 따라서, 결과가 없을 수도 있지만 확인만 해볼 때는 queryByText를 사용하는 것이 적절하다. get은 대상이 필히 존재한다고 가정하므로 가져온 뒤 대상을 활용하는 코드가 이어진다.

컴포넌트 작성 - UI 명칭 이해하기

App Bar와 Global Navigation Bar와 Local Navigation Bar의 차이를 이해하는 것, Card와 Box의 차이를 이해하면 컴포넌트 구성 예측이 쉬워진다.

Card

하나의 주제로 묶인 컨텐츠와 액션, 그 모든 것

Box

내용물을 감싸는 래퍼의 개념에 가깝게 사용된다.

Card 예시

const FruitCard = fruit => (
    <div>
        <span>{fruit.name}</span>
        <img src={fruit.img} />
    </div>
);

내부 컨텐츠를 포함하므로 FruitBox라는 명칭보다 FruitCard라는 명칭이 잘 어울린다.

Box 예시

const FruitBox = children => (
    <div>
        {children}
    </div>
)

박스라는 이름에 걸맞게 테두리를 담당하는 역할만 맡게 된다.

Select와 Search 예시

Select는 선택하다
Search는 찾다

Select는 하나의 결과를 항상 선택하고, Search는 모든 결과를 찾는 것에 그친다. 따라서, Select 컴포넌트가 하이라이팅 되는 것은 당연한 결과였다. Search 컴포넌트를 사용하면 문제도 간단히 해결되고 가독성도 높아진다.

1-2. 보다 구체적인 단어로 바꾸기

코드 작성은 글쓰기와 같다. 광범위한 뜻을 내포하는 단어 대신 보다 원래 의미를 잘 표현할 수 있는 단어를 선택하면 의도나 목적을 명확히 전달해줄 수 있기 때문이다.

예시

if (expirationTime < PROMOTION_END_TIME) {
    return remainTime / totalTime;
}

위 코드가 아쉬운 점은

1. 조건문에서는 값을 비교하고
2. return은 값을 나누고 있다.

어떻게 개선할까?

1. 값을 비교하는 조건문이니까 값에 가까운 단어를 사용하자.

   조건문은 값을 비교하고 있기 때문에 시간값의 비교에서는 순서가 중요하다. 시간보다는 시각이라는 단어가 더 적절할 것 같다.
   expirationTime, PROMOTION_END_TIME → expirationDate, PROMOTION_END_DATE

2. 정량적인 값을 return 할 것이라는 것을 보여주자.

   return 값이 나누는 값이기 때문에 나눌 수 있는 양인지를 나타내면 좋겠다. 기간을 의미하는 단어인 Duration을 사용하여 양의 느낌을 명확히 줄 수 있을 것 같다.
   remainTime, totalTime → remainDuration, totalDuration

주로 사용할 수 있는 대체 단어

get

→ extract(추출하다), parse(분해하다), aggregate(합치다)

number

→ limit(제한이 되는 수), count(총계)

change

→ convert(변환하다), filter(거르다), override(덮어쓰다)

changed

→ dirty(더러운 = 수정이 이루어진)

정확하지 않은게 더 좋은 경우도 있지 않을까?

아쉬운 예시

const MIN_TO_SEC = 60;
const HOUR_TO_SEC = MIN_TO_SEC * 60;
const DAY_TO_SEC = HOUR_TO_SEC * 24;

convertSecondToText(3 * DAY_TO_SEC + 12 * HOUR_TO_SEC + 30 * MIN_TO_SEC).toEqual('3.5days');

좀 더 나은 예시

const MIN = 60;
const HOUR = MIN * 60;
const DAY = HOUR * 24;

convertSecondToText(3 * DAY + 12 * HOUR + 30 * MIN).toEqual('3.5days');

MIN, HOUR, DAY가 좀 더 모호하지만 아래가 좀 더 잘 읽힌다. 따라서, 항상 정확한 표현을 찾기 보다는 문맥에 맞추어 가독성을 고민해보는 것이 효과적이다.

2. 잘 보이는 형태로 작성하기

2-1. 표

아쉬운 예시

const type = 
exception
    ? undefined
    : condA
    ? 'A'
    : condB
    ? condC
        ? 'BC'
        : 'BD'
    : 'A'; 

직관적으로 코드가 눈에 들어오지 않는다.

표처럼 원하는 행과 열에만 시선을 두어 인과관계를 파악하기 좋을 것이다.

let과 if문 사용한 예시

let type = 'A';
if (exception) type = undefined;
if (condA) type = 'A';
if (condB) {
    if (condC) type = 'BC';
    else type = 'BD';
}

즉시 실행함수와 early return의 활용

const type = (function () {
    if (exception) return undefined;
    if (condA) return 'A';
    if (condB && condC) return 'BC';
    if (condB && !condC) return 'BD';
    return 'A';
})();

아쉬운 예시

let str = '';

switch (type) {
    case 'apple':
        str = '사과';
        break;
    case 'banana':
        str = '바나나';
        break;
    default:
        str = '포도';
}

직관적이긴 하나, 더 좋은 형태(표)로 개선할 수 있을 것 같다.

대응 관계를 일직선 상에 가깝게 위치한 예시

const FRUIT_MAP = {
    apple: '사과',
    banana: '바나나',
    DEFAULT: '포도',
}

const str = FRUIT_MAP[type] || FRUIT_MAP.DEFAULT;

2-2. 목차

예시 상황

모달 A, 모달 B, 모달 C가 존재하고 z-index가 아래와 같은 상황이다.

• 모달 A의 z-index: 100
• 모달 B의 z-index: 300
• 모달 C의 z-index: 500

모달 A를 모달 B 위에 띄우기 위해 A의 z-index를 1000으로 수정하면 의도치 않게 모달 C보다 위에 위치하게 되어 버린다.

목차 작성을 응용한다면?

export const ZINDEX_USAGES = {
    HEADER_DROPDOWN: 900,
    HEADER: 1000,
    MODAL_A: 100,
    MODAB_B: 300,
    ALERT_SNACKBAR: 9999,
}

앱 내에서 사용한 모든 z-index를 한 곳에서 확인할 수 있어 가독성이 좋아진다.

2-3. 용어 정리

아쉬운 예시

if (accessType === 'kakao') {
    return Array.from(data)
        .filter(item => !(item.sugar > 5000))
        .sort((a, b) => a.energy - b.energy);
}

동작 과정을 이해하는 데 문제는 없지만 다른 개발자가 의도를 이해하지 못할 수도 있지 않을까?

개선한 예시

const shouldDisplay = accessType === 'kakao'; // 보여줘야 할지 말지의 기준이었다.

if (shouldDisplay) {
    const foods = Array.from(data); // data는 사실 foods 였다.
    const healthyFoods = foods.filter(menu => {
        const isUnhealthy = food.sugar > 5000; // 5000은 사실 건강함의 척도였다는 것을 삽입
        return !isUnhealthy;
    })

    const calorieOrderedFoods = healthyFoods.sort((a, b) => a.energy - b.energy);
    return calorieOrderedFoods;
}

코드는 길어졌을 지라도 용어를 정리하듯 의도를 명확히 함으로써 좀 더 가독성이 좋아졌다.

2-4. 각주

이 부분은 HOC 기법을 사용해서 설명해주셨는데 아직 HOC를 잘 사용하지 못해 감이 오질 않는다. 나중에 다시 볼 예정이다.

'섬세한 ISFP의 코드 가독성 개선 경험' 다시보기 https://www.youtube.com/watch?v=emGLxi0LvNI

이 글은 '모던 자바스크립트 DeepDive'를 참고하여 작성되었습니다.

9.1 타입 변환이란?

명시적 타입 변환

자바스크립트 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 이처럼 개발자가 의도적으로 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라고 한다.

예시: toString()

암묵적 타입 변환

반대로 개발자의 의도와 상관없이 표현식을 평가하는 도중 자바스크립트 엔진에 의해 암묵적으로 타입이 변환될 때도 있는데 이를 암묵적 타입 변환 혹은 타입 강제 변환 이라고 한다.

예시: typeof(10 + '') // string

명시적 타입 변환과 암묵적 타입 변환 모두 기존 원시값을 변경하는 것은 아니다. 타입 변환이란 기존 원시값을 사용해 다른 타입의 원시 값을 생성하는 것이다.

• x = 10, str = x.toString()일 때 x 변수의 값은 변경되지 않는다.
• x = 10일 때, x + ''의 결과로 생성된 '10'은 x에 재할당 되지 않는다.
• 즉, 암묵적 타입 변환은 표현식을 평가하기 위해 피연산자 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 단 한 번 사용하고 버린다.

9.2 암묵적 타입 변환

자바스크립트는 가급적 에러를 발생시키지 않도록 암묵적 타입 변환을 통해 표현식을 평가한다. 암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환한다.

9.2.1 문자열 타입으로 변환

+연산자는 피연산자 중 하나 이상이 문자열이라면 문자열 연결 연산자로 동작한다. 따라서 문자열 연결 연산자의 모든 피연산자는 코드의 문맥상 모두 문자열 타입이어야 한다. 따라서, 자바스크립트 엔진은 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환한다.

9.2.2 숫자 타입으로 변환

산술연산자의 역할은 숫자 값을 만드는 것이고 비교 연산자의 역할은 불리언 값을 만드는 것이다. 즉, 산술연산자와 비교연산자의 모든 피연산자는 코드 문맥상 모두 숫자 타입이야 하므로 자바스크립트 엔진은 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다. 이 때, 산술 연산자의 경우 피연산자를 암묵적 타입 변환할 수 없는 경우에 산술 연산을 수행할 수 없기 때문에 평가결과가 NaN이 된다. + 단항 연산자는 피연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환을 수행한다.

• 객체, 빈 배열이 아닌 배열, undefined는 변환되지 않는다. → NaN을 반환

9.2.3 불리언 타입으로 변환

if 문이나 for 문, 삼항 조건 연산자의 조건식은 불리언 값으로 평가되어야 하는 표현식이다. 자바스크립트 엔진은 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환한다.

자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값 또는 Falsy 값 으로 구분한다.

Falsy 값

• false, undefined, null, 0, -0, NaN, ''

Truthy 값

• Falsy 값 외의 모든 값

9.3 명시적 타입 변환

명시적으로 타입을 변경하는 방법은 다양하다.

1. 표준 빌트인 생성자 함수를 new 연산자 없이 호출하는 방법
2. 빌트인 메서드를 사용하는 방법
3. 암묵적 타입 변환을 이용하는 방법

9.3.1 문자열 타입으로 변환

1. String 생성자 함수를 new 연산자 없이 호출

String(1); // '1'
String(Infinity); // 'Infinity'
String(true); // 'true'

2. Object.prototype.toString 메서드 사용

(1).toString(); // '1'
(NaN).toString(); // 'NaN'
(Infinity).toString(); // 'Infinity'

3. 문자열 연결 연산자를 이용

   1 + ''; // '1'
   NaN + ''; // 'NaN'
   Infinity + ''; // 'Infinity'

9.3.2 숫자 타입으로 변환

1. Number 생성자 함수를 new 연산자 없이 호출

Number('10.53');
Number(ture);

2. parseInt, parseFloat 함수를 사용(문자열만 가능)

parseInt('0');
parseInt('-1');
parseFloat('10.53');

3. +단항 연산자 이용 ```javascript

+'0'; // 0 +'-1'; // -1 +true; // 1 +false; // 0

4. *산술 연산자 이용
```javascript
'0' * 1;
'-1' * 1;
'10.53' * 1;
true * 1;

9.3.3 불리언 타입으로 변환

1. Boolean 생성자 함수를 new 연산자 없이 호출

Boolean([]); // true
Boolean({}); // true
Boolean(undefined); // false
Boolean(0); // false

2. ! 부정 논리 연산자를 두번 사용

!!{}; // true
!![]; // true
!!null; // false
!!'x'; // true
!!Infinity; // true
!!0; // false

9.4 단축 평가

9.4.1 논리 연산자를 사용한 단축 평가

논리합(||)과 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.

논리곱(&&) 연산자

• 두 개의 피연산자가 모두 true로 평가될 때 true를 반환
• 좌항에서 우항으로 평가가 진행

논리합(||) 연산자

• 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다.
• 좌항에서 우항으로 평가 진행

위 논리곱과 논리합과 같이 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환하는 것을 단축 평가라고 한다. 단축 평가는 표현식을 평가하는 도중 결과가 확정된 경우 나머지 평가 과정을 생략한다.

단축 평가를 사용하면 if문을 대신할 수 있다.

var done = true;
var message = '';

if (done) message = '완료';

var message = done && '완료';

var done = false;
var message = '';

if (!done) message = '미완료';

message = done || '미완료';

단축평가가 유용하게 사용되는 경우

1. 객체가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때

예시

elem && elem.value

elem이 null이어도 에러를 뱉어내지 않는다.

2. 함수 매개변수에 기본값을 설정할 때

예시

// 단축 평가 사용
function Temp(str) {
    str = str || ""
    return str.length
}

// es6 매개변수 기본값 설정
function Temp(str = "") {
    return str.length
}

9.4.2 옵셔널 체이닝 연선자

옵셔널 체이닝 연산자(?.)는 좌항의 피연산자가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용하다. 옵셔널 체이닝 연산자가 도입되기 전에는 논리곱 연산자를 사용했으나 약간의 차이가 있다.

var str1 = "";

var length1 = str1 && str1.length;

console.log(length1); // ""

var str2 = "";

var length2 = str2?.length;

console.log(length2);

length1의 경우 논리곱 연산자를 이용한 결과로, Falsy 값으로 평가됐기 때문에 좌항의 피연산자를 그대로 반환했다. 그러나 length2의 경우 옵셔널 체이닝 연산자를 이용한 결과로, Falsy 값일지라도 그 값이 null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어나간다.

9.4.3 null 병합 연산자

null 병합 연산자(??)는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고 그렇지 않으면 좌항의 피연산자를 반환한다. null 병합 연산자는 변수에 기본값을 설정할 때 유용하다. null 병합 연산자가 도입되기 전에는 논리합 연산자를 사용했으나 약간의 차이가 있다.

var foo1 = '' ?? 'default string';
console.log(foo1); // ''


var foo2 = '' || 'default string';
console.log(foo2); // 'default string';

foo1의 경우 null 병합 연산자를 이용한 결과로, Falsy 값일지라도 그 값이 null 또는 undefined가 아니면 좌항의 피연산자를 그대로 반환한다. 그러나, foo2는 논리곱 연산자를 이용한 결과로, Falsy 값으로 평가됐기 때문에 우항의 피연산자를 그대로 반환했다. 만약 기본값으로 ""나 0을 설정했다면 ??를 사용하는 것이 좋다.

이 글은 '모던 자바스크립트 DeepDive'를 참고하여 작성되었습니다.

8.1 블록문

블록문은 0개 이상의 문을 중괄호로 묶은 것이다. 자바스크립트는 블록문을 하나의 실행 단위로 취급한다. 블록문은 자체 종결성을 갖기 때문에 블록문 끝에는 세미콜론을 붙이지 않는다.

8.2 조건문

조건문은 주어진 조건식의 평가 결과에 따라 코드 블록의 실행을 결정한다.

8.2.1 if ... else 문

조건식의 평가 결과가 true일 경우 if 문의 코드 블록이, false일 경우 else 문의 코드 블록이 실행된다. 실행될 코드 블록을 늘리고 싶으면 else if 문을 사용하고, else if 문과 else 문은 옵션이다.

if 문의 조건식은 불리언 값으로 평가되어야 한다. 불리언 값이 아니더라도 암묵적으로 불리언 값으로 강제 변환된다.

대부분의 if ... else 문은 삼항 조건 연산자로 바꿔 쓸 수 있다.

if (x % 2) {
    result = '홀수',
} else {
    result = '짝수',
}

var result = x % 2 ? '홀수' : '짝수';

var kind = num ? (num > 0 ? '양수' : '음수') : '영';

값으로 사용할 수 없는 if ... else 문과 달리 삼항 조건 연산자는 값으로 평가되기 때문에 변수에 할당할 수 있다.

8.2.2 switch 문

switch 문은 주어진 표현식을 평가해 그 값과 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮긴다. switch 문의 표현식과 일치하는 case 문이 없다면 default 문으로 이동한다. default 문은 선택사항이다.

if ... else 문의 조건식은 불리언 값으로 평가되어야 하지만, switch 문의 표현식은 문자열이나 숫자 값인 경우가 많다.

올바른 switch 문은 case 뒤에 break 문을 작성해 주어야 한다. break 문을 사용하지 않으면 실행 흐름이 다음 case 문으로 이동하기 때문이다(폴 스루). default 문은 맨 마지막에 위치하므로 별도로 break 문이 필요하지 않다. break 문을 생략한 폴스루가 유용한 경우도 있다.

예시

switch (month) {
    case 1: case 3: case 5: case 7: case 8: case 10: case 12:
        days = 31;
        break;

    case 4: case 6: case 9: case 11:
        days = 30;
        break;

if ... else 문으로 해결할 수 있다면 if ... else 문을 사용하는 편이 좋지만 조건이 너무 많아서 switch 문을 사용했을 때 가독성이 더 좋다면 switch 문을 사용하는 편이 좋다.

8.3 반복문

반복문은 조건식의 평가 결과가 참인 경우 코드 블록을 실행하고 조건식이 거짓이 될 때까지 반복한다.

8.3.1 for 문

예시

// for (변수 선언문이나 할당문; 조건식; 증감식) {
//    실행될 문
//}

for (var i = 0; i < 2; i++) {
    console.log(i);
}

• 변수 선언문(var i = 0;)은 한 번만 실행된다.
• 조건식을 실행 후 코드 블록이 실행된다.
• 코드 블록 실행이 종료되면 증감식이 실행 되고
• 증감식 실행이 종료되면 조건식이 실행된다.(변수 선언문 실행 X)
• 조건식 평가 결과가 false 일 경우 종료된다.

for 문의 변수 선언문, 조건식, 증감식은 모두 옵션이라서 반드시 사용할 필요는 없지만 어떤 식도 사용하지 않으면 무한루프가 된다.

8.3.2 while 문

while 문은 주어진 조건식의 평가 결과가 참이면 코드 블록을 반복해서 실행한다. for 문은 반복 횟수가 명확할 때 주로 사용하고, while 문은 반복 횟수가 불명확할 때 주로 사용한다. while 문도 조건문의 평가 결과가 거짓이 되면 코드 블록을 종료한다.

조건식의 평가 결과가 언제나 참이면 무한 루프가 되지만 코드 블록 내에 if 문으로 탈출 조건을 만들고 break 문을 사용해 코드 블록을 탈출할 수 있다.

8.3.3 do ... while 문

조건식을 먼저 평가하는 while 문과 달리 do ... while 문은 코드 블록을 먼저 실행하고 조건식을 평가한다. 따라서 코드 블록이 무조건 한 번 이상 실행된다.

do {
    console.log(count);
    count ++;
} while (count < 3);

8.4 break 문

break 문은 (레이블 문, 반복문, switch 문의) 코드 블록을 탈출하여 불필요한 실행이나 반복을 회피할 수 있도록 한다. 그 외에 사용할 경우 SyntaxError가 발생한다.

레이블문

레이블문은 프로그램 실행 순서를 제어하는 데 사용한다.
레이블문은 중첩된 for문 외부로 탈출할 때 용이하긴 하지만 프로그램 흐름이 복잡해지기 때문에 일반적으로는 권장되지 않는다.

foo: {
    console.log(1);
       break foo; // foo 레이블 블록문 탈출
       console.log(2);
}

8.5 continue 문

continue문은 반복문의 코드 블록 실행을 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다. break 문처럼 반복문을 탈출하지는 않는다.

이 글은 '모던 자바스크립트 DeepDive'를 참고하여 작성되었습니다.

7.1 산술 연산자

수학적 계산을 수행해 새로운 값을 만들고, 불가능할 경우 NaN 반환

7.1.1 이항 산술 연산자

• 피연산자의 값을 변경하는 부수 효과 X

7.1.2 단항 산술 연산자

• 1개의 피연산자를 산술 연산하여 숫자 값을 만듦
• 증가, 감소(++ / --) 연산자는 부수효과 ㅇ(피연산자의 값을 변경하는 암묵적 할당)

증가/감소 연산자

1. 전위 증가/감소 연산자

• 먼저 피연산자 값을 증가/감소
• 다른 연산을 수행

2. 후위 증가/감소 연산자

• 다른 연산을 수행 후
• 피연산자 값을 증가/감소

예시

var x = 5, result;

// 후위
// result에 x(5) 할당
// x += 1
result = x++;
console.log(result, x); // 5 6

// 전위
// x += 1
// result에 x(7) 할당
result = ++x;
console.log(result, x); // 7 7

+ 단항 연산자

• 피연산자에 어떠한 효과도 X
• 숫자 타입이 아닌 피연산자에 사용할 경우 피연산자를 숫자 타입으로 변환한 값을 생성해 반환(마찬가지로 부수효과 X)

- 단항 연산자

• 피연산자의 부호를 반전한 값을 반환
• 숫자 타입이 아닌 피연산자에 사용할 경우 피연산자를 숫자 타입으로 변환한 값을 생성해 반환(마찬가지로 부수효과 X)

7.1.3 문자열 연결 연산자

• 연산자는 피연산자 중 하나 이상이 문자열일 경우 문자열 연결 연산자로 동작한다.

예시

'1' + 2 // '12'

1 + true // 2
1 + false // 1
1 + null // 1

+undefined // NaN
1 + undefined // NaN

7.2 할당 연산자

• 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.
• 할당 연산자는 좌항의 변수에 값을 할당하므로 부수 효과 ㅇ

할당문은 표현식일까?

할당문 x = 10; 은 10으로 평가되며, 할당문을 다른 변수에 할당할 수 있다.
즉, 할당문은 값으로 평가되는 표현식인 문이다.

var a, b, c;


// 할당문: 우항의 평가 결과를 좌항에 할당
// c = 0의 평가 결과인 0을 b에
// a에도 마찬가지로 할당
// 즉, 표현식이다.
a = b = c = 0;

console.log(a, b, c); 0 0 0

7.3 비교 연산자

좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다.

7.3.1 동등/일치 비교 연산자

동등 비교 연산자와 일치 비교 연산자는 비교하는 엄격성의 정도에 차이가 있다.

1. 동등 비교 연산자(==)

• 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교
• 타입은 다르더라도 같은 값이라면 true를 반환
• 예측하기 어려운 결과를 만들어내므로 사용하지 않는 것이 권장된다.

2. 일치 비교 연산자(===)

• 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환
• 주의할 점
  • NaN은 자기 자신과 일치하지 않는 유일한 값이다.
  • NaN인지 조사하려면 Number.isNaN을 사용
• 유사한 메서드: Object.is

7.3.2 대소 관계 비교 연산자

크기를 비교하여 불리언 값을 반환한다.

7.4 삼항 조건 연산자

• 조건식 ? 조건식 true일 때 반환할 값 : 조건식이 false일 때 반환할 값
• if ...else 문과 유사하지만 삼항 조건 연산자 표현식은 값처럼 사용할 수 있다는 점이 다르다.
• 즉, 삼항 조건 연산자 표현식은 값처럼 다른 표현식의 일부가 될 수 있다.

7.5 논리 연산자

논리 부정 연산자(!)

• 언제나 불리언 값을 반환한다.
• 단, 피연산자가 불리언 값일 필요는 없다.

논리합, 논리곱 연산자(||, &&)

• 2개의 피연산자 중 어느 한쪽으로 평가받는다.

7.6 쉼표 연산자

var x, y, z;

x = 1, y = 2, z = 3; // 3

7.7 그룹 연산자

소괄호로 피연산자를 감싸는 그룹 연산자()는 자신의 피연산자인 표현식을 가장 먼저 평가한다. 따라서, 연산자의 우선순위를 조절하는데 사용할 수 있다.(연산자 우선순위가 가장 높음)

7.8 typeof 연산자

typeof 연산자는 피연산자의 데이터 타입을 문자열(string, number, booldean, undefined, symbol, object, function 중 1개)로 반환한다.

주의할 점

• null 값을 typeof 연산을 했을 때 object를 반환한다.
• 선언하지 않은 식별자에 typeof 연산을 했을 때 참조에러가 아닌 undefined를 반환한다.

7.9 지수 연산자

지수 연산자는 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭제곱하여 숫자 값을 반환한다. Math.pow()의 신버전이다.

7.11 연산자의 부수 효과

부수효과가 있는 연산자: 할당 연산자, 증가/감소 연산자, delete 연산자(객체의 프로퍼티 삭제)

7.12 연산자 우선순위

이 글은 '모던 자바스크립트 DeepDive'를 참고하여 작성되었습니다.

6.1 숫자 타입

• 자바스크립트에는 하나의 숫자 타입만이 존재한다.
• 모든 수를 실수로 처리하며 2진수, 8진수, 16진수를 위한 데이터 타입은 제공하지 않기 때문에 모든 값은 10진수로 해석된다.
• 자바스크립트 숫자 타입은 모든 수를 실수로 처리한다.
• 추가적으로, Infinity, -Infinitay, Nan 이라는 값도 표현할 수 있다.

6.2 문자열 타입

• 문자열은 '', "", `` 으로 텍스트를 감싼다.
• 문자열을 따옴표로 감싸는 이유는 키워드나 식별자와 구분하기 위해서이다.

6.3 템플릿 리터럴

템플릿 리터럴은 백틱(``)을 사용해 표현한다.

6.3.1 멀티라인 문자열

일반적인 문자열 내에서는 줄바꿈이 허용되지 않아서 이스케이프 시퀀스를 사용해야하지만 템플릿 리터럴 내에서는 이스케이프 시퀀스를 사용하지 않고도 줄바꿈 및 공백이 허용된다.

6.3.2 표현식 삽입

${}으로 표현식을 감싸 표현식을 삽입한다. 이 때 표현식 평가 결과가 문자열이 아니더라도 문자열로 타입이 변환되어 삽입된다.

6.4 불리언 타입

true와 false

6.5 undefined 타입

• undefined 타입의 값은 undefined가 유일하다.
• 변수 선언에 의해 확보된 메모리 공간이 첫 할당이 이루어지기 전까지 자바스크립트 엔진이 undefined로 초기화한다.
• 즉, 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값이므로
• 의도적으로 변수에 undefined를 할당하는 것은 권장되지 않음(null 할당 권장)

6.6 null 타입

• null 타입의 값은 null이 유일하다.
• null은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용

6.7 심벌 타입

• 변경 불가능한 원시 타입 값
• 다른 값과 중복되지 않는 유일무이 값이라 주로 객체의 유일한 프로퍼티 키를 만들기 위해 사용
• Symbol 함수를 호출해 생성

6.8 객체 타입

자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든 것은 객체이다.

6.9 데이터 타입의 필요성

6.9.1 데이터 타입에 의한 메모리 공간의 확보와 참조

자바스크립트 엔진은 데이터 타입에 따라 정해진 크기의 메모리 공간을 확보한다. 즉, 데이터 타입에 따라 확보해야 할 메모리 공간의 크기가 결정된다. 또한 값을 참조 하기 위해서는 읽어들여야 할 메모리 공간의 크기를 알아야 한다. 예를 들어, score 변수에 숫자가 할당되어 있다면 자바스크립트는 score 변수를 참조할 때 숫자 타입, 8바이트 단위로 읽어들인다.

6.9.2 데이터 타입에 의한 값의 해석

모든 값은 데이터 타입을 가지며, 메모리에 2진수로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석되기 때문에 score 변수를 참조하면 메모리 공간의 주소에서 읽어들인 2진수를 숫자로 해석한다.

6.10 동적 타이핑

6.10.1 동적 타입 언어와 정적 타입 언어

정적 타입 언어

• 변수를 선언할 때 변수의 데이터 타입을 사전에 선언(명시적 타입 선언)
• 변수의 타입을 변경할 수 없다.
• 선언한 타입에 맞는 값만 할당 가능하다.
• 컴파일 시점에 타입 체크를 수행해 타입 체크를 통과하지 못하면 프로그램 실행을 막는다.

자바스크립트는 변수를 선언할 때 타입을 선언하지 않으며 어떠한 데이터 타입의 값이라도 자유롭게 할당할 수 있다. 자바스크립트는 값을 할당하는 시점에 변수의 타입이 동적으로 결정되고 변수의 타입을 자유롭게 변경할 수 있다.

즉, 자바스크립트는 동적 타입 언어로 동적 타이핑(할당에 의해 타입이 결정 & 재할당에 의해 타입 동적으로 변경)이라는 특징을 가진다.

6.10.2 동적 타입 언어와 변수

동적 타입 언어는 편리하긴 하지만 변수 값을 추적하기 어렵다든가, 변수 값에 의해 타입이 변경된다든가 등의 위험이 존재한다.

변수 사용 시 주의 사항

• 변수는 필요한 경우에만 사용
• 변수 스코프를 최대한 좁게
• 전역 변수 사용 자제
• 변수보다는 상수 사용
• 변수 이름은 명확하게

ECMAScript 사양은 문자열과 숫자 타입 외의 데이터 타입을 명시적으로 규정하고 있지 않다. 따라서 문자열과 숫자 타입을 제외한 메모리 공간의 크기는 자바스크립트 엔진 제조사의 구현에 따라 다를 수 있다.

이 글은 '모던 자바스크립트 DeepDive'를 참고하여 작성되었습니다.

5.1 값

값은 식이 평가되어 생성된 결과를 말한다. 변수는 값을 저장하기 위해 확보한 메모리 공간 자체 혹은 메모리 공간을 식별하기 위해 붙인 이름이므로, 변수에 할당되는 것은 값이다.

5.2 리터럴

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법이다. 자바스크립트 엔진은 런타임에 리터럴을 평가해 값을 생성한다.

예시

• 객체 리터럴: {name: 'Park', address: 'Seoul'}
• 배열 리터럴: [1, 2, 3]
• 함수 리터럴: function () {}

5.3 표현식

표현식은 값으로 평가될 수 있는 문이다. 즉, 표현식이 평가되면 값을 생성하거나 기존 값을 참조한다.

예시

var score = 100; // 1

var score = 50 + 50; // 2

score; // 3

• 1에서 100은 리터럴이다. 리터럴 100은 자바스크립트 엔진에 의해 평가되어 값을 생성하므로 그 자체로 표현식이다.
• 2에서 50+50은 리터럴과 연산자로 이루어져 있다. 50+50도 평가되어 값 100을 생성하므로 표현식이다.
• 3에서 score를 참조하면 변수 값으로 평가된다. 식별자 참조는 값을 생성하지는 않지만 값으로 평가되므로 표현식이다.
• 즉, 값으로 평가될 수 있으면 모두 표현식이다.

수학에서 1+2가 3과 동치인 것처럼 표현식 1+2는 값 3과 동치이다. 따라서 표현식은 값처럼 사용할 수 있고, 값이 위치할 수 있는 자리에는 표현식도 위치할 수 있다.

5.4 문

문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위이다. 문의 집합이 프로그램이고, 문을 작성하고 나열하는 것이 프로그래밍이다.

5.5 세미콜론과 세미콜론 자동 삽입 기능

세미콜론은 문의 종료를 나타낸다. 자바스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행한다. 세미콜론은 옵션이라 생략 가능하다. 자바스크립트 엔진이 ASI(세미콜론 자동 삽입 기능)을 암묵적으로 수행하기 때문이다.

세미콜론을 붙이지 않는 경우

• 0개 이상의 문을 중괄호로 묶은 코드 블록
• 예: if 문, for 문, 함수 등
• 코드 블록은 문의 종료를 의미하는 자체 종결성을 갖기 때문

5.6 표현식인 문과 표현식이 아닌 문

표현식과 표현식이 아닌 문을 구별하는 가장 쉬운 방법은 변수에 할당하는 것이다. 표현식은 값으로 평가될 수 있는 문이므로 변수에 할당할 수 있기 때문이다.

이런 점들을 염두에 두고 일하다 보면 일을 대하는 태도나 의사 결정에 있어 좀 더 신중하게 임할 수 있겠다는 생각이 들어 정리해보았습니다.

1. 자신과 팀의 목표 설정에 어떻게 접근하는지

2. 문제 해결 및 의사 결정에 어떻게 접근하는지

3. 목표 달성을 위해 도전이나 장애물을 극복해야 했던 경우의 예시

4. 빡빡한 기한에 맞춰 일하거나 고압적인 상황을 처리해야 했던 경우의 예시

5. 기한을 맞추거나 목표를 초과 달성하기 위해, 혹은 그 이상을 달성한 경우의 예시

6. 프로젝트를 완료하기 위해 변화하는 상황이나 요구 사항에 적응해야 했던 경우 / 새로운 것을 배우거나 새로운 기술을 습득해야 했던 경우의 예시

7. 어렵거나 비협조적인 동료나 팀원을 상대해야 했던 상황

8. 다른 사람과 효과적으로 의사소통하기 위해 의사소통 기술을 사용해야 했던 경우의 예시

9. 프로젝트를 완료하기 위해 팀과 협력해야 했던 경우를 설명

10. 도전이나 좌절에 직면했을 때 어떻게 의욕을 유지하고 긍정적인 태도를 유지하는지

11. 긍정적이고 부정적인 피드백을 어떻게 처리하는지

12. 어려운 결정에 직면했을 때 그 결정을 내리기 위해 어떤 노력을 기울였는지

13. 직접적인 감독 없이 주도권을 잡고 상황을 처리해야 했던 경우의 예시

14. 언제 리더십 역할을 맡았고 어떻게 대처하였는지

이 글은 황민호님의 글을 참고하여 작성되었습니다. 황민호님의 면접자가 성실한지 알 수 있는 인터뷰 질문 10가지

이 글의 '모던 자바스크립트 DeepDive'를 인용하여 작성되었습니다.

4.1 변수란 무엇인가? 왜 필요한가?

컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다.

메모리

• 메모리는 데이터를 저장할 수 있는 메모리 셀(1바이트)의 집합체로
• 컴퓨터는 1바이트 단위로 데이터를 저장하고 읽어들인다.
• 이 때, 각 셀은 고유의 메모리 주소를 가진다.

하지만, 자바스크립트는 개발자가 메모리 주소를 통해 값에 직접 접근하는 것을 허용하지 않으며, 값이 저장될 메모리 주소는 코드가 실행될 때 메모리 상황에 따라 임의로 결정된다. 이러한 이유로 프로그래밍 언어는 변수라는 메커니즘을 제공해 기억하고 싶은 값을 메모리에 저장, 저장된 값을 읽어 들여 재사용 할 수 있도록 한다.

변수

• 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다.
• 값의 위치를 가리킨다고 보면 된다.(값을 저장하고 참조)
• 변수는 컴파일러나 인터프리터에 의해 메모리 공간의 주소로 치환되어 실행되기 때문에 개발자가 직접 메모리 주소에 접근할 필요 없이 안전하게 접근 할 수 있다.
• 변수 이름: 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
• 변수 값: 변수에 저장된 값
• 할당: 변수에 값을 저장 / 참조: 변수에 저장된 값을 불러 읽어오는 것

4.2 식별자

식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름으로 변수 이름을 식별자라고도 한다. 식별자는 메모리 공간에 저장된 어떤 값을 식별해내기 위해 메모리 주소를 기억해야 한다.

즉, 식별자는 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺으며, 이 매핑 정보도 메모리에 저장된다. 다시 얘기해, 식별자는 값이 아니라 메모리 주소를 기억하고 있다.(식별자는 메모리 주소에 붙인 이름이나 마찬가지이다.)

변수, 함수, 클래스 등은 전부 식별자로, 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 전부 식별자이다.

4.3 변수 선언

변수 선언이란 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해 값을 저장할 수 있도록 하는 것(=변수를 생성)이다. 자바스크립트 엔진은 변수 선언을 2단계에 걸쳐서 수행한다.

1. 선언 단계: 변수 이름을 등록
2. 초기화 단계: 메모리 공간을 확보하고 undefined를 할당해 초기화(변수 선언 이후 최초로 값을 할당하는 것)

예시

var score;

• 위 변수 선언문은 변수 이름을 등록하고 값을 저장할 메모리 공간을 확보한다.
• 변수를 선언한 이후, 변수에 값을 할당하지는 않았으나
• 확보된 메모리 공간엔 암묵적으로 undefined가 할당되어 초기화된다.
• var 키워드를 사용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행되어
• 선언 단계를 통해 score를 변수 이름으로 등록하고, 초기화 단계를 통해 undefined를 할당했다.

var 키워드로 선언한 변수는 어떤 값을 할당하지 않아도 undefined라는 값을 갖는다. 초기화 단계를 거치지 않으면 이전에 다른 애플리케이션이 사용했던 값이 남아 있을 수 있기 때문에, 값을 할당하지 않아도 undefined로 초기화를 수행해 이런 위험으로부터 안전하도록 한다.

4.4 변수 선언의 실행 시점과 변수 호이스팅

자바스크립트 엔진은 소스코드 실행에 앞서 소스코드 평가 과정을 거친다. 이 평가 과정에서 자바스크립트 엔진은 모든 선언문을 찾아내어 먼저 실행한다. 따라서 소스코드 내 변수 선언 위치에 상관없이 어디서든 변수를 참조할 수 있다.

예시

console.log(score); // undefined

var score;

• 참조 에러가 발생하지 않고 undefined가 출력되었다.

4.5 값의 할당

자바스크립트 엔진은 변수 선언과 값의 할당을 하나의 문으로 단축 표현해도 변수 선언과 값의 할당을 2개의 문으로 나누어 각각 실행한다. 이 때, 변수 선언은 런타임 이전에 실행되고 값의 할당은 런타임에 실행된다.

예시

console.log(score); // undefined

var score = 80;

console.log(score); // 80

• 아래 그림과 같이, 이전 값 undefined가 저장되어 있던 메모리 공간을 지우고
• 그 메모리 공간에 80을 할당하는 것이 아니라
• 새로운 공간을 확보하고 80을 저장한다.

4.6 값의 재할당

예시

var score = 80;
score = 90;

• 현재 score 변수의 값은 90
• 이전 값인 undefined와 80은 어떤 식별자와도 연결되어 있지 않다.
• 불필요한 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제된다.

4.7 식별자 네이밍 규칙

네이밍 컨벤션

• 카멜 케이스
  • 변수나 함수의 이름에 사용
  • firstName
• 파스칼 케이스
  • 생성자 함수, 클래스 이름에 사용
  • FirstName
• 스네이크 케이스
  • first_name
• 헝가리언 케이스
  • strFirstName: type + identifier
  • $elem: DOM node