Day15 S1U10 JavaScript 핵심 개념과 주요 문법3

Janny·2022년 9월 8일
0
post-thumbnail

➕추가 개념 정리

클로저

외부함수의 실행이 끝났지만, 내부함수를 함수 밖에서 실행해서 외부함수의 변수에 접근할 수 있는 형태의 함수 (lexical scope를 이용)

외부함수의 변수를 참조해줄 내부함수가 있다면
외부함수의 실행이 끝난 뒤에도 변수는 사라지지 않음

  • lexical scope (렉시컬 스코프, 정적 스코프) : 자바스크립트 엔진은 함수를 호출한 위치가 아니라, 함수가 정의된 위치에 따라 상위 스코프를 결정한다.

구조분해할당

배열 또는 객체에서 각각 값(value)이나 프로퍼티(property)를 분해해서 별도의 변수에 담을 수 있도록 해주는 것

즉시실행함수

(blah blah)();

삼항연산자

조건 ? true일때 값 : false일때 값

함수선언식

function 함수명() {
	구현 로직
}

함수표현식

let 함수명 = function () {
	구현로직
}

호이스팅

: 끌어올리다 함수 안에 있는 변수나 함수 맨 위로 끌어올린다.
변수나 함수가 어디서 선언되든지 간에 최상단에 위치하게되어 동일 스코프 어디서든 참조할 수 있는 것

호이스팅 대상

  • var 함수선언문 O
  • let const 함수표현식은 X

호이스팅 규칙
부등호가 큰 쪽을 먼저 인식

  • 변수선언 > 함수선언
  • 할당되어 있는 변수 > 할당되지 않은 변수

얕은 복사 vs. 깊은 복사

: 얕은 복사는 객체의 참조 값 (주소 값) 복사, 깊은 복사는 객체의 실제 값 복사

  • 얕은 복사 (shallow copy)

    한 개의 객체라도 기존 변수의 객체를 참고하고 있다면 얕은 복사라고 한다.
    slice() start 부터 end 인덱스까지 기존 배열에서 추출해 새로운 배열을 리턴하는 메소드
    object.assign() 메소드에 첫번째 인자로 빈 객체를 넣어주고 두번째 인자로 복사할 객체를 넣음
    spread 연산자
  • 깊은 복사 (deep copy)

    JSON.stringify()&&JSON.parse()
    JSON.stringify() : 객체를 json 문자열로 변환, 이 과정에서 원본 객체와의 참조가 모두 끊어짐
    객체를 json 문자열로 변환 후 
    JSON.parse() : 이를 이용해 다시 원래 객체(자바스크립트 객체)로 만들어 줌
    단점 : 다른 방법에 비해 느리다는 것, 객체가 function일 경우 undefined로 처리
    재귀함수를 구현한 복사
    Lodash 라이브러리 사용

iterable

: 반복 가능한
배열은 대표적인 이터러블
이터러블 개념을 사용하면 어떤 객체에든 for..of 반복문 적용가능

Array.from() 으로 이터러블이나 유사배열을 받아 '진짜'Array로 만들어 줌
cf. 유사배열 : 인덱스와 length프로퍼티가 있는 객체

this

this의 값은 함수를 호출한 방법에 의해 결정
함수를 객체의 메서드로서 호출하면 this의 값은 그 객체를 사용

Rest Parameter vs. Arguments

  • Rest Parameter
    여러 인수를 배열로 받을 때 사용
    함수의 마지막 매개변수 앞에 ...을 붙여 나머지(rest) 인수로 배열을 대체
    함수의 마지막 매개변수만 Rest parameter로 설정 할 수 있다.
    들어온 인수를 배열로 묶음

  • Arguments
    함수에 전달된 인수의 배열 객체
    배열처럼 사용할 수 있지만, ❗️배열은 아님❗️
    그래서 배열 메서드는 사용할 수 없다.
    대신 length 속성, 인덱스를 통한 접근, for..of문 사용(iterable하므로)이 가능하다.

보류
equal vs deep.equal

🌞오늘의 속마음

한도끝도 없는 공부.....
구글은 나의 교과서.....
개발자 블로거들은 사랑과 빛.....

profile
🐣병아리 개발자의 기록을 위한 공간

0개의 댓글