Array vs. Objects, Array-like Objects, Arrow Function Use (D15)

todos..

• this 학습
• reduce() 사용 방법 정리
• Strict Mode
• 즉시 실행 함수 표현식(IIFE)
• 변수 호이스팅과 TDZ(Temporal Dead Zone)
• Koans는 Mocha, Chai를 기반으로 테스트를 작성. 이 두 가지 프레임워크에 대해 공부

Arrays vs. Objects

• array vs. object efficiency: object has less overhead than an array!
• Object language does not have to create/allocate contiguous memory as in Array. The object is more dynamic in nature. The array has to create a memory block in advance, and update on overload

Javascript Koans Review

best practices

• 왠만하면 매개변수를 재사용하지 말기
• 전역스코프로 코드로 접근 가능하게 하려 할 때 함수 선언식을 (hoisting됨), 전역스코프를 가볍게 하고 문법을 클린하게 쓰고 함수 접근을 제한하고 싶을 때 표현식을 씀 (hoisting 안됨)

variables

• const는 재할당 불가능 (ESLint: fixes your js code)

functions

• 화살표 함수: 매개변수가 두개 이상일 경우에는 ( )를 붙여줘야 함 (아님 생략 가능)

• 화살표 함수를 쓰면 안되는 경우:

  • methods (그럼 this의 상위환경이 전역객체를 가르키게 됨)
  • 생성자, prototype, addEventListener의 콜백함수..

• 클로저: 함수를 리턴하는 함수

  • 화살표 문법을 이용한 클로저 패턴과 친숙해지기

    const adder = x => y => x + y;
     adder(50)(10) //60
  
     const subtractor = x => y => x - y;
     subtractor(50)(10) //40
  
     const htmlMaker = tag => textContent => `<${tag}>${textContent}</${tag}>`
     htmlMaker('div')('code states') //'<div>code states</div>'
  
     const liMaker = htmlMaker('li')
     liMaker('1st item') //'<li>1st item</li>'
     liMaker('2nd item') //'<li>2nd item</li>'

• Date().getFullYear()

arrays

• Array.isArray를 써서 타입을 확인 (typeof는 'object'로 뜸)
• arr.slice(1) - slice(start)
• array.slice(0) === array.slice() - shallow 복사!
• Array.from은 유사배열도 배열화해서 복사 (shallow copy)

objects

• 객체는 참조형이기 때문에 내용물이 같아도 비교 불가 (배열도 마찬가지)
  (person.son === {age:20}) -> false
  (원시값으로 바꿔줘야.. 객체값 비교하기)

• 객체는 index로 접근 안됨! key로만 접근 가능

• 객체는 배열이 아니기 때문에 length 쓰면 안됨 (배열 속성)
  객체 길이는 Object.keys(obj).length를 써야함

• Object.assign(target, source)
  타겟이 빈 배열이어야 새 객체를 반환 e.g. Object.assign({}, obj)

spread

• 빈 배열을 spread syntax로 배열에 넣으면 변하는게 없음
• arguments vs. rest parameter 다시 복습
  • arguments는 유사배열, rest parameter로 매개변수 모아준 arg는 배열

destructuring

• const [first, ...middle, last] = array
• rest문법을 구조분해에 쓸 때 뭘 받느냐에 따라 배열, 객체도 될 수 있음

const student = { name: '최초보', major: '물리학과' }
const { name, ...args } = student

console.logs(args); //{major: '물리학과'}

let course='선형대수'; 

const student = { name: '최초보', major: '물리학과', lesson: '양자역학', grade: 'B+' }

function getSummary({ name, lesson: course, grade }) {
return `${name}님은 ${grade}의 성적으로 ${course}을 수강했습니다`
}

console.log(getSummary(student)); //'최초보님은 B+의 성적으로 양자역학을 수강했습니다'