[JavaScript] Hoisting? Arrow function? JavaScript 기초 문법

 

1. var, let

 

 const와 함께 변수를 선언할 수 있는 명령어이다. Javascript는 런타임 도중에 각 변수들의 데이터의 타입이 결정되므로 int, float, string 등의 데이터 타입별로 선언하는 명령어가 없다.

 

var와 let의 차이

var와 let 모두 호이스팅(6)으로 실행 전 코드 맨 위로 올라가지만 var는 undefined로 초기화하지만 let은 초기화되지 않아 변수 선언 이전 let으로 선언된 변수를 사용하려하면 참조 오류가 발생한다.

console.log(a); // "undefined"
var a = 1;

console.log(a); // "ReferenceError: Cannot access 'a' before initialization"
let a = 1;

 

 

또한 var은 블록 범위(scope)에 상관없이 재선언과 업데이트 모두 가능하므로 다음과 같은 결과값이 나온다.

var a = 1;
if (true) {
    var a = 2;
}
console.log(a); // "2"

 

하지만 let은 같은 블록 범위(scope) 내에선 업데이트만 가능하며 재선언이 불가하므로 다음과 같은 결과가 나온다.

let a = 1;
if (true) {
    let a = 2;
}
console.log(a); // "1"

 

 

2. NaN / Infinity

 

 다른 언어에서 예외처리할 때 봤었던 친구. Not a Number의 약자로 숫자가 아닌 값을 변환하려고 할 때 나오는 형태.

예로 String 타입에 / 2 등의 숫자 계산이 들어갈 시에 NaN이라고 출력이 된다.

let a = "String" / 2;
console.log(a); // "NaN"

 

Javascript에선 1 / 0 의 계산도 가능한데 이렇게 값이 발산하는 경우 Infinity라는 값으로 출력된다.

let a = 1 / 0;
let b = -1 / 0;
console.log(a); // "Infinity"
console.log(b); // "-Infinity"

 

 

3. for .. in / for .. of

 

for .. in = 객체의 Key값을 출력하는 문법

let obj={
    a : '1',
    b : '2',
    c : '3'
}
for(let key in obj){
    console.log(key , obj[key]);
}

/*
Print:a 1
b 2 
c 3
*/

 

배열은 index 번호가 출력됨

let obj=[10, 11, 12]
for(let index in obj){
    console.log(index , obj[index]);
}

/*
Print:0 10
1 11
2 12
*/

 

 

for .. of = 배열, Map 처럼 반복 가능한 객체의 요소(value)를 하나씩 반복해줌 (Object는 반복 가능한 객체가 아님)

const arr = ['a', 'b', 'c'];

for (const value of arr) {
  console.log(value);
}

/*
print:a
b
c
*/

 

 

4. Arrow function

 

 함수를 간단하게 선언하여 바로 사용하고 싶을 때 주로 쓰는 화살표 함수는 다음과 같이 일반적인 함수 선언보다 간단하게 선언할 수 있다.

function Func(a, b) {
    return a + b;
}

let arrowFunc = (a, b) => {
    return a + b;
}

let arrowFunc = (a, b) => a + b; // {}, retrun 생략

함수 내부의 코드가 return 뿐일 경우 다음과 같이 대괄호와 return을 생략할 수도 있다.

매개변수가 하나라면 소괄호 () 도 생략 가능하다.

function Func() {
    return 10;
}

let arrowFunc = () => {
    return 10;
}

let arrowFunc = () => 10;

매개변수가 없는 경우 위와 같이 표현이 가능하다.

 

 

5. Hoisting 

 

 Javascript의 인터프리터가 실행 전 변수와 함수 선언을 맨 위로 이동시키는 Javascript의 주요 매커니즘이다.

environmentRecord(=record)의 수집 과정이며 변수 정보 수집 과정을 이해하기 쉽게 설명한 '가상 개념'
단, 매개변수 및 변수는 선언부를 호이스팅하며 함수는 선언식만 호이스팅되며 표현식은 되지 않는다.

 

함수 정의 3가지  방식
1. 함수 선언문
2. 함수 표현식
     2-1. 익명 함수 표현식 : 변수에 할당하는 함수중 변수가 곧 함수명이 되는 것
     2-2. 기명 함수 표현식 : 변수에 할당하는 함수임에도 함수에 이름을 붙이는 것

함수 선언식에선 함수가 호이스팅되면서 전역 공간에서 영향을 미치며 다른 개발자와 충돌할 수 있음

협업을 위해서  함수 표현식을 사용하여 변수 식별자가 호이스팅 되게끔 하는 습관을 들여야 함

 

 

more..

형변환시 +는 문자열을 기준으로 나머지 -,/,*는 숫자로 형변환을 한다!

let a = "1" + 1;
let b = "2" - 1;
let c = "10" * 2;
let d = "10" / 2;

console.log(a, typeof a); // 11 string
console.log(b, typeof b); // 1 number
console.log(c, typeof c); // 20 number
console.log(d, typeof d); // 5 number

 

==와 ===는 다르다. ==은 값만 같은지 비교하며, ===은 값과 데이터 타입이 모두 같은지를 비교해준다.

let a = 1;
let b = "1";

console.log(a == b); // true
console.log(a === b); // false

 

 

 

 

 1년 반 동안 학원에서 C/C++/Java/Python의 기초 문법을 가르쳤지만 Javascript에는 처음 접하는 기초 문법들이 많았다. 난생 처음보는 문법들을 보니 새로웠고 js는 색다른 매력이 있는 것 같다고 느껴졌다. 까먹지 말자!