TIL]Unit. 9 JavaScript 핵심 개념과 문법(Koans) - 코드스테이츠

SEB_FE_45

Section1. Unit.9 JavaScript 핵심 개념과 문법(Koans)

---

JavaScript에서 호이스팅(hoisting)이란?
출처 : https://developer.mozilla.org/ko/docs/Glossary/Hoisting

• 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.
• var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다.
• 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생한다.
• 함수 선언식으로 작성한 함수에서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다.
• 단, 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 된다.
• 함수 표현식은 호이스팅 할 수 없다.

//일반적인 코드 작성 순서
function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

catName("호랑이"); // 결과: "제 고양이의 이름은 호랑이입니다"


//함수 호출을 함수 선언보다 먼저 작성하는 코드
catName("클로이");

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
} // 결과: "제 고양이의 이름은 클로이입니다"

⇒ JavaScript는 위에서 아래로 코드를 읽어내려가기 때문에 코드의 가독성을 위해 함수를 선언한 후 호출하는 것이 좋다.

---

클로저(closure)

• 함수와 함수가 선언된 어휘적 환경의 조합을 말한다.
• 외부함수의 변수에 접근할 수 있는 내부함수이다.

function incBy(incByAmount) {
	return function (numToInc) {
		return numToInc + incByAmount;
	};
}

let incBy3 = incBy(3)

incBy3(10) // 결과는 13
/* 
incBy3(10)을 디버거하면 검사도구 소스창에 incBy가 클로저라고 나오는 것을 알 수 있다.
*/

---

함수(function)

• 함수는 함수표현식과 함수선언식으로 선언할 수 있으며, 화살표로 함수를 표현하는 것을 화살표함수라고 한다.
• 화살표함수는 함수표현식을 대신해서 사용이 가능하다.

// 화살표 함수
// 함수선언식  
function add(num1, num2){
	return num1 + num2;
};

// 함수표현식
let add = function (num1, num2){
	return num1 + num2;
}

// 화살표 함수
let add = (num1, num2) => {
	return num1 + num2;
}

• 조건이 된다면 필요에 따라 return을 생략하거나, 작동코드에 소괄호를 사용할 수 있다. 이 외에도 매개변수가 1개인 경우에는 매개변수의 소괄호를 생략도 가능하다

---

참조자료형

const nums1 = [1, 2, 3];
const nums2 = [1, 2, 3];
expect(nums1 === nums2).to.equal(false);

• num1과 num2라는 변수에 할당된 값은? 배열값이 아닌 주소값이 할당된다.
• 이에 모양은 같지만, 실제로 검사를 돌려보면 num1과 num2는 다르다고 출력된다.
• 이는 num1의 주소값과 num2의 주소값이 다르기 때문이다.
• 참조자료형(배열, 객체, 함수)을 데이터값으로 하는 변수는 주소값이 할당되며, 데이터 값은 heap이라는 공간에 보관된다.

---

Array.slice()

let arr = [1, 2, 3, 4, 5, 6, 7, 8]
arr.slice(0) === [1, 2, 3, 4, 5, 6, 7, 8]	// 배열 전체 복사
arr.slice(1) === [2, 3, 4, 5, 6, 7, 8]	// index 1 부터 끝까지 복사
arr.slice(1, 3) === [2, 3, 4]	// index 1부터 3개 복사
arr.slice(2, 0) === []	//index 2부터 0개 복사 === 빈배열
arr.slice(1, 100) === [2, 3, 4, 5, 6, 7, 8] // index 1 부터 100개 복사(arr.length < 100, 끝까지 복사)

• 배열의 복사는 Array.slice(); 외에도 ES6 이후 도입된 spread 문법을 사용해 복사할 수 있다(얕은 복사=주소만 복사).
• 객체의 복사는 Object.assign();과 spread 문법을 사용해 복사할 수 있다(얕은복사).