[DAY 5] JavaScript 핵심 개념과 주요 문법

목차

🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일

⭐요약

---

JavaScript에서 참조자료형, 스코프, 클로저, ES6 주요 문법에 대해 정리한다.

 

Chapter 1. 참조자료형	원시자료형은 값 자체를 저장하고, 참조자료형은 힙(heap)에 값을 저장한 후 주소값을 변수에 저장함. 얕은 복사는 spread syntax, Object.assign(), slice()로 구현할 수 있음. 깊은 복사는 JSON 메서드 조합 또는 외부 라이브러리(lodash, ramda)를 사용함.
Chapter 2. 스코프	변수 접근 규칙에 따른 유효 범위를 의미함. 블록 스코프와 함수 스코프로 구분되며, var는 블록 스코프를 무시하므로 let/const 사용을 권장함.
Chapter 3. 클로저	함수와 그 함수가 접근할 수 있는 변수의 조합을 의미함. 데이터 보존 함수와 커링(currying) 등에 활용됨.
Chapter 4. ES6 주요문법	spread/rest 문법으로 배열이나 인자를 유연하게 다룰 수 있음. 구조분해할당으로 배열·객체의 값을 간결하게 변수에 할당할 수 있음. 화살표 함수는 function 키워드를 =>로 대체하며 간결한 문법을 제공함.

 

⭐참조자료형

---

1. 원시자료형과 참조자료형

🚀 자료형의 구분

• 원시자료형(primitive type): number, string, boolean, undefined, null, symbol
• 참조자료형(reference type): 원시자료형이 아닌 모든 자료형으로, 배열·객체·함수가 이에 해당한다.

🚀 원시자료형 vs 참조자료형 특징 비교

구분	원시자료형	참조자료형
변수에 값 할당 시	값 자체를 저장함	heap에 값을 저장하고 주소값을 변수에 저장함
다른 변수에 할당 시	원시 값 자체를 복사함	주소값을 복사 (두 변수가 같은 주소를 가리킴)
값 변경 여부	변경 불가 (재할당 시 새 값 생성, 이전 공간은 GC가 처리)	변경 가능 (참조하는 주소의 값을 직접 변경함)

2. 얕은 복사와 깊은 복사

원시자료형이 할당된 변수를 다른 변수에 할당하면 값 자체의 복사가 일어난다. 따라서 원본과 복사본 중 하나를 변경해도 다른 하나에 영향을 미치지 않는다.

 

반면 참조자료형이 할당된 변수를 다른 변수에 할당하면 주소값이 복사되어 원본과 복사본이 같은 주소를 참조한다. 이때 요소를 추가하면 원본에도 영향을 미친다.

 

1) 얕은 복사(shallow copy): 중첩된 구조 중 한 단계까지만 복사한다.

① spread syntax (변수명 앞에 ...)

let arr = [0, 1, 2, 3];
let copiedArr = [...arr];
console.log(copiedArr);       // [0, 1, 2, 3]
console.log(arr === copiedArr); // false

② Object.assign(): 객체 복사

let obj = { firstName: "coding", lastName: "kim" };
let copiedObj = Object.assign({}, obj);
console.log(copiedObj);       // { firstName: "coding", lastName: "kim" }
console.log(obj === copiedObj); // false

③ slice()

 

2) 깊은 복사(deep copy): 내부에 중첩되어 있는 모든 참조자료형을 복사한다.

JavaScript 내부적으로는 중첩된 구조 전체를 복사하는 깊은 복사를 구현할 수 없다. 따라서 아래 방법을 사용한다.

• JSON.stringify()와 JSON.parse()를 조합하여 사용한다.
• 외부 라이브러리인 lodash 또는 ramda를 사용한다.

⭐스코프(Scope)

---

1. 스코프와 주요 규칙

• 스코프(Scope): 변수 접근 규칙에 따른 유효 범위를 의미한다.
• 스코프는 중첩이 가능하다.
• 안쪽 스코프에서 바깥쪽 스코프의 변수에는 접근할 수 있지만, 반대는 불가능하다.

2. 변수 선언과 스코프

🚀 스코프의 종류

• 블록 스코프: 중괄호 { }로 둘러싼 범위를 의미한다.
• 함수 스코프: 함수로 둘러싼 범위를 의미한다.

🚀 var 키워드의 특징

• var 키워드는 블록 스코프를 무시하고 함수 스코프만 따른다. (단, 화살표 함수의 블록 스코프는 무시하지 않는다.)
• 블록 단위로 스코프를 구분할 때 훨씬 예측 가능한 코드를 작성할 수 있으므로 let / const 사용을 권장한다.

3. 변수 선언 시 주의할 점

🚀 window 객체

• window는 브라우저 창을 대표하는 객체이지만, 브라우저 창과 관계없이 전역 항목도 담고 있다.
• var로 선언된 전역 변수와 전역 함수는 window 객체에 속한다.

🚀 주의할 점

• let, const를 주로 사용한다.
• 선언 키워드 없는 변수 할당은 금지한다. 선언 키워드가 없으면 var로 선언된 것처럼 취급된다.

⭐클로저(Closure)

---

1. 클로저 기초

• 클로저(Closure): 함수와 그 함수가 접근할 수 있는 변수의 조합을 의미한다.

아래 코드에서 찾을 수 있는 클로저는 두 가지이다.

const globalVar = '전역 변수';

function outerFn() {
  const outerFnVar = 'outer 함수 내의 변수';
  const innerFn = function() { 
    return 'innerFn은 ' + outerFnVar + '와 ' + globalVar + '에 접근할 수 있습니다.';
  }
  return innerFn;
}

• 함수 outerFn과 outerFn에서 접근할 수 있는 globalVar
• 함수 innerFn과 innerFn에서 접근할 수 있는 globalVar, outerFnVar

2. 클로저 활용

1) 데이터를 보존하는 함수

클로저를 활용하면 외부 함수의 변수를 내부 함수가 기억하여 데이터를 보존할 수 있다.

function createFoodRecipe (foodName) {
  const getFoodRecipe = function (ingredient1, ingredient2) {
    return `${ingredient1} + ${ingredient2} = ${foodName}!`;
  }
  return getFoodRecipe;
}

const highballRecipe = createFoodRecipe('하이볼');
highballRecipe('콜라', '위스키');   // '콜라 + 위스키 = 하이볼!'
highballRecipe('탄산수', '위스키'); // '탄산수 + 위스키 = 하이볼!'

위 예시처럼 다양한 하이볼 레시피를 하나의 함수로 제작할 수 있다.

 

2) 커링(Currying)

• 커링: 여러 전달인자를 가진 함수를 함수를 연속적으로 리턴하는 함수로 변경하는 행위를 말한다.
• 함수의 일부만 호출하거나, 일부 프로세스가 완료된 상태를 저장하기에 용이하다.

function sum(a, b) {
  return a + b;
}

function currySum(a) {
  return function(b) {
    return a + b;
  };
}

console.log(sum(10, 20) === currySum(10)(20)); // true

currySum과 같은 형태의 함수를 커링 함수라고 부른다.

⭐ES6 주요 문법

---

1. spread / rest 문법

1) spread 문법

• 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용한다.

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
sum(...numbers); // 6

2) rest 문법

• 파라미터를 배열의 형태로 받아서 사용하며, 파라미터 개수가 가변적일 때 활용한다.

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

sum(1, 2, 3);    // 6
sum(1, 2, 3, 4); // 10

2. 구조분해할당

• 구조분해할당: spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정을 말한다.

1) 배열의 구조분해할당

const [a, b, ...rest] = [10, 20, 30, 40, 50];
// a = 10, b = 20, rest = [30, 40, 50]

2) 객체의 구조분해할당

const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10, b = 20, rest = { c: 30, d: 40 }

3. 화살표 함수(Arrow Function)

• 함수 표현식으로 함수를 정의할 때 function 키워드 대신 화살표(=>)를 사용한다.

// 기존 함수 표현식
const multiply = function(x, y) {
  return x * y;
}

// 화살표 함수
const multiply = (x, y) => {
  return x * y;
}

🚀 화살표 함수의 특징

• 매개변수가 한 개일 때 소괄호를 생략할 수 있다.
• 함수 코드 블록 내부가 하나의 문이면 중괄호를 생략할 수 있다. 이때 해당 문이 리턴값이면 return도 생략할 수 있다.

⭐후기

---

• 참조자료형의 동작 방식을 이해하면서 얕은 복사와 깊은 복사의 차이에 대해 알았다. 실제 프로젝트에서 배열과 객체를 다룰 때 의도치 않은 원본 변경이 생길 수 있으므로 주의해야겠다.
• 스코프 개념을 익히면서 var가 왜 지양되는지 이해할 수 있었다. 앞으로는 let과 const를 사용하는 습관을 들여야겠다.
• 클로저는 개념 자체가 낯설었지만, 데이터 보존 함수와 커링 예시를 통해 이해할 수 있었다.

⭐참고자료

---

1) MDN Web Docs, "Spread syntax (...)", https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

2) MDN Web Docs, "Closures", https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

 

이 글은 코드스테이츠 x KNU가 주최한 직무역량캠프에서 공부한 내용을 작성한 것입니다.