오늘의 생각

시작하며/마치며

JS 개념 마무리를 하며 전반적인 js 문법들을 다뤄보았다.

참조형 자료 중, 중첩되는 객체에서 최상위 객체가 무엇인지 / 이를 복사할 때 얕은 복사와 깊은 복사가 무엇인지 헷갈리는 부분이 많았는데 오늘 제대로 개념을 습득하게 되었다. 중첩되는 참조형 자료를 복사할 때 다른 주소값으로 deep copy를 원할 시에는 재귀형 함수(?)를 이용해야한다고 하는데 이는 추후에 자세히 배울 예정이라고 한다.

더불어 스코프 영역을 제대로 이해할 수 있게 되는 시간이 되어 점점 개발에 재미가 붙고 있다!! > <
이 기세를 이어 쭉쭉 나가야짓

오늘의 학습내용

1. Scope

1) 호이스팅

: 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.
(var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화하는 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다.)

참고 URL : https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 O	호이스팅 X
var, 함수 선언문	let, const, 함수 표현식

2) lexical scope / closure

2-1) lexical scope

: javascript에서는 함수가 정의되는 위치에 따라서 어떤 변수를 참조할지가 결정된다.

const x = 10;

fuction bar(){
	console.log(x);
}

function foo(){
	const x = 1;
  	bar(); // foo()실행 시 bar()가 실행되지만 bar가 정의된 위치에서의 x값이 출력되므로 10이 출력된다.
}

foo();
> 10

• 과제를 진행하면서 () 없이 함수명만 호출해도 함수가 실행된다는 사실을 깨달았다.

• const innerFn = outerFn();
  : 더불어 outerFn 함수 안에 중첩되어 있는 innerFn()함수를 전역에서 호출하고 싶을 땐, outerFn에서 innerFn을 리턴하고 외부에서 innerFn을 선언해 주어야 사용 가능하다.

• innerFn 선언과 동시에 outerFn()이 실행되고, 그 안에서 innerFn의 리턴값은 innerFn()의 height이므로 상위 스코프의 height인 178이 리턴된다.

it('lexical scope와 closure에 대해 다시 확인합니다.', function () {
    let age = 27;
    let name = 'jin';
    let height = 179;

    function outerFn() {
      let age = 24;
      name = 'jimin';
      let height = 178;

      function innerFn() {
        age = 26;
        let name = 'suga';
        return height;
      }

      innerFn();

      expect(age).to.equal(26);
      expect(name).to.equal('jimin');

      return innerFn;
    }

  	// innerFn을 외부에서 호출하기 위한 코드
    const innerFn = outerFn();

    expect(age).to.equal(27);
    expect(name).to.equal('jimin');
    expect(innerFn()).to.equal(178);
  });

2. Types

• Object 자료형은 데이터는 heap에 저장되고, 변수에 할당을 할 경우 변수에는 주소가 저장된다.

      1) [1, 2, 3]; // [1, 2, 3]이라는 데이터가 heap에 저장되지만 변수 할당이 되지 않아 주소는 어디에도 저장되지 않는다.
      2) const num1 = [1, 2, 3]; // [1, 2, 3]이라는 데이터가 heap에 저장되고, 그 주소가 변수 num1에 저장된다.
      3) const num2 = [1, 2, 3]; // [1, 2, 3]이라는 데이터가 heap에 저장되고, 그 주소가 변수 num2에 저장된다.

3. Array

1) 매소드 값 출력

• 배열매소드 값을 출력하면, 배열이 아닌 그 값이 출력된다.

const arr = [];

arr[0] = 1;
arr[1] = 2;
arr.push(3);

const poppedValue = arr.pop();

console.log(poppedValue);
> 3

2) slice()

• slice 메소드의 start idx가 end idx보다 클 경우, 빈 배열을 리턴한다.
• start idx와 end idx가 같은 경우, end idx-1 까지 실행되므로 start idx값이 end idx보다 더 크므로 마찬가지로 빈 배열이 리턴된다.

const arr = ['peanut', 'butter', 'and', 'jelly'];

console.log(arr.slice(3, 0));
> []

console.log(arr.slice(2, 2));
> []

4. Object

1) this

• 함수 실행 시, block scope가 아닌 function scope가 실행되며 function scope안에서 무언가를 호출 할 때 'this' 식별자가 자동 생성된다.(현재의 실행 컨텍스트를 기반으로 호출자가 누구인지를 나타내는 식별자)

• 매소드 안에서 쓰이면 매소드를 포함하는 객체 자체를 의미함

2) shallow copy, deep copy

2-1) shallow copy

: 참조자료 안에 참조자료가 중첩되어 있다면, 중첩된 참조값은 복사를 하더라도 같은 주소값을 공유하며 복사되기 때문에 한쪽이 바뀌면 다른쪽도 바뀜

• 주요 매소드
  Object.assign(): () 안에 들어온 객체들을 모두 합치는 역할
  spread

2-2) deep copy

: 다른 주소값을 가지고 복사되는 것을 말함 (깊은 복사 방법은 추후에 자세히 다룰 예정)

5. 추가 내용

1) Array.from()

: 유사배열을 배열로 만들어준다.

// 객체의 value값으로 배열을 만들어준다
const argsArr = Array.from(argumentsObj);

2) 함수의 매개변수

: 매개변수에 할당된 값은 함수 안에서 바뀌고 전역변수에는 영향을 미치지 않는다.

function shadowParameter(message) {
      message = 'Do not use parameters like this!';
      return message;
    }

// Parameter로 받으면 지역변수로 처리됨
expect(shadowParameter('Parameter')).to.equal('Do not use parameters like this!');