JS 핵심 개념과 주요 문법

JavaScript에서 자료형(type)이란 값(value)의 종류이다. 각각의 자료형은 고유한 속성과 메서드를 가지고 있는데 자료형은 크게 두 가지로 구분할 수 있다. 원시 자료형(primitive type)과 참조 자료형(reference type)이다.

원시 자료형 : number, string, boolean, undefined, null, symbol

42, 'string', true, undefined, null

참조자료형 : 원시 자료형이 아닌 모든 자료형은 참조자료형이다. 대표적으로 배열, 객체, 함수이다.

[0, 1, 2] // 배열
{name: 'kimcoding', age: 45} // 객체
function sum (x, y) { return x + y } // 함수

원시 자료형의 특징

• 원시 자료형을 변수에 할당하면 메모리 공간에 값 자체가 저장된다.
• 원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값 자체가 복사되어 전달된다.
• 원시 자료형은 변경 불가능한 값(immutable value)이다. 즉, 한 번 생성된 원시 자료형은 읽기 전용(read only) 값이다.

참조 자료형의 특징

• 참조 자료형을 변수에 할당하면 메모리 공간에 주소값이 저장된다.
• 참조 값을 갖는 변수를 다른 변수에 할당하면 주소값이 복사되어 전달된다.
• 참조 자료형은 변경이 가능한 값(mutable value)이다.

---

배열 복사하기

slice()

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

spread syntax

let arr = [0, 1, 2, 3];

console.log(...arr); // 0 1 2 3

---

객체 복사하기

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

spread syntax

let obj = { firstName: "coding", lastName: "kim" };
let copiedObj = {...obj};

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

 

 ➡️ 위 방법으로 참조 자료형을 복사할 경우, 중첩된 구조 중 한 단계까지만 복사됨 (얕은 복사)

깊은 복사

내부적으로는 중첩된 구조 전체를 복사하는 깊은 복사를 구현할 수 없다. 다른 문법을 응용하여 같은 결과물을 만들 수 있다.

 

JSON.stringify() 와 JSON.parse()

참조 자료형을 문자열 형태로 변환하여 반환하고, JSON.parse()는 문자열의 형태를 객체로 변환하여 반환한다. 먼저 중첩된 참조 자료형을 JSON.stringify()를 사용하여 문자열의 형태로 변환하고 반환된 값에 다시 JSON.parse()를 사용하면, 깊은 복사와 같은 결과물을 반환한다.

 

완전한 깊은 복사를 반드시 해야 하는 경우, node.js 환경에서 외부 라이브러리인 lodash, 또는 ramda를 사용하면 된다.

---

스코프

범위가 중괄호(블록) 또는 함수에 의해 나누어지고 그 범위를 스코프라고 한다.

스코프는 선언한 변수 안쪽 스코프에서 사용 가능하고, 안쪽에서 선언한 변수는 바깥쪽 스코프에서 사용할 수 없다.

• 스코프는 중첩이 가능하며, 가장 바깥의 스코프는 전역 스코프(Global scope)라고 부른다 (안쪽은 지역스코프 Local scope)
• 지역 변수는 전역 변수보다 더 높은 우선 순위를 가진다

스코프의 종류

중괄호로 둘러싼 범위 블록 스코프 (block scope)

함수로 둘러싼 범위 함수 스코프 (function scope)

블록 단위로 스코프를 구분했을 때, 훨씬 더 예측 가능한 코드를 작성할 수 있으므로 let 키워드의 사용을 권장함

var 키워드는 블록 스코프를 무시하고 함수 스코프만 따른다 (이전방식)

값이 변하지 않는 상수를 정의할 때 쓰는 const - 값을 새롭게 할당할 일이 없다면 const 사용 권장

---

클로저

함수와 그 함수 주변의 상태의 주소 조합이다. 다시 말해, 클로저는 함수와 그 함수가 접근할 수 있는 변수의 조합이다.

클로저의 함수는 어디에서 호출되느냐와 무관하게 선언된 함수 주변 환경에 따라 접근할 수 있는 변수가 정해지기 때문이다.

 

커링

커링은 여러 전달인자를 가진 함수를 함수를 연속적으로 리턴하는 함수로 변경하는 행위입니다

 

모듈패턴

모듈은 하나의 기능을 온전히 수행하기 위한 모든 코드를 가지고 있는 코드 모음으로, 하나의 단위로서 역할을 한다. 모듈은 다른 모듈에 의존적이지 않고 독립적이어야 한다. 데이터를 다른 코드 실행으로부터 보호하는 개념을 정보 은닉(information hiding)이라고 한다. 이는 캡슐화(encapsulation)의 큰 특징이기도 하다.