DAY 11 - TIL

import / export / export default

개발하는 어플리케이션의 크기가 커지면 파일을 여러 개로 분리하는데 이때 분리되는 파일 각각을 모듈이라 한다. 

 

export

변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능하다. 

선언부와 export가 떨어져 있어 내보내기가 가능하다. 

// 배열 내보내기
export let name = ['Daniel', 'John', 'Doe']

// 상수 내보내기
export const CAPITAL_CITY = 'Seoul';

// 클래스 내보내기
export class User {
  constructor(name) {
    this.name = name;
  }
}

//함수 내보내기
export function User(name) {
	console.log(name)
}
// ------------------------------------------------------------------------------------------
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; // 두 함수를 내보냄

export default

모듈의 종류

1. 복수의 함수가 있는 라이브러리 형태의 모듈

2. 개체 하나만 선언되어있는 모듈

 

모듈은 export default를 사용하면 해당 모듈엔 개체가 하나만 있다는 사실을 명확히 나타낼 수 있다. 

default를 붙여서 모듈을 내보내면 { } 없이 모듈을 가져올 수 있다. 

export default function User(name) { // export 옆에 'default'를 추가해보았습니다.
 console.log(name);
}

// or

function User(name) {
	console.log(name);
}

export default User;

// -----------------------------------------------------------------------------------
import User from './user.js'; // {User}가 아닌 User로 클래스를 가져왔습니다.

User("John")

import

무언갈 가져오고 싶다면 아래와 같이 이에 대한 목록을 만들어 import {...} 안에 적어준다.

import {sayHi, sayBye} from './say.js';

sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!

//----------------------------------------
import * as say from './say.js';

say.sayHi('John');
say.sayBye('John');

 

Arrow function

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 
					   // 위 두 개의 표현은 동일하다.

() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

() => {           // multi line block.
  const x = 10;
  return x * x;
};

const arr = [1, 2, 3];
const pow = arr.map(x => x * x);

console.log(pow); // [ 1, 4, 9 ]

 

forEach()

forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행한다.

const arr = [0,1,2,3,4,5,6,7,8,9,10];

arr.forEach(function(element){
    console.log(element); // 0 1 2 3 4 5 6 7 8 9 10
});
// 혹은 arrow 함수 가능
arr.forEach(element => console.log(element));

 

map()

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

 

reduce()

자바스크립트의 reduce함수는 배열의 각 요소를 순회하며 콜백 함수의 실행 값을 누적하여 하나의 결과값을 반환한다.

arr.reduce(callback[, initialValue])

파라미터

1. callback function
   
   • 다음 4가지의 인수를 가집니다.
     1. accumulator - accumulator는 callback함수의 반환값을 누적합니다.
     2. currentValue - 배열의 현재 요소
     3. index(Optional) - 배열의 현재 요소의 인덱스
     4. array(Optional) - 호출한 배열
   • callback함수의 반환 값은 accumulator에 할당되고 순회중 계속 누적되어 최종적으로 하나의 값을 반환합니다.
2. initialValue(Optional)
   • 최초 callback함수 실행 시 accumulator 인수에 제공되는 값, 초기값을 제공하지 않을경우 배열의 첫 번째 요소를 사용하고, 빈 배열에서 초기값이 없을 경우 에러가 발생합니다.

반환 값

배열을 순서대로 불러 각 요소에 대해 callback 함수을 실행한 결과를 누적한 값

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const sum1 = numbers.reduce((accumulator, currentNumber) => accumulator + currentNumber);

console.log('sum1 =', sum1); //sum1=55

//----------------------------------------------------------------------------------------
// callback함수 선언 후 이용
function sumReducer(accumulator, currentNumber) {
  return accumulator + currentNumber;
}

const sum2 = numbers.reduce(sumReducer);

console.log('sum2 =', sum2); //sum2=55