자바스크립트를 시작한지 4주차 첫째날이 되었다
이번 시간은 koans 문제를 통해 지금까지 공부한 자바스크립트의 주요 개념을 정리하고 탐구하는 시간을 가졌다
직접 찾아보고 깨우치는 자기주도적 학습 시간..!
✅ expect 함수
: 테스트 하는 값과 기대하는 조건(matcher)을 비교한다
expect(테스트하는값).(기대하는조건=expression 또는 value)
expect(A === B).to.be.true
expect(A + 1).to.equal(B)
expect(A[1]).to.deep.equal('young')
// to.deep.equal ---> 배열의 요소나 객체의 속성이 서로 같은지 확인하는 matcher
'==' loose equality: 동등 연산자는 예외 사항, 원치 않는 변수가 일어날 수 있는 환경이므로
'===' strict equality : 일치 연산자를 사용할 것참고할 자료
https://github.com/denysdovhan/wtfjs
✅JavaScript의 타입 중 헷갈렸던 부분
type conversion
✔️ 명시적 타입 변환
: Number() String() 등 생성자를 사용하여 형 변환 하는 것
💡Boolean() 에서는 0, undefined, null과 그와 동일한 값(비어져있는 값)은 false, 나머지는 모두 true가 된다
Number(null)
>0
Number(Undefined)
>NaN
Number(true)
>1
Number(false)
>0
Number(' 123 ')
>123 // 앞 뒤 공백 제거물론 숫자만으로 이루어진 string타입만 해당이 된다
숫자 이외의 문자가 포함되어 있다면 NaN 반환
✔️ 묵시적 타입 변환
: 💡자동 형 변환
string과 다른 모든 type의 덧셈은 string으로 반환이 된다는 것은 알았지만
string과의 뺄셈 나눗셈 곱셈은 적절한 타입(number)으로 자동 형 변환 되어 결과값이 나온다는 점...!
boolean과 number의 사칙연산에도 적용된다
'123' - 1
>122
'150' * false
>0
3 / '1'
>3
1 + true
>2
null + 5
>5✅ 변수 선언 키워드 var, let, const
다시 짚고 가는 변수 선언 키워드
var
: 재선언 가능, 재할당 가능
var로 선언한 전역 변수 및 전역 함수는 전역 객체에 속하게 되므로 주의할 것
선언 키워드 없이 변수를 할당하면 var로 선언한 전역 변수로 취급된다!
블록 스코프 무시, 화살표 함수와 함수 스코프만 따른다
(블록 스코프가 없다는 뜻. 함수 스코프이거나 전역 스코프이다)
let
: 재선언 불가능, 재할당 가능
블록 스코프와 함수 스코프 모두 따른다
const
: 재선언 불가능, 재할당 불가능
상수(constant)를 선언할 때 사용한다
블록 스코프와 함수 스코프 모두 따른다
✔️ 전역 객체란?
global scope에 항상 존재하는 객체
브라우저의 window 객체, node.js의 global 객체
모든 스코프에서 접근 가능한 변수를 담은 객체
참고할 자료 (구글 스타일 가이드)
https://google.github.io/styleguide/jsguide.html#features-use-const-and-let
✅ 함수 선언식(function declaration)과 함수 표현식(function expression), 화살표 함수(arrow function expression)
- 함수 선언식
: Function 키워드를 사용하여 함수를 직접 선언한다
Function funcDeclared(parameter) {
return something //선언
}
funcDeclared(argument) //호출- 함수 표현식
: 함수를 변수에 할당한 형태
마찬가지로 Function 키워드를 사용하지만 let 등 선언 키워드를 사용하여 변수를 선언하여 함수를 표현한다
const funcExpressed = Function() { //변수 선언, 익명함수 할당
return something
}- 화살표 함수
: 마찬가지로 함수를 변수에 할당한 형태이나 function 키워드를 생략한다
함수 스코프가 아닌 블록 스코프로 분류된다
코드를 간결하게 작성할 수 있다
const arrowFuncExpressed = (para1, para2) => para1 * para2 / 2;
// 화살표 뒤에 body 작성
// body에 return문만 있는 경우, 중괄호와 'return' 생략 가능
const adder = x => y => (x + y) * 5;
const adder = a => {
return b => {
return a / b
};
// 화살표 함수로 표현한 클로저✅ 자바스크립트의 호이스팅 (hoisting)
: side effect에 가까운 상황이므로 호이스팅 일으키지 말자
호이스팅이란 말 그대로 "끌어 올리는 것"
아마 클로저에 대해 검색하다가 호이스팅이라는 단어를 보게 된 것 같은데 이번 챕터에서 제대로 만나게 되었다
혼자 공부한 개념이라 정확하지 않을 수 있지만 내가 이해한 바를 기록해보려 한다
먼저 mdn에서 호이스팅의 뜻을 살펴보면
"변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것"
이라고 나와있다
var로 선언한 변수의 선언, 실행(console.log()등), 초기화에서 선언만이 호이스팅 된다 ❗️
let과 const 로 선언한 변수는 호이스팅 시 undefined로 초기화가 일어나지 않아서 referenceError가 발생한다
선언 없이 초기화만 있어도 referenceError 나타남 (호이스팅 될 것이 없으므로)
var을 사용하여 변수의 "호출 -> 선언 -> 초기화"의 순서로 코드를 작성한다면
선언이 호이스팅 되어 "선언 -> 호출 -> 초기화"의 맥락으로 코드가 실행되고
변수에 값이 할당되지 않은 undefined로 출력될 것이다
//작성한 코드
console.log(young); // 실행
var young; // 선언
young = 123; // 초기화
//실제 실행되는 맥락
var young; // var 선언 호이스팅
console.log(young); // 실행
young = 123; // 초기화
>undefined
>123 // 출력
console.log(abc); //실행
var abc = "abcd"; //선언 (호이스팅)
> "abcd" //출력1️⃣let 또는 const를 사용하거나 2️⃣선언 없이 초기화만 작성한다면
➡️ referenceError를 반환한다
1️⃣console.log(atog); // 실행
let atog; // 선언
atog = "abcdefg"; // 초기화
2️⃣console.log(atog);
atog = "abcdefg";
호이스팅은 함수 및 다른 자료형에도 적용된다
함수 선언문에서의 호이스팅
(함수 표현식에서는 호이스팅이 일어나지 않는 것처럼 보인다->TDZ)
function add2(para) {
return para + 2; //선언
}
add2(3) //호출
이와 같이 선언 -> 호출의 순서가 아닌
add2(3) //호출
function add2(para) {
return para + 2; //선언
}
호출 -> 선언의 순서로 작성하여도 코드가 동작한다
>5 //출력✅ 더 알아볼 것
-
며칠 째 보고 있는 ...
this
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this -
호이스팅에 관련하여 TDZ
TDD -
얕은 복사와 깊은 복사 https://www.digitalocean.com/community/tutorials/copying-objects-in-javascript
https://medium.com/watcha/깊은-복사와-얕은-복사에-대한-심도있는-이야기-2f7d797e008a
https://ko.javascript.info/object-copy
