TIL - 21.06.25 👨‍💻

배열 ( Array )

배열은 순서가 있는 컬렉션을 저장하는 자료구조이다.
배열 요소의 인덱스도 0부터 시작한다.
배열을 호출하면 요소를 ,(콤마)로 구분한 문자열이 반환된다.

배열의 요소로는 문자열, 숫자열, 불리언타입, 함수, 심지어 객체와 배열도 들어갈 수 있다.

let arr = ['string', 1234, true, function(){ console.log('Dev. planethoon'),
  { name: 'Sunghoon', }, ['1', '2', '3',],
];
console.log(arr[0]); // 'string';
console.log(arr[1]); // 1234;
console.log(arr[2]); // true;
arr[3](); // 'Dev. planethoon'
console.log(arr[4]['name']); // 'Sunghoon'
console.log(arr[5][1]); // '2', 배열을 요소로 가지고 있는 배열을 다차원배열이라고 한다.

---

선언

// 빈 배열 선언
let arr = new Array();
let arr = [];

// 요소도 같이 선언
let arr = new Array('1', '2', '3',);
let arr = ['1', '2', '3',];

let coffee = [`starbucks`, `idiya`, `cafebene`,];
console.log(coffee[0]) // 'starbucks'
coffee[2] = 'blue bottle'; // 이런식으로 요소를 변경 할 수도 있음.
console.log(coffee[3]) // undefined; 값이 없으니까 undefined 리턴.
coffee[3] = 'angelinus'; // 할당 연산자로 요소 추가도 가능
coffee[5] = 'tom&toms'; // 인덱스 뛰어넘어 추가도 가능하다. 
console.log(coffee); // ['starbucks', 'idiya', 'blue bottle', 'angelinus', empty, 'tom&toms']
// 이 경우 coffee[4]는 empty로 표기되지만 호출하면 undefined가 반환된다.

---

arr.length 프로퍼티

• 배열 역시 length 프로퍼티를 사용가능하며 해당 프로퍼티를 이용하면 배열이 가진 요소의 수를 알 수 있다.

let arr = ['1', '2', '3',];
console.log(arr.length) // 3;
arr[4] = '5';
console.log(arr) // ['1', '2', '3', empty, '5']
console.log(arr.length ) // 5; 빈 요소가 있어도 해당 요소까지 카운트한다.

• length는 배열의 요소 수를 반환하는 프로퍼티이지만 배열 자체의 요소에 영향을 줄 수 있다.

let arr = ['1', '2', '3', '4', '5',];
arr.length = 3;
console.log(arr) // ['1', '2', '3',] 요소 3개만 남고 나머지는 삭제된 것을 볼 수 있다.
arr.length = 5; // length를 다시 5로 늘리더라도,
console.log(arr) // ['1', '2', '3', empty x 2] 빈 요소만 생길 뿐 요소는 복구되지 않는다.

---

Queue형 자료구조, Stack형 자료구조와 배열 내장 메소드

---

Queue형 자료구조

배열을 통해 만들 수 있는 대표적 자료구조 중 하나로 선입선출의 자료구조(FIFO - First In First Out)라고도 불린다.

이는 배열에 push와 shift라는 내장 메소드가 존재하기에 가능하다.

push는 배열의 가장 끝에 요소를 추가하고 추가하고 난 다음의 length 값을 반환한다.

한번에 복수의 요소를 추가할 수 있다.

let arr = ['1', '2', '3', '4', '5',];
arr.push('6', '7'); // 7; 
console.log(arr); // ['1', '2', '3', '4', '5', '6', '7']

shift는 제일 앞, 즉 인덱스가 0인 요소를 반환하고 제거한 후 다른 요소들의 인덱스를 하나씩 앞으로 당긴다.

let arr = ['1', '2', '3', '4', '5',];
console.log(arr.shift()) // '1'
console.log(arr) // ['2', '3', '4', '5']

+

unshift도 내장 메소드로 정의되어 있는데, 이는 제일 앞에 요소를 추가하고 나머지 요소들을 하나씩 뒤로 민다.
그리고 추가하고 난 다음의 length 값을 반환한다.

한번에 복수의 요소를 추가할 수 있다.

let arr = ['1', '2', '3', '4', '5',];
arr.unshift('-1', '0'); // 7; 한번에 복수의 요소를 추가할 수 있다.
console.log(arr) // ['0', '1', '2', '3', '4', '5']

---

Stack형 자료구조

스택형 자료구조 역시 배열의 대표적 자료구조중 하나로 후입선출의 자료구조(LIFO - Last In First Out)로도 불린다.
스택형 자료구조에서 사용되는 두가지 내장 메소드는pop과 큐형에서도 사용하는 push 이다.

pop 은 제일 끝의 요소를 제거하고 반환하는 메소드이다. (shift와 반대)

let arr = ['1', '2', '3', '4', '5',];
arr.pop(); // '5'
console.log(arr) // ['1', '2', '3', '4']

---

정리

스택형의 자료구조가 큐형의 자료구조보다 연산이 빠른데 이는 큐형 자료구조에서 데이터를 추출할때 사용하는 shift 메소드의 연산과정 때문이다.

shift 메소드는 0번 요소 제거 -> 배열 내부요소 인덱스 하나씩 당김 -> length 프로퍼티 갱신 의 순서로 이루어 지기에 요소의 수가 많으면 많을수록 연산 속도가 느려진다.

조금 TMI지만, 스택형과 큐형의 자료구조처럼 배열의 처음이나 끝에 요소를 더하거나 빼는 연산을 제공하는 자료구조를 컴퓨터 과학 분야에선 데큐(deque, Double Ended Queue)라고 부른다.

---

배열과 반복문

배열에서 반복문을 사용하는 방법은 총 세가지, for, for..of 그리고 for..in이 있다.

---

for(;;)

for문은 인덱스를 사용하여 배열을 순회할 때 쓰는 가장 클래식한 방법이다.

let coffee = ['starbucks', 'idiya', 'blue bottle'];

for(i = 0; i < coffee.length; i++){
  console.log(coffee[i]); // starbucks, idiya, blue bottle
}

---

for..of

for..of는 배열의 인덱스는 얻을 수 없고 값만 얻을 수 있다.

let coffee = ['starbucks', 'idiya', 'blue bottle'];

for(let coffeeName of coffee){
  console.log(coffeeName); // starbucks, idiya, blue bottle
}

coffeeName의 자리는 for..of안에서 사용할 변수 자리이고 coffee자리는 배열이 들어올 자리이다.
배열의 요소를 한번씩 반환하며 구문이 짧은게 장점이다.

---

for..in

일단 배열도 객체이기에 for..in 도 사용가능하다.

let coffee = ['starbucks', 'idiya', 'blue bottle'];

for(let key in coffee){
  console.log(coffee[key]); // starbucks, idiya, blue bottle
}

하지만 for..in 객체에 최적화 되어 있기에
1. 오류의 가능성이 높고
2. 연산 속도가 느리기에
-> for..of 사용을 권장한다.

---

GOOD 😉

배열을 맛보면서 오늘도 지식이 늘었다.
협업할때 깃 사용하는 법을 익혔다.

BAD 😥

배열을 공부하긴 했지면 아직 부족하다.
깃 공부와 배열 공부말고 한게 없다.

TO DO 🔥

• 배열 추가 공부
• 객체 공부
• Node.js

Retrospect 🧐

오늘은 깃을 익히는 시간이었고, 개인 공부시간엔 배열을 공부했다.
협업할때 깃을 어떻게 사용하는지 익히는 시간을 가졌는데 필요한 시간이었다고 생각한다.

그리고 페어님이 앞으로 진행될 코스에 대해서 이야기를 간략하게 알려주셨는데 외면하고 있던 미래가 눈 앞에 성큼 다가온 느낌이었다.
이번 주는 아무래도 너무 널널해서 캘린더를 외면한 채로 마음에 바람이 들어버려 설렁설렁 해버렸는데,
새삼스레 깨달았지만 아무래도 위기가 다가온 것 같다.
다행히 아직 배우는 것도 재밌고, 배운걸 포스팅하며 정리하는 것에도 재미가 들어서 요즘 기분은 좋다.

포스팅하니 오늘 깃 페어시간에 시간이 조금 남아 페어님이랑 이런 저런 이야기를 나누다가 블로그 이야기가 나와서 보여드렸는데 멋지다면서 좋은 평가를 해주셨다.

사실 누구한테 보여주려는 목적보단 내가 나중에 보려는게 목적으로 포스팅하고 있지만,
복습하는 시간이라고 생각하며 나름 시간을 제법 투자해서 포스팅하고 있는데 좋은 평가를 해주시니 뭔가 보람이 느껴져 좋았다.

Reference 🙇

정말 애정하는 모던 자바스크립트 - https://ko.javascript.info/