모듈을 사용하다 보면 코드가 많아져서 가독성이 떨어질 수가 있다.

그럴 때 코드를 폴더와 파일로 나누면 가독성과 유지보수가 편리해진다.

대신 import와 export로 파일과 파일을 연결시켜야 한다.

오늘은 import와 export에 대해 알아보겠다.

어떤 파일을 import 하려면 대상 파일에 export 선언이 되어있어야 한다.

우리가 흔히 사용하는 express 라이브러리에도 export 선언이 되어있다.

export 하는 방법은 두 가지가 있다.

바로 export와 export default이다.

export를 사용한 예제이다.

// export.js

export const hi = () => {
  console.log("hi");
};

export const hello = () => {
  console.log("hello");
};

export.js 파일에 hi와 hello를 출력하는 함수 두 개를 만들었다.

이렇게 함수가 두 개 이상일 때에는 함수에 export를 붙여서 사용해야 한다.

두 개의 함수를 import 하는 방법이다.

import { hi, hello } from "./export";

hi();
hello();

import 자리에 함수명을 적고 from 자리에 export 파일의 상대 경로를 적어준다.

두 파일이 같은 자리에 있기 때문에 ./ 를 사용했다.

확장자명은 생략해도 된다.

실행해보면 hi와 hello가 출력되는 것을 확인할 수 있다.

export default를 사용한 예제이다.

// export.js

const hi = () => {
  console.log("hi");
};

export default hi;

export default는 export 할 함수가 하나밖에 없을 때 사용한다.

하나의 파일에 export default를  한번 사용할 수 있으므로

가독성이 높아진다는 장점이 있다.

export default로 내보낸 함수를 import 하는 방법이다.

import hi from "./export";

hi();

default를 붙여서 모듈을 내보내면 import 할 때 중괄호를 생략할 수 있다.

그리고 내보낸 함수가 하나밖에 없어서

import 자리에 굳이 그 함수의 이름을 적지 않아도 된다.

hi 대신 bye라고 적어도 상관없다.

import bye from "./export";

bye();

실행해보면 hi가 출력되는 것을 확인할 수 있다.

자바스크립트에서 객체나 배열을

복사하는 방법에 대해 알아보겠습니다.

복사에는 얕은 복사와

깊은 복사(Deep Copy)가 있습니다.

얕은 복사(Shallow Copy)란?

과일을 예로 들어보겠습니다.

See the Pen by jisupark123 (@jisupark123) on CodePen.

fruitsA를 fruitsB에 복사하고

fruitsB에만 "melon"을 집어넣었는데 

출력 결과 두 배열 모두 바뀐 것을 볼 수 있습니다.

우리는 단순히 값을 복사 했다고 생각하지만 컴퓨터의 내부를 들여다보면 다릅니다.

fruitsB = fruitsA 라고 입력하면 자바스크립트는 단순히 값을 복사하지 않고

fruitsA의 메모리 주소 ex)100 를 fruitsB와 공유하게 됩니다.

이렇게 하면 메모리를 절약할 수 있기 때문이죠.

그래서 fruitsB의 값을 바꾸면 같은 메모리 주소를 공유하는 fruitsA의 값도 바뀌게 됩니다.

이렇게 이름만 같은 변수로 복사하는 것을 얕은 복사(참조 복사)라고 부릅니다.

깊은 복사(Deep Copy)란?

깊은 복사는 얕은 복사의 반대말입니다.

깊은 복사를 하게 되면 복사한 두 배열이 완전히 독립적으로 작동하게 됩니다.

See the Pen by jisupark123 (@jisupark123) on CodePen.

처음 코드와의 차이점은

const fruitsB = fruitsA

에서

const fruitsB = [...fruitsA]​

로 바뀐 것입니다.

전개 연산자(...)는 말 그대로 배열, 객체의 요소를

코드 내에서 전개시키는 역할을 합니다.

위의 코드에서 ...fruitsA 는

fruitsA 에서 [ ] 를 뺀 "apple", "banana" 와 같습니다.

아래 코드는 전개 연산자를 응용하는 방법입니다.

See the Pen by jisupark123 (@jisupark123) on CodePen.

전개 연산자가 쓰여진 자리에 배열이 전개되는 것뿐이므로

이런 식으로 응용할 수도 있습니다.