[코드스테이츠/15DAY] Unit9 - [JavaScript] 핵심 개념과 주요 문법 Koans

Koans

🚨 어려웠던 문제

    function getAllParamsByRestParameter(...args) {
      return args;
    }

  
    function getAllParamsByArgumentsObj() {
      return arguments; // arguments는 모든 함수의 실행시 자동으로 생성되는 객체
    }

 	const restParams = getAllParamsByRestParameter('first', 'second', 'third')
    const argumentsObj = getAllParamsByArgumentsObj('first', 'second', 'third');

 
    let result01 = Object.keys(argumentsObj) // ['0', '1', '2']

  	const argsArr = Array.from(argumentsObj); // ['first', 'second', 'third']

   	let result02 = argsArr //  ['first', 'second', 'third']
    let result03 = argsArr === restParams // false
    

🔥 모르는 점

1. 배열을 Object.keys 하였을 때의 Key 값이 ['0', '1', '2']가 되는 이유

MDN - Object.keys()

Object.keys() 메소드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환합니다.

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};
console.log(Object.keys(object1));
// Expected output: Array ["a", "b", "c"]

Object.keys를 사용 하면 객체의 key가 배열로 반환된다.

풀이 →
getAllParamsByArgumentsObj 함수는 객체 arguments을 반환한다.

MDN - arguments 객체

arguments 객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체입니다. (유사배열)


⚡ "Array 형태"란 arguments가 length 속성과 더불어 0부터 인덱스 된 다른 속성을 가지고 있지만, Array의 forEach, map과 같은 내장 메서드를 가지고 있지 않다는 뜻입니다.

function func1(a, b, c) {
  console.log(arguments[0]);
  // Expected output: 1
  console.log(arguments[1]);
  // Expected output: 2
  console.log(arguments[2]);
  // Expected output: 3
}
func1(1, 2, 3);

arguments 객체는 인덱스를 가지고 있기 때문에 Object.keys(argumentsObj)를 하면 각각의 인덱스 0, 1, 2가 출력이 된다.

2. Array.from()

MDN - Array.from()

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

console.log(Array.from('foo')); 
// Expected output: Array ["f", "o", "o"] // 1️⃣
console.log(Array.from([1, 2, 3], x => x + x));
// Expected output: Array [2, 4, 6] // 2️⃣

구문

Array.from(arrayLike[, mapFn[, thisArg]])

arrayLike :
배열로 변환하고자 하는유사 배열 객체나 반복 가능한 객체
mapFn :
배열의 모든 요소에 대해 호출할 맵핑 함수.
thisArg :
mapFn 실행 시에 this로 사용할 값.

MDN의 설명만으로는 잘 이해가지가 않았다.

예시 1️⃣)
: 문자열을 인자로 받아 이를 배열로 반환한다.
예시 2️⃣)
: 첫 번째 인자 : 배열:, 두 번째 인자 : 각각의 배열에 적용할 함수

또 다른 예시를 찾아보았다.

Array.from( {length: 3, 0: 'a', 1: 'b', 2: 'c'} );
// ["a", "b", "c"]
//Array.from은 __유사 배열__을 배열로 생성 시키기 때문에 길이 3의 배열로 변환된다.
//{length: x}는  x길이의 유사 배열 객체를 생성한다.

Array.from에 배열이 아닌 객체가 포함되어있다.

3. const argsArr = Array.from(argumentsObj)가 ['first', 'second', 'third']인 이유

    function getAllParamsByArgumentsObj() {
      return arguments; // arguments는 모든 함수의 실행시 자동으로 생성되는 객체
    }

    const argumentsObj = getAllParamsByArgumentsObj('first', 'second', 'third');

다시 문제로 돌아가 확인해보면 argumentsObj는 유사 배열이며 현재 인덱스를 가지고 있는 유사배열 객체이다.

	const argsArr = Array.from(argumentsObj) // 변수 argsArr에 얕은 복사를 한다.
	
  	let result02 = argsArr //  ['first', 'second', 'third'] 
    let result03 = argsArr === restParams // false → 얕은 복사를 했기 때문에 false

💧 더 공부할 점

1. Array의 메서드
2. 유사배열객체

🌠 실시간 세션

함수 호이스팅

함수선언식으로 정의된 함수는 호이스팅이 일어난 것 처럼 보인다.
함수표현식으로 정의된 함수는 호이스팅이 일어나지 않는다.

호이스팅이 많으면 오류가 발생해도 확인하기 힘들기 때문에 함수 표현식을 사용하는 것을 권장한다.

렉시컬 스코프

 	let message = 'Outer';

    function getMessage() {
      // message 외부에서 참조
      return message;
    }

    function shadowGlobal() {
      //message 내부에서 참조
      let message = 'Inner';
      return message;
    }

    function shadowGlobal2(message) {
      // 매개변수가 있기 때문에 매개변수 참조
      return message;
    }

    function shadowParameter(message) {
      // 외부변수가 내부에서 재할당 됨
      // 이렇게 사용하지 말 것.
      message = 'Do not use parameters like this!';
      return message;
    }

클로저

함수가 함수를 리턴하면 클로저를 의심하기
내부함수에서 외부함수의 변수를 사용하고 있으면 클로저

클로저 사용 이유 :
변수를 안전하게 보호하기 위해서
클로저를 사용하지 않으면 외부에서 변수 선언을

const increase = function () {
  let num = 0;
  return function () {
    return ++num;
  };
};
const incread1 = increase();//로 변수를 할당해주면 incread가 increase의 내부 함수처럼 작동한다.