[FE - ConnecTo] DAY33 TIL👩🏻‍💻

22.08.25 수업을 들으며 공부한 내용들을 정리하였습니다 😊
피드백은 언제나 환영입니다! 🍊

함수의 구분

• ES5 이전 : 함수는 사용 목적의 구분 없이 일반 함수, 생성자 함수, 메서드로 사용됨.
• ES6 이후 : 메서드 축약 표현, 화살표 함수 등 내부 동작을 간소화한 새로운 함수 유형이 등장함.
• 함수를 구분해놓은 목적 특정한 상황과 목적에 맞는 함수를 생성하기 위한 것 → 기존에는 메서드가 생성자 함수로서 사용될 수 있었고, 이는 오류를 발생시킬 우려가 있기 때문에 메서드 축약 표현의 등장으로 이를 최소화할 수 있음 ⇒ 생성자 함수로서 사용되면 메서드가 프로토타입을 가지게 되므로 메모리도 낭비됨
  

그래서 함수를 구분하지 않고 사용하면, 사용도 어려워지고 성능도 좋지 않기 때문에,
ES6부터는 특정한 상황과 목적에 맞게 함수를 사용할 수 있도록 하기 위해 구분하게 됨!

---

화살표 함수

• 생성자 함수가 아닌 함수에는 다 유용하다.
  왜냐하면, 일반 함수는 애초에 호출 목적 자체가 생성자 함수가 아니기 때문에 [[construct]]를 가질 필요가 없고, 그래서 화살표 함수를 사용하는 것이 바람직하기 때문임. 그래서 일반 함수는 프로토타입을 가질 이유가 없으니 this가 없는 화살표 함수 사용해야 함.
  
  
• super 키워드를 가지지 않는 이유
  super 키워드는 메서드 내에서만 의미가 있기 때문임.
  
  
• 일반 함수를 선언했을 때는 웬만하면 화살표 함수 사용
  내부 동작이 간편할 뿐만 아니라 성능과 가독성 면에서도 더 유리함
  만약, 함수가 너무 두꺼워지면 내부 로직에 대한 생각을 다시 해볼 필요가 있음
  
  
• arguments 객체
  화살표 함수 상위 함수의 arguments를 참조함
  → 화살표 함수 자체의 arguments가 아니라 상위 함수의 arguments를 참조하는 것은 의미가 없음
  그래서 arguments의 사용은 함수 표현식에서 해야 함 → 화살표 함수에서는 Rest 파라미터(…) 사용하여 가변 인자 함수 구현
  

---

this의 사용 목적

• 생성자 함수와 클래스 내부
  그 내부에서 생성할 인스턴스를 가리킬 수 있는 식별자가 필요한데, 함수 내부에서 그 인스턴스를 가리키는 식별자는 참조할 수 없음
  → 그래서 this를 사용하여 임시로 그 인스턴스와 바인딩을 시켜줌
  
  
• this는 메서드 내부에서만 의미가 있음
  프로퍼티를 참조할 일이 있어야 하기 때문에, 일반 함수 내부에서는 무의미함.
  그러나 ES5의 함수 내부에서는 일반 함수처럼 생겼지만 메서드가 될 가능성이 있기 때문에 유효함.
  So… 일반 함수가 어떻게 호출될지 알 수 없기 때문에 this는 무의미함!
  

• 화살표 함수 자체를 this로 사용하는 것이 좋지 않은 것이지, 메서드 내부에서 this를 사용하는 것은 상관없음

---

클래스 필드 내부의 this

• 클래스 필드에 메서드로 화살표 함수를 할당하고 그 내부에 this를 사용한 경우
  전역에 클래스를 선언한 경우 원래는 상위 스코프가 전역 스코프이므로 window를 가리키는 것이 정확함.
  그러나 클래스 필드에 할당한 화살표 함수의 this는 constructor의 this를 가리키도록 설계함
  → 그래서 특수한 경우로 설계되었는데,
  그렇기 때문에 클래스 필드에 메서드를 할당하는 경우 화살표 함수는 사용하지 않는 것이 바람직함.
  

---

Rest 파라미터

• Rest 파라미터에는 배열이 들어옴
  
• ES6 이후에는 유사 배열 객체 안 쓰고 배열 사용하는 추세임.
  왜냐하면, 배열 빌트인 메서드를 사용하려면 call을 통해 복잡하게 사용해야 하기 때문임.
  → 순회(반복문)를 하는 경우에는 배열 사용. 이 경우에는, 반드시 length 정보 필요!!
  

---

배열

• ADT 관점에서 배열이란?
  동일한 크기의 메모리 공간이 연속적으로 이어져서 인접해 있는 것 → 밀집 배열의 개념임!
  

🤔 ADT
- 추상적 데이터 타입
- 힙, 트리, 스택, 큐 등

• 배열을 사용하는 상황(장단점)
  

  (1) 임의 접근(임의의 요소를 찾는 것)에 최적화
  

  첫 번째 요소든 세 번째 요소든 동일한 시간 복잡도를 가짐(O(n))

  → 선두 메모리 주소 + (메모리 공간의 크기 * 인덱스)

  ⇒ 선두 메모리 주소와 메모리 공간의 크기는 상수, 인덱스는 변수

  (2) 요소의 삽입, 삭제에는 좋지 않음
  중간의 요소를 변경하는 경우 그 앞뒤의 요소까지 다 옮겨야 하기 때문

❗ 그렇다면..! 배열은 어떤 경우에 사용하는가?
데이터 추가, 삭제하는 일이 적고 접근 및 조회하는 일만 많은 경우에 사용

• 자바스크립트에서의 배열
  메모리 공간의 크기가 동일하지 않고, 메모리 공간이 연속하지 않아도 되는 희소 배열임.
  사실 자바스크립트의 배열은 배열의 동작을 흉내낸 객체임.
  → 프로퍼티 키에 인덱스를, 값에 요소 값을 할당함. 이는 getOwnPropertyDescriptors로 확인해보면 알 수 있음
  → 유사 배열 객체와 비슷한 형태(키와 값)
  ⇒ 임의 접근의 최적화 장점 포기하고 유소 삽입과 삭제를 이점으로 가져가기 위함.
  
  
• 그래서 자바스크립트의 배열은 배열이 아니라 리스트에 더 가까움
  배열의 요소로 모든 데이터 타입이 다 들어갈 수 있음
  ex) [ 1, '2', true] → 객체에 더 가까움, 이것을 [1, 2, 3]으로 만들면 더 빠르게 동작함
  → 배열의 목적은 순회하면서 요소에 동일한 로직을 적용하기 위함인데,
  요소의 데이터 타입이 다 다르다면 요소에 동일한 로직을 적용할 수 없기 때문에 배열의 목적을 위배하는 것임.
  따라서 배열의 요소에 동일한 데이터 타입을 삽입하는 것이 바람직함

  💡 현실 세계의 배열 요소는 [1, 2, 3 ]처럼 간단한 형태가 아니라 요소에 객체가 들어가 있는 형태가 더 많고, 이러한 요소는 서버의 데이터베이스에 저장되어 있음
  
  그래서, 사용자가 입력한 정보(데이터)는 영속적으로 저장되어야 함
  → 메모리에 저장하는 것은 영속적이지 않음(전원 끄면 날아감)
  그래서, 데이터는 하드 디스크에 파일로 작성함으로써 영속적으로 저장될 수 있음!
  
  이러한 역할을 수행하는 것이 데이터베이스임.
  전원을 꺼도 영속적으로 저장됨. 결국 데이터베이스의 근본적 역할은 파일 작성!
  
  → 결국 프론트엔드에서 서버에 요청하여 전달 받은 정보의 목적은 화면 구현(렌더링)을 위한
  것임. 데이터는 렌더링의 재료, HTML이 있어야 이를 그릴 수 있음, 프론트엔드 개발자는
  HTML의 DOM을 잘 조작할 수 있어야 함

• 결국 자바스크립트에서 배열은 서버에서 데이터를 받아서 조작할 때 사용하는 것임!

---

고차함수

• 배열을 조작할 일이 있을 때 고차함수를 사용해야 함
  

• 원본 배열을 조작하는 방법이 안 좋은 이유

  → 코드의 라인 수가 많아졌을 때 그 원본 배열을 추적하는 것이 힘들어짐.
  그렇다면..? 바뀐 배열의 주소 값을 새롭게 할당하면 추적할 필요가 없음
  → 원본을 훼손시키지 않고 불변성을 유지시킬 것!!!!

  추가로, 함수 내부에서 지역 변수를 짧게 다루고 반환하는 경우에는 사용해도 무방하지만, 웬만하면 원본 배열을 훼손시키지 않는 방법을 지향해야 함. 물론, 객체도 마찬가지!
  
  

• 배열에서 가장 중요한 메서드 : map, filter

  → 많이 사용하고 익숙해져야 함!!!!

  reduce는 가독성이 좋지 않기 때문에 최후의 수단(map, filter, some, every 등으로 해결이 안 되는 경우)으로 사용하기.
  

---

map

• ‘map’이란?
  1:1 연결이 가능함.
  
  
• map의 중요한 특징
  반환 값으로 새로운 배열을 반환한다는 특징이 있음
  

• 알고리즘의 관점에서는 배열을 새롭게 만드는 것보다 기존의 배열을 바꾸는 것이 빠름
  → 그렇다면 자바스크립트의 map은 왜 새로운 배열을 반환하는가?
  원본 배열을 바꾸면 외부 상태를 바꾸는 부수 효과 발생, 전형적인 비순수 함수로 동작하기 때문임.
  
  ❗️ 결국 순수 함수를 생성하기 위해서는 원본 배열을 바꾸지 않는 것이 중요함
  
  
• map의 동작 과정
  메서드를 호출한 객체를 순회함. 가독성이 좋은 것은 처음부터 끝까지 빠짐없이 도는 것임! map의 콜백 함수는 반드시 return 값이 있어야 하고, 그 return 값으로 새로운 배열 요소를 반환함 무조건 콜백 함수의 매개변수로 요소 값, 인덱스, this를 넘겨주게 되는데, 그 전달 받은 인수 중 사용하고 싶은 개수에 따라 콜백 함수의 매개변수를 지정해주면 됨.
  
  
• map을 사용하는 이유
  요소를 변형해서 새로운 배열을 만들 때 사용함.
  → 원본 요소와 새롭게 만드는 배열의 요소가 일치하는 경우 사용해야 함
  
  

• filter를 사용하는 이유
  원본 요소와 새롭게 만드는 배열의 요소가 같을 수도 있고, 더 적을 수도 있음
  

• reduce를 사용하는 이유
  원본 요소를 토대로 반환하는 값이 단 하나인 경우에 사용해야 함