JS 자료형

JS 자료형 이해하기

자바스크립트에서 사용되는 자료의 형태는 숫자, 문자, 논리, 배열, 색체 등이 있는데 각각의 특징을 알면 코딩을 할때 수월하게 자료를 다룰 수 있습니다.

1) 숫자

숫자는 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/), 나머지(%) 등의 계산을 할 수 있는 자료형 입니다.

위 코드는 숫자 2를  변수 a에 저장하고 a와 10을 합한 값을 변수 b에 저장하는 코드입니다. 이것을 콘솔창에 출력해 보면 console.log(b) 실행결과는 숫자 12가 표시됩니다.  

숫자형은 계산 뿐만아니라 부등호로 비교도 가능한데 자바스크립트에서 부등호는 일반 수학에서의 부등호와 약간 다르게 표시합니다. 예를 들어 'A=1' 의 뜻은 'A는 1' 이다는 뜻이 아니라 변수 'A에 1을 대입한다'는 뜻입니다. 

• A = B : B를 A에 저장한다.
• A === B : A와 B가 같다.
• A !== B : A와 B가 같지 않다.
• A > B : A가 B보다 크다.
• A >= B : A가 B보다 크거나 같다.

변수 A에 1을 증가시키는 코드A=A+1 은 a +=1; 또는 ++a 이라고 짧게 표현할수도 있습니다. 0을 0으로 나누는 등의 유효하지 않은 숫자 계산을 하면 NaN(Not a Number)이라는 결과가 나옵니다.10을 0으로 나누면 무한대의 표시로 Infinity 라는 결과가 나옵니다. 

2) 문자

문자형은 따옴표 " " 사이에 오는 모든 자료 입니다. 만일 숫자 3이 따옴표 사이에 표시가 되면 "3" 은 숫자가 아니라 문자로 인식됩니다. 문자형은 숫자와 같은 연산은 불가능 하지만 +와 === (같다), !== (다르다) 비교는 가능합니다. 문자와 문자를 더하거나 문자와 숫자를 더하면 문자가 연결되어 출력됩니다.

문자형 안에 변수를 포함해서 작성할 수도 있는데 문자형 안에 변수를 넣을 때에는 따옴표가 아닌 ``표시로 감싸준 문자열에 ${변수명} 표시로 문자를 넣으면 됩니다.

문자형  자료에는 다양한 기능(메서드)을 사용할 수 있는데 문자 뒤에 마침표 '.' 를 찍고 사용할 수 있습니다. 

3) 논리

논리형 (boolean) 데이터는 참, 거짓을 나타내는 true 와 false 뿐입니다. 주로 조건문에 사용되며 0, null, NaN, undefined, 빈문자열("")은 false로 간주되고 그 외 모든 값의 초기값은 true 로 설정됩니다.

null은 값이 없다는 뜻이고 변수에 null을 넣으면 변수에 값이 없다는 것을 명시할 수 있습니다.

undefined 는 변수를 선언만 하고 값을 넣어주지 않았을때나 존재하지 않는 데이터에 접근할 경우 표시됩니다.

isNaN(값) 함수로 값이  숫자인지 아닌지 참/거짓으로 판별할 수 있습니다.

Boolean(값) 함수로 값이  참인지 거짓인지 판별할 수 있습니다. (축약 !!값)

typeof(값) 함수로 값의 데이터 타입을 판별할 수 있습니다. 

 

4) 배열

배열형  (Array)은 한개의 변수에 여러 개의 값을 순서대로 저장할때 사용합니다. 배열의 값은 어떤 값이라도 요소로 추가할 수 있고 배열안에 또 다른 배열을 담거나 종류가 다른 자료형도 함께 담을수 있습니다. 

let A = [1,2,3,4,5]

let B = ['안녕', null, true, NaN, [1,2], 300]

배열안의 값을 index(찾아보기) 할때에는 몇번째 자료인지 '[ ]'안에 숫자로 index(찾아보기) 합니다. 여기서 유의해야할 점은 배열의 첫번째 자료의 순서는 1이 아닌 0부터 시작되는 것을 참고해서 index 해야 합니다.

let A = [1,2,3,4,5];

console.log(A[0]);

//결과 : 1

배열형 자료에는 다양한 기능(메서드)을 사용할 수 있는데 배열 뒤에 마침표 '.' 를 찍고 사용할 수 있습니다.

• indexOf() :  배열 안 요소의 인덱스(순서)를 찾습니다.
  let 과일= ["사과", "바나나", "망고"]
  과일.indexOf("바나나");
  // 결과 : 1
• unshift() : 배열의 앞에 요소를 추가합니다.
  let 과일= ["사과", "바나나", "망고"]
  과일.unshift("딸기");
  // 결과 : 과일= ["딸기","사과", "바나나", "망고"]
• push() : 배열의 끝에 요소를 추가합니다.
  let 과일= ["사과", "바나나", "망고"]
  과일.push("딸기");
  // 결과 : 과일= ["사과", "바나나", "망고", "딸기"]
• shift() :  배열의 앞에서부터 요소를 제거합니다.
  let 과일= ["사과", "바나나", "망고"]
  과일.shift();
  // 결과 : 과일= ["바나나", "망고"]
• pop() : 배열의 끝에서부터 요소를 제거합니다.
  let 과일= ["사과", "바나나", "망고"]
  과일.pop();
  // 결과 : 과일= ["사과", "바나나"]
• splice() : 배열의 특정 위치에 요소를 제거하거나 추가할 수 있습니다.
  splice( 인덱스, 인덱스로부터 제거할 요소의 수, 인덱스로부터 추가할 요소)
  - 추가요소를 입력하지 않으면 제거만 됨 / 제거할 요소의 수에 0을 넣고 추가 요소명을 넣으면 추가만 됨
  let 과일= ["사과", "바나나", "망고"]
  과일.splice(0,1,'딸기');
  // 결과 : 과일= ['딸기', '바나나', '망고']
• 배열과 배열을 합칠 수 있습니다.
  let 과일1= ["사과", "바나나", "망고"]
  let 과일2= ["수박", "딸기"]
  let 과일3 = [...과일1, ...과일2]
  // 결과 : 과일3= ["사과", "바나나", "망고","수박", "딸기"]
  
  

5) 객체

객체형 (Object)는 한 개의 변수에 여러 개의 값을 이름을 붙여 저장할때 사용합니다. 객체는 중괄호 { } 사이에 '이름(key) : 값(value)' 형식으로 정보를 저장하는데 객체의 값은 어떤 유형이라도 추가할 수 있고 쉼표 구분합니다. 

객체안의 값은 이름(key) 으로 찾을 수 있습니다.

let 바나나 = {색 : '노랑', 가격 : 1000, 맛 : '달다' }

바나나.색 또는 바나나['색']

//결과 : 노랑