[javascript] javascript boot camp 16기 일곱번째 수업

2020-09-09

자바스크립트 부트캠프 16기 일곱번째 수업 ‘배열’

기본기를 다진 수업은 모두 했으니 앱을 만들어보자! 거의 1단계가 끝났다 ^ㅡㅡㅡ^ 1단계를 기반으로 해서 2단계에 접어든다~

네트워크 프로그래밍두 추후에 배울 예정. 네트웤 관련 지식 배우기 전 우리가 가장 많이 쓰는 데이터타입인 객체.

객체, 배열

배열 다루기

mdn 의 문서를 참고해서 자가학습 능력을 길러야한다. 꼭 강의를 통해 배우는게 없더라도 능동적으로 mdn 문서를 통해 학습을 하는게 중요

프로토타입의 이해

배열을 이해하기 전에 매카니즘을 이해하기 위해 프로토타입개념을 먼저 다지고 가보자!

심플한 컨셉…

실제 자바스크립트의 모든 객체는 최상위 부모객체를 가지고 있음 이게 Object. 이 부모객체 안에 굉장히 많은 기능들을 ㄱ가지고있음. -> 이게 복사냐?

객체를 만들때마다 많은 기능들을 계속 복사하면 비효율적임. 원래있던것드을 복사해서 넣는다하면 자원효율저인 측면에서 불리 객체는 하나만 놔두고 재활용을 하자. 값 참조…

모든 객체가 최상위 부모객체의 기능들을 참조할 수 있다는게 prototype 의 개념

함수의 prototype 기반 기능은 추후. 객체와 약간씩은 다름

프로토타입 개념

배열에 쓸수있는 도구를 알아보자!

  1. Array.isArray()

제작자 입장에선 의도한 데이터만 들어왔으면 좋겠어서 typeof 연산자를 이용해 데이터의 타입을 확인한 후 처리한다. 그럴때, 배열들을 typeof 연산자를 활용해 타입을 체크할 때는 배열도 곧 객체이기 때문에 object를 반환한다. 그럴때 배열을 판별하기 위해 typeof 대신 Array.isArray(배열)을 하면 Boolean 값을 반환한다.

  1. C의 하나인.. 배열 원소 추가
let myNumbers = [];
//computed property 형식을 사용해서..
// let myObj = {}
// myObj['name'] = '10';

for(let i=0; i < 10; i++) {
  myNumbers[i] = i * 10;
  // = myObj['name'] = '10';
  // 동적 바인딩과 computed property를 활용해서 값을 넣었다 이말씀! 하지만 순서를 어기면 배열자체가 length를 활용해서 추정하는거임.
}

console.log(myNumbers);

myNumbers[20] = 99;

console.log(myNumbers);

myNumbers[20] = 99; // 이렇게 되면 10부터 19까지 생략이 됌. 

console.log(myNumbers); // 하지만 length는 21이 출력됌.
// 순서를 어기면 배열자체가 length를 마지막 키값을 활용해서 추정하기때문에 이럴 경우 오류가 난다.

// 그렇다면 어떻게 추가를 할까?
for(let i=0;i<10;i++>){
  myNumbers.push(i * 10);
}

myNumbers.push(99);

// 하면 정확히 10번째에 99가 들어가고 length도 11로 정상출력됌.
  1. 기타 메소드

join 많이 쓴다고 한다. push는 배열 자체에 영향을 주고. pop만 했는데 배열 자체에 수정이 되구낭.


let todos = ['청소','장보기','산책'];

for(let i=0; i < todos.length; i++) {
  // i < todos.length 로다가 둘다 변하니깐 청소는 당연히 안나옴.
  console.log(todos.pop());
}

console.log(todos);

//전체배열을 뽑아내지 못하는 버그가 발생할수도..
// 해결하기위해

let todos = ['청소','장보기','산책'];

for(let i=0, max = todos.length; i < max; i++) {
  // i < todos.length 둘다 변하지 않게 max라고 고정값을 세팅해주고 작동시킴. (pop()하고나면 영향안끼쳐지게 ㅎㅎ)
  console.log(todos.pop());
}

console.log(todos);

pop, shift, unshift, slice, splice, join 같은건 2개씩 짝 (pop, push / shift, unshift / slice, splice) utility 함수 helper 함수라고 함.

  1. 배열 순회

반복문이 아니라, ‘식’으로 순회하는 방법입니다. -> 문이 나타나는게 아니라 함수가 나타난다는 말~


let idol = [
  { age: 10, name: '방탄소년단' },
  { age: 5, name: '샤이니' },
  { age: 14, name: '동방신기' },
  { age: 2, name: '2NE1' }
];

// 이름만 출력하세요. 
// 이름 앞에 순서를 표시하세요.

// 반복문 style
for(let i=0; i < idol.length; i++) {
  console.log(`${i+1} -  ${idol[i].name}`);
} // 읽어야하는 위치값을 참조하고있는 형태
// 2. 여기는 i값이 계속 바뀜. 상태가 있다는거.

// 식, 함수를 활용한 style
idol.forEach(function(dol, idx) {
  // 1. 실제론 변수지만 값이 바뀌질 않습니다.

  console.log(`${idx+1} -  ${dol.name}`);
}); // forEach는 인자를 함수로 받는 함수. 콜백함수를 받는다~
// 1. 변하는 상태인 변수가 없다.
// 3. 이게 무슨 말이냐면, pop같이 상태가 바뀌는걸 올바로 이해하지못하면 버그가 발생하기에... 그런 측면에서 상태는 까다로운 녀석쓰. 한번만 온전히 작동되는게 확인돼면 그담부턴 같은 동작..

// function 함수 (첫번째인자: 아이템, 두번째인자: 인덱스, 세번째인자: 원본배열?잘안씀){
//   함수식
// } = idol.forEach(함수) 라는 방식임.

idol.forEach((dol, idx) => console.log(`${idx+1} -  ${dol.name}`));

상태관리로 인한 버그가 많기에 상태관리를 어떻게 하면 최대한 안변하게끔 immutable한 프로그래밍 방식을 연구…

함수형 프로그래밍은 함수를 많이 쓰지만, 함수를 쓰면서 변하는 상태값. 변수가 없는 상태가 없는 프로그래밍 테크닉을 가지고 있음

함수형 패러다임만 추구하는 프로그래밍 방식은 변수가 아니라 상수만 취급하는 방식도 있음.

직접 만들어보기

const idol = [
  { age: 10, name: "방탄소년단" },
  { age: 5, name: "샤이니" },
  { age: 14, name: "동방신기" },
  { age: 2, name: "2NE1" }
];

function showIdol(dol, idx) {
  console.log(`${idx + 1} - ${dol.name}`);
}

function forEach(array, fn) {
  for (let index = 0; index < array.length; index++) {
    fn(array[index], index, array);
  }
}

forEach(idol, showIdol);

정렬할 일은 많이 없어서 sort를 쓸일이 많이 없긴한데 중요하긴 함


let idol = [
  { age: 10, name: '방탄소년단' },
  { age: 5, name: '샤이니' },
  { age: 14, name: '동방신기' },
  { age: 2, name: '2NE1' }
];

// 내림 차순 정렬
function compareAge(a, b) {
  if (a.age === b.age) return 0; // 내가 받은 데이터를 비교해서 같으면 같다라고 판정하면 0
  if (a.age > b.age) return 1; // 첫번째인자가 더 크면 1 리턴.
  if (a.age < b.age) return -1; // 두번째께 더 크면 -1 리턴.
}
// 정렬함수는 두개의 값을 주는데 첫번째 인자는 배열의 첫번째 원소, 두번째 인자는 그 다음번의 원소, 그 다음에 호출돼면 또 배열의 두번째 원소와 그 다음의 원소... 이 원리는 잘몰라도 ^^~

idol.sort();
// 맵이랑 똑같이 배열을 반환함
// 정렬을 할때 정렬함수를 요구를 함. sort의 인자는 정렬함수


console.log(idol);

idol.sort(compareAge);

console.log(idol);
  1. 기타 배열 메소드

Array.from(); Array.include(); Array.reverse(); 도 마니 쓴다고 함.

목록형 데이터를 가공할 일이 많기에 library가 많음. 대표적인게 Lodash! Lodash