Array, Object, Function

📚 What is TIL?

배열

동일한 데이터 유형의 여러 변수를 저장하는 데 사용된다
배열은 인덱스를 사용하여 요소를 접근하므로 요소를 검색하는데 효율적이다
요소의 순서를 유지하고 추가하거나 제거할때 다른 요소의 위치를 변경하지 않아도 된다

🔎 배열의 원소는 객체가 될 수도 있고, 또 다른 배열이 될 수도 있다
🔎 배열의 순서를 index, 순서로 호출하는 것을 indexing 배열안에 값을 원소(elements) 라고 한다

배열에서의 프로퍼티 추가란?

const arr = [1, 2, 3];
arr.foo = 'bar';
[1, 2, 3, foo: "bar"]
console.log(arr.length) // ?

3

💡 array에서 프로퍼티를 추가해주는 것은 왜 array.length에 포함되지 않을까?

🔎 배열의 length 프로퍼티는 배열에 저장된 값 중 인덱스와 같은 값만을 포함하기 때문이다

배열 전용 메서드

---

더보기

push
 배열의 뒤에서 값을 추가한다

pop
 배열의 뒤에서 값을 꺼내고 반환할 수 있다

unshift
 배열의 앞에서 값을 추가한다

shift
 배열의 앞에서 값을 꺼내고 반환할 수 있다

Array.prototype.flat(depth)
 모든 하위 배열 요소를 지정한 깊이까지 평탄화한다

Array.prototype.splice(start, deleteCount, items)
 배열의 기존 요소를 삭제 || 교체 || 추가하여 배열의 내용을 변경한다

Array|string.prototype.slice(start, end)
 배열의 start부터 end의 직전 index까지 새로운 배열 객체로 반환한다

Array.prototype.forEach(currentvalue, index, array)
 주어진 함수를 배열 요소 각각에 대해 실행한다

Array.prototype.map(currentValue, index, array)
 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

Array.prototype.sort(compareFunction)
 배열의 요소를 정렬합니다

splice

---

const arr = [10,20,30,40,50]
const x = [1,2,3]
arr.splice(1,0,...x)
arr.splice(6,1,...x)
const arr = [1,2,3,4,5]
// [10, 1, 2, 3, 20, 30, 40, 1, 2, 3, 50]
// -------------
arr.splice() // []
const arr = [1,2,3,4,5]
arr.splice(1) // [2, 3, 4, 5]
const arr = [1,2,3,4,5]
arr.splice(2) // [3, 4, 5]
arr.splice().splice() // error

⚠️ arr.splice().splice() 와 같이 메서드 체이닝이 안되는 이유는
 splice는 arr가 아니라 삭제된 값을 반환하기 때문에 리턴값이 빈 array이기 때문이다

⚠️ 원래 배열을 직접 수정하면 메서드 호출이 수정된 배열을 나타내는 값이 아닌,
 원래 배열에서 제거되거나 추가된 요소를 반환한다

⚠️ 따라서 메서드 체이닝이 이루어지기 위해선 수정된 배열을 나타내는 값을 반환해야한다
 즉, 원래 배열을 수정하지않고 체인의 다음 메서드로 전달 할 수 있는 수정된 새 배열을 반환해야 한다

flat 0차원 이상 배열(매트릭스)의 평탄화

---

다차원의 배열을 Tensor라고 할 수 있는데, 다차원 배열을 다루는 라이브러리이다
인공지능에서는 텐서를 이용해서 데이터를 표현하고 연산한다 (알아두자)

const tip = [
  [1,2,3],
  [4,5,6],
  [7,8,9]
]
tip.flat()
tip.flat(1) // 한번 평탄화 
tip.flat(2) // 두번 평탄화
tip.flat(Infinity) // 다 펼쳐지면 스톱

🔎 Math.max(…tip.flat()) 로 평탄화 후 가장 큰 값을 구할 수도 있다

forEach

---

원래 배열을 수정하지 않는다
배열의 각 요소에 대해 콜백함수를 실행한다

const myArray = [1, 2, 3, 4];

myArray.forEach((element) => {
  console.log(element * 2);
  return element * 2;
});

console.log("End of script");

✔️ 콜백 함수의 return 값이 무시되는 것을 알 수 있다
✔️ 배열의 요소를 반복하고 각 요소에 대해 변수를 업데이트하는 작업을 수행하기 위한 목적으로 쓰인다

💡 그럼 콜백함수란??

🔎 파라미터로 함수를 전달 받아, 함수의 내부에서 실행하는 함수를 말한다

map

---

원래 배열의 각 요소에 콜백 함수를 적용한 결과를 포함하는 새 배열을 반환한다
변환된 값을 포함하는 새 배열을 만들기 위해 쓰인다

sort 정렬

---

JavaScript sort() 메서드는 요소가 숫자 값인 경우에도 문자열로 정렬한다
이로 인해 두 자릿수가가 넘어가는 시점부터 ‘10’이 ‘2’보다 먼저 정렬되는 문제가 있다
따라서 숫자 값으로 비교하기 위해선 sort() 메서드에 손을 봐서 써야한다

// 오름차순
const nums2 = [3,1,11,8,6]
console.log(nums2.sort((a,b)=>a-b)); 

// 내림차순
const nums2 = [3,1,11,8,6]
console.log(nums2.sort((a,b)=>b-a)); 

// 실무사용코드
function sort(key){
  if (click){
      click = false
      var sortedData = jsonData.sort((a, b) => (a[key] < b[key] ? -1 : (a[key] > b[key] ? 1 : 0)))
  }
  else{
      click = true
      var sortedData = jsonData.sort((a, b) => (a[key] > b[key] ? -1 : (a[key] < b[key] ? 1 : 0)))
  }
}

객체

key 와 value 를 저장하는데 사용되고 속성 이름을 사용하여 속성에 접근하므로 속성을 검색하는데 효율적이다
객체는 순서가 없으므로 요소의 순서를 유지할 필요가 없다

const aespa = {
  members: ['카리나', '윈터', '지젤', '닝닝'],
  from: '광야',
  sing: function(){
      return "hello world"
  }
};
console.log(aespa.hasOwnProperty('itzy')); // false
console.log(aespa.hasOwnProperty('sing')); // true
// aespa.keys()
console.log(Object.keys(aespa))
console.log(Object.keys(aespa)) 

유사배열 객체와 배열

---

const arr = {
  0: 10,
  1: 20,
  length: 3
};

유사배열은 배열과 비슷한 형태를 가진 객체로 배열의 구조와 동작에서 비슷한점이 있다
하지만 배열에 비해 효율적이지 않아서 실무에서는 사용되지 않는다

🔎 배열의 값은 index를 사용해서 배열의 위치로 쉽고 빠르게 접근할 수 있는 방식으로 저장된다
🔎 유사 배열 객체는 배열 처럼 보이도록 구조화된 JavaScript 객체이다
🔎 배열에는 유사 배열 객체가 사용할 수 없는 내장 메서드가 존재한다
🔎 이러한 저장 방식차이와 내장 메서드의 유무로 인해 배열은 접근 및 반복에 대해 더 효율적이다

메서드란?

---

객체의 프로퍼티는 이름과 값으로 구성된 변수들의 집합이다 프로퍼티의 값으로 함수가 올 수도 있는데 이러한 프로퍼티를 메서드라고 한다

🔎 즉, 메서드는 객체가 가지고 있는 어떤 동작을 말한다
🔎 프로퍼티와 메서드의 차이점은 값으로 함수가 올 수 있는지의 여부이다
🔎 쉽게 생각해서 .을 찍어 접근 할 수 있는 함수는 메서드이다

함수

특정한 작업을 수행하기 위해 호출할 수 있는 코드블록을 말한다

const three = function(a, b, c) { // 1
  let z = c(a,b) + c(a,b)
  return z ** 2 // 3
}
four(10, 20, one)

🔎 재사용성이 높아하다
🔎 유지보수가 용이하다
🔎 구조 파악이 용이하다

function four(a, b, c) {
  let z = one(a,b) + one(a,b)
  return z * 2
}
four(7, 3, one)

⚠️ 위의 경우 함수의 순수성, 순수함수의 장점을 살릴 수 없다

const three = function(a, b, c) { // 1
  let z = c(a,b) + c(a,b)
  return z ** 2 // 3
}
four(7, 3, one)

✔️ 위 의 경우처럼 외부에서 직접 값을 가져오는 것을 지양하자

RORO 기법

---

Receive an Object, Return an Object

function runPython(user, time, code, lv){
}
runPython({
  user: 'dongsup',
  time: 100,
  code: 'function...',
  lv: 3
})

🔎 뜻 그대로 객체로 받고 객체로 반환하는 것이다
🔎 식별 이슈가 있을 경우 쓰는 코드의 가독성과 유지보수성이 좋아진다

즉시 실행 함수

---

(function() {
  console.log('이 함수는 만들어지자마자 바로 실행됩니다!');
})();

🔎 함수를 괄호로 감싸면 함수가 만들어지마자 실행된다

Mutable과 Immutable

Mutable은 변경 가능한 값 객체, 배열, 함수, 클래스 등을 말한다
Immutable은 변경되지 않는 원시타입을 말한다

🔗 TIP

알아둘 만한 실무 팁

let tip = [1,2,3,4,5]
console.log([...tip].pop())

🔎 원본 수정(손상) 없이 [1,2,3,4] 값과 [5]라는 값을 얻어내고 싶을 때

---

let tip = [1,2,3,4,5]
console.log(...tip, 1000, ...tip) 
// [1,2,3,4,5, 1000, 10,20,30,40,50]
console.log([tip.slice(0,2), 1000, tip.slice(2, 5)])
console.log([...tip.slice(0,2), 1000, ...tip.slice(2, 5)])
tip.splice(2, 0, 1000)

---

const tip = Array.from('hello world') // new없이도 작동
const tip = new Array(10).fill(0) // new없이도 작동
const tip = Array(100).fill(0).map((v,i) => i+1)
'.'.repeat(100).split('.') // 권하진 않음

---

const human = {
  name: "dongsup",
  age: 53,
  from: "korea",
  askingHim: function () {
      console.log("hello world!");
  },
  0: '01050442903'
};
human.name = 'jun'
human.askingHim()
delete human.job;
console.log('age' in human)
// console.log(20 in [10,20,30,40]) error
// in연산자가 키를 순회해서 error

---

function 함수1(a,b,c) {
  return a + b + c
}
함수1(10,20,30,40) //error가 발생하지 않는다
함수1(10,20) // error가 발생하지 않는다 다른언어의 경우 error

function 함수1(a=10, b=20, c=30){
  return a + b + c
}
함수1(1, 1)

function 함수1(a=10, b=20, c=30){
  return a + b + c
}
// a와 c에 들어갈 것이라고 생각했지만 a와 b에 들어간다
함수1(a=1, c=1)

---

function hello(para) {
  console.log(para)
  console.log('hello')
  return 100
}
console.log(hello(10)) // 10 hello 100
let x = console.log('hello') 
// console.log('hello') 자리에 return 값이 들어가기 때문에 undefined
x // undefined 

🔎 return과 console.log를 혼동하지않고 사용하자