[JavaScript 심화] JS Study 일지 (3일차)

---

1. 데이터 타입

---

01. 데이터 타입 생각해볼 것들

📌 🤔 : 아래의 내용들은 이번 장에서 얻을 수 있는 지식들입니다. 이러한 것들을 배운다고 생각하고 데이터 타입 챕터를 읽어가주세요, 다 읽은 이후에 아래의 질문에 대한 답을 답할 수 있으면 완벽합니다.

1.다른 언어에서는 어떻게 데이터 타입을 정의 할까요? 2.다른 언어들처럼 데이터 타입을 다룬다면 장단점은 무엇이 있을까요? 3.기본형 데이터와 참조형 데이터를 굳이 왜 구분해서 다룰까요? 혹시 하나의 방식으로 다 다룰수는 없을까요? 4.왜 불변 객체를 이용해야 할까요? 어떤 실수가 있을 수 있을까요? 5.왜 자바스크립트에는 undefined와 null이 있을까요?

 

1.다른 언어에서는 어떻게 데이터 타입을 정의 할까요?

프로그래밍 언어에서 사용할 수 있는 데이터( 숫자, 문자열, 불린언어 등) 의 종류를 말한다. 코드에서 사용되는 모든 데이터는 메모리에 저장하고 참조할 수 있어야 한다.

2.다른 언어들처럼 데이터 타입을 다룬다면 장단점은 무엇이 있을까요?

장점은 오류가 날 가능성이 적어진다? 정도가 있을 것 같다.

다만, 단점으로 번거로움이 커질 수 있겠다.

3.기본형 데이터와 참조형 데이터를 굳이 왜 구분해서 다룰까요? 혹시 하나의 방식으로 다 다룰수는 없을까요?

기본형 데이터는 변수를 선언하면 데이터가 담길 공간을 확보하고, 확보된 데이터의 주소값을 가지고 변수명과 매칭시킨다. 그리고 매칭된 주소로 이동하여 데이터를 저장한다.

비어있는 데이터 공간 확보 → 변수명과 매칭 → 매칭 주소에 데이터 저장

참조형 데이터는 각 프로퍼티명과 해당 프로퍼티의 값이 담실 주소를 매칭하기 위한 공간을 확보한다. 프로퍼티와 확보된 주소를 매칭 시킨 다음, 각각의 주소값마다 데이터를 할당한다. 이런 과정을 데이터 공간에 기본형 데이터가 담길 때가지 반복한다. 참조형 데이터는 결국 기본형 데이터의 집합이라고 볼 수 있다.

비어있는 데이터 공간 확보 → 객체 속 프로퍼티에 대한 공간을 또 다시 확보 → 객체의 프로퍼티명과 주소를 매칭 →확보했던 두 번째 주소에 데이터 할당

4.왜 불변 객체를 이용해야 할까요? 어떤 실수가 있을 수 있을까요?

객체에 변화를 가해도 원본이 그대로 남아있어야 하는 경우가 있을 수 있다.

ex) 정보가 바뀌었으면 알림 전송하는 경우, 바뀌기 전의 정보와 바뀐 후의 정보를 보여줘야 하는 경우 등

만약 객체에 변화를 가했을 때, 원본이 변화하면 예시를 든 상황에서 바뀌기 전의 정보를 알 수 없다.

5.왜 자바스크립트에는 undefined와 null이 있을까요?

null은 텅텅 비어있는 값을 의미하고

undefined는 변수를 선언만 하고 값이 할당되어 있지 않은 것.

 

---

02. 데이터 타입 KeyWord

 📌 🤔 : 이번 장에서 가장 중요한 키워드입니다. 데이터 타입 장을 읽고 아래의 단어들을 조금 더 이해하는게 오늘의 목표입니다. 천천히 읽어보시고, 각 조원분들과 적당하게 나눠서 아래의 키워드를 직접 설명해주세요.

Keyword : 기본형, 참조형, 불변성, 메모리 주소, 식별자, 변수, 가변값, 데이터 영역, 변수 영역, 불변 객체, 얕은 복사, 깊은 복사, undefined, null,

 

---

03. 데이터 타입 Questions

📌 1.타입을 지정하는 언어는 어떠한 언어가 있는지 확인해보고 해당 언어들과 자바스크립트의 방식의 장단점을 조사해주세요, 가능하다면 실제 케이스를 찾아보고 대답해주세요

2.변수와 식별자는 어떻게 다를까요?

3.기본형과 참조형은 자바스크립트에서 어떻게 다르고 어떻게 구현되어 있나요?

4.불변 객체에 대해서 알게된 만큼 작성해주세요

5.얕은 복사와 깊은 복사는 어떠한 차이점이 있으며, 그렇다면 각각의 복사는 어떠한 장단점이 있을까요?

 

---

04. 데이터 타입 Answers

Question 01.

❓ 1.타입을 지정하는 언어는 어떠한 언어가 있는지 확인해보고 해당 언어들과 자바스크립트의 방식의 장단점을 조사해주세요, 가능하다면 실제 케이스를 찾아보고 대답해주세요

 

주재훈 :

우선 타입을 지정하기 이전에 타입에는 number, string, boolean, object 등이 있다.

이 타입에도 유형이 있는데 동적 타입과 정적 타입이 존재한다.

동적 타입은 내가 지금까지 써왔던 JavaScript, Python 이 있다.

동적 타입의 언어 자료형은 컴파일 시 자료형을 정하는 것이 아니고, 실행할 때 결정된다.

장점은 우리 같은 프로그래머들이 굳이 타입을 고민할 필요 없이 빠르게 코드 작성이 가능하다.

하지만 이러한 이유로 실행 도중에 변수에 예상치 못한 타입이 들어와서 TypeError이 발생할 수 있다.

이와 반대로 정적 타입 언어로는 C, C#, C++, Java, & TypeScript가 있다.

정적 언어를 간단히 정리하자면, 변수 생성 시 타입을 같이 명시해주는 것이다.

이러한 이유로 정적 언어의 장점으로는 컴파일 시 미리 타입에 대한 정보를 결정했기 때문에, 실행 속도가 빠를 수 있다.

그리고, 타입 에러로 인한 문제점을 초기에 발견할 수 있어서 안정성이 높다. 하지만, 매번 코드를 입력할 때, 변수형을 결정해줘야 하는 우리에게 번거로움이 있을 것이다.

자바의 데이터 타입 지정하는 예시를 보여주겠다.

변수 선언의 예

int i;
double d; 
char c1, c2;

왼쪽에 파란 글씨로 표현된게 데이터 타입이고, 오른쪽에 있는 i, d, c1, c2가 모두 변수명이다.

만약 같은 데이터 타입의 변수 여러개를 동시에 선언하고 싶다면 변수명을 콤마(,)로 구분해서 작성한다.

Question 02.

 ❓ 2.변수와 식별자는 어떻게 다를까요?

 

주재훈 :

let name = "주재훈";

이렇게 변수를 선언했을 때, “주재훈” 데이터 값이 왼쪽의 변수에 할당 된다는 것.

식별자는 변수의 이름으로 (변수명) name이라고 할당되는 것.

Question 03.

❓ 3.기본형과 참조형은 자바스크립트에서 어떻게 다르고 어떻게 구현되어 있나요?

 

주재훈 :

기본형은 원시형이라고도 불리며 ( number, string, boolean, null, undefined )가 있다.

참조형은 대표적으로 객체(object)가 있고 그 하위에 Array(배열), Function(기능), RegExp(정규표현식) 등이 있다.

두 Type 에 있어서 가장 큰 차이점이라 하면,

기본(원시)형에는 값을 그대로 할당한다 라는 것.

참조형에는 값이 저장된 주소 값을 할당한다 라는 것.

Question 04.

 ❓ 4.불변 객체에 대해서 알게된 만큼 작성해주세요

 

주재훈 :

불변 객체는 객체 내부 프로퍼티를 변경할 때 마다 새로운 객체를 만들어 재 할당하기로 정하거나, 자동으로 새로운 객체를 만드는 도구를 활용

불변 객체가 필요한 경우는 객체에 변화를 가해도 원본이 그대로 남아 있어야 하는 경우이며,

불변 객체를 만들기 위해서는 얕은 복사와 깊은 복사가 필요하다.

 

Question 05.

 ❓ 5.얕은 복사와 깊은 복사는 어떠한 차이점이 있으며, 그렇다면 각각의 복사는 어떠한 장단점이 있을까요?

 

주재훈 :

얕은 복사는 원 객체의 프로퍼티를 (for in 반복문)으로 새 객체에 복사하는 방법이 있고 이 복사는 바로 아래 단계의 값들만 복사하는 방법이있다.

let copyObject = function (target) {
    let result = {};
    for (let prop in target) {
      result[prop] = target[prop];
    }
    return result;
  };

해당 for in 반복문을 함수에 적용하여 변수를 생성하고

let user = {
  name: "jaehun",
  gender: "male",
};

let user2 = copyObject(user);
user2.name = "jayden";

if (user !== user2) {
  console.log("유저 정보가 변경되었습니다."); // 유저 정보가 변경되었습니다.
}

console.log(user.name, user2.name); // jaehun jayden
console.log(user === user2); // false

생성된 함수를 user를 target 으로 한 다음 user2에 저장해주면 얕은 복사가 생성되어

해당 user의 값은 원래 그대로 console.log에 찍혀나오고

복사한 새 객체의 프로퍼티 값은 변경되어서 나온다.

깊은 복사는 얕은 복사 만으로는 중첩된 객체를 제대로 복사할 수 없기 때문에, 바로 아래 단계의 값들만 새로운 데이터 주소로 복사하는 것.

let copyObjectDeep = function (target) {
    let result = {};
  
    if (typeof target === "object" && target !== null) {
      for (let prop in target) {
        result[prop] = copyObjectDeep(target[prop]); // 재귀적 호출
      }
    } else {
      result = target;
    }
  
    return result;
};

let user = {
    name: "jaehun",
    gender: "male",
};

let user2 = copyObjectDeep(user);
user2.name = "jayden";

if (user !== user2) {
    console.log("유저 정보가 변경되었습니다."); // 유저 정보가 변경되었습니다.
}

console.log(user.name, user2.name);
console.log(user === user2);

이와 같은 함수로 표현할 수 있다.

즉, 얕은 복사는 원 객체에 있던 값을 내포하고 있지는 않지만, 깊은 복사는 원 객체에 있던 프로퍼티의 값도 내포하고 있다.

 

---

2. 실행 컨텍스트

---

01. 실행 컨텍스트 생각해볼 것들

📌 🤔 : 아래의 내용들은 이번 장에서 얻을 수 있는 지식들입니다. 이러한 것들을 배운다고 생각하고 데이터 타입 챕터를 읽어가주세요, 다 읽은 이후에 아래의 질문에 대한 답을 답할 수 있으면 완벽합니다.

1.실행 컨텍스트는 무엇일까요? 2.실행 컨텍스트 객체가 활성화되는 시점에 수집되는 정보는 무엇일까요? 각각 왜 수집할까요? 3.호이스팅은 무엇일까요? 4.왜 귀찮게 호이스팅같은 개념이 있을까요? 5.함수 선언문과 함수 표현식은 어떻게 다를까요? 6.스코프는 무엇일까요? 7.스코프는 왜 중요할까요?

 

1.실행 컨텍스트는 무엇일까요?

실행 컨텍스트는 자바스크립트 코드가 실행되는 환경이다. 모든 JavaScript 코드는 실행 컨텍스트 내부에서 실행된다. 코드들이 실행되기 위한 환경이자 하나의 박스이자 컨테이너라 볼 수 있다.

즉, 함수가 실행되면 함수 실행에 해당하는 실행 컨텍스트가 생성되고, 자바스크립트 엔진에 있는 콜 스택에 차곡차곡 쌓인다.

2.실행 컨텍스트 객체가 활성화되는 시점에 수집되는 정보는 무엇일까요? 각각 왜 수집할까요?

• VariableEnvironment
  • 현재 컨텍스트 내의 식별자(변수)들에 대한 정보
  • 외부 환경 정보
  • 선언 시점의 LexicalEnvironment의 스냅샷(변경사항 반영 X)
• LexicalEnvironment
  • 처음에는 VariableEnvironment와 같음
  • 변경 사항이 실시간으로 반영됨
• ThisBinding
  • 식별자가 바라봐야 할 대상 객체

3.호이스팅은 무엇일까요?

자바스크립트에서는 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것.

4.왜 귀찮게 호이스팅같은 개념이 있을까요?

함수 호이스팅이 발생하는 원인은 자바스크립트 변수 생성과 초기화(선언과 할당)가 분리되어 진행되기 때문

5.함수 선언문과 함수 표현식은 어떻게 다를까요?

둘 모두 함수를 새롭게 정의할 때 쓰이는 방식입니다. 함수 선언문은 function 정의만 존재하고 별도의 할당 명령이 없는 것을 의미하고, 반대로 함수 표현식은 정의한 function을 별도의 변수에 할당하는 것을 말한다. 함수명을 정의한 함수 표현식을 ‘기명 함수 표현식’, 정의하지 않은 것을 ‘익명 함수 표현식’이라고 부르기도 하는데 일반적으로 함수 표현식은 익명 함수 표현식이라 한다.

함수 선언문과 함수 표현식의 차이점은 함수 선언문은 전체를 호이스팅 하고 함수 표현식은 변수 선언부 만 끌어올린다.

6.스코프는 무엇일까요?

1. 스코프의 정의

Scope = 유효범위

JavaScript를 포함한 모든 프로그래밍 언어의 기본적인 개념.

스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙.

우리가 사용하는 JavaScript는 이 규칙대로 식별자 찾는다.

1. 스코프 사용 예제

만약 함수 X 안에 선언된 변수 a 가 있다면 선언된 변수는 함수 내부에서만 참조할 수 있다.

이게 스코프다.

7.스코프는 왜 중요할까요?

스코프가 없다면 같은 식별자 이름은 Conflict 되므로 프로그램 전체에서 하나밖에 사용할 수 없다.

디렉터리가 없는 컴퓨터를 가정해보면 같은 이름을 갖는 파일을 하나밖에 만들 수 없다.

스코프는 이러한 상황(Conflict) 같은 식별자 이름의 충돌을 방지할 수 있다.

 

---

02. 실행 컨텍스트 KeyWord

---

📌 🤔 : 이번 장에서 가장 중요한 키워드입니다. 데이터 타입 장을 읽고 아래의 단어들을 조금 더 이해하는게 오늘의 목표입니다. 천천히 읽어보시고, 각 조원분들과 적당하게 나눠서 아래의 키워드를 직접 설명해주세요. (여기에 키워드를 복사해주세요)

Keyword : 실행 컨텍스트, this, 환경 정보, 스택, 큐, 전역 컨텍스트, 콜스택, Variable Environment, Lexical Environment, 호이스팅, 함수 선언문, 함수 표현식, 스코프, 스코프체인

 

---

03. 실행 컨텍스트 Questions

---

 📌 Questions에 대한 답은 팀원분들과 함께 작성해주세요, 내용을 작성하는데 필요한 개념이나 단어들을 모르는 팀원이 없도록 서로 설명해가며 작성해야합니다. 최종적으로 제출한 답변에 있는 개념이나 단어는 모두가 알고 있어야 합니다.

1.우리가 실행 컨텍스트를 제대로 이해하지 못한다면 어떤 문제가 일어날까요?

2.우리가 스코프를 제대로 이해하지 못한다면 어떤 문제가 일어날까요?

 

---

04. 실행 컨텍스트 Answers

---

Question 01.

 ❓ 1.우리가 실행 컨텍스트를 제대로 이해하지 못한다면 어떤 문제가 일어날까요?

 

주재훈 :

우선 실행 컨텍스트의 정의는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로서, 동일한 스코프에 있는 코드들을 실행할 때 필요한 환경 정보를 모아 컨텍스트를 구성하고, 이를 호출 스택(콜 스택)에 쌓아서 실행 순서를 보장합

여기서 말을 풀어보자면, 아래에 있는 스코프라는 단어도 들어가 있다.

조금 더 쉽게 풀어서 설명하자면, 우리가 실행할 코드에 가져다 줄 정보들을 모아놓은 객체인데, 같은 유효범위 내에 있는 코드들을 실행할 때 필요한 유효 정보를 모아서 문맥을(컨텍스트를) 구성하고 이것을 호출하는 처리업무에 쌓아서 실행 순서를 지켜준다는 것이다.

실행 컨택스트는 실행 문맥이라는 우리말로 이해하면 이해하기 쉽다.

문맥상 맞지않는 곳에 만약 함수가 실행이 되거나 변수가 선언이 된다면, 컴퓨터는 작성자가 하고자하는 logic을 알아차리지 못하고 원하지 않는 값을 출력할 가능성이 크다.

 

Question 02.

❓ 2.우리가 스코프를 제대로 이해하지 못한다면 어떤 문제가 일어날까요?

 

주재훈 :

변수를 정의할때 유효범위를 인지하지 못하여 원하는 결과값을 도출하지 못 할수있다.

즉 Conflict 상황이 올 수 있게된다.