221202 후발대 1일차(+배열 메소드)

1. 배열, 반복문

원장님 후발대 강의듣고 정리해보았다

1) 배열의 요소들을 넣었다 빼기 - pop, push, unshift, shift

push와 pop을 사용해 요소를 넣었다 뺄 수 있다
push는 배열의 맨 뒤에다가 값을 넣을 수 있는 것이고
pop을 사용해 배열의 맨 뒤부터 값을 뺄 수 있다

let testArr = [1,2,5,76,83];

testArr.push(3);
console.log(testArr); // [1,2,5,76,83,3]

testArr.pop();
console.log(testArr); // [1,2,5,76,83]

shift을 사용해 배열의 맨 앞부터 값을 뺄 수 있고
unshift를 이용해서 배열의 맨 앞부터 값을 넣을 수 있다

let people = ["h", "ㅁ", "f"];
console.log(people.shift()); // h
console.log(people); // ["ㅁ", "f"]

people.unshift("h");
console.log(people); // ["h", "ㅁ", "f"] h를 배열의 맨 앞에 넣은 것을 볼 수 있음

---

여기부턴 그냥 혼자 공부하면서 정리를 미뤄놨던 배열 관련 내용을 같이 정리하겠다

• concat
  배열을 합쳐서 새로운 배열을 반환하는 메소드

let frutis = ['사과', '배', '메론'];
let animals = ['사자', '호랑이', '곰'];

let newArra4 = fruits.concat(animals);

console.log(newArr4); // '사과', '배', '메론', '사자', '호랑이', '곰'

• slice(start, end) (원본 배열 유지)
  원본 배열에 손상을 주지 않고 복사하며 자른 값을 새로운 배열로 반환함 따라서 원본 배열을 불러오면 원래대로 모두있는 배열을 불러올 수 있음

let number = [1,2,3,4,5,6,7,8,9,10];

let newArr5 = number.slice(0,2);
let newArr10 = number.slice(-1,0);
let newArr11 = number.slice(-2, 5);

console.log(newArr5); // [1,2] (0번째부터 2번째 이전까지 자름(인덱스 0부터 1까지))
console.log(newArr10); // [10]
console.log(newArr11); // [] (뒤에서 3번째부터 앞에서 

• splice (원본 배열 손상)
  slice와 다르게 원본 배열을 수정하고 삭제하는 메소드
  따라서 원본 배열에 손상이 가해짐

let number = [1,2,3,4,5,6,7,8,9,10];
let numbers = [1,2,3,4,5,6,7,8,9,10];
let numberss = [1,2,3,4,5,6,7,8,9,10];
let numbert = [1,2,3,4,5,6,7,8,9,10];
let numst = [1,2,3,4,5,6,7,8,9,10];

let newArr6 = number.splice(0,2);
let newArr10 = numbers.slice(-1);
let arr8 = numberss.splice(-6, 3);
let aa77 = numst.splice(3,0,-55,99);


console.log(newArr6); // [1,2]
console.log(newArr10); // [10]
console.log(arr8); //[5,6,7]
console.log(aa77); // [] -> 이 이후에 배열명(여기선 numst)을 치면 [1, 2, 3, -55, 99, 4, 5, 6, 7, 8, 9, 10] 인덱스 3번부터 값을 하나도 빼지 않고 55와 99를 배열 안에 넣은 것을 확인할 수 있음

let fruits = ['사과', '포도', '파인애플', '망고'];
이 배열을 사용해서 length와 join, reverse, sort를 실습해보겠다

let amount = fruits.length; // 배열의 길이를 알 수 있음
let newStr = fruits.join('/'); // 말그대로 join
let str0 = fruits.join(''); // 말그대로 join
let newArrs = fruits.reverse(); // 배열의 값을 reverse하는 것
let newArr2 = animals.sort(); // 정렬하는 메소드    


console.log(amount); // 4
console.log(newStr); // 사과/포도/파인애플/망고
console.log(str0) // 사과포도파인애플망고
console.log(newArrs); //  ['망고', '파인애플', '포도', '사과']
console.log(newArr2); // ['망고', '사과', '파인애플', '포도']

sort는 원본 배열이 정렬되고 리턴하는 배열도 원본 배열을 가리킨다
만약 sort()안에 파라미터가 없으면 배열 속 요소들은 자동으로 문자열 취급하고 유니코드에 따라 오름차순으로 정렬된다

const arr1 =[3,5,1,10,2,22,7,6]

arr12.sort(); // [1, 10, 2, 22, 3, 5, 6, 7]

유니코드 순서에 따라 정렬이 된 걸 볼 수 있다
하지만 우리가 원하는 것은 [1,2,3,5,6,7,10,22] 이기에 함수를 인자로 넣어 이용해야함

const arr1 =[3,5,1,10,2,22]

arr1.sort(function(a, b) => {
  return a - b;
});

혹은 화살표 함수를 이용해 이렇게 쓸 수도 있다

const arr1 =[3,5,1,10,2,22]

arr1.sort((a, b) => {
  return a - b;
});

console.log(arr1)// [1, 2, 3, 5, 10, 22]

a-b를 리턴하는데 왜 정렬이 되는지 모르겠다면 console.log(a,b)를 찍어보면 된다

const arr1 =[3,5,1,10,2,22]

arr1.sort((a, b) => {
  console.log(a,b)
  return a - b;
});

중간에 콘솔 찍은 값을 보면 다음과 같이 나온다

5 3 -> [3,5,1,10,2,22]
1 5 -> [3,1,5,10,2,22]
1 3 -> [1,3,5,10,2,22]
10 3 -> [1,3,10,5,2,22]
10 5 -> [1,3,5,10,2,22]
2 5 -> [1,3,2,5,10,22]
2 3 -> [1,2,3,5,10,22]
2 1 -> [1,2,3,5,10,22]
22 3 -> [1,2,3,22,5,10]
22 10 -> [1,2,3,5,10,22]

a-b를 한 값이 양수인지 음수인지 0인지 알면 되는데
양수이면 a는 b뒤에 오고 음수이면 a는 b앞에 온다 0이면 정렬을 유지한다!!

reduce
인수로 함수를 받음
(누적 계산값, 현재 값) => {return 계산값 };

배열 메소드를 검색해보니 나와서 이것도 정리한다

일단 reduce를 통해 배열의 모든 수를 더해보자

let arr = [1,2,3,4];

const result = arr.reduce(function(pre, cur) {
	return pre + cur;
}, 초기값(옵션이라서 해도 안 해도 그만))

함수 안에 있는 인자에 pre는 지금까지 누적된 값을 말하고 cur은 현재 값을 말한다
그리고 초기값은 옵션이라 해도 안 해도 무방하다 그래도 일단 초기값을 0으로 해놓고
배열의 모든 수를 더해보겠다

일단 초기값이 0이므로 누산된 값은 0이고 배열에서 하나씩 현재값을 가져와 더해줄것이다
그러면 누산값 0에 현재값 1을 더하면 누산값은 1이 된다
그러면 pre에 있는 누적값은 1, 현재 값은 2 더하면 누적값3
그 다음 누적값3에 현재값3을 더하면 누적값이 6이 된다
그렇게 계속 더하다보면 누적값은 10이 되어서 배열의 수를 모든 더한 값은 10이 출력된다

이를 객체에서도 쓸 수 있다

let users = {
	{ name: 'hoho', age: 18 },
    { name: 'jane', age: 3 },
    { name: 'josh', age: 60 },
    { name: 'danaka', age: 52 },
    { name: 'hyun', age: 27 },
}

let result = users.reduce((pre, cur) => {
	if(cur.age > 19) {
      pre.push(cur.name);
    }
    return pre;
}, []);

console.log(result) // ['josh', 'danaka', 'hyun']

users라는 객체에서 나이가 19살보다 많은 사람들의 나이를 배열로 만들었다
초기값을 빈 배열로 해놓고 age가 19살보다 많은 사람의 이름을 누산값(여기서는 빈 배열)에 push해주어 하나의 배열로 만들어 주었다
예시는 코딩앙마에서 나온 예시를 적어보았는데
이렇게도 사용할 수 있구나하는 생각이 들었다

---

2) 반복문 - while, for, for in, for of, forEach

반복문을 많이 쓰는 이유는 자바스크립트가 반복문에 최적화되어있기 때문에
배열이 가지고 있는 속성인 length를 이용해 여러가지 작업을 할 수 있다

• 일반 for문

let testArrs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let i = 0; i <= testArrs.length; i++) {
  if (i % 2 === 0) 
  console.log(i);
}
// 0,2,4,6,8

for문으로 돌면서 if문 안의 조건처럼 i를 2로 나누었을 때 0이 나오는 값(짝수)를 뽑아내는 코드를 작성하였다

• for ~ in (인덱스가 나옴, 주로 객체에서 씀)

let testArrs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    for (key in testArrs) {
	console.log(key); // testArrs 배열의 인덱스(0 ~ 9)가 나옴 
	console.log(testArrs[key]); // 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
    }

console.log(key)를 찍었을 땐 인덱스가 나왔기 때문에 배열 안의 값을 가져오려면
testArrs[key] 이런 식으로 작성해야 값을 가져올 수 있음(testArrs[0]은 1, testArrs[1]은 2 이런 식임)

• for of (값(value) 자체가 나옴)

let testArrs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (value of testArrs) {
	console.log(value);
	}
//1, 2, 3, 4, 5, 6, 7, 8, 9, 10

for문을 이용해 li 태그 만들어서 ul 태그 밑에 넣는 작업도 했다

먼저 li 태그 만들어서 ul 태그 밑에 넣는 작업을 하려면 다음과 같이 생각해 볼 수 있다
1. li 태그 3개 만들기
2. li태그를 ul태그에 넣기

let color = ["red", "blue", "yellow", "black", "purple", "pink"];
let listTag;
for (let i = 0; i < color.length; i++) {
	listTag = document.createElement("li");
	listTag.textContent = color[i];
	document.querySelector("ul").append(listTag);
}

listTag라는 변수를 선언해놓고 for문을 돌려서 배열 안의 값들을 넣을 것이다
먼저 변수 listTag에 html안에 <li>를 만드는 코드를 할당하고 만들어질 <li>태그에 for문으로 돌면서 넣을 요소들(color[i])을 텍스트로로 반환하게끔 한다
다큐먼트에서 ul태그를 찾아서 append를 사용해 listTag를 붙이게 한다

• for of
  for of를 사용하여 for문보다 간결하게 작성할 수 있다
  for in은 인덱스값을 반환하므로 바로 value가 나오는 for of를 사용해 작성하였다

let color = ["red", "blue", "yellow", "black", "purple", "pink"];
let listTag;
for (item of color) {
listTag = document.createElement("li");
listTag.textContent = item;
document.querySelector("ul").appendChild(listTag);
}

<li>태그 형식으로 배열 속에 있는 값들을 원하는 대로 ul태그 밑에 출력하였다

---

2. 함수

함수는 두 가지 방식으로 만들 수 있
지만 변수 안에 넣는 방식이 좀더 시맨틱하다

예시)
let testFunc = function () { }

오늘 퀴즈에도 나왔던 문제를 함께 풀어보며 다시 익힐 수 있었다
문제)
배열을 입력으로 받아서 배열을 출력하세요
함수 내부에 2의 배수가 있으면 출력을 안 하게 해주세요(2의 배수가 아니면 출력할거라는 말)

출력한다는 말은 새로운 배열에 넣어서 리턴해주고 리턴한 값을 콘솔 찍겠다는 말이다
이걸 하기 위해서는 다음과 같이 생각해볼 수 있다

1. 함수 만들기
2. 배열을 입력으로 받게끔 () 사이에 매개변수를 입력해준다
3. 함수 내부에 새로운 배열(빈배열) 만들기
4. 함수 내에 for문을 이용해서 요소 하나씩 돌아가게 한다 (for of)
5. 그 요소가 2의 배수이면 스킵, 2의 배수가 아니면 새로운 배열에 넣기
6. 만들어진 배열을 리턴하기
   7.함수 바깥에서 그 함수를 호출해서 그 값을 로그로 남기기

위에서 생각한 대로 차근차근 작성을 해보면 다음과 같다

const num = [45, 121, 486, 78];

function test(num) {
  let result = [];
  for (okok of num) {
    if (okok % 2 !== 0) {
      result.push(okok);
    }
  }
  return result;
}

console.log(test(num));