Front End/JavaScript

변수와 타입

변수 (Variable)

데이터를 편리하게 저장하고 꺼내 쓸 수 있도록 데이터에 이름을 붙이는 것

  • 컴퓨터에는 데이터를 보관하는 보관함(메모리)가 존재
  • 보관함의 크기는 동일함
  • 각 보관함의 이름 = 변수
  • 보관함의 이름을 활용하여 데이터 처리
  • 프로그래밍 세계에서의 변수는 이름(Label)이 붙은 값 → 변수를 이용해 데이터를 다른 곳에서도 사용 할 수 있다

변수 사용법

  • 선언 (declaration)

    보관함을 확보하는 것. let num

  • 할당 (assignment)

    보관함에 데이터를 저장하는 것 num = 12 이 때, 등호 기호는 ‘같다’ 가 아닌 할당(대입)을 한다는 의미.

  • 선언과 할당

    선언과 할당을 동시에 할 수도 있음 let num = 12 쉼표를 이용해 키워드를 한 번만 사용하여 여러 개의 변수를 선언하고 할당 할 수 있다. let a = 1, b = 2

변수의 활용

  • 변수의 이름에는 공백을 쓸 수 없기 때문에 보통 단어의 첫 글자를 대문자로 사용함 → 이를 Camel Case 라고 부름 areaOfCircle
  • 변수는 동일한 변수를 이용해 대입이 가능하며, 한 번 선언했던 변수를 다시 사용 할 때는 let을 쓰지 않는다
    let sum = 1;
    sum = sum + 2;
    sum = sum + 3;
    sum = sum + 4;
    console.log(sum); // 10
  • 변수를 선언만 하고 할당하지 않으면 해당 변수는 undefined 라는 값을 가지게 된다.

타입 (Type)

변수에 할당 할 수 있는 형태

  • 함수(function) 역시 변수에 들어 갈 수 있는 한 형태로 타입이 될 수 있다.
  • 변수의 타입을 확인 할 때는 typeof 연산자를 사용한다.
let number = 1;
console.log(typeof number) // number

let string = '1';
console.log(typeof string) // string

타입의 종류

숫자(number)

let number = 0;
console.log(number); // 0
  • 소수와 정수 모두 포함되며, 모든 숫자는 실수로 처리한다.
  • 무한대는 Infinity, 계산 중 에러가 발생하면 NaN이라는 값을 반환하는데 이 역시 숫자 타입에 포함된다.

문자(string)

let hello = 'hello'; // 큰 따옴표
let world = "world"; // 작은 따옴표
let helloWorld = 
`hello   
				world`; // 역 따옴표

console.log(hello); // 'hello'
console.log(world); // 'world'
console.log(helloWorld);
// 'hello
//					world'
  • 큰 따옴표””, 작은 따옴표’’, 역 따옴표(백틱)``으로 작성 할 수 있다.
  • 역 따옴표의 경우 따옴표 안에 있는 엔터와 탭을 모두 인식한다.

불리언(boolean)

let i_am_idiot = true;
console.log(i_am_idiot); // true

let h_is_genius = 1 > 3;
console.log(h_is_genius); // false
  • 참과 거짓이며 보통 논리 연산자와 함께 사용한다.
  • 불린이라고도 불리며 true, false가 이에 해당된다.
  • 변수 내에 논리/비교 연산이 들어가면 이 역시 불리언으로 반환한다.

배열(array)

let fruits = [
	'banana', 
	'apple', 
	'pineapple'
];
console.log(fruits); 
// ['banana', 'apple', 'pineapple']
  • 같은 타입의 변수들이 모여서 이루어진 자료형 타입
  • 배열은 대괄호로 만들 수 있으며, 대괄호 안에는 쉼표로 값을 구분하여 넣을 수 있다.

객체(object)

let taeyeon = {
  position: "mainVocal",
  age: 32,
  city: "seoul",
  isSheGod: true
}

console.log(taeyeon.position); // mainVocal
console.log(taeyeon.age); // 32
console.log(taeyeon.city); // seoul
console.log(taeyeon.isSheGod); // true
  • 다른 타입의 변수들이 모여서 이루어진 자료형 타입
  • 객체는 중괄호로 만들 수 있으며, 중괄호 안에는 {키(key): 값(value)}로 구성된 프로퍼티를 넣을 수 있다.

null

let num = 3;
console.log(num); // 3

num = null;
console.log(num); // null
  • 존재하지 않는 값(nothing), 비어 있는 값(empty), 알 수 없는 값(unknown)을 나타낼 때 사용한다.
  • null로 변수 선언을 하게 되면 반환도 null 값을 반환합니다.

undefined

let hello;
console.log(hello); // undefined
  • 값이 할당되지 않은 상태를 나타낼 때 사용하며, 보통 변수는 선언했지만 값을 할당하지 않으면 해당 변수에는 undefined가 자동으로 할당이 된다.
  • undefined를 직접 입력하여 할당하는 것도 가능하지만, 변수의 값을 의도적으로 비울 때는 null을 사용한다.
🤔
undefined와 null의 차이는 뭔가요? 변수가 하나의 방이라고 생각해봅시다. 처음 빈 방을 만들고, 그냥 아무 것도 넣지 않으면 undefined 입니다. 하지만 null은 의도적으로 비운다는 뜻입니다. undefined는 아무것도 없는 변수를 만들었을 때 사용되고 확인되는 데이터 값이라 생각하시고, 변수에 빈 값을 재할당할 때 null을 쓴다, 정도로 이해하시면 됩니다.

심볼(symbol)

  • ES6부터 새로 생긴 데이터 타입입니다.
  • 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키를 만들기 위해 사용한다.


Uploaded by N2T