[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 5회차 미션

Hoisting

호이스팅(hoisting)은 ECMAScript® 2015 언어 명세 및 그 이전 표준 명세에서 사용된 적이 없는 용어입니다. 호이스팅은 JavaScript에서 실행 콘텍스트(특히 생성 및 실행 단계)가 어떻게 동작하는가에 대한 일반적인 생각으로 여겨집니다. 하지만 호이스팅은 오해로 이어질 수 있습니다.

예를 들어, 호이스팅을 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것으로 가르치지만, 실제로는 그렇지 않습니다. 변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서 입력한 위치와 정확히 일치한 곳에 있습니다.

출처 - https://developer.mozilla.org/ko/docs/Glossary/Hoisting

function x(){
    console.log('hello js');
}

x();

y();
function y(){
    console.log('hello js');
}

함수 x와 y의 차이점은 무엇일까?

바로 선언이 먼저냐 호출이 먼저냐 일것이다.

실행해보면 둘다 정상적으로 실행이된다.

변수에서도 마찬가지로 호이스팅 현상이 보여진다.

이러한 현상은 함수에서만 일어나는것은 아니다.

아래에 있는 선언을 끌어올리는 현상이라고 할 수 있다.

console.log(name);
name = 'jiwon';
console.log(name);
var name;

 

주의해야할 점은.

호이스팅은 선언 만 끌어올리는것이다.

console.log(name);
name = 'jiwon';
console.log(name);
var name='nago';

이 코드의 결과도 위의 결과와 같게 출력이 되는것이다. var name; 만 호이스팅 되는것.

console.log(name);
name = 'jiwon';
console.log(name);
let name='nago';

<결과>

let을 사용할 때는 호이스팅이 일어나지않는다

자료형 (Data Types)

동적 타이핑

자바스크립트는 느슨한 타입 (loosely typed) 언어, 혹은 동적 (dynamic) 언어이다. 그 말은, 변수의 타입을 미리 선언할 필요가 없다는 뜻이다. 타입은 프로그램이 처리되는 과정에서 자동으로 파악될 것이다. 또한 그 말은 같은 변수에 여러 타입의 값을 넣을 수 있다는 뜻이다.

var foo = 42;    // foo 는 이제 Number 임
var foo = "bar"; // foo 는 이제 String 임
var foo = true;  // foo 는 이제 Boolean 임

변수가 가지는 고정 타입이 없다.

하지만 타입이 없는것은 아니다

데이터 타입

• 기본 타입(Primitive values)
  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • Symbol(ECMAScript 6에 추가)
• 객체(Object)

Boolean

true,false 두 가지만 존재함

const isTrue = true;
const isFalse = false;
console.log(isTrue, typeof isTrue);
console.log(isFrue, typeof isFalse);

const a= new Boolean(false);
console.log(a, typeof a);

 

const a= new Boolean(false);
console.log(a, typeof a);

이부분에 대해서는 a에 true 혹은 false의 값이아닌 Object가 담기기 때문에

if (a) 와 같은 조건문을 사용해도 a가 false가 아닌 객체로 판단하기 때문에 true의 결과 값을 반환한다.

그래서 저렇게 사용하지 않는다.

Null

const a = null;
console.log(a);

Null은 값이 없다는 것을 의미하는 object이다.

Undefined

let b;
console.log(b, typeof b);

아무값도 할당되지 않았을 때 undefined가 된다.

Null과 Undefined를 비교하면 어떻게될까?

undefined == null ? console.log("같아요") : console.log("달라요") 

== 연산자를 사용하면 값만 비교하기 때문에 같아요가 출력된다 하지만

=== 연산자를 사용하면 값과 타입까지 함께 비교하기때문에

undefined === null ? console.log("같아요") : console.log("달라요") 

좀 더 정확한 비교를 할 수 있다.

Number

숫자를 의미한다.

const a = 25;
console.log(a, typeof a);

 

정수 뿐만아니라 실수도 같은 결과를 보여준다.

숫자형 자료형에는 NaN이라는 예약어가 존재한다.

숫자가 아닌 문자열로 산술연산을 했을때 나오는 결과값 Not A Number이라는 뜻.

String

문자형

const a = "jiwon";
cnosole.log(a);
const b = " hi";
console.log( a + b );

문자열끼리의 덧셈은 문자열을 연결해주는 기능을 한다.

Symbol

const a = Symbol();
const b = Symbol(25);
const c = Symbol("jiwon");
const d = Symbol("jiwon");

console.log( c === d );

 

Symbol은 같은 인자를 가져도 다르게 인식한다. 고유한 것을 처리할 때 Symbol로 사용한다.

 

 

해당내용은 아래 링크 에서 수강할 수 있다.

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/2ETLEzm

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스