ES6:라이브러리 의존 관리

의존 : 파일, 코드가 다른 파일이나 코드를 필요로 하는 것. 스프링의 그 의존이다.

 

자바스크립트는 라이브러리, 모듈을 관리하는 방법이 굉장히 불편했다고 한다.

<script src="/app.js" />
<script src="/jquery-min.js/>
// 선언 순서 문제로 app.js 에서는  jquery 를 사용할 수 없음.

<script src="/jquery-min.js/>
<script src="/app.js" />
// 선언 순서로 인해 app.js 에서 jquery를 사용할 수 있게 됨.

단순히 statement 선언 순서 문제이다. 이것을 ES6에서는 import 구문으로 해결한다.

import MyModule from './MyModule.js'// 기본으로 공유하는 모듈을 부릅니다.
import { ModuleName } from './MyModule.js' // 모듈안의 특정 함수, 변수를 참조합니다.
import { ModuleName as RenameModuleName } from '.MyModule.js' // 이름 충돌 이슈가 있을경우 다른 이름으로 할당합니다.
function func () {
	MyModule();
}

export const CONST_VALUE = 0; // 변수 이름을 다른 파일에서 따로 참조할 수 있게합니다.
export class MyClass {} // 클래스 명을 다른 파일에서 참조할 수 있게 합니다.
export default new Func(); // 현재 파일을 다른 파일에서 기본으로 참조할 수 있게 합니다.

 

---

배열함수

ES5 에서 이미 추가된 기능이다. 자주 사용하는 배열함수는 forEach() , map() , reduce() 이다

 

forEach() : 람다의 forEach 와 그냥 같다고 보는게 좋겠다. / 배열 조작

function parse(qs) {
    var queryString = qs.substr(1);
    var chunk = qs.split('&');
    var result = {};
    for(var i = 0; i<chunk.length; i++){
        var parts = chunk[i].split('=');
    var key = parts[0];
    var value = Number.isNaN(parts[1]) ? part[1] : Number(part[1]);
    result[key] = value;
    }
return result;
}


parse("banana=10&apple=20");
{banana: "10", apple: "20"}

//////////////////forEach

function parse(qs) {
    const questString = qs.substr(1);
const chunk = questString.split('&');
let result = {};
chunk.forEach((chunk1) => {
    const parts = chunk1.split('=');
    const key = parts[0];
    const value = Number.isNaN(Number(parts[1])) ? parts[1] : Number(parts[1]);
    result[key] = value;
});
return result;
}

parse("banana=100&apple=10")
{anana: 100, apple: 10}

 /

map() : 불변 변수만 사용시 map 을 쓴다. 이는 새 배열을 만드는 것으로 무결성을 해치지 않는다.

function parse(qs) {
    const questString = qs.substr(1);
const chunk = questString.split('&');

const result = chunk.map((chunk1) => {// 새로운 불변 변수에 넘겨주는 모습.
   const [key ,vaule] = chunk1.split('=');// 배열 전개 연산
    return {key,vaule};//키 값 이름 중복의 경우 단일 선언
});
return result;
}

0: {key: "anana", vaule: "100"}
1: {key: "apple", vaule: "10"}

 

reduce() : 객체로 변환시에 사용 / 배열을 다른 자료형으로 변경시킨다.

function sum(numbers){
    return numbers.reduce((total,num) => {
        return total + num;
    },0);// 마지막 매개변수의 값을 첫 매개값에 등록, 2번째 인자는 배열의 인자
}

sum([1,2,3,4,5,6]);
21

//reduce 의 진정한 사용법은 자료형 변경에 있다.

function parse(qs) {
    const questString = qs.substr(0);
const chunk = questString.split('&');

return chunk.map((chunk) => {
   const [key, value] = chunk.split('=');
    return {key,value} 
}).reduce((result, item) => {//result 는 초기값{}, item은 배열인자.
    result[item.key] = item.value;//생성한 키에 값을 넣음
    return result//리턴시켜 배열에 적용
},{});
}

parse("banana=100&apple=10")
{banana: "100", apple: "10"}