[JS] getter,setter / import,export

 

 

 

 

 

 

 

 

---

getter / setter

 

 : 데이터의 무결성을 보존하기 위해 쓰는 키워드이다.

   데이터를 수정하거나 출력할 때 직접 원본 데이터를 만지는게 아니라 함수로 간접적으로 다룬다. (immutable)

 

 

//내년나이를 알고싶으면?  age를 직접사용하지않고, nextAge라는 함수를 따로 만들어서 
let 사람 = {
  student: true,
  age: 14,
  nextAge() {
    return this.age + 1;
  },
};

 

 

🤷🏻‍♀️ 왜 굳이 따로 꺼내서 사용함?

   - object안이 복잡할수록 함수 만들어놓는게 데이터 꺼내기 쉽다.

   - 내부에 있는 age 변수를 건드리지 않아서 실수방지하므로 좀 더 안전해진다.

 

 

 

 

 

🔻 함수로 object 데이터 수정

 

   object안 데이터를 수정하고 싶을 때 object.key = value 이렇게 등호를 사용해서 수정가능하지만,

   안정성을 더하기위해서 함수를 만들어서 수정한다.

// parseInt를 붙여서 number를 입력안했을 경우 방지
let 사람 = {
  age: 14,
  setAge(나이) {
    this.age = parseInt(나이);
  },
};

사람.setAge("44");

 

 

 set, get 키워드를 추가해서 좀더 간결하게 표현하기

 : 등호로 데이터 입력가능하고 좀 더 직관적이다.

 

set 붙은 함수들을 setter라고 한다.

데이터를 입력, 수정해주는 함수 / 파라미터가 한개 꼭 존재한다.

let 사람 = {
  age: 14,
  set setAge(나이) {
    this.age = parseInt(나이);
  },
};

사람.setAge = 40;

 

getter 함수

: 데이터를 뽑아주고, 가져오는 함수

파라미터가 없고 함수내에 return을 가져야한다.

let 사람 = {
  age: 14,
  get nextAge() {
    return this.age + 1;
  },
};

console.log(사람.nextAge);

 

 

 

class에서 사용

class man {
  constructor() {
    this.name = "kim";
    this.age = 20;
  }
  get nextAge1() {
    return this.age + 1;
  }
  set setAge(age1) {
    this.age = age1;
  }
}

let man1 = new man();
man1.setAge = 50;
console.log(man1);
//출력 : {name : 'kim', age: 50}

 

---

 

 

 

 

 

Import / Export

 

 

HTML 파일 안에서 es6 import 문법 쓰려면 script태그 안에 type을 module로 설정한다.

<script type="module"></script>

 

 

 

🔻 (Named) export

   : 많은 것들을 export / import 하고 싶을 때

 

      export const 변수명 = ?    /    혹은 한꺼번에   export { 변수명1, 변수명2, ... }

      import { 변수명1, 변수명2, ... } from '경로'

 

// math.js
export const plus = (a,b) => a + b;
export const minus = (a,b) => a - b;
export const divide = (a,b) => a / b;

// 혹은 한꺼번에
export {plus, minus, divide}

// main.js
// export한 이름 그대로 사용
import {plus, minus, divide} from "./math";

// import하는 이름을 바꾸고 싶을 때 as
import {plus as add} from '.math';

 

 

 

🔻export default

 

 : 여러 함수를 갖고있는 한개의 객체를 디폴트로 export

  각 파일마다 단 한개의 Default export 만 존재 할 수 있음

 

  export defalut 변수명

  import 어쩌구 from '경로'    (어쩌구에 변수명 작명가능)

// math.js
const plus = (a,b) => a + b;
const minus = (a,b) => a - b;
const divide = (a,b) => a / b;

export default { plus, minus, divide };

// main.js
// export한 이름과 다르게 가능
import myMath from "./math";

myMath.plus(2,2);

// * = everything (math 모듈에서 모든걸 Import 함)
import * as myMath from "./math";

whatever.plus(2,2);

 

 

 

> import 너무 많으면 * 기호를 써서 한꺼번에 가져온다. ( as로 변수명 새로 지어준다.)

(library.js)

var a = 10;
var b = 20;
var c = 30;
export {a,b};
export default c;

----------------------------

(index.html)

<script type="module">
  import c, {* as 변수모음} from 'library.js';
  console.log(변수모음.a);
</script>

 

 

 

 

 

🤷🏻‍♀️ export default와 export의 차이점?

 

export default는 한번만 쓸 수 있고, import 할 때 변수명을 새롭게 작명 가능하다.

export는 변수명을 import와 export시에 같게 적어줘야한다.

 

 

 

 

 

🤷🏻‍♀️ 로딩을 빠르게 하기위해선?

 

1. 필요한것만 import

// math.js
const plus = (a,b) => a + b;
const minus = (a,b) => a - b;
const divide = (a,b) => a / b;

export default { plus, minus, divide };

// main.js
// named export사용
import {plus} from "./math";

myMath.plus(2,2);

 

 

2. Dynamic import

 : 실제 유저가 사용할 모듈만 import

function doMath () {
	import ('./math')
    .then (math => math.plus(2,2));
}
btn.addEventListener('click', doMath');

async function doMath () {
	const math = await import ('./math')
    math => math.plus(2,2);
}
btn.addEventListener('click', doMath');