👀 JavaScript Koans

Unit 10에서 공부한 JavaScript의 핵심 개념과 주요 문법을 잘 이해했는 지 확인할 수 있는 과제로, pair 코딩 방식으로 문제 풀이를 진행했다.
주제는 JavaScript의 타입, 변수 선언 키워드 let과 const, 화살표 함수, 스코프, 배열, 객체, spread, 구조분해할당 등으로 구성되어있다.

JavaScipt Koans를 학습했던 과정은 아래와 같다.

1) 페어와 함께 문제를 푼다.(1차 풀이)
2) 1차 풀이 후, 새로 파일을 다운받아 혼자서 문제를 다시 풀어본다.
3) 새롭게 알게 된 개념이나 헷갈렸던 문제들 위주로 블로그에 정리한다.

◾ JavaScript의 타입

 // expect의 전달인자로 들어간 표현식의 평가 결과
expect(1 + '1').to.equal('11');  // number(n) + string('i') = string('ni') 
expect(123 - '1').to.equal(122); // number(n) - string(i) = number(n-i),  string은 +만 가능하기 때문
expect(1 + true).to.equal(2);   // number(n) + true = number(n+1),  true = 1 & false = 0
expect('1' + true).to.equal('1true'); // string(1) + true = string('1true'), string과 덧셈하면 무조건 string으로 출력된다.

위와 같은 코딩 방식은 예상하기 어렵기 때문에 피해야 한다..!

//참조 자료형
const ages = [22, 23, 27];
    allowedToDrink = ages;
    expect(allowedToDrink === ages).to.equal(true);
    expect(allowedToDrink === [22, 23, 27]).to.equal(false);  // 1
//arr === [] 가 안되는 이유와 같다! 코플릿 풀 때 자주 이랬는데..

    const nums1 = [1, 2, 3];
    const nums2 = [1, 2, 3];
    expect(nums1 === nums2).to.equal(false); // 2

    const person = { son: {age: 9 }, };

    const boy = person.son;
    boy.age = 20;
    expect(person.son.age).to.equal(20);
    expect(person.son === boy).to.equal(true);
    expect(person.son === { age: 9 }).to.equal(false);
    expect(person.son === { age: 20 }).to.equal(false); // 3

참조 타입의 변수에는 데이터에 대한 주소만이 저장되기 때문에 보이는 값이 같아도(주석 1,2,3), 같다고 인식할 수 없다.

◾ 변수 선언 키워드 let과 const

 it("'const'로 선언된 객체의 경우, 속성을 추가하거나 삭제할 수 있습니다.", function () {
    const obj = { x: 1 };
    expect(obj.x).to.equal(1);         // key인 x의 값 = 1

    delete obj.x;                      // key인 x 삭제
    expect(obj.x).to.equal(undefined); // x가 없으므로 undefined 출력

  });

const로 선언된 변수는let과 다르게 재할당이 불가능하기 때문에 의도치 않은 값의 변경을 방지한다. 따라서, 일반적으로 const를 사용해 변수를 선언하고, 재할당이 필요한 경우에만 let을 사용하는 것이 권장된다.

◾ 함수 표현식

it('함수 선언식(declaration)과 함수 표현식(expression)의 차이를 확인합니다.', function () {
    let funcExpressed = 'to be a function';

    expect(typeof funcDeclared).to.equal('function'); // 함수 선언식: function 타입
    expect(typeof funcExpressed).to.equal('string');  // 함수 표현식: string 타입

    function funcDeclared() {  //함수 선언식
      return 'this is a function declaration';
    }

    funcExpressed = function () {  //함수 표현식
      return 'this is a function expression';
    };

    // 자바스크립트 함수 호이스팅(hoisting)에 대해서 검색해 봅니다.

    const funcContainer = { func: funcExpressed };  //함수 호이스팅 불가
    expect(funcContainer.func()).to.equal('this is a function expression');

    funcContainer.func = funcDeclared; // 함수 호이스팅 가능
    expect(funcContainer.func()).to.equal('this is a function declaration');

함수 선언식과 함수 표현식의 차이는 각각 다른(function, string) 타입으로 인식한다는 점과, 함수 호이스팅의 가능 여부에 있다.

링크텍스트

◾ 스코프 & 클로저

❕ 스코프는 '변수의 값을 찾을 때 확인하는 곳'이다.
클로저는 내부 함수가 외부 함수의 지역 변수에 접근할 수 있으며 유즈 케이스로 Function factory와 Namespacing(privacy)가 있다.

◾ 객체

it('Object의 기본을 확인합니다.', function () {
    const emptyObj = {};
    expect(typeof emptyObj === 'object').to.equal(true);
    expect(emptyObj.length).to.equal(undefined);  // 객체에는 length 속성이 없으므로 undefined

length 속성은 배열과 문자열에만 있는 속성으로, 객체에는 존재하지 않는다. 객체 안에 값이 있어도 length 속성 사용시, undefined를 출력한다.

객체의 길이를 출력하기 위해서는 Object.keys를 사용해야 한다. ex)Object.keys(obj).length

const megalomaniac = {
  mastermind: 'Brain',
  henchman: 'Pinky',
  getFusion: function () {
    return this.henchman + this.mastermind;
  },
  
  battleCry(numOfBrains) {
    return `They are ${this.henchman} and the` + ` ${this.mastermind}`.repeat(numOfBrains);
      },
    };
expect(megalomaniac.getFusion()).to.deep.equal('PinkyBrain');
expect(megalomaniac.battleCry(3)).to.deep.equal('They are Pinky and the Brain Brain Brain'); // .repeat(n) => . 앞의 값을 n번 반복

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'); // obj의 jenchwoman 값 변경

    const copiedObj = Object.assign({}, obj);  // obj객체를 assign 함수의 인자로 전달하여 copiedObj 객체 생성
    copiedObj.mastermind = 'James Wood';       // copiedObj의 mastermind 값 변경
    expect(obj.mastermind).to.equal('Joker');  // obj의 mastermind는 그대로

    obj.henchwoman = 'Harley';  // obj의 hanchwoman 값 변경
    expect(copiedObj.henchwoman).to.equal('Adam West');  // copiedObj의 henchwoman은 그대로

    delete obj.twins['Jared Leto']; // obj의 key인 twins 객체의 Jared Leto 키 삭제
    expect('Jared Leto' in copiedObj.twins).to.equal(false); // 객체 안의 객체 -> 얕은 복사이므로 데이터에 영향을 줌

'Object.assign'을 통한 복사는 깊은 복사(deep copy)로, reference만 복사하기 때문에 복사한 객체 내에서 값의 변경이 있을 경우 원본 객체에는 영향을 끼치지 않는다.

그러나 객체 안의 객체가 있을 경우 한개의 객체라도 원본 객체를 참조하고 있다면 얕은 복사(shallow copy)로, 데이터에 영향을 준다. 따라서,delete obj.twins['Jared Leto'];는 copieObj 객체에 영향을 준다.

얕은 복사, 깊은 복사?
링크텍스트

◾ spread

function returnFirstArg(firstArg) {
  return firstArg;
}
expect(returnFirstArg('first', 'second','third')).to.equal('first', 'second', 'third');

function returnSecondArg(firstArg, secondArg) {
  return secondArg;
    }
expect(returnSecondArg('only give firstarg')).to.equal(undefined);  
//값을 하나만 입력했으므로 가장 첫 번째 전달인자인 firstArg에 값이 할당되었다. 
//그러나 secondArg를 return 했으므로 undefinde 출력

자바스크립트는 named parameter를 지원하지 않기 때문에 함수 호출 시 전달인자의 순서가 중요하다.

// rest parameter는 spread syntax를 통해 간단하게 구현됩니다.
function getAllParamsByRestParameter(...args) {
  return args;
}

// arguments를 통해 '비슷하게' 함수의 전달인자들을 다룰 수 있습니다. (spread syntax 도입 이전)
// arguments는 모든 함수의 실행 시 자동으로 생성되는 '객체'입니다.
function getAllParamsByArgumentsObj() {
  return arguments;
}

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

expect(restParams).to.deep.equal(['first', 'second', 'third']);
expect(Object.keys(argumentsObj)).to.deep.equal(['0', '1', '2']); // key값이 index 값으로 출력

expect(Object.values(argumentsObj)).to.deep.equal(['first', 'second', 'third']);

// arguments와 rest parameter를 통해 배열로 된 전달인자(args)의 차이를 확인하시기 바랍니다.
expect(restParams === argumentsObj).to.deep.equal(false);
expect(typeof restParams).to.deep.equal('object');  // 배열에 typeof 속성 사용시, object로 출력
expect(typeof argumentsObj).to.deep.equal('object');
expect(Array.isArray(restParams)).to.deep.equal(true);
expect(Array.isArray(argumentsObj)).to.deep.equal(false);

// rest parameter는 전달인자의 일부에만 적용할 수 도 있다.
// rest parameter는 항상 배열
    function getAllParams(required1, required2, ...args) {
      return [required1, required2, args];
    }
    expect(getAllParams(123)).to.deep.equal([123, undefined, []]); 

◾ 구조분해할당

it('rest/spread 문법을 객체 분해에 적용할 수 있습니다 #3', () => {
    const user = {
      name: '김코딩',
      company: {
        name: 'Code States',
        department: 'Development',
        role: {
          name: 'Software Engineer'
        }
      },
      age: 35
    }

    const changedUser = {  // 맨 앞에 ...user로 원본 불러온 후, 그 뒤에서 나머지 키의 값을 변경
      ...user,
      name: '박해커',
      age: 20
    }

    const overwriteChanges = {  // 변수 선언 이후, 맨 마지막에 ...user로 원본을 불러옴(변경x)
      name: '박해커',
      age: 20,
      ...user
    }

    expect(changedUser).to.eql({
      name: '박해커',
      company: {
        name: 'Code States',
        department: 'Development',
        role: {
          name: 'Software Engineer'
        }
      },
      age: 20
    })

    expect(overwriteChanges).to.eql({
      name: '김코딩',
      company: {
        name: 'Code States',
        department: 'Development',
        role: {
          name: 'Software Engineer'
        }
      },
      age: 35
    })   //...user의 위치에 따라 객체의 값이 달라진다.
  })

** 배열 생략

Reference: 코드스테이츠