[JavaScript] 자바스크립트의 변수와 데이터 타입(feat. 대표적인 속성과 메서드)

1. 자바스크립트의 변수

1) var

가장 기초적인 변수 선언 방법이다. 한 번 선언하면 다른 방법들과 달리 파일 전체(전역 변수)에서 영향을 끼친다. 최근에는 변하기 쉽고, 명시성이 부족한 var보다는 let과 const 두 가지를 사용한다.

• hoisting(코드 내 어디에서 선언 및 초기화가 되든 코드 맨 첫 줄부터 동작)이 가능하다.
• 재선언 가능
• 재할당 가능

var name;  // 변수 선언. name 안에는 'undefined'가 저장됨.
name = 'gildong'  // 변수 초기화(할당)
var name = 'gildong'  // 변수 선언 및 초기화
var name = 'gildong', first_name = 'Hong'  // 한 번에 여러 변수 선언, 초기화 가능

 

2) let

var와 비슷한 방식으로 작동하지만, 범위는 block scope로 작동한다. 여기서 block scope란, 선언된 블록(함수, 표현식, 구문 등) 내에서만 변수가 유효하다는 의미이다. 일시적인 변수나 값이 변할 가능성이 있는 변수에 대해 let으로 선언한다.

• hoisting 불가
• 재선언 불가
• 재할당 가능

let num = 1  // 선언 및 초기화(할당)
let num = 2  // 재선언이 불가하기 때문에 오류 발생
num = 2  // 재선언이 아닌 재할당이기 때문에 오류 없이 수행

 

3) const

범위는 block scope로 작동하며, constant한(일정한, 상수) 변수를 선언할 때 사용된다. 의무는 아니지만 관습적으로 const로 선언하는 변수는 알파벳 대문자로 작성한다. 또, 재선언과 재할당 모두 불가능하기 때문에 선언할 때 초기화(할당)까지 함께 진행해야 한다.

• hoisting 불가
• 재선언 불가
• 재할당 불가

const NUM = 1  // 선언 및 초기화(할당)
NUM = 2  // 오류 발생

 

4) 변수 생성 시 주의사항

(1) 변수명은 숫자로 시작할 수 없다.

(2) 변수명은 최대한 디테일하게, 구분할 수 있도록 작성해야 한다.

(3) 의미가 불명확한 단어들의 조합은 피하는 것이 좋다.

 

 

2. 자바스크립트의 데이터 타입

1) 종류

String(문자열), Number(숫자), Function(함수), Array(배열), Object(객체), Boolean(불린), null(널), undefined(정의되지 않음) 등이 있다.

여기서 Array는 파이썬의 리스트, Object는 파이썬의 딕셔너리, 클래스와 비슷하다.

let hello = {text: 'hi'}  // object 선언 및 초기화

hello.text  // 'hi' -> 파이썬의 클래스처럼 호출 가능
hello['text']  // 'hi' -> 파이썬의 딕셔너리처럼 호출 가능

 

2) undefined와 null의 차이

(1) undefined는 변수가 선언은 됐지만 초기화가 되지 않은 상태이다. 비유를 하자면, 건축가(브라우저)에게 변수라는 공간은 만들도록 했지만, 그 이후에 그 공간을 어떻게 할지 아무것도 알려주지 않은 상태라고 생각하면 된다.

(2) null은 선언과 초기화가 모두 되었지만, 그 초기화한 내용 자체를 '아무것도 없음'으로 선언한 상태이다. 이는 건축가(브라우저)에게 변수라는 공간을 만들도록 했고, 그 공간에는 아무것도 넣지 않을 것이라고 말한 상태인 것이다.

 

 

3. 대표적인 속성과 메서드

자바스크립트에도 내장되어있는 객체, 속성, 메서드 등이 존재한다. 그 중에서 대표적인 속성과 메서드를 몇 개 적어봤다.

• 문자열: length, charAt(문자열에 대해 파이썬의 인덱스와 같은 기능), split
• 배열: length, push(뒤에 데이터 삽입), unshift(앞에 데이터 삽입), pop(맨 뒤 데이터 삭제), shift(맨 앞 데이터 삭제)
• math 메서드: abs, ceil, floor, random → random은 0~1 사이의 실수
• parseInt, parseFloat: 내림하며 정수로 또는 실수 형태로 변환

이외에도 내장 객체를 알고 싶다면 아래 페이지를 참고하면 된다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects

표준 내장 객체 - JavaScript | MDN