#8일차 [JavaScript] 객체, 핵심 개념과 주요 문법 ( 원시 자료형과 참조 자료형, 스코프, 클로저 )

객체

 

• 줄바꿈 문자 (개행 문자)  :  " \n "
• 변수로 property를 입력할 때는 dot notation 사용 불가 Bracket 사용
• key 와 value를 묶어서 entry 라고 함.

 

 

for...in 문과 for...of 문

- for...in 문

• 객체의 열거 가능한 속성을 순회한다.
• 용도 : 주로 객체의 속성(키)를 순회할 때 사용한다.
• 동작 : 객체의 각 속성 이름 ( 키 ) 를 변수에 할당한다.

// 예시
let person = {name: "taco", age: 27, city: "Incheon"};

for (let key in person){
	console.log(key + ": " + person[key];
}
//출력
/*
	name: taco
    age: 27
    city: Incheon
*/

 

 

 

- for...of 문

• 반복 가능한 ( iterable ) 객체의 값을 순회한다.
• 용도 : 주로 배열, 문자열, Map, Set 등의 요소를 순회할 때 사용한다.
• 동작 : 각 순회에서 요소의 값을 직접 변수에 할당한다.

// 예시
let fruits = ["apple", "grape", "banana"];

for (let fruit of fruits){
	console.log(fruit);
}
//출력
/*
	apple
    grape
    banana
*/

 

 

- for...in 문과 for...of 문의 차이점

1. 순회 대상
   - for...in : 객체의 속성 ( 키 ) 를 순회
   - for...of : 반복 가능한 객체의 값을 순회
   
   
2. 사용 케이스
   - for...in : 객체의속성을 검사하거나 조작할 때 유용
   - for...of : 배열이나 다른 반복 가능한 객체의 값을 직접 다룰 때 유용
   
   
3. 주의사항
   - 배열의 인덱스 순서가 보장되지 않을 수 있다.
   
   
4. 요약
   - 객체의 속성을 순회할 때는 for...in
   - 배열이나 다른 반복 가능한 객체의 값을 순회할 때는 for...of를 사용하는게 일반적으로 더 적합  

 

 

 

 

 

원시 자료형과 참조 자료형

 

원시 자료형 ( Primitive Type )

 

 - 기본적이고 단순한 데이터 타입, 하나의 값만 저장할 수 있다.

 

 - 주요 원시 자료형 : Number, String, Boolean, undefined, null

 

 - 특징

    > 변수에 직접 값을 저장하고, 메모리 공간에 값 자체가 저장된다.
    > 값을 복사할 때 실제 값이 복사된다.
    > 변경 불가능한 값이다. 재할당 할 경우 변경되는 것처럼 보이지만 새로운 메모리 공간에 다시 할당하는 것 뿐이고, 원래의 메모리에는 값이 남아있어서 보통은 *'가비지 컬렉터'가 처리한다.

 

참조 자료형 ( Reference Type )

 

 - 참조 자료형은 여러 개의 값을 그룹으로 저장할 수 있다.

 

 - 주요 참조 자료형 : Object, Array, Function 등

 

 - 특징
    > 변수에 값 자체가 아닌 값이 저장된 메모리의 주소를 저장한다.

    > 값을 복사할 때 주소값이 복사되어 전달된다.

    > 변경이 가능한 값이다. ( 1차적인 값은 주소값인데 주소값을 변경 가능한 것이 아닌 주소에 저장된 2차적인 값을 변경 할 수 이싿.

 

 

 

얕은 복사 ( Shallow Copy ) 와 깊은 복사 ( Deep Copy )

 

  - 얕은 복사 ( Shallow Copy )

• 첫 번째 수준에 있는 값만 새로운 객체로 복사하는 방법
• 특징
  1. 최상위 속성만 새로운 메모리에 복사된다.
  2. 중첩된 객체나 배열은 참조만 복사된다.
  
  
• 얕은 복사 방법
  1. 전개 연산자 ( '...' ) 스프레드 연산자
  2. ' Object.assign() '
  3. 배열의 경우 ' slice() ' 메서드

 

 - 깊은 복사 ( Deep Copy )

• 객체의 모든 수준에 있는 값을 새로운 메모리에 완전히 복사하는 방법
  
  
• 특징
  1. 모든 중첩된 객체와 배열이 새로운 메모리에 복사된다.
  2. 원본 객체와 완전히 독립적인 새로운 객체가 생성된다.
  
  
• 깊은 복사 방법
  1. ' JSON.parse(JSON.stringify(obj)) '
  2. 재귀 함수를 사용한 수동 복사
  3. 라이브러리 사용 ( 예 : Lodash의 '_.cloneDeep()' )

>> 얕은 복사 === 집의 열쇠 복사, 새 열쇠로 집에 들어갈 수 있지만, 집 안의 물건을 바꾸면 원래 열쇠로 들어가도 바뀐 물건 볼 수 있다. 원본에 영향 있음.

>> 깊은 복사 === 집 전체를 똑같이 새로 짓는 것. 새 집에서 무엇을 ㅃ바꾸든 원래 집에 영향 없음. 원본에 영향 없음.

 

 

 

 

 

호이스팅

 

- 호이스팅이란 변수와 함수 선언이 그들이 속한 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 특성이다. 선언만! 선언만! 초기화나 할당값 xxxxxxxxxxxxxxxxxxxxxxxxxxx

 

- 기본 개념 :

• 변수와 함수 선언이 코드의 실행 전에 메모리에 저장
• 선언만 호이스팅 되고, 초기화나 할당은 호이스팅x
• 코드에서 실제로 선언이 나타나기 전에 변수나 함수를 사용할 수 있게 함

- 변수 호이스팅 ( var 키워드 )

 > var로 선언된 변수는 호이스팅 시 'undefined'로 초기화 된다.

console.log(x); // undefined
var x = 5;
console.log(x); // 5

 

--> let과 const로 선언된 변수도 호이스팅되지만, 초기화 전에 접근하면 ReferenceError가 발상핸다. a.k.a "일시적 사각지대 ( Temporal Dead Zone, TDZ )

 

- 함수 호이스팅 ( 함수 선언문, 함수 표현식 )

 > 함수 선언문은 전체가 호이스팅된다. (그래서 밑에다가 함수 만들어놔도 위에서 함수 부르면 호출되나부다.)

 > 함수 표현식은 변수 호이스팅 규칙을 따른다. ( 변수에 함수를 할당했기 때문에 변수 규칙을 따른다.)

 

- 주의사항
 > 코드의 가독성과 유지보수성을 떨어뜨릴 수 있다. ( 그래서 var 를 사용하는 것을 지양한다. )

 

 

 

한 줄 정리

 

 - const 를 사용해서 변수를 선언, 초기화 하면 상수여서 재할당이 안되지만 Reference Type 일 경우 주소를 상수로 지정해서 할당 하는 것이기 때문에 주소 내의 값은 변경 할 수 있다. ( 주소값을 바꾸는 건 불가능 )

 

- 클로저 ( 간단하게만 ) : 함수의 스코프 상 접근 불가능한 스코프에 접근하기 위한 것. ( 안쪽 스코프에서는 바깥에 접근 할 수 있지만 바깥에서는 안쪽 스코프에 접근하지 못하는데 이것을 뚫기 위함 ) 

 

 

 

 

몰랐던 용어 정리

 

 * 가비지 컬렉션 ( Garbage Collection ) : 프로그래밍 언어의 자동 메모리 관리 시스템으로 더 이상 필요하지 않은 메모리를 자동으로 식별하고 해제하는 프로세스이다. ( 더 이상 참조되지 않는 객체를 '가비지'로 간주하고 주기적으로 이러한 가비지 객체를 찾아 메모리에서 제거한다.