Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 102 additions & 0 deletions 1주차 /sunghyun/1week.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
# 04. 변수

## 4.1 변수란 무엇? 왜 필요?

### 변수가 무엇인지 알기 전에

```js
10 + 20;
```

- 자바스크립트 엔진이 자바스크립트 코드를 계산하려면 먼저 기호(리터럴과 연산자)를 알고 있어야 하고 표현식의 의미도 해석(파싱)할 수 있어야 한다.
- `+` 연산을 수행하기 위해 `+` 연산자의 좌변과 우변의 숫자 값(피연산자)의 데이터를 메모리에 저장한다.
- 컴퓨터는 사람을 모델로 고안되었다. 사람은 두뇌를 통해 기억을 담지만, 컴퓨터는 **메모리**를 통해서 데이터를 저장하는 셈이다.
- 컴퓨터는 사람을 모델로 고안되었다는 사실을 항상 기억하자. 어떤 문제를 해결할 때 중요한 단서가 될 수도 있을 것 같다.

### 무엇?

- 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 주소를 식별하기 위해 붙인 이름
- 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘
- 값의 위치를 가리키는 상징적인 이름
- 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 저장된다.

### 왜 변수라는 개념이 필요한가?

- 메모리 주소는 임의로 결정된다. 메모리 주소는 코드가 실행될 때 결정되며 실행될 때마다 그 값이 변한다. 이는 시스템을 멈추게 하는 치명적인 오류를 야기할 수 있다.
- 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해서
- 개발자가 직접 메모리 주소를 통해 값을 저장하고, 참조할 필요가 없고 변수를 통해 안전하게 값에 접근할 수 있다.

### 변수 이름(변수명, 식별자)

- 메모리 공간에 저장된 값을 식별할 수 있는 고유 이름
- 사람이 이해할 수 있는 언어로 값이 저장된 메모리 공간에 붙인 상징적인 이름
- 변수 이름을 사용해 참조를 요청하면 자바스크립트 엔진은 변수 이름과 매핑된 메모리 주소를 통해 메모리 공간에 접근해서 저장된 값을 반환한다.

### 변수값

- 변수에 저장된 값

### 할당 (대입, 저장)

- 변수게 값을 저장하는 것

### 참조

- 변수에 저장된 값을 읽어 들이는 것

## 4.2 식별자

> "10과 20을 연산한 결과 값을 메모리 주소 #1001에 저장할게. 이 메모리 주소와 매핑되어 있는 식별자는 sum이야."

### 무엇?

- 변수 이름, 함수, 클래스 등의 이름
- 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름
- 선언에 의해 자바스크립트 엔진에게 식별자의 존재를 알림
- 특정 값은 메모리 공간에 저장되어 있기 때문에 식별자는 메모리 공간에 저장되어 있는 어떤 값을 구별해서 식별할 수 있어야 한다.

### 역할

- 어떤 값이 저장되어 있는 **메모리 주소**를 저장한다.
- 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺고 매핑 정보도 메모리에 저장됨

### 어디에 등록되나?

- 실행 컨텍스트에 등록된다. (실행 컨텍스트 : 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역. 식별자와 스코프를 관리한다. 자바스크립트 엔진이 변수를 관리할 수 있도록 변수의 존재를 알리는 것.)
- 변수 이름과 값은 실행 컨텍스트 내에 객체 형태로 등록되어 관리된다.

### 4.3 변수 선언

> 변수 score을 선언하여 변수 이름을 등록한 후 #1001에 메모리 공간을 확보하고, undefined로 초기화 할게.

## 무엇?

- 변수를 생성하는 것
- 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것
- 변수 선언에 의해 확보된 메모리는 확보가 해제되기 전까지 누구도 확보된 메모리 공간을 사용할 수 없도록 보호되므로 안전하게 사용할 수 있음

## 선언 방법

```js
var score; // 변수 선언
```

- `var`, `let`, `const` 키워드 사용
- `var` vs `let`, `const`
- `var` : 함수 레벨 스코프
- `let`, `const` : 블록 레벨 스코프
- `var` 키워드는 함수의 스코프만을 지역 스코프로 인정한다. 따라서, 코드 블록 내에 선언해도 전역 변수가 되는 문제점이 있다.

## 선언하면 어떤 일이 벌어지나?

- 변수 이름을 등록하고 값을 저장할 메모리 공간에 `undefined`라는 값이 암묵적으로 할당되어 초기화 됨

## 변수 초기화

- 변수가 선언된 이후 최초로 값을 할당하는 것
- 초기화를 거치지 않으면 확보된 메모리 공간에는 이전에 다른 애플리케이션이 사용했던 값(garbage value)이 남아있을 수 있음
- 값을 할당하지 않은 상태에서 곧바로 변수 값을 참조하면 garbage value가 나올 수 있음

## 변수를 선언하지 않으면?

- ReferenceError(식별자를 통해 값을 참조하려 했지만 자바스크립트 엔진이 등록된 식별자를 찾을 수 없음)발생
100 changes: 57 additions & 43 deletions 1주차/qkreltms/index.md → 1주차 /sunghyun/qkreltms/index.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# 1주차 정리

## 4장 변수

변수 또는 식별자란?

메모리에서 어떤 값이 저장되어있는 주소를 가리키는 상징적인 이름이다.
Expand All @@ -12,28 +14,33 @@ JS는 개발자의 직접적인 메모리 제어를 허용하지 않는다.

소스코드 실행시 변수 선언 이나 모든 선언문(함수, 클래스 등)은 런타임 이전에 실행된다. 따라서 변수가 어디에서 선언이 되던지 접근이 가능하다. 이것을 전문용어로 호이스팅이라 부름.(단, let,const 등은 제한이 있음) 이 때에 변수는 메모리의 쓰레기 값을 보여주지 않기 위해 undefined로 자동 초기화 된다.

변수 네이밍 규칙: 예약어, 숫자, 특수문자를 제외한 문자, (_), ($)로 시작해야한다.
변수 네이밍 규칙: 예약어, 숫자, 특수문자를 제외한 문자, (\_), ($)로 시작해야한다.

## 5장 표현식과 문

표현식(expression): 평가되어 값을 생성할 수 있는 문

문(statement): 프로그램을 구성하는 기본 단위이자 최소 실행 단위.
문(statement): 프로그램을 구성하는 기본 단위이자 최소 실행 단위.

예:

예:
```js
var score = 50 + 50 // 문 + 표현식
var score = 50 + 50; // 문 + 표현식

console.log(score) // 문 + 표현식.
console.log(score); // 문 + 표현식.

a=b=c=0 // 문 + 표현식
a = b = c = 0; // 문 + 표현식

if (true) {} // 제어문(제어 + 문)
if (true) {
} // 제어문(제어 + 문)
```

리터럴(literal): 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 예: 3

세미콜론은 Optional이나 ASI(automatic semicolon insertion)에 의해 자동 삽입된다.

## 6장 데이터 타입

원시 타입(총 6개)

1. 숫자, 문자열, 불리언, undefined, null, Symbol
Expand Down Expand Up @@ -64,27 +71,23 @@ undefined은 JS 엔진이 변수를 초기화하 데 사용하므로 의도적
자바스크립트 변수는 선언이 아닌 할당에 의해 타입이 결정된다.(타입 추론) 재할당을 통해 언제든지 동적으로 변할수 있다.

## 7장 연산자

연산자란?

하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 지수 연상 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자(operand)라 한다.

숫자 타입이 아닌 피연산자에 + 단항 연산자를 사용하면 피연산자를 숫자 타입으로 암묵적으로 변환하여 반환한다.

```js
+'1' = 1

+true = 1

+'hello' = NaN

+undefined = NaN
+"1" = 1 + true = 1 + "hello" = NaN + undefined = NaN;
```

피연산자 중 하나 이상이 문자열인 경우 문자열 연산자로 피연산자를 문자열 타입으로 암묵적 변환하여 동작한다.

```js
'1'+2 = '12'
"1" + 2 = "12";
// true 1로 암시적 변환된다.
1+true = 2
1 + true = 2;
```

비교연산자
Expand All @@ -94,43 +97,49 @@ undefined은 JS 엔진이 변수를 초기화하 데 사용하므로 의도적
반면 일치 비교 연산자(===) 는 타입과 값을 비교한다.

예외
```js
NaN === NaN // false
isNaN(NaN) // true
isNaN(1+undefined) // true

-0 === +0 // true
```js
NaN === NaN; // false
isNaN(NaN); // true
isNaN(1 + undefined) - // true
0 ===
+0; // true
// ES6, 더 예측가능한 비교를 위해서 Object.is 사용
Object.is(-0,+0) // false
Object.is(NaN,NaN) // true
Object.is(-0, +0); // false
Object.is(NaN, NaN); // true
```

js는 python과 다르게 set에 대해 논리 연산자(||, &&, !)를 쓸 수 없다.

```py
set([1,2,3]) | set([3,4,5]) # {1,2,3,4,5}
set([1,2,3]) & set([3,4,5]) # {3}
set([1,2,3]) - set([3,4,5]) # {1,2}
```

```js
const union = (first, second) => { // first: set, second: set
const union = [...first];
second.forEach((value) => { if (!union.includes(value)) union.push(value); })
const union = (first, second) => {
// first: set, second: set
const union = [...first];
second.forEach((value) => {
if (!union.includes(value)) union.push(value);
});
// 없을 때에만 추가 해준다. (합집합 중복 방지)
return union;
}
};

const intersect = function(first, second) { // first: set, second: set
return first.filter(value => second.includes(value)); // 둘 다 있으면 교집합
}
const intersect = function (first, second) {
// first: set, second: set
return first.filter((value) => second.includes(value)); // 둘 다 있으면 교집합
};

const complement = function(first, second) { // first: set, second: set
return first.filter(value => !second.includes(value)); // 중복되는 것 제거하면 차집합
}
const complement = function (first, second) {
// first: set, second: set
return first.filter((value) => !second.includes(value)); // 중복되는 것 제거하면 차집합
};


const setA = new Set([1,2,3])
const setB = new Set([3,4,5]);
const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);

union(setA, setB); // Set([1,2,3,4,5])
intersect(setA, setB); // Set([3])
Expand All @@ -141,18 +150,23 @@ complement(setB, setA); // Set([4,5])
js 버그

```js
typeof null // null이 아닌 object가 나온다.
typeof null; // null이 아닌 object가 나온다.
// 따라서 null 타입 확인시 일치 연산자(===)를 사용
foo = null
foo === null // true
foo = null;
foo === null; // true
```

지수 연산자

```js
2**2 = 4 // 2^2
Math.pow(2,2) = 4// 2^2
2 ** 2 = 4; // 2^2
Math.pow(2, 2) = 4 - // 2^2
// 주의!!
-5 ** 2 = error // 이와 반해 c 계열, python은 -25가 나온다. 왼쪽 피연산자를 양수로 암묵적 변환 후 5^2 계산, 음수를 입혀준다. 아래의 방법으로 해야 잘 나온다.
5 ** 2 = error(
// 이와 반해 c 계열, python은 -25가 나온다. 왼쪽 피연산자를 양수로 암묵적 변환 후 5^2 계산, 음수를 입혀준다. 아래의 방법으로 해야 잘 나온다.

(-5) ** 2 - 1 = -25
-5
) **
2 -
1 = -25;
```
Loading