코드스테이츠 프론트엔드 부트캠프 Day 15 - slice 개념 쉽게

헷갈리는 Slice 함수, 교집합으로 생각하자 !

 

(앞에 넣은 인덱스)부터 끝까지 들어있는 집합

(첫 인덱스)부터 (뒤에 넣은 숫자 - 1) 까지의 집합

두 집합의 교집합을 구한다고 생각하면 쉽다.

 

*인덱스가 음수일 경우 뒤에서부터 세면 된다.

 

-1 => 맨 뒤 인덱스

-2 => 뒤에서 두 번째 인덱스

 

 

const arr = [0, 1, 2, 3, 4, 5]


arr.slice(2, 4)		// [2, 3, 4, 5] ∩ [0, 1, 2, 3] => [2, 3]
arr.slice(3, 1)		// [3, 4, 5] ∩ [0] => 빈 배열
arr.slice(0, 4)		// [0, 1, 2, 3, 4, 5] ∩ [0, 1, 2, 3] => [0, 1, 2, 3]
arr.slice(3, -1)	// [3, 4, 5] ∩ [5] => [5]

 

 

---

slice 함수의 또 다른 활용법

 

 

it('Array를 함수의 전달인자로 전달할 경우, reference가 전달됩니다.', function () {
    // call(pass) by value와 call(pass) by reference의 차이에 대해서 학습합니다.
    const arr = ['zero', 'one', 'two', 'three', 'four', 'five'];

    function passedByReference(refArr) {
      refArr[1] = 'changed in function';
    }
    passedByReference(arr);
    expect(arr[1]).to.equal('changed in function');

    const assignedArr = arr;
    assignedArr[5] = 'changed in assignedArr';
    expect(arr[5]).to.equal('changed in assignedArr');

    const copiedArr = arr.slice();
    copiedArr[3] = 'changed in copiedArr';
    expect(arr[3]).to.equal('three');
  });

 

 

그냥 하나의 배열을 더 만들어서 똑같이 할당한 뒤 그걸 지지고 볶으면 나머지 하나도 변경이 되는데,

이를 방지하려면 arr.slice() 이렇게 복사해두고 바꾸면 된다.

 

 

---

깊은 복사와 얕은 복사

 

it('Object를 함수의 전달인자로 전달할 경우, reference가 전달됩니다.', function () {
    const obj = {
      mastermind: 'Joker',
      henchwoman: 'Harley',
      relations: ['Anarky', 'Duela Dent', 'Lucy'],
      twins: {
        'Jared Leto': 'Suicide Squad',
        'Joaquin Phoenix': 'Joker',
        'Heath Ledger': 'The Dark Knight',
        'Jack Nicholson': 'Tim Burton Batman',
      },
    };

    function passedByReference(refObj) {
      refObj.henchwoman = 'Adam West';
    }
    passedByReference(obj);

    expect(obj.henchwoman).to.equal('Adam West');

    const assignedObj = obj;

    assignedObj['relations'] = [1, 2, 3];
    expect(obj['relations']).to.deep.equal([1, 2, 3]);

    const copiedObj = Object.assign({}, obj);
    copiedObj.mastermind = 'James Wood';
    expect(obj.mastermind).to.equal('Joker');

    obj.henchwoman = 'Harley';
    expect(copiedObj.henchwoman).to.equal('Adam West');

    delete obj.twins['Jared Leto'];
    expect('Jared Leto' in copiedObj.twins).to.equal(false);

 

Copying Objects in JavaScript | DigitalOcean

 

깊은 복사와 얕은 복사에 대한 심도있는 이야기

 

---

javascript에서 'lexical'의 의미?

렉시컬 환경은 하나의 코드 덩어리가 가진 문맥을 의미한다. 이것은 해당 코드 덩어리에 사용할 수 있는 변수나 함수를 결정하고, 스코프에서 중요한 역할을 수행한다.

자바스크립트에서 변수와 함수는 '전역' 혹은 '지역'이라는 이름표를 달고 선언된다. 전역 선언을 한다는 것은 내가 작성한 코드 어디서든 사용할 수 있다는 뜻이고, 지역 선언을 한다는 것은 오로지 '그 변수나 함수가 정의된 코드 블럭 안에서만' 사용할 수 있다는 뜻이다. 렉시컬 환경은 이 선언들의 스코프, 그리고 변수나 함수에 접근할 수 있는지 없는지를 결정한다.

 

앞으로는 '변수나 함수는 렉시컬 환경 내에서 정의된다' 라는 것의 의미를 이해하고 코드를 보도록 하자.

---

arguments.callee

arguments.callee - JavaScript | MDN

---

Strict Mode

즉시 실행 함수 표현식(IIFE)

변수 호이스팅과 TDZ(Temporal Dead Zone)

 

에 대해서 더 알아보자