Section1 Unit9 과제 JavaScript Koans

---

Section1 Unit9 [JavaScript] JavaScript Koans

 

⭐️ 과제. JavaScript Koans

 이번 유닛의 JavaScript Koans 과제를 진행하며, 자바스크립트의 기본 개념을 정리할 수 있었다. Javascript Koans는 1번 소개 챕터를 제외하고, 10번까지 9개의 챕터로 나눈 파일이 제공되었다. (타입, 변수, 스코프, 함수, 배열, 객체, 스프레드 문법 등)

 헷갈렸던 부분들은 따로 정리하고, 문제도 최대한 다 이해하려 했다.

 이번 TIL에서는 헷갈렸던 개념이랑 문제들, 따로 찾아보기를 권고했던 사항 중에 내가 잘 몰랐던 부분들을 위주로 정리를 해볼까 한다 🙂

 

 

• 03_LetConst.js

 

Q. 재할당도 안되는 'const' 키워드를 굳이 써야하는지 이해가 안 될수도 있습니다. 'let' 키워드는 재할당이 가능하기 때문에 여러모로 편하고, 큰 문제도 없어 보이기 때문입니다. 이에 대해서 잠시 고민하신 후, 'const'가 추천되는 이유에 대해 직접 찾아보시기 바랍니다.

A. const 키워드를 사용하면 의도치 않은 재할당을 방지해 주기 때문에 let으로 변수를 선언하는 것보다 안전하다. 그렇기 때문에 변경이 발생하지 않는(재할당이 필요 없는 상수) 원시 값과 객체에는 const 키워드를 사용한다.

 

↓ use const and let

Google JavaScript Style Guide

 

 

• 04_Scope.js

 

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

A. 함수의 호이스팅이란 함수 선언의 위치와는 상관없이 코드 내 어느 곳에서든지 호출이 가능한 함수로, 함수선언문은 호이스팅이 되지만, 함수표현식은 호이스팅이 되지 않는다.

 

Q. 클로저의 유즈 케이스

 💬 클로저도 어려운데 클로저의 유즈 케이스를 찾아보라니... 아직까지도 클로저라는 개념이 쉽지 않아 유즈 케이스 함수 팩토리(function factories)와 namespacing(private variables/functions)를 찾아보기는 했는데, 이해가 다 되지는 않는다. 좀 더 공부해서 정리해봐야 겠다는 생각이 들었다. 간단하게 정리해보자면, 

A. 함수 팩토리(function factories)는 함수를 반환하는 함수로, 함수 팩토리에서 반환된 함수는 클로저를 형성하여 반환된다. namespacing은 변수나 함수를 현재 유효 범위 내에 제한하여 이름 충돌을 방지하고 변수나 함수를 숨기는 것을 말하는데, 클로저로 내부 함수에서 외부 함수의 변수에 접근할 수 있는 점을 이용한다.

 💬 예시 코드도 봤는데, 아직 설명할 정도로 이해한 건 아닌것 같아서 더 공부하고 정리하기로 😭

 

 

• 05_ArrowFunction.js

 

 • ↓ 클로저 + 화살표 함수

// 화살표 함수를 이용해 클로저를 표현
const adder = x => {
 return y => {
  return x + y
 }
}

const subtractor = x => y => {
 return x - y
}

/*
위 화살표 함수는 아래 함수 표현식과 같음 
const subtractor = function(x) {
 return function(y) {
  return x - y;
 }
}
→ 함수의 리턴값이 함수
*/

console.log( adder(50)(10) ); // 60
console.log( subtractor(50)(10) ); // 40

function makeTag() {
 const htmlMaker = tag => textContent => `<${tag}>${textContent}</${tag}>`
 console.log(htmlMaker('div')('code states')); // <div>code states</div>

 const liMaker = htmlMaker('li')
 console.log(liMaker('1st item')) // <li>1st item</li>
 console.log(liMaker('2nd item')) // <li>2nd item</li>
}

makeTag();

 이건 꽤 재밌었던 함수!

 

 

• 07_Array.js

 

📎 pass by value와 pass by reference의 차이는 아래 글 참고 ↓ 😊

자바스크립트의 자료형 - 원시 타입(primitive type)과 객체 타입(object type)의 특징

const arr = ['zero', 'one', 'two', 'three', 'four', 'five'];
// call(pass) by value와 call(pass) by reference의 차이에 대해서 학습합니다.

function passedByReference(refArr) {
  refArr[1] = 'changed in function';
}
passedByReference(arr);
console.log("arr", arr); // arr = ['zero', 'changed in function', 'two', 'three', 'four', 'five'];

const assignedArr = arr; 
assignedArr[5] = 'changed in assignedArr';
console.log("assignedArr", assignedArr); // assignedArr = ['zero', 'changed in function', 'two', 'three', 'four', 'changed in assignedArr'];
console.log("arr", arr) // arr = ['zero', 'changed in function', 'two', 'three', 'four', 'changed in assignedArr'];

const copiedArr = arr.slice();
copiedArr[3] = 'changed in copiedArr';
console.log("copiedArr", copiedArr); // copiedArr = ['zero', 'changed in function', 'two', 'changed in copiedArr', 'four', 'changed in assignedArr'];
console.log("arr", arr); // arr = ['zero', 'changed in function', 'two', 'three', 'four', 'changed in assignedArr'];

 

 

• 08_Object.js

 

const obj = {}
console.log(obj.length) // undefined


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

console.log(megalomaniac.length) // // undefined

→ 객체는 length 프로퍼티를 가지지 않는다. (생각해보지 않은 부분인데, 새롭게 알게 되었다..ㅎㅎ)

 

Q. this란 무엇일까?

A. this는 간단히 말해서 클래스에서 자신이 생성할 인스턴스 객체를 가리키기 위한 특수한 변수다.

class Car { 
 constructor(brand) {
  this.brand = brand // 여기서 this는 car
 }
}

const car = new Car('Hyundai')

 

 

• 09_SpreadSyntax.js

 

const fullPre = {
  cohort: 7,
  duration: 4,
  mentor: 'hongsik',
};

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

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

console.log(merged)
/* merged
{
  cohort: 7,
  duration: 4,
  mentor: 'hongsik',
  time: '0156',
  status: 'sleepy',
  todos: [ 'coplit', 'koans' ]
}
*/

 → 이 문제 진짜 헷갈렸는데, 변수 merged에 할당된 것은 value이고, 이 값은 얕은 복사가 된 값이다.

 

 • arguments 객체와 rest parameter

디폴트 매개변수와 나머지 매개변수 (with arguments 객체)

 나머지 매개변수와 arguments 객체에 관한 글은 따로 정리를 했다. ↑ 위 글 참고!

 

---

🌙  오늘의 회고

 JavaScript Koans를 마무리하며, 자바스크립트의 기본 개념을 정리하고 추가로 더 필요한 부분들이 무엇인지를 학습했다. JavaScript Koans에서 푼 문제들이 전반적으로 재미있어서 나름 정리를 하며 풀이를 했고, 라이브 세션에서 헷갈렸던 문제 풀이도 들을 수 있었다. Koans는 불교에서 유래된 단어로 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있다고 한다. 이번 문제들은 테스트 코드에 답이 이미 제시가 되어 있기 때문에 아무 생각없이 풀면 그냥 물흐르듯 풀 수 있는 문제들이었는데, 답을 고민해보며 내가 모르는게 무엇이고, 헷갈리는게 무엇인지 확실하게 알 수 있어서 의미있는 시간이었다.

다시 한 주가 시작되었다. 이번주도 화이팅 👻