JS 문법 Koans

Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있다고 합니다. 답이 미리 제시되어 있기 때문에 고민 없이 풀면, 큰 어려움 없이 전부 다 풀 수 있습니다. 하지만 그게 왜 정답인지 깊게 고민해 보는 시간을 갖지 않는다면 충분히 성장하기 어려울 것입니다.

 

 

Array.slice() 

1단계 레벨까지 깊은 복사이고, 다음부터 얕은 복사가 된다.

  it("Array 메소드 slice를 확인합니다.", function () {
    const arr = ["peanut", "butter", "and", "jelly"];

    expect(arr.slice(1)).to.deep.equal(["butter", "and", "jelly"]);
    expect(arr.slice(0, 1)).to.deep.equal(["peanut"]);
    expect(arr.slice(0, 2)).to.deep.equal(["peanut", "butter"]);
    expect(arr.slice(2, 2)).to.deep.equal([]);
    expect(arr.slice(2, 20)).to.deep.equal(["and", "jelly"]);
    expect(arr.slice(3, 0)).to.deep.equal([]);
    expect(arr.slice(3, 100)).to.deep.equal(["jelly"]);
    expect(arr.slice(5, 1)).to.deep.equal([]);

    // arr.slice는 arr의 값을 복사하여 새로운 배열을 리턴합니다.
    // 아래의 코드는 arr 전체를 복사합니다. 자주 사용되니 기억하시기 바랍니다.
    expect(arr.slice(0)).to.deep.equal(["peanut", "butter", "and", "jelly"]);
  });

slice(startIndex, endIndex)로 사용할 수 있는데 전달인자가 한 개만 오면 그 인덱스부터 끝까지 잘라내서 새로운 배열을 반환한다. 그래서 인덱스 0을 사용하면 배열을 처음부터 끝까지 복사할 수 있다. 새로운 배열이기 때문에 원본이 훼손되지 않지만 중첩된 객체는 원본과 함께 변형된다.

시작인덱스는 포함하고 끝인덱스는 미포함하여 끝인덱스 전까지 잘라낸다. 시작인덱스가 끝인덱스보다 크거나, 시작인덱스와 끝인덱스가 같거나, 끝 인덱스가 0인 등 인자의 범위가 타당하지 않은 경우 빈 배열이 반환된다.

 

전개연산자 Spread Syntax

  it("여러 개의 객체를 병합할 수 있습니다.", function () {
    const fullPre = {
      cohort: 7,
      duration: 4,
      mentor: "hongsik",
    };

    const me = {
      time: "0156",
      status: "sleepy",
      todos: ["coplit", "koans"],
    };

    const merged = { ...fullPre, ...me };
    // 변수 'merged'에 할당된 것은 'obj1'과 'obj2'의 value일까요, reference일까요?
    // 만약 값(value, 데이터)이 복사된 것이라면, shallow copy일까요, deep copy일까요?

    expect(merged).to.deep.equal({
      cohort: 7,
      duration: 4,
      mentor: "hongsik",
      time: "0156",
      status: "sleepy",
      todos: ["coplit", "koans"],
    });
  });

전개연산자를 객체에도 사용할 수 있다. 전개연산자는 값을 복사한다. 하지만 배열의 slice(), 객체의 assign()과 같이 1단계 레벨까지만 깊은 복사를 하고 참조자료형 값은 독립적이지 않은 얕은 복사이다. 

 

구조분해할당

  it("rest/spread 문법을 객체 분해에 적용할 수 있습니다 #1", () => {
    const student = { name: "최초보", major: "물리학과" };
    const { name, ...args } = student;

    expect(name).to.eql("최초보");
    expect(args).to.eql({ major: "물리학과" });
  });

ES6에 생긴 새로운 문법, 구조분해할당이다. 같은 이름의 변수는 위 코드처럼 직접 꺼내서 할당해줄 수 있다.

const arr1 = [ 1, 2, 3, 4, 5 ];
const [ , , third, fourth ] = arr1;

쉼표를 사용하여 요소를 무시할 수 있다.

const [a, b, c] = "can";
console.log(a, b, c); // a b c

할당연산자 우측엔 모든 이터러블이 올 수 있다.

const obj = {};
[obj.name, obj.surname] = "Coding Choi".split(" ");
console.log(obj); // { name: 'Coding', surname: 'Choi' }

할당 연산자 좌측엔 할당할 수 있는 것이라면  뭐든지 올 수 있다.

 

회고

koan이라는 것을 처음 알게 되었다. 내가 부트캠프를 시작한 이유도 koan의 의미와 비슷하다. 프로그래밍에 관심이 생기고 1년정도 파이썬, 알고리즘, 자바스크립트, 리액트, 타입스크립트, 익스프레스 등등 배워야한다는 것은 다 정처없이 떠돌아다니며 공부를 했다. 회사를 다니면서 했던지라 충분히 집중해서 하지도 못했다. 조급한 마음에 진짜 이해했는지, 안다고 착각하는 것인지 구분하지 않고 진도만 나가려고 했다. 결국 기초가 부족한 채 점점 프로젝트나 에러 처리의 한계를 느낀 나는 기초부터 제대로, 커리큘럼의 도움을 받아 학습하고자 부트캠프를 지원했다. 오늘 학습한 koan도 사실 '직관적으로 이럴 것 같다'는 느낌으로 풀면 금방금방 푼다. 그런 문제들을 진도만 나가려고 풀어내지 말고 충분히 고민하고 짚어가며 풀어보라는 취지로 koan을 하는 것이다. 많은 도움이 되었다.

오늘 presenters스터디에서 첫 발표를 했다. 정말 떨리고 지금은 기억이 하나도 나지 않는다 ㅋㅋ 나의 발표 주제는 DOM이었고 계속 'DOM is a bridge between HTML and JavaScript' 라는 말을 했던 것 같은데.. 영어를 너무 오랜만에 써서 간단한 표현도 입에서 잘 안나왔다. 그래도 스터디원분들이 경청해주시고 질문도 많이 던져주셔서 활기찬 시간이 되었던 것 같다. script태그가 head에 위치하면 DOM이 생성이 안되니 body의 하단에 써야한다고 했는데 스터디원 한 분이 script tag가 여러가지 일을 하는데 JavaScript가 HTML을 조작할 때에만그렇고 DOM을 쓸 일이 없을 때에는 head에 써도 된다고 결론을 짓는게 좋을 것 같다고 의견을 내셨다. 맞는 말이다. script tag를 Tailwind나 fontawesome 등을 import할 때에도 쓴다. html의 콘텐츠가 아닌 설정요소들은 body와 구분하여 head에 작성하는 것이 맞다. 나도 DOM과 어제는 Virtual DOM까지 공부하느라 DOM에 너무 심취해있어서 JavaScript에만 한정해서 생각하고 있었다. 생각의 범위를 확장시켜주는 것이 debate의 순기능이다 😊