[DeepDive] 1장 - 자바스크립트: 데이터 타입과 함수

 

자바스크립트 데이터 타입

원시타입 : 객체가 아닌 모든 타입

• boolean
• number
• string
• null
• undefined
• symbol : 중복되지 않는 고유한 값을 나타내기 위함
• bigint : ES2020에 나온 값으로 기존 number 최대 값보다 더큰 숫자를 저장

객체타입 : 원시타입 이외 모든 타입

• object

 

 

null 과 undefined 차이점은?

• undefined: 선언됐지만 할당되지 않는 값
• null: 명시적으로 비어있음을 나타내는 값

 

 

자바스크립트의 또 다른 비교, Object.is

ES6 에서 등장한 문법으로 두개의 인수를 받으며 동일한지 확인하고 반환하는 메서드이다. 좀 더 개발자가 기대하는 방향으로 동작한다는 점에서 == 와 === 와 다른 차이점이 존재한다.

자세한 차이점은 아래 MDN을 참고하자

Object.is() - JavaScript | MDN

 

왜 Object.is 를 알아야할까? 이유는 리액트에서는 Object.is 로 동등 비교가 먼저 이루어진 후 Object.is 가 수행하지 못할 경우 객체간 얕은 비교가 이루어진다.

여기서 깊은 비교가 아닌 얕은 비교만 하는 이유는 JSX props 는 객체이고 여기서 props 만 비교하면 되기 때문이다.

 

 

 

 

함수

작업을 수행하거나 값을 계산하는 등의 과정 표현이고 하나의 블록으로 감싸서 실행 단위로 만들어놓은 것

 

함수 선언하는방법

1. 함수 선언문

  : 문(statement) 로 표현

function add(a, b) {
	return a + b
}

 

2.  함수 표현식

  : 값을 할당하는 식처럼 표현,일급객체

** 일급객체란 ?

  : 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체로 함수는 다른함수가 될 수 있고, 반환값이 될 수도 있으며, 할당도 가능하다.

const sum = function add(a, b) {
	return a + b
}

 

 

함수 표현식과 선언문의 차이

위 두 방식의 가장 큰 차이는 호이스팅(hositing) 여부이다.
** 호이스팅이란? 함수 선언문이 마치 코드 맨 앞단에 작성된 것 처럼 작동하는 자바스크립트의 특징

hello() // hello 출력 됨

function hello() {
	console.log('hello')
}

hello() // hello 출력 됨

 

결론: 선언문은 호이스팅이 되고 표현식은 호스팅이 안된다

 

여기서 착각하면 안되는 것이 호이스팅이 되고 안되고에서 어느것이 좋다고 하기 어렵다.

다른언어에서와 마찬가지로 함수가 선언되고 이후에 사용하는 것이 익숙하다면 표현식을 사용하고 만약 순서 상관없이 자유롭게 호출하기를 원한다면 함수 선언문으로 작성하면 되기에 프로젝트 상황에 맞게 일관성을 확보하면 된다.

 

 

 

 

화살표 함수

ES6에서 새롭게 추가된 함수 생성 방식으로 최근 많이 사용하는 방식이다. (타이핑이 줄고 보기 편하다)

const add = (a, b) => {
	return a + b
}

const add = (a, b) => a + b

 

주의해야할 점은 기존 함수 생성방식과 차이점이 있는데 constructor 사용할 수 없는점과 arguments 가 존재하지 않는다는점이다

const Car = (name) => {
	this.name = name
}
// constructor 에러 발생
const myCar = new Car('하이')


const hi = () => {
	console.log(arguments)
    // 선언문으로 할시 인자를 출력
}

// arguments 에러 발생
hi(1,2,3)

 

그리고 가장 큰 차이점은 this 바인딩에 존재한다. 

먼저 this란 자신이 속한 객체나 자신이 생성할 인스턴스를 가리키는 값이다. 이 this는 화살표 함수 이전까지는 함수를 정의할 때 결정되는 것이 아니라, 함수를 어떻게 호출되느냐에 따라 동적으로 결정되었다. (매우 혼란스러울 것이다)

 예를들어 함수가 일반 함수로서 호출된다면 그 내부 this 는 전역객체를 가리키게 된다. this가 어떤 값을 가르키는지는 경우의 수가 많으므로 더 자세한 글을 살펴보길 바란다.

 

결국 화살표 함수는 함수 자체의 바인딩을 갖이 않고 화살표 함수 내부 this는 상위 스코프의 this를 그대로 따르게 된다.

화살표 함수의 this는 동적으로 변하지 않아 개발자가 실수하지 않고 의도한대로 개발을 할 수 있다.

 

 

즉시 실행함수

함수를 정의하는 순간 즉시 실행되는 함수를 의미한다. 단 한 번만 호출되고, 다시 호출할 수 없다.

(function (a, b) {
	return a + b
})(10, 24);

 

즉시 실행 함수의 장점은 글로벌 스코프를 오염시키지 않는 독립적인 함수 스코프를 사용할 수 있다는 점이다. 이유는 한번만 실행되고 다른곳에서 접근 불가능하기 때문이다. 이 장점 때문에 리팩토링도 쉽게 진행할 수 있다. 

 

 

고차 함수

함수가 일급 객체라는 특징을 활용하면 함수를 인자로 받거나 새로운 함수를 반환시킬 수 있다. 이런 역할을 하는 함수를 고차함수 라고 한다.

const doubleArray = [1, 2, 3].map(item => item * 2)

console.log(doubledArray) // [2, 4, 6]

 

위와 같은 고차 함수로 리액트의 고차 컴포넌트(Higher Order Component)를 만들 수 있는데 하위 컴포넌트 내부 로직과 분리하여 공통으로 관리되는 상위 컴포넌트를 만들 수도 있다.

 예를 들어서 Todo List를 뿌려주는 컴포넌트가 있고 상위에 에러 처리하는 HOC를 만들어서 에러처리 용 화면을 만들어 줄 수 있다.

 

 

함수를 만들 때 주의 사항

1. 함수의 부수 효과를 최대한 억제해라

  : 최대한 순수 함수로 동일한 인수를 받으면 동일한 결과를 반환해야한다

 

2. 함수는 하나의 역할만 해야한다.

   : 코드가 길어질수록 문제 발생 가능성이 커지고 가독성도 떨어진다. 그렇다고 모든 것을 함수로 둘 경우 깊이가 깊어져 오히려 가독성이 떨어질 수 있다. 항상 보는 사람이 편하게 볼 수 있도록 생각하면 좋다

 

3. 누구나 이해할 수 있는 이름을 붙혀라

  변수와 함수 마찬가지로 너무 짧아서도 안되고 너무 길어서도 안되는 적당한 이름을 붙여야한다. 이건 같이 개발하는 사람과 이해할만한 수준의 협의가 이루어져야한다. 또 boolean값은 has, is, can 등등 조사를 붙히고 함수는 get, set 등등 동사로 시작하는 네이밍 컨벤션을 정하면 좋다.