arrow function (화살표함수)

원래 안적으려고 했는데

기본적으로

많은내용을 알고있다고 생각했다. TIL 이니까 아는것은 넘어가도 되지않나 했지만.

클로저와 화살표가 찰떡궁합이여서

클로저로 사용한 예는 또 새롭게 다가와서 다시 정리해보았다.

arrow in closure

function adder(x){
  return function(y){
    return x+y
  }
}
adder(10)(20) // 30

이런식의 클로저 함수가 있다 치자.

에로우펑션으로 바꾸면 가독성이 눈에 띄게 좋아진다.

const adder = (x)=>{
  return (y)=>{
    return x+y;
  }
}

마찬가지로 return문 한문장이고 ( 바디내부에 )
파라미터도 1개 씩이니까 최대한생략 할 수 있다.

const adder = x => y=> x+y

이 얼마나 갑자기 가독성이 좋아졌는가 ..

당연히 처음보는사람은 이게뭐지 띠용! 할수있지만

이제 애로우펑션을 배운 당신 , 클로저를 알고있다면 오~ 하면서 이해할수있다.

rest parameter, spread operator

나머지 파라미터로 쓰는데

보통 ...이 어디에 들어가냐에따라서 레스트파라미터냐 , 스프레드 오퍼레이터냐 라고 할수있는데

나는 파라미터 자리에 들어가면 레스트 파라미터

아규먼트자리에 들어가면 스프레드 오퍼레이터 라고생각한다.

즉

값이 지금 존재하고 그걸 풀어서 써야해 그러면 스프레드가 맞는거고

지금 값은 모르겟고 이런 인자(파라미터)가 들어온다면 이렇게 나머지로 받아서 처리해

그러면 레스트 파라미터가 맞는것이다.

헷갈리기 쉬운 destructuring

한국말로는 구조분해할당 , 분해할당 등등.. 여러 말들이 있지만

좋ㅇ은 표현이 아닌거같아서 디스트럭쳐링 이라고 하겟다 .. (실제로 개발자들 사이에서 논란? 은 있었다고 들었다)

const [a,b] = ["apple","banana","strawberry"]
//a는 apple (변수가 할당되어있다.라는 의미)
//b는 banana

배열은 이렇게 쓰고

객체는

const person = {name:"김코딩",age:28}
const {name,age} = person
//name은 김코딩이 되어있고 (변수가 할당되어있다.라는 의미)
//age는 28이 되어있다 

이런 디스트럭쳐링(해체할당?)에 ...을 쓸수있다.

제일 이해안됬던부분

const person = {name : "김코딩", age:28, role:student}
function personPrint ({name,age,role:part}){
  return ``${name}님은 ${age}살 이고 ${part}입니다.``
}

이부분에서 상식적으로 role라는 새로운 키에 part를 주는거처럼 보이는데

다시 생각해보면 {} 내부는 객체가 아니다.

디스트럭쳐링 하기위해서 존재하는거다.

즉

name,age,part이 들어온다.

part는 내가보내는 오브젝트의 키값 role인 것이다.

이해가안된다기보단.. 받아들여야한다.

마찬가지로

오브젝트의 내가원하는값만 변경하는 구조가 있는데

const user = {
  name : '김코딩',
  company : {
    //중략
  },
  age : 36

이렇게있다면 음 나는 user 그대로 쓰고싶은데

이름만 바꾸고싶다.!

하면

const changedUser = {
  ...user,
  name: "kim"
}

먼저 ...user를 해주는게 핵심인거같다.

name : 'kim' 먼저 하고

...user를 해주면

...user가 덮어씨워지면서 원래값이 그대로 할당된다.

그래서

나중에 쓰는게 핵심!!

이상입니다.

직접 해보는게 best!