diff --git "a/1\354\243\274\354\260\250/jaewoo/index.md" "b/1\354\243\274\354\260\250/jaewoo/index.md" new file mode 100644 index 0000000..cfaf83d --- /dev/null +++ "b/1\354\243\274\354\260\250/jaewoo/index.md" @@ -0,0 +1,444 @@ +# 4장 변수 + +**변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙이 이름이다.** + +- **변수는 값의 위치를 가리킨다.** +- **할당**은 변수에 값을 저장하는 것 +- **참조**는 변수에 저장된 값을 읽어 들이는 것 + +## 식별자 + +**식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름이다.** + +- 값은 메모리 공간에 저장되어 있어서 원하는 값을 구별해서 식별할 수 있어야 한다. +- **식별자는 값이 아니라 `메모리 주소`를 기억하고 있다.** +- 식별자는 메모리 주소에 붙인 이름이다. + +## 변수선언 + +값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다. + +- **변수를 사용하기 위해서는 반드시 `선언`이 필요하다.** +- **var, let, const 키워드를 사용한다.** + +```jsx +var score; // 변수 선언 +``` + +- 자바스크립트는 위와 같이 변수를 선언하면, 값을 할당하지는 않았지만, 메모리 공간에 `undefined` 값이 할당되어 초기화 된다. +- **초기화**란 변수가 선언된 이후 최초로 값을 할당하는 것을 말한다. +- 초기화 단계를 거치지 않으면 확보된 메모리 공간에는 이전에 다른 애플리케이션이 사용한 값이 남아 있는데, 이를 **쓰레기 값(garbage value)**라고 한다. +- 자바스크립트의 var 키워드는 암묵적으로 초기화를 하므로 쓰레기 값으로부터 안전하다. + +### 변수 이름은 어디에 등록되는가? + +- 변수 이름을 비롯한 모든 식별자는 `실행 컨텍스트`에 등록된다. +- `실행 컨텍스트`는 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다. + +## 변수 선언의 실행 시점과 변수 호이스팅 + +```jsx +console.log(score); // undefined +var score; // 변수 선언문 +``` + +- 자바스크립트는 인프리트 언어로 차례대로 한줄씩 실행되지만 위의 예제를 보면 첫번째 줄이 실행되고 변수 선언이 되었지만, 참조 에러가 발생하지 않는다. +- 변수 선언이 소스코드가 한 줄씩 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문에 에러가 발생하지 않는다. +- 자바스크립트 엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 **먼저 실행**된다. +- `변수 호이스팅(variable hoisting)`은 변수 선언문이 코드의 선두로 끌어 올려진것처럼 동작하는 것을 말한다. + +## 값의 할당 + +- `**변수 선언`은 소스코드가 순차적으로 실행되는 시점인 `런타임 이전에 실행`되지만, `값의 할당`은 소스코드가 순차적으로 실행되는 시점인 `런타임에 실행`된다.** + +```jsx +console.log(score); // undefined +var score = 80; // 변수 선언과 값의 할당 +console.log(score); // 80 +``` + +- 변수에 값을 할당할 때는 이전 값 undefined가 저장되어 있던 메모리 공간을 지우고 그 메모리 공간에 할당 값을 새롭게 저장하는 것이 아니라 **새로운 메모리 공간을 확보하고 그곳에 할당 값을 저장**한다. + +## 값의 재할당 + +- `재할당`이란 이미 값이 할당되어 있는 **변수에 새로운 값을 할당**하는 것이다. +- 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 `**상수**`라고 한다. +- `상수`는 한번 정해지면 변하지 않는 값이다. + +### 가비지 콜렉터(garbage collector) + +- `가비지 콜렉터`는 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 **사용되지 않는 메모리를 해제**하는 기능이다. +- 사용되지 않는 메모리란 어떤 식별자도 **참조하지 않는 메모리 공간**을 말한다. +- 가비지 콜렉터는 **메모리 누수를 방지**한다. + +# 5장 표현식과 문 + +## 값 + +`값(value)`은 `식(표현식)`이 평가되어 생성된 결과이다. + +- `평가`란 식을 해석해서 값을 생성하거나 참조하는것을 의미한다. + +```jsx +// 10 + 20은 평가되어 숫자 값 30을 생성한다. +10 + 20; // 30 + +// 변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당된다. +var sum = 10 + 20; +``` + +## 리터럴 + +**리터럴(literal)은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다.** + +- 자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터를을 평가해 값을 생성한다. + +## 표현식 + +**표현식은 값으로 평가될 수 있는 문이다. 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.** + +- 리터럴, 식별자(변수, 함수 등의 이름), 연산자, 함수 호룰 등의 조합으로 이뤄질 수 있다. + +## 문(statemnet) + +`문`은 프로그램을 구성하는 기본 단위이자 최소 실행 단위다. + +문은 명령문이라고도 하며, 문이 실행되면 명령이 실행되고 무슨일이 발생한다. + +## 표현식인 문과 표현식이 아닌 문 + +```jsx +// 변수 선언문은 값으로 평가될 수 없으므로 표현식이 아니다. +var x; +// 1, 2, 1+2, x=1+2는 모두 표현식이다. + +``` + +# 6장 데이터 타입 + +자바스크립트는 7개의 데이터 타입이 존재하며, 원시 타입(primitive type)과 객체 타입(object/reference type)으로 구분된다. + +## 숫자 타입 + +- 다른 언어들과 달리 자바스크립트는 하나의 숫자 타입만 존재한다. +- 숫자 타입의 값은 64비트 부동소수점 형식을 따른다. +- 모든 수를 실수로 처리하며, 정수만을 위한 데이터 타입이 존재하지 않는다. + +## 문자열 타입 + +- 문자열 타입은 텍스트 데이터를 나타낸다. +- 문자열은 0개 이상의 16비트 유니코드 문자의 집합이다. +- `""`, `''`, ```` 로 감싼 형태로 표현한다. + +## 템플릿 리터럴 + +- ES6부터 새로운 문자열 표기법이 도입되었다. +- 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 편리한 문자열 처리 기능을 제공한다. +- ```` 을 사용해서 표현한다. +- 런타임에 일반 문자열로 변환된다. + +```jsx +var template = `Template literal` +``` + +### 멀티 라인 문자열 + +- 일반 문자열은 줄바꿈을 할 수 없다. +- 일반 문자열은 `\` 기호와 함꼐 이스케이프 시퀀스를 사용해야한다. + +```jsx +var template = ''; +// 아래와 같이 출력된다. + +``` + +### 표현식 삽입 + +- 문자열을 조합시에는 `+`를 사용한다. +- **표현식 삽입**으로 간단하게 문자열을 삽입할 수 있다. + +```jsx +var first = 'Jaewoo'; +var last = 'Han'; +// ES5 +console.log('My name is ' + first + ' '+ last+'.'); +// ES6 +console.log(`My name is ${first} ${last}.`); +``` + +## 불리언 타입 + +- true / false 값을 가진다. + +## undefined 타입 + +- undefined 타입의 값은 undefined로 값이 유일하다. +- var로 변수 선언시에 암묵적으로 undefined가 초기화된다. +- undefined는 자바스크립트 엔진이 변수를 초기화 할 때 사용하는 값이다. +- 개발자는 값이 할당되지 않았다는 것을 표현하기 위해서는 null을 사용하는 것이 좋다. + +## null 타입 + +- null 타입의 값은 null이 유일하다. +- null은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다. +- 변수가 더이상 값을 참조하지 않는 다는 것을 의미하며, 자바스크립트 엔진은 메모리 공간에 대해 가비지 콜렉션을 수행한다. +- 함수가 유효한 값을 반환할 수 없을 경우에 null을 반환하는 경우가 있다. + +## 심벌 타입 + +- ES6에서 추가된 타입으로 변경 불가능한 원시타입이다. +- 심벌 값은 다른 값과 중복되지 않는 유일한 값이다. + +## 객체 타입 + +- 자바스크립트를 이루고 있는 거의 모든것이 객체다. +- 6가지 데이터 타입 이외의 값은 모두 객체 타입이다. + +## 데이터 타입의 필요성 + +- 값을 저장할 때 확보해야 하는 **메모리 공간의 크기**를 결정하기 위해 +- 값을 참조할 때 한 번에 읽어 들여야 할 **메모리 공간의 크기**를 결정하기 위해 +- 메모리에서 읽어 들인 **2진수를 어떻게 해석**할지 결정하기 위해 + +## 동적 타이핑 +### 동적 타입 언어와 정적 타입 언어 + +C나 자바와 같은 정적 타입 언어는 변수를 선언할 때 변수에 타입을 선언해야 한다. + +- 정적 타입 언어는 컴파일 시점에 **타입 체크**를 수행한다. +- 런타임에 발생하는 에러를 줄인다. + +**자바스크립트는 변수를 선언할 때 타입을 선언하지 않는다.** + +- `var`, `let`, `const`의 키워드로 변수를 선언만 한다. +- 변수는 선언이 아닌 할당에 의해 타입이 결정된다. +- 재할당에 의해 변수의 타입은 언제든지 변할 수 있다. + +# 7장 연산자 + +## 산술 연산자 + +피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. + +산술 연산이 불가능하면, `NaN`을 반환한다. + +### 이항 산술 연산자 + +- 2개의 피연산자를 산술 연산하여 숫자 값을 만든다. +- 피연산자의 값을 변경하는 부수효과가 없다. +- 어떤 산술 연산을 해도 피연산자의 값을 바꾸지 않고 새로운 값을 만들기만 한다. + +### 단항 산술 연산자 + +- 1개의 피연산자를 산술 연산하여 숫자 값을 만든다. +- `++` / `--` 연산자는 피연산자의 값을 변경하는 부수효과가 있다. + +```jsx +var x = 5, result; + +// 선할당 후증가 +result = x++; +console.log(result, x) // 5 6 + +// 선증가 후할당 +result = ++x; +console.log(result, x) // 7 7 + +// 선할당 후감소 +result = x--; +console.log(result, x) // 7 6 + +// 선감소 후할당 +result = --x; +console.log(result, x) // 5 5 +``` + +### 문자열 연결 연산자 + +`+`연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다. + +```jsx +// 문자열 연결 연산자 +'1' + 2 // '12' + +// 산술 연산자 +1 + 2 // 3 + +// true는 1로 타입 변환된다. +1 + true // 2 + +// false는 0으로 타입 변환된다. +1 + false // 1 + +// null은 0으로 타입 변환된다. +1 + null // 0 + +// undefined는 숫자로 타입 변환되지 않는다. +1 + undefined // NaN + +``` + +## 할당 연산자 + +우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다. + +할당연산자는 좌항의 변수에 값을 할당하므로 변수 값이 변하는 **부수 효과가 있다.** + +- = +- += +- -= +- *= +- /= +- %= + +```jsx +var x; + +x = 10; +console.log(x); // 10 + +x += 5; // x = x + 5 +console.log(x); // 15 + +x -= 5; // x = x - 5 +console.log(x); // 10 + +x *= 5; // x = x * 5 +console.log(x); // 50 + +x /= 5; // x = x / 5 +console.log(x); // 10 + +x %= 5; // x = x % 5 +console.log(x); // 0 +``` + +## 비교 연산자 + +비교 연산자는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 **불리언 값으로 반환**한다. + +### 동등/일치 비교 연산자 + +- == 동등 비교 +- === 일치 비교 +- != 부동등 비교 +- !== 불일치 비교 + +**동등 비교(==)는 좌항과 우항의 피연산자를 비교할 때 먼전 `암묵적 타입 변환`을 통해 타입을 일치시킨 후 같은 값인지 비교한다.** + +```jsx +// 동등 비교 +5 == 5; // true +// 타입은 다르지만 암묵적 타입 변환을 통해 타입을 일치시킨다. +5 == '5' // true +``` + +**일치 비교(===)는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에만 true를 반환한다.** + +```jsx +// 일치 비교 +5 === 5; // true +// 암묵적 비교를 하지 않는다. +// 타입과 값도 같아야 한다. +5 === '5' // true +``` + +NaN과 **숫자 0은 주의해야한다.** + +```jsx +// NaN은 자신과 일치하지 않는 유일한 값이다. +NaN === NaN // false + +// 양의 0과 음의 0은 모두 true이다. +0 === -0 // true +0 == -0 // true +``` + +ES6에 추가된 `Object.is`를 사용하면 예측 가능한 정확한 비교 결과를 반환한다. + +```jsx +Object.is(-0, +0) // false +Object.is(NaN, NaN) // true +``` + +### 대소 관계 비교 연산자 + +피연산자의 크기를 비교하여 불리언 값을 반환한다. + +```jsx +5 > 0 // true +5 > 5 // false +5 >= 5 // true +5 <= 5 //true +``` + +## 삼항 조건 연산자 + +삼항 조건 연산자는 조건식의 평가 결과에 따라 반환할 값을 결정한다. + +> 조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값 + +```jsx +var x = 2; +// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다. +var result = x % 2 ? '홀수' : '짝수' + +console.log(result) // 짝수 +``` + +## 논리 연산자 + +- || +- && +- ! + +```jsx +// 논리합 연산자 +true || true // true +true || false // true +false || true // true +false || false // false + +// 논리곱 연산자 +true && true // true +true && false // false +false && true // false +false && false // false + +// 논리 부정 연산자 +!true // false +!false // true + +// 암묵적 타입 변환 +!0 // true +!'Hello' // false + +``` + +## typeof 연산자 + +피연산자의 데이터 타입을 문자열로 반환한다. + +7가지 문자열 `string`, `number`, `boolean`, `undefined`, `symbol`, `object`, `function` 중 하나를 반환한다. + +```jsx +typeof '' // string +typeof 1 // number +typeof true // boolean +typeof undefined // undefined' +typeof Symbol() // symbol +typeof {} // object +typeof [] // object +typeof function(){} // function +``` + +## 그 외의 연산자 + +- ?. : 옵셔널 체이닝 연산자 +- ?? : null 병합 연산자 +- delete : 프로퍼티 삭제 +- new : 생성자 함수를 호출할 때 사용하여 인스턴스 생성 +- instanceof : 좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스이닞 판별 +- in 프로퍼티 확인 \ No newline at end of file