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

devfish·2023년 1월 4일
0

Javascript

목록 보기
13/30

todos..

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+의 성적으로 양자역학을 수강했습니다'

profile
la, di, lah

0개의 댓글