TIL) JS 기초, let vs const vs var, 함수 선언 3가지 방법, 원시형, 객체형, undefined 와 null의 차이

 

<변수를 선언하는 방법>
let 키워드와 const 키워드의 차이

 

const - always 

let - sometimes

var - never

 

const 재선언 금지, 재할당 금지

let 재선언 금지, 재할당 가능
var 재선언 가능, 재할당 가능

 

const a = b;
const a = c;
//재선언 금지

const a = b;
a = c;
//재할당 금지

let a = b;
let a = c;
//재선언 금지

let a = b;
a = c;
//재할당은 가능

var a = b;
var a = c;
a = d;
//재선언, 재할당 가능

 

---

함수 선언 방법

 

함수 선언식 => 호이스팅에 영향을 받는다. - 선언 전에 호출되도 정상적으로 동작!

(호이스팅: 자바스크립트의 특징으로, 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다. )

 

function 함수명 () {
 구현할 로직
};

ex)

function getQuadrangleArea (width, height) {
 return quadrangle = width * height;
};


console.log(getQuadrangleArea (3,4)); // 12 출력된다

 

 

함수 표현식 =>호이스팅에 영향을 받지 않는다. - 선언 전에 호출되면 에러!

(클로져로 사용된다. - 내부함수가 선언된 순간에 저장된 외부함수 참조 정보를 이용하는 것. **추가공부 필요

콜백으로 사용된다. - 다른 함수의 인자(parameter)로 넘길 수 있다. ) ** 추가공부 필요

 

const 함수명 = function () {
 구현 로직
};

ex)

const getQuadrangleArea = function (width, height) {
 return quadrangle = width * height;
};

console.log(getQuadrangleArea(3,4)); // 12 출력

 

 

화살표 함수 => 함수의 본문(body)에 return문만 있는 경우, return과 {}생략해서 쓸 수 있다. 소괄호는 사용가능. (둘이 세트)

 

const 함수명 = (parameter) => {
 구현 함수;
};

ex)

const getQuadrangleArea = (width, height) => {
 return quadrangle = width * height;
};

console.log(getQuadrangleArea(3,4)); // 12 출력

 

 

---

 

JS의 원시, 객체 타입

 

자바스크립트의 타입은 숫자, 문자열, boolean, undefined, null, symbol, 객체 타입 7가지다.

 

공식적으로 함수형이라는 타입은 존재하지 않고 함수는 객체형에 속한다. 하지만 typeof 연산자를 통해 타입 검사를 할때에는 function 이라고 출력 해준다. 

 

 

자바스크립트의 타입은 원시 자료형와 참조 자료형(Object)로 나뉜다.

 

원시 자료형 = string, number, bigint, boolean, symbol, undefined, null

참조(객체) 자료형(Object) = 객체, 배열, 함수

 

차이점

 

1. 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다.

객체(참조) 타입의 값, 즉 객체는 변경 가능한 값이다. 

 

2. 원시 값을 변수에 할당하면 변수 (확보된 메모리 공간)에는 실제 값이 저장된다.

이에 비해 객체를 변수에 할당하면 변수 (확보된 메모리 공간)에는 참조 값이 저장된다. 

 

3. 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. (값에 의한 전달)

객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. (참조에 의한 전달)

 

 

---

 

undefined 와 null의 차이

 

undefined 와 null는 둘 다 변수에 값이 없음을 뜻한다. 

다만, undefined 는 변수를 선언만 하고 값을 할당하지 않았을 때 자동적으로 들어가며, null은 변수에 인위적으로 null 이라는 값을 할당해주지 않으면 들어가지 않는다. 따라서 변수에 의도적으로 값을 할당하지 않았다는걸 표시하기 위해서 null 이라는 값을 할당해줄 때가 많다!

 

박스로 표현하자면,

undefined 는 빈 박스만 있는 상태,

null 은 빈 박스에 '비어 있음' 이라고 표시해놓은 상태!