[TIL] Day15 #JS_Koans

[TIL] Day15
[SEB FE] Day15

🫠 금요일 3시간에 이어 오늘 5시간 꽉꽉 채워서 페어분과 JS koans 50문제 끝까지 풀었다.

☑️ JS Koans 개념 정리

02. Types-part1.js

✋ 느슨한 비교 연산(==)을 지양하고, 엄격한 비교 연산(===) 사용하기

03. LetConst.js

✋ var, const, let 비교

• var 키워드는 지양!
• const 키워드는 재할당 불가능 ❌
• let 키워드는 재할당 가능 ⭕️

04. Scope.js

• Hoisting(호이스팅): function이나 var 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성
  • 우리가 예상하지 않은 결과로써, 좋은 현상은 아니므로 지양.
• TDZ(Temporal Dead Zone): 스코프의 시작 지점부터 초기화 시작 지점까지의 구간
  • TDZ는 선언 전의 변수 사용을 허용하지 않음
  • 반대로 var 키워드는 선언 전에도 사용 가능하므로 var 사용 지양

 ✋ 함수 선언문 & 함수 표현식 차이 → 호이스팅(hoisting)

• 함수 선언문 ← 호이스팅 발생 ⭕️
• 함수 표현식 ← 호이스팅 발생 ❌ (일어나지 않는 것처럼 보임)

// 함수 선언문: function 키워드를 사용하여 함수 선언
function add (x, y) {
	return x + y;
};

// 함수 표현식: 함수를 변수에 할당한 형태
const add = function (x, y) {
	return x + y;
};

✔️ 클로저(Closure)

• 내부 함수 → 외부 함수의 전역 변수에 접근 가능
• 외부 함수 → 내부 함수의 지역 변수에 접근 불가능

function increaseBy(increaseByAmount) {
  return function (numberToIncrease) {
    return numberToIncrease + increaseByAmount;
  };
}

const increaseBy3 = increaseBy(3);
const increaseBy5 = increaseBy(5);

increaseBy3(10);  // 13
increaseBy5(10);  // 15
increaseBy(8)(6) + increaseBy(5)(9);  // 28

// 전역 변수
let age = 27;
let name = "jin";
let height = 179;

function outerFn() {
	let age = 24;     // 지역변수
	name = "jimin";   // 전역변수 name 값이 'jin' -> 'jimin'으로 재할당
	let height = 178; // 지역변수

	function innerFn() {
		age = 26;           // 지역변수 age 값이 24 -> 26으로 재할당
		let name = "suga";  // 지역변수
		return height;
	}

	innerFn();

	age;  // outFn 내의 26(지역변수)
	name; // outerFn 내의 전역변수 'jimin'
	// innerFn() 내에 선언된 지역변수를 함수 밖에서 사용할 수 없음
}

const innerFn = outerFn();

age;       // 27(전역변수)
name;      // 'jimin'(전역변수)
innerFn(); // 178(지역변수)

05. ArrowFunction.js (화살표 함수)

const add = (x, y) => {
	return x + y;
};

add(10, 20);  // 30

----------

// return 생략
const subtract = (x, y) => x - y;
subtract(10, 20);  // -10

----------

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

adder(50)(10);  // 60

----------

const subtractor = (x) => (y) => {
	return x - y;
};

subtractor(50)(10);  // 40

06. Types-part2.js (원시&참조 자료형)

✔️ 원시 자료형

• 값 자체에 대해 변경 불가능 (새로운 변수에 새로운 값으로 재할당은 가능) ⇒ 원시 자료형을 변수에 할당할 경우, 값 자체의 복사가 일어남 (immutable)
  

let name = "carpediem";
name.toUpperCase();  // "CARPEDIEM"
name; // "carpediem"
name = name.toUpperCase();
name; // "CARPEDIEM"

----------

let word = true;
let copyWord = word;

word = false;
word;     // false;
copyWord; // true;

✔️ 참조 자료형

• 참조형은 주소를 할당 (mutable)
• 참조 자료형의 데이터는 동적(dynamic)으로 변함
• 참조 자료형을 변수에 할당할 경우, 데이터의 주소가 저장
• 데이터는 언제든 늘어나고 줄어들 수 있음 (동적으로 변함) → 이를 더 잘 관리하기 위해 특별한 저장공간(heap)의 주소를 변수에 할당
  

const nums1 = [1, 2, 3];  // [1, 2, 3]이 heap에 저장, 이 위치의 주소가 변수 num1에 저장
const nums2 = [1, 2, 3];  // [1, 2, 3]이 heap에 저장, 이 위치의 주소가 변수 num2에 저장
nums1 === nums2;  // false
// 참조 자료형(배열, 객체)의 비교는 주소 비교

// heap에는 두 개의 [1, 2, 3]이 저장되어 있으며,
// 각각에 대한 주소가 변수 num1, num2에 저장

07. Array.js

const arr = ["peanut", "butter", "and", "jelly"];

// arr.slice는 arr의 값을 복사하여 새로운 배열을 리턴
arr.slice(1);    // ["butter", "and", "jelly"]
arr.slice(2, 2); // []
arr.slice(3, 0); // []
arr.slice(5, 1); // []
arr.slice(0);    // ["peanut", "butter", "and", "jelly"] <- arr 전체 복사

----------

const arr = ["zero", "one", "two", "three", "four", "five"];
const assignedArr = arr;
assignedArr[5] = "changed in assignedArr";
arr[5]; // "changed in assignedArr"

const copiedArr = arr.slice();  // 원본 배열 변경 X
copiedArr[3] = "changed in copiedArr";
arr[3]; // "three"

✋ 배열도 객체 (typeof → ‘object’)

• 얕은 복사: 주소만 복사 (복사된 객체가 변경되어도 원본 객체는 그대로)
• 깊은 복사: 주소가 다름

08. Object.js

const emptyObj = {};
typeof emptyObj === 'object';  // true
emptyObj.length;  // undefined
// 객체의 길이는 없음. => undefined

----------

const obj = {
	mastermind: "Joker",
	henchwoman: "Adam West",
	relations: ["Anarky", "Duela Dent", "Lucy"],
	twins: {
    "Jared Leto": "Suicide Squad",
    "Joaquin Phoenix": "Joker",
    "Heath Ledger": "The Dark Knight",
    "Jack Nicholson": "Tim Burton Batman",
  }
};

const assignedObj = obj;
assignedObj["relations"] = [1, 2, 3];
obj["relations"];  // [1, 2, 3] (원본 객체 변경)

const copiedObj = Object.assign({}, obj);  // Object.assgin() <- 얕은 복사
copiedObj.mastermind = "James Wood";
obj.mastermind;  // "Joker"

obj.henchwoman = "Harley";
copiedObj.henchwoman = "Adam West"

delete obj.twin["Jared Leto"];
"Jared Leto" in copiedObj.twins;  // false (원본 객체가 삭제되면 복사된 객체 값도 삭제)

✔️ this

• this는 method를 호출하는 시점에 결정됨
• this는 함수의 호출에 따라서 값이 달라지기도 함

 ✋ method는 '어떤 객체의 속성으로 정의된 함수’

⇒ 호출되는 것은 어떠한 객체의 method인데, 그 '어떠한 객체'를 묻는 것이 this

 ✋ 화살표 함수 자신의 this가 없음

09. SpreadSyntax.js

const spread = [1, 2, 3];
const arr = [0, spread, 4];
arr;  // [0, [1, 2, 3], 4]

----------

const spread = [];
const arr = [0, spread, 1];
arr;  // [0, [], 1]

----------

// Rest
function returnSecondArg(firstArg, secondArg) {
  return secondArg;
};

returnSecondArg("only give first arg");  // undefined (secondArg에 전달해주는 parameter가 존재하지 않음)

----------

function ParamsByRestParameter(...args) {
  return args;
}

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

const restParams = ParamsByRestParameter("first", "second", "third");
const argumentsObj = paramsByArgumentsObj("first", "second", "third");

restParams;  // ['first', 'second', 'third']
Object.keys(argumentsObj);   // ['0', '1', '2']
Object.values(argumentsObj); // ['first', 'second', 'third']

restParams === argumentsObj;  // false
typeof restParams;    // 'object'
typeof argumentsObj;  // 'object'
Array.isArray(restParams);   // true
Array.isArray(argumentsObj); // false

const argsArr = Array.from(argumentsObj);  // Array.from(): 배열로 전환

----------

function getAllParams(required1, required2, ...args) {
  return [required1, required2, args];
}

getAllParams(123);  // [123, undefined, []]

10. Destructuring.js (구조분해할당)

// 객체 분해
const student = { name: "최초보", major: "물리학과" };
const { name, ...args } = student;

name;  // "최초보"
args;  // { major: "물리학과" }

----------

const user = {
  name: "김코딩",
  company: {
    name: "Kakao",
    department: "Development",
    role: {
      name: "Software Engineer",
    },
  },
  age: 35,
};

const changedUser = {
  ...user,
  name: "박해커",
  age: 20,
};

const overwriteChanges = {
  name: "박해커",
  age: 20,
  ...user,
};

// result
expect(changedUser).to.eql({
  name: "박해커",
  company: {
    name: "Kakao",
    department: "Development",
    role: {
      name: "Software Engineer",
    },
  },
  age: 20,
});

expect(overwriteChanges).to.eql({
  name: "김코딩",
  age: 35,
  company: {
    name: "Kakao",
    department: "Development",
    role: {
      name: "Software Engineer",
    },
  },
});

// ...user 가 어디에 위치해 있는지에 따라 객체 값들이 달라짐