JavaScript Koans

SEB_FE_44/반딧불 ✨

JavaScript Koans

언젠간코딩잘함 2023. 3. 6. 16:09

Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있다고 합니다. 답이 미리 제시되어 있기 때문에 고민 없이 풀면, 큰 어려움 없이 전부 다 풀 수 있습니다. 하지만 그게 왜 정답인지 깊게 고민해 보는 시간을 갖지 않는다면 충분히 성장하기 어려울 것입니다. Koans 문제 중에는 학습하지 않은 개념도 의도적으로 포함되어 있습니다. 페어와 함께 깊게 고민하고, 정답을 설명할 수 있도록 연습해 보세요.

헷갈렸던 부분

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;
    }

    const innerFn = outerFn();

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

Closure의 코드 부분이다. 여기서 선언 후 할당된 let과, 할당만 한 부분을 살짝 혼동했다.

그렇게 공부해 놓고선 맨날 헷갈린다. 바보 멍청이다.

몰랐던 부분

spread & rest

함수 매개변수에 점(...)을 사용하는 경우 rest 매개변수이다.
rest 매개변수는 나머지 모든 요소들을 배열로 수집한다.
함수 호출에 점(...)을 사용하는 경우 Spread 연산자이다.
Spread 연산자는 배열과 같이 반복 가능한 객체를 단일 요소로 압축 해제한다.

객체에서의 rest

const blackCat = {
  name: '고양이',
  attribute: 'cute',
  color: 'black'
};

const { color, ...rest } = blackCat;
console.log(color); // black
console.log(rest); // Object {name: '고양이', attribute: 'cute'}

rest 안에 name 값을 제외한 값이 들어있다.

rest는 객체와 배열에서 사용할 때는 이렇게 비구조화 할당 문법과 함께 사용된다.

추출한 값의 이름이 꼭 rest 일 필요는 없다.

배열에서의 rest

const numbers = [0, 1, 2, 3, 4,];
const [first, ...rest] = numbers;

console.log(one); // 0
console.log(rest); // [1, 2, 3, 4]

배열 비구조화 할당을 통하여 원하는 값을 밖으로 꺼내고, 나머지 값을 rest 안에 넣었다.

const numbers = [0, 1, 2, 3, 4];
const [..rest, last] = numbers;

이렇게 할 수는 없다. // SyntaxError

함수 파라미터에서의 rest

function sum(...rest) {
  return rest.reduce((acc, current) => acc + current, 0);
}

const result = sum(1, 2, 3, 4, 5, 6);
console.log(result); // 21

함수의 파라미터가 몇개가 될지 모르는 상황에서 rest 파라미터를 사용하면 매우 유용하다.

result 가 가르키고 있는 것은 함수에서 받아온 파라미터들로 이루어진 배열이다.

위에서는 reduce 함수를 사용했는데.. reduce는 앞으로 따로 공부할 예정!

단축 표기법 Shorthand notation

 it("객체의 단축(shorthand) 문법을 익힙니다", () => {
    const name = "김코딩";
    const age = 28;

    const person = {
      name,
      age,
      level: "Junior",
    };
    expect(person).to.eql({ name, age, level: "Junior" });
  });

  it("객체를 분해합니다", () => {
    const student = { name: "박해커", major: "물리학과" };

    const { name } = student;
    expect(name).to.eql(student.name);
  });

단축 표기법은 처음 들어봐서 검색을 좀 해보고 풀었다.

예)

var a = 1;
var b = 'two';
var obj = {a, b};

obj; // Object { a: 1, b: "two" }
obj.a === {a}.a; // true

// 이코드는

{ prop }
// 아래가 생략된 것
{ prop: prop }

이미 정의된 변수가 있을 때, 객체 리터럴에서 그 변수의 이름 그대로 하면서 값의 할당을 생략한다.

이러면 변수에 담긴 값이 그대로 할당된다.

단축 표기에 사용할 변수의 값이 객체타입일 경우

var a = {b: 1};
var obj = {a};
obj.a; // Object { b: 1 }

a.b = 2;
obj.a; // Object { b: 2 }

이렇게 되므로 주의

선언에서 활용

const {log} = console;

log 상수가 생성되면서 console.log가 할당됨.

단축 표기법은 더 써봐야지 잘 사용할 것 같다. 솔직히 아직 더 찾아보지 않아서 확실히 모르겠다..

구글링을 열심히 해봐야지......

페어님과 같이하는 문제였지만 페어님께서 코로나에 걸리셨다고 한다. 몸조리 잘하시길..ㅠㅠ