Unit 9. [실습]JavaScript Koans 문제 해결

📣  Jest : 자바스크립트에서 사용할 수 있는 테스트 툴

테스팅 라이브러리
여러가지 상황들을 설정하고, 그 상황에 맞는 결과가 나오는지 자동으로 테스트 한다.

 

📣  JavaScript Koans 을 사용해서 문제를 해결해라.

 

✔️ expect 

 

➰ expect(n).toBe(기댓값) : n === 기댓값인지 확인한다.

➰ expect(n).toBeTruthy() : n === true 인지 확인한다.

➰ expect(n).toEqual(기댓값) : n === 기댓값인지 확인한다.

 

🚨 toBe() 와 toEqual() 의 차이점 

➰ toBe() 는 같은 객체를 가리키고 있는지 확인한다. -> 객체의 내용이 같더라도 다른 메모리에 있으면 False

➰ toEqual() 은 객체의 내용이 같은지 확인한다.

 

 

✔️ type

 

➰ 느슨한 동치연산자('==') 말고 엄격한 동치연산자('===') 를 사용해라.

➰ 최대한 같은 타입끼리 연산해라.

➰ 조건문에 비교 연산을 명시해라.

 

 

✔️ const

 

➰ const 변수에는 재할당이 금지된다.

➰ const로 선언된 배열의 경우, 새로운 요소를 추가하거나 삭제할 수 있다.

➰ const로 선언된 객체의 경우, 속성을 추가하거나 삭제할 수 있다.

 

🚨 그럼에도 const를 사용하는 이유

➰ 의도치 않은 재할당을 막을 수 있어 안전하다.

 

 

✔️ scope

 

➰ 호이스팅 

코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어올려진 것 같은 현상
선언이 코드 실행보다 먼저 메모리에 저장되는 과정으로 인한 현상
-> 코드 실행 전 이미 선언이 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류가 나지 않는다.

 

➰ 함수 선언문에는 호이스팅이 일어나지만, 함수 표현식에는 호이스팅이 일어나지 않는다.

 

let funcExpressed = 'to be a function';

    expect(typeof funcDeclared).to.equal('function');
    expect(typeof funcExpressed).to.equal('string');	
    // 함수 표현식은 호이스팅이 일어나지 않아 밑에 선언된 함수가 아닌 위에 선언된 문자열이 인식된다.

    function funcDeclared() {
      return 'this is a function declaration';
    }

    funcExpressed = function () {
      return 'this is a function expression';
    };
    

    const funcContainer = { func: funcExpressed };
    expect(funcContainer.func()).to.equal('this is a function expression');	
    // func 에는 funcExpressed가 들어있고 .func()에서 funcExpressed 함수가 실행되서 리턴값인 문자열이 나온다.

    funcContainer.func = funcDeclared;
    expect(funcContainer.func()).to.equal('this is a function declaration');

 

➰ lexical scope (static scope라고도 함)

'함수를 어디서 호출하였는가'가 아닌 '함수를 어디서 선언하였는가' 에 따라 scope가 결정되는 것
함수 foo가 bar을 호출했다고 bar의 상위 스코프가 foo가 아니다.
-> bar의 선언된 위치를 보면 bar의 상위 스코프가 전역임을 알 수 있다.
자바 스크립트는 하위 스코프의 변수를 참조하지 않기 때문에 foo 함수에 선언된 변수 x는 bar 함수에 영향을 주지 못한다.

var x = 'global x'

function foo() {	
  var x = 'local x'
  bar()
}

function bar() {
  console.log(x)
}

foo() // global x
bar() // global x

 

➰ lexical scope +  closure

    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();

      console.log(age);	// 26
      console.log(name);	// jimin

      return innerFn;
    }

    const innerFn = outerFn();

    console.log(age);	// 27
    console.log(name);	// jimin
    console.log(innerFn());	// 178

자신의 Scope -> 자신을 포함하는 외부 함수 Scope -> 전역 Scope 순으로 변수를 찾는다.
전역에도 없으면 에러를 생성한다.

클로저는 함수를 렉시컬 스코프 밖에서 호출해도 함수는 자신의 렉시컬 스코프를 기억하고 접근할 수 있는 특성이 있다.

 

 

➰ default parameter 

파라미터를 주지 않았을 경우 default parameter로 자동으로 선언 된다.

 

➰ 화살표 함수

const add = (x, y) => {
      return x + y
}
add(10, 20)	// 30
    
const subtract = (x, y) => x - y
subtract(50, 30)	// 20


const adder = x => {
      return y => {
        return x + y
      }
}
// 화살표 함수를 이용한 클로저
adder(50)(10)	// 60

 

➰ 원시 자료형

함수의 전달인자도 변수에 data를 할당하는 것
함수를 호출하면서 넘긴 전달인자는 호출된 함수의 지역변수 -> 호출 시마다 새롭게 선언된다. (본래의 값은 변하지 않음)

 

➰ 참조 자료형

1️⃣ 배열

const ages = [22, 23, 27];
allowedToDrink = ages;
allowedToDrink === ages;	// true
allowedToDrink === [22, 23, 27];	// false

배열의 비교는 값이 아니라 주소를 비교하기 때문에 마지막이 false 가 나온다.
[22, 23, 27] 이라는 데이터가 heap에 저장되고 ages에는 그 주소가 저장된다.

 

2️⃣ 객체

const person = {
      son: {
        age: 9,
      },
    };
    
const boy = person.son;
// boy : { age: 9 };

boy.age = 20;
person.son.age	// 20 같은 주소를 가리키고 있어서 boy를 바꾸면 person도 바뀐다.
person.son === boy	// true 같은 주소를 가리키고 있기 때문.
person.son === { age: 9 }	// false age:20
person.son === { age: 20 }	// false 값이 아니라 주소를 비교하는거임!!

    const megalomaniac = {
      mastermind: 'Joker',
      henchwoman: 'Harley',
      getMembers: function () {
        return [this.mastermind, this.henchwoman];
      },
      relations: ['Anarky', 'Duela Dent', 'Lucy'],
      twins: {
        'Jared Leto': 'Suicide Squad',
        'Joaquin Phoenix': 'Joker',
        'Heath Ledger': 'The Dark Knight',
        'Jack Nicholson': 'Tim Burton Batman',
      },
    };
    
    megalomaniac.length;	// undefined

객체 길이를 구할 때는 객체.length가 아니라 Object.keys(객체).length 사용
🚨 객체.length 하면 undefined 나온다. 객체에 length란 키가 없기 때문.

'this'는 메소드를 호출하는 시점에 결정된다.

Object.assign() 을 통한 복사는 주소만 복사된다. -> 같은 주소를 가리키고 있는 건 아님!

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);
    obj.henchwoman	// 'Adam West'

    const assignedObj = obj;
    assignedObj['relations'] = [1, 2, 3];
    obj['relations'])	// [1, 2, 3]

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

    obj.henchwoman = 'Harley';
    copiedObj.henchwoman	// 'Adam West'

    delete obj.twins['Jared Leto'];
    'Jared Leto' in copiedObj.twins	// false

얕은 복사 : 객체 내부의 기본형 데이터는 복사가 가능하지만, 객체 내부의 또 다른 참조형 데이터는 복사가 아닌 할당을 하는 것
assign, spread
원시 데이터는 바꾼 객체만 바뀌지만, 참조 데이터는 다른 것도 바뀐다.
mastermind와 henchwoman은 string 데이터라서 직접 바꾼 객체의 값만 바뀌지만 twins는 object 데이터라서 하나만 바꿔도 나머지도 바뀐다.

 

➰ Spread & Rest

...을 어디에 어떻게 사용하냐에 따라 spread syntax 가 될 수도 있고 rest syntax가 될 수도 있다.

1️⃣ Spread

요소를 모두 하나씩 전개시킬 때

2️⃣ Rest

나머지 요소를 묶을 때
함수의 파라미터에 쓰여서 뒤에 남는 요소들을 배열로 받아준다.
그래서 Rest 파라미터는 함수의 매개변수의 마지막에만 올 수 있다.

3️⃣ spread 도입 전 객체로 함수 전달인자 다루기

function getAllParamsByArgumentsObj() {
      return arguments;
}
    
const argumentsObj = getAllParamsByArgumentsObj('first', 'second', 'third');
    
Object.keys(argumentsObj)	// ['0', '1', '2']
Object.values(argumentsObj)	// ['first', 'second', 'third']