TIL) JavaScript Koans 개념 정리

omegle·2022년 9월 8일
0

JavaScript

목록 보기
7/8
post-thumbnail

Koans는 불교에서 유래된 단어로, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있다고 한다.

기초를 재정비하는 느낌으로 페어분과 풀다가 처음 보는 개념들이 나올때마다 검색하며 새로운 개념들을 습득하고 헷갈리던 기존 개념들도 확실하게 정리하고 넘어갈 수 있는 섹션이어서 만족도가 높았다!

별난 자바스크립트

3  - 1  // -> 2
3  + 1  // -> 4
'3' - 1  // -> 2
'3' + 1  // -> '31'
Number  + Number  -> addition
Boolean + Number  -> addition
Boolean + Boolean -> addition
Number  + String  -> concatenation
String  + Boolean -> concatenation
String  + String  -> concatenation

따라서

expect('1' + true).to.equal('1true');

지역 변수 선언 규칙

constlet
const 또는 let을 사용하여 모든 지역 변수를 선언할 수 있다.
변수를 재할당해야 하는 경우가 아니면 기본적으로 const를 사용하며, var 키워드를 사용하지 말자!(거의 권장되지 않는다)

선언당 하나의 변수
모든 지역 변수 선언은 단 하나의 변수만 선언한다.

let a = 1, b = 2;    // 추천되지 않음

필요할 때 선언하고 가능한 한 빨리 초기화
지역 변수는 포함하는 블록 또는 블록과 유사한 구성의 시작 부분에서 습관적으로 선언 되지 않고, 범위를 최소화하기 위해 처음 사용되는 지점에 가깝게 선언된다!


함수 호이스팅(hoisting)이란?

선언이 먼저 메모리에 저장되었다는 의미

호이스팅은 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다.(실제로 끌어올려진 것은 아님)
JS는 코드를 실행하기 전 따로 컴파일 과정을 거친다.(컴파일: 사람이 이해하는(고수준) 언어로 이루어진 코드를 컴퓨터가 이해할 수 있도록(저수준) 쪼개고, 체계적인 구조로 재가공하여 전체를 분석하는 일련의 과정을 말함) 여기서 JS엔진은 모든 스코프를 탐색하며 각 스코프의 변수 객체에 여러 식별자를 수집하는데 실행 시점으로 넘어가기 전에 선언된 식별자에 대한 정보를 이미 알고 있기 때문에 스코프의 어느 지점에서든 관련된 함수나 변수를 참조할 수 있게된다.

특징

  • 함수는 무조건 호이스팅의 대상이다. 다른 무엇보다 가장 먼저 이루어진다.
  • 선언된 함수는 상단에서 참조, 호출이 가능하다.
  • 선언된 var는 상단에서 참조, 할당이 가능하다.
  • 선언된 let,const는 상단에서 참조, 할당이 불가능하다.
let num = 7;
{
  console.log(num);
  let num = 1;
}                         
// Reference Errorr가 나는데 let도 호이스팅 현상이 일어나 최상단으로 이동하는 것 같은 효과 때문이다.

변수 호이스팅 (var, let, const 키워드)

자바스크립트의 모든 선언에는 호이스팅이 일어나는데, let, const, class를 이용한 선언문을 호이스팅이 발생하지 않는 것처럼 동작한다.

var 키워드로 선언된 변수와는 달리 let ,const 로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다.

이는 let 키워드로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문이다.

TDZ(Temporal Dead Zone; TDZ)
= 변수를 호출할 수 없는 구역으로 호출하면 ReferenceError가 난다. 여기서 변수는 존재하지만, 초기화가 되어있지 않다.

{
/*
 * Temporal Dead Zone of a
 * a는 이 구간에서 참조할 수 없다.
 * console.log(a) // Reference Error
 *
 */
  let a;
}

화살표 함수 사용범(복습)

1. function 키워드를 생략하고 화살표 => 를 붙인다.

const multiply = (x, y, z) => {
	return x * y * z
}

2. 리턴을 생략할 수 있다.

const sum = (x, y, z) => x + y + z

3. 필요에 따라 소괄호를 붙일 수도 있다.

const subtract (x, y, z) => (x - y - z)

4. 인자가 하나일 경우 소괄호 생략가능하다.

const divdedBy3 =  x => x / 3

.this


Iterable


깊은 복사와 얇은 복사

+작성중..

참고
호이스팅에 대한 오해와 진실

Hello World JavaScript -Iterable

profile
JANG EUN JI | 장은지

0개의 댓글