.require과 import의 차이점 / 배열 또는 객체를 const로 선언 후 요소나 속성을 추가할 수 있는 이유

Javascript

.require과 import의 차이점 / 배열 또는 객체를 const로 선언 후 요소나 속성을 추가할 수 있는 이유

hyo.loui 2023. 4. 3. 14:58

❤️‍🔥TIL : Today I Learned

require와 import의 차이점,
배열, 객체를 const로 선언 후 요소나 속성을 추가할 수 있는 이유

.require와 import의 차이점과 상황 예시

require: CommonJS 키워드. NodeJS가 채택
- CommonJS: 자바스크립트 언어의 활동 영역을 확장하기 위해 조직된 그룹
- module.exports 객체에 모듈 전체를 내보내고 require 를 통해 모듈을 불러오는 방식 → 불필요한 모듈 로드 가능성

require : 가져오기
exports : 내보내기
module.exports : 내보내기

import: ES6 키워드
```
import : 가져오기
export : 내보내기
export defaults : 내보내기
```
- 파일 시작 부분에서만 호출 가능
- 모듈 내 정의된 특정 부분만을 불러올 수 있음 → require 에 비해 성능 우수, 메모리 절약

const example = require("example");
// 외부 파일이나 라이브러리를 불러오는 작업을 수행하는 것은 동일
import example from "example";
// import 키워드 사용하여 명시적으로 모듈을 불러옴

import 키워드의 한계 - <script> 태그 사용 브라우저 환경, NodeJS 환경 → 위와 같이 ES6 사양을 지원하지 않는 환경, Babel과 같은 인터프리터가 없을 때 require 사용
- Babel: ES6코드 변환 도구

결론

- require는 node js에서 사용되고 있는 CommonJS 키워드이고,

- import는 es6에서 새롭게 도입된 키워드입니다.

- 다른 파일(모듈)의 코드를 불러온다는 동일한 목적을 가지고 있지만 requier는 exports 변수의 속성으로 내보낼 함수를 세팅해야 하고 모듈 전체를 불러옵니다. import 와 export는 es6사양을 지원하는 환경에서 동작하며, 모듈 내 필요한 부분만 불러올 수 있습니다.

배열, 객체를 const로 선언 후 요소나 속성을 추가할 수 있는 이유

const 키워드: 변수의 재선언 및 재할당 불가 (배열, 객체 이외)
- push, pop: 재할당/재선언이 아님

const arr = [1,2,3]
arr.pop()
arr[1] = 5 // [1,5]

배열, 객체는 참조값을 저장하기 때문에 가능 → 메모리 주소를 할당
- const 키워드로 배열, 객체 선언 → 배열의 포인터를 지정
- push, pop 등의 메소드는 포인터를 변경하는 것이 아닌 메모리에 접근하여 가리키고 있는 배열, 객체를 수정하는 것

결론

- 배열과 객체는 메모리에 할당될 때 원시타입이 아닌 참조타입으로 데이터의 주소값이 할당 되게 됩니다.

그래서, 가변값을 갖게 되고 해당주소의 영역이 별도로 존재하여 요소는 변할 수 있습니다.

배열과 객체는 참조값을 저장하기 때문에 요소를 컨트롤할 수 있고, push pop등의 메서드는 포인터를 변경하는 것이 아닌 메모리에 접근하여 가리키고있는 배열, 객체의 요소를 수정합니다.

최종 정리

require는 node js에서 사용되고 있는 CommonJS 키워드이고, import는 es6에서 새롭게 도입된 키워드입니다.
두 키워드는 모두 모듈을 불러오는 것은 동일하지만, Bable과 같은 인터프리터가 없을 때 require를 사용하고 import는 특정 부분만 불러올 수 있어 성능이 우수하고 메모리 절약에 효과적입니다.
배열과 객체는 메모리에 할당될 때 원시타입이 아닌 참조타입으로 데이터의 주소값이 할당 되게 됩니다. 그래서, 가변값을 갖게 되고 해당주소의 영역이 별도로 존재하여 요소는 변할 수 있습니다.