0805 TIL Koans

냐하호후·2021년 8월 5일

TIL

목록 보기

21/101

호이스팅(Hoisting)

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다

var 변수 선언과 함수선언문에서만 호이스팅이 일어난다.

객체의 길이

빈객체든 property가 많은 객체이든 객체의 길이는 무조건 undefined다!!!

객체의 길이 그냥못구함.Object.keys().length

Array.from()

Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다.

arguments 객체

arguments객체는 유사배열이다.
typeof(arguments)는 Object가 나오고
Array.isArray(arguments)를 넣으면 false가 나온다
Array.from()으로 arguments 객체를 복사하면 새로운 진짜 배열이 생성된다.

const 배열,객체

'const'로 선언된 변수에는 재할당(reassignment)이 금지된다.
'const'로 선언된 배열의 경우 새로운 요소를 추가하거나 삭제할 수 있다.
'const'로 선언된 객체의 경우, 속성을 추가하거나 삭제할 수 있다.

객체의 복사

깊은 복사
모든 depth마다 변경 다 해주는게 깊은복사

깊은 복사된 객체는 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말한다.

얕은 복사
1depth만 복사한게 얕은복사

Object.assign({},obj) 얕은복사
Array.from() 얕은복사

배열에 Object.keys() , Object.values()

    function getAllParamsByArgumentsObj() {
      return arguments;
    }
    const argumentsObj = getAllParamsByArgumentsObj('first', 'second', 'third');

    expect(Object.keys(argumentsObj)).to.deep.equal(["0","1","2"]);
    expect(Object.values(argumentsObj)).to.deep.equal(["first", "second", "third"]);
     //{0:"first",1:"second",2:"third"}

arguments 유사배열 뿐만아니라 그냥 배열도 Object.keys()와 Object.values()를 사용할 수 있다. 배열도 객체이기 때문이다.

NaN

NaN은 type은 number인데 숫자는아니다^^ (자바스크립트가 10일만에 나온 언어라그렇다..)
NaN === NaN --> false

Spread 문법

spread문법을 사용하고 함수에 넣어서 배열을 복사하면 원래 배열은 영향을 안받는다.

let a = [1,2,3,4]

function test(arr){
const b = [...arr].pop()
return b
}

test(a) //4가 사라짐
console.log(a) // [1,2,3,4] 4가 그대로존재함

배열 a는 test함수에 들어가서 마지막요소 4가 없어졌을것 같지만 여전히 4가 존재한다.

//올바른 사용법
[...[1,2,3]]
// console 결과 [1,2,3]

//잘못된 사용법
...[1,2,3]
//이렇게 쓰면 원시자료형 1,2,3이 되기때문에 배열메소드 spread문법을 사용할 수 없다.

선언한적 없는 변수

선언 키워드없이 b= 뭐시기
하면 var b = 뭐시기 로 인식한다. 전역변수로 강제할당된다.

클로저 활용

const makeCounter = () => {
 let value = 0;
return{
 increase : () =>  {
return value = value + 1},
 decrease : () => {
return value = value - 1},
getValue : () => value
 }
}

const counter1 = makeCounter()
counter1.increase() //1
counter1.increase() //2
counter1.decrease() //1
counter1.getValue() //1

내부함수의 value를 조작할수없다. 내부함수에서 value는 막 변하는데 함수2개만 return 하고있다.
cvalue를 직접 볼수는 없다. 정보를 은닉(encapsulation,추상화)하기위해 클로저를 사용한다.
리턴된 함수는 외부함수에 접근할 수 있다.
내부 함수가 외부변수를 참조할때 = 클로저
항상 2개이상의 함수로 이루어져있다