변수 선언과 변수 타입

인프런의 코드스토리님의 자바스크립트 강좌 을 완강하고, 모던 JavaScript 튜토리얼 을 보며 다시 정리해보며 기록해본다.
기본적으로 나는 C#을 주로 썼기 때문에 동적 언어인 JavaScript가 헷갈린 부분이 많았는데 주로 헷갈리거나 다른 개념인 경우에만 정리를 할 것이다.

굉장히 단순한 변수 선언 (var, let, const)

위에 살짝 언급했지만 자바스크립트는 동적 언어이기 때문에 변수 타입 선언을 '세 가지'로만 구분한다.
var, let, const 가 그 키워드이다.

var name = Junny;	//쓰이지 않음
let name = Junny;	//변수
const test = 2025;	//상수

상수나 문자열 등은 자바스크립트 내부 알고리즘에 의해 자동으로 변수 타입을 설정해준다.
여기서 var가 쓰이지 않는 이유는 '호이스팅(Hoisting)' 이라는 현상 때문이다.
호이스팅은 말 그대로 끌어올려지는 현상인데 이는 'var'가 아래와 같은 특성을 가지고 있기 때문에 발생하는 현상이다.

선언하기 전에 사용할 수 있는 var

function sayHi() {
  phrase = "Hello";	//phrase가 아래 선언되었는데도 문제없이 동작함.

  alert(phrase);

  var phrase;
}
sayHi();

var는 블록스코프가 없음

if (true) {
  var test = true; // 'let' 대신 'var'를 사용했습니다.
}

alert(test); // true(if 문이 끝났어도 변수에 여전히 접근할 수 있음)

var는 변수의 중복 선언을 허용합니다

var user = "Pete";

var user = "John"; // 이 "var"는 아무것도 하지 않습니다(이전에 이미 선언됨).
// ...에러 또한 발생하지 않습니다.

alert(user); // John

이러한 괴상한 동작으로 인해 '호이스팅'현상이 발생하고 최근들어 var를 사용하는 곳은 없다고 할 수 있겠다.

데이터 타입(자료형) 종류

데이터 타입은 여섯 개의 Primitive Type과 한 개의 Object Type으로 구분된다.

[Primitive Type]
- Number  // C#에선 int, float, double 등의 타입이다.
- BigInt
- String
- Boolean
- undefined
- null
- symbol

[Object Type]
- 객체 생성 : new 로 객체 생성
- 객체 생성 : const { } 로 생성
- Function : 호출 가능한 '함수 객체'
- Array
- Date
- RegExp
- Map, Set, WeakMap, WeakSet
- Error

undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용된다.

let age;

alert(age); // 'undefined'가 출력됩니다.

null은 C#과 다르게 아래의 정의로 되어있다.

자바스크립트의 null은 자바스크립트 이외 언어의 null과 성격이 다릅니다. 다른 언어에선 null을 '존재하지 않는 객체에 대한 참조’나 '널 포인터(null pointer)'를 나타낼 때 사용합니다.

하지만 자바스크립트에선 null을 ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 나타내는 데 사용합니다.

let age = null;은 나이(age)를 알 수 없거나 그 값이 비어있음을 보여줍니다.

한마디로 개발자가 명시적으로 이 값이 비어있다고 null 자료형으로 나타내는 것이라고 볼 수 있다.

Object Type에서는 C#은 객체에만 해당되는 부분이지만 자바스크립트에서는 좀 더 넓은 범위로 쓰이는 것이 객체이다.

객체 생성 (클래스)

lass IdolModel{

    //프로퍼티는 옵션임 (생성자에 작성해준 경우에 한해)
    // name;
    // year;

    //생성자
    constructor(name, year){
        this.name = name;
        this.year = year;
    }

    sayName(){
        return '코드팩토리 입니다';
    }
}

const yuJin = new IdolModel('안유진', '2003');

코드팩토리님은 아이브를 진짜 좋아하시나보다

C#처럼 객체를 new로 생성할 수 있다.

객체 생성 (const { })

자바스크립트에서는 객체를 특수한 기능을 가진 연관 배열 이라고 명시한다.
즉, 객체를 new로 생성하지 않고도 key:value 방식으로 생성도 가능하다.

//key : value pair
let test = {
    name: '테스트',
    group: function(){
        return `${this.name} 함수 출력`;
    }
};

console.log(test);	//{ name: '테스트', group: [Function: group] }
console.log(test.name);	//테스트
console.log(test['name']);	//테스트
console.log(test.group());	//테스트 함수 출력

특이한 점은 value에 Object Type을 작성할 수 있으므로 '함수'를 작성할 수 있다. (함수는 객체이므로) 정말 어질어질한 언어다.

//존재하지 않는 key를 넣으면 새로 생성됨
test2['good'] = 'good test';
console.log(test2);

delete test2['good'];
console.log(test2);

또한 존재하지 않은 key를 넣어서 생성하면 추가적으로 객체 내부에 생성된다.
delete 키워드로 객체 속성을 지울 수 있다.
그 외에도 다양한 특성이 있는데 따로 포스팅을 진행해봐야겠다.

함수

function multiply(x, y){
    console.log(x + y);
}

multiply(10, 10);

함수는 return 없이 생성이 가능하며, 이럴 경우 함수의 반환값이 undefined 타입을 반환하게 된다.

console.log(multiply === undefined); //false
console.log(multiply(10, 10) === undefined); 20과 true가 출력

착각하지 말아야하는 부분은 multiply 함수 자체는 객체이므로 multiply === undefined를 하면 결과는 false를 반환한다.
그러나 위에서 설명했듯이 함수의 반환값이 undefined이므로 실행한 multiply(10, 10)와 undefined를 비교하면 true를 반환하게 되는 것이다.