TIL - 21.06.28 👨‍💻

배열 vs 객체

각 값이 변수로 잡혀있지만 객체의 경우에는 각 인덱스가 무슨 값을 가지고 있는지 알고 있어야 한다.
알고 있더라도 요소를 인덱스로 호출하기에 가독성이 매우 떨어진다.

배열 주의할 점

• let arr = []; 일때 arr === []는 false이다.
  같은 빈 배열이 아닌 다른 위치에 있는 빈 배열로 인식하기에 배열이 빈 배열임을 확인해야할땐 arr.length === 0 으로 확인하자.

객체 주의할 점

• branket notation 과 dot notation
  두 표기법에 대한 것은 이전 포스트에 잠시 언급을 했었는데 여전히 대괄호 표기법을 권장한다.
  점 표기법으로 사용할 경우에 함수 이용시 제대로 호출이 되지 않기 때문이다.
  대괄호 표기법을 사용할 때는 따옴표를 잘 사용해야하는데, 변수로 사용하지 않고 객체의 프로퍼티 값을 불러올 경우에는 따옴표를 사용하지 않지만, 프로퍼티 키 값이 동적(변수)일땐 따옴표를 사용하지 않는다.

in 연산자

프로퍼티 키 값을 문자열로 적는 것으로 프로퍼티 존재여부를 불리언 타입으로 반환한다.

const obj = {
  name: 'sunghoon',
  job: 'dev',
}

'name' in obj; // true
'age' in obj; // false

---

배열 메소드

---

arr.indexOf()

indexOf 메소드는 배열 내 인자를 찾는 메소드이다.
문법은 다음과 같다.
arr.indexOf(element, startIndex)
arr 배열에 element가 요소로 있는지 찾고 최초로 찾은 요소의 위치를 반환한다.
즉, 같은 요소가 여러개 있다면 가장 먼저 찾은 요소의 위치를 반환하고 메소드는 작동을 멈춘다.
startIndex 인자는 생략해도 되지만 사용한다면 해당 위치부터 탐색을 시작한다.
만약 배열 내 element 요소가 없다면 -1을 반환하며 이를 응용해 함수 내 요소 존재 여부를 불리언 타입으로 반환 시킬 수 있다.

const arr = [1, 2, 3, 4, 5,];
arr.indexOf(4) // 3; 요소가 존재한다면 해당 인덱스를 반환.
arr.indexOf(6) // -1; 존재 하지않는다면 -1을 반환.
arr.indexOf(3) !== -1 // true; 이와 같이 내부에 요소 존재여부를 불리언 타입으로 반환 가능.
arr.indexOf(2, 2) // -1; startIndex 로 탐색 시작위치를 조정 할 수 있다.

arr.indexOf()와 비슷한 메소드로 arr.lastIndexOf()가 있는데 메소드 이름에서 유추할 수 있듯, 배열의 뒤에서 부터 역방향으로 탐색을 시작하고 요소를 찾으면 해당 위치의 인덱스를 반환한다.

---

arr.includes()

includes 메소드는 배열 내 인자의 존재 여부를 불리언 타입으로 반환하는 메소드이다.
눈치챈 사람이 있듯, arr.indexOf(element) !== -1 과 굉장히 유사한 작동을 하게 되는데 몇가지 차이가 있다.

1. NaN(Not a Number)를 판별 할 수 있다.
   indexOf 메소드는 일치 연산자(===)를 기준으로 요소를 찾아내기에 NaN을 골라낼 수 없는 반면, includes는 찾아낼 수 있다.
2. IE 호환이 안된다.

이와 같은 장단이 있으니 유의해서 사용해야한다.

---

arr.find()와 arr.findIndex()

find 메소드는 주어진 함수에서 true 값을 반환하는 첫 번재 요소를 반환하는 메소드이다.
만약 찾는 요소가 없다면 undefined를 반환한다.
find 메소드 같은 경우는 객체를 요소로 가진 배열에서 쓰기가 좋다.

const arr = [
  {name: 'sunghoon', job: 'dev',},
  {name: 'sungsu', job: 'dev',},
]

let findDev = arr.find(item => item.job === 'dev') // item 은 매개변수 자리다.
// 프로퍼티 키가 job인 것의 프로퍼티 값이 'dev'일때 ( true 를 반환할때 ) 그 객체를 반환한다.

console.log(findDev) // {name: 'sunghoon', job: 'dev',}; 처음 찾은 객체가 반환되었다.

let findDev = arr.find(function(item) { return item.job === 'dev' })
// 이 코드와 상술한 화살표 함수를 사용한 코드는 완전 동일하며 이해를 돕기 위해 작성했다.

findIndex()도 같은 역할을 하지만 요소 자체를 반환하는 것이 아닌 찾은 요소의 index를 반환하고 요소를 찾지 못하면 -1을 반환한다.

---

arr.filter()

filter 메소드는 find 메소드와 유사하지만 filter 메소드 같은 경우는 해당하는 요소 전체를 담는 배열을 반환한다.

const arr = [
  {name: 'sunghoon', job: 'dev',},
  {name: 'sungsu', job: 'dev',},
]

let findDev = arr.filter(item => item.job === 'dev')
console.log(findDev) 
// [ {name: 'sunghoon', job: 'dev',}, {name: 'sungsu', job: 'dev',} ]

---

arr.map()

map 메소드는 배열의 요소 전체를 호출하고 함수 호출 값을 배열로 반환해주는 메소드이며 사용하기에 따라 포텐셜이 매우 큰 메소드 중 하나이다.

const arr = [1, 2, 3];
let double = arr.map(item => item * 2);

console.log(double); // [2, 4, 6]

---

arr.sort()

sort 메소드는 문자열을 재정렬 시키는 메소드이며, 재정렬 시킬때 배열 자체를 변형시킨다.
재정렬의 기본 기준은 자바스크립트의 기본값인 사전편집 순으로 정렬시키며, 정렬시키는 함수를 인자로 넣을 수 있다.

const arr = [ 25, 1732, 21672, 3,];

arr.sort() // [1732, 21672, 25, 3]; 메소드를 사용할 때 재정렬된 값을 반환한다.
console.log(arr) // [1732, 21672, 25, 3]; 사전편집 순으로 정렬되었다.

• 사전편집(lexciographical) 순이란,
  말 그대로 사전에 정리했을때 뒤에 있으면 더 크다고 비교하는 방법이다.
  사전편집 순에선 2 > 1999 의 경우, 2가 1999의 가장 첫 글자인 1보다 크므로 2가 더 크다.

---

arr.reverse()

reverse 메소드는 요소를 역순으로 정렬 시켜주는 메소드이다.
원배열 자체를 변형시키며 메소드를 사용할때 역순으로 정렬된 배열을 반환한다.

const arr = [1, 2, 3, 4,];
arr.reverse() // [4, 3, 2, 1]; 메소드를 평가할때 배열의 역순을 반환한다.

console.log(arr) // [4, 3, 2, 1]

---

str.split()

split 메소드는 문자열을 구분자(delimiter)를 기준으로 양 옆으로 나누고 나눈 요소들로 이루어진 배열을 만드는 메소드이며 문법은 다음과 같다.

str.split(delimiter, length)

구분자가 문자열 속에 없으면 문자열 전체를 하나의 요소로 가진 배열이 반환되며, 구분자가 빈 문자열이라면 문자열의 문자 하나 하나를 요소로 가진 배열이 반환된다.

인자 중 length는 생략해도 되나 기입하면 요소 수를 제한 할 수 있다.

const str = 'Sunghoon wanna be a developer'

str.split(' '); // 공백 한글자
// ['Sunghoon', 'wanna', 'be', 'a', 'developer']

str.split('1');
// ['Sunghoon wanna be a developer']
            
str.split(''); // 빈 문자열
// ["S", "u", "n", "g", "h", "o", "o", "n", " ", "w", "a", "n", "n", "a", " ", "b", "e", " ", "a", " ", "d", "e", "v", "e", "l", "o", "p", "e", "r"]

---

arr.join()

join 메소드는 split과 반대되는 개념의 메소드로 배열의 요소를 인자의 양 옆에 껴서 전부 합친 후 한 문자열로 반환하는 메소드이다.

const arr = ['Sunghoon', 'wanna', 'be', 'a', 'developer'];

arr.join('-') // 'Sunghoon-wanna-be-a-developer'

---

Array.isArray()

Array.isArray() 메소드는 typeof 연산자가 배열과 객체를 구분을 못하기에 배열을 구분할때 사용하는 메소드이며 불리언타입으로 반환한다.

typeof {1:2} // object; 
typeof [1,2] // object; 배열인데 객체로 반환한다.

Array.isArray({1:2}) // false;
Array.isArray([1,2]) // true;

GOOD 😉

배열 공부에 시간을 제법 투자했다.
투자한 댓가로 제법 많이 친해진 듯 하다.

BAD 😥

배열 공부한다고 객체 공부를 덜했다.
오늘 늦잠자서 산책도 못 가고 아침 공부를 못했다.

TO DO 🔥

• 객체 공부
• 재귀함수 공부
• 배열 thisArgu
• Node.js
• React 입문

Retrospect 🧐

오늘 일어나니 다행히 숙취는 깔끔하게 날라갔다.
대신 늦잠을 자긴 했지만

배열 메소드 공부에 이래 시간이 드는데 언제 객체를 공부할 것이며 재귀함수 공부를 할건지 걱정이다.

오늘 코플릿 페어분이 바뀌었는데 역시 느낌이 좋은 분이라 좋았다.

파보나치 수열을 요소로 가지는 배열 만드는 코플릿이 있었는데,
나는 무식하게 변수 선언 쌔리 갈기고 코드 한 20줄은 써서 만들어냈는데,
페어분 방식으로는 10줄짜리도 안되는거 보고 조금 현타가 왔다.

컴퓨터적 사고.. 컴퓨터적 사고.. 내가 컴퓨터가 된다.. 내 뇌가 cpu다..

Reference 🙇

모던 자바스크립트 - https://ko.javascript.info/
MDN - https://developer.mozilla.org/