뚝딱햄 탈출기

[JavaScript] 자료형 (데이터 타입, data type) 본문

Programming language/JavaScript

[JavaScript] 자료형 (데이터 타입, data type)

hyrmzz1 2023. 8. 7. 18:26

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

  • String
  • Number
  • Function
  • Array
  • Object
  • Boolean
  • undefined
  • null

문자열 (String)

"" 또는 '' 안에 작성된 데이터.

" 와 ' 는 혼용할 수 없음. 

var str1 = "Hello";
var str2 = 'World';
var str3 = "20";	// 따옴표 안에 작성되었으므로 숫자가 아닌 문자열.

문자열에 따옴표가 포함된 경우 아래와 같이 작성하면 따옴표 출력 가능.

var str4 = "I'm student";	// 문자열 내부에 '가 쓰인다면 큰 따옴표로 감싸거나
var str5 = 'I\'m student';	// 작은 따옴표로 감싼다면 문자열 '의 앞에 역슬래시 넣기.

숫자 (Number)

별도의 기호 없이 숫자를 입력한 상태.

var num1 = 1;	// 정수
var num2 = -1;	// 음수
var num3 = 1.23;	// 실수

함수 (Function)

funtion 키워드를 통해 생성.

코드를 캡슐화해 반복 가능하도록 해줌.

함수 생성 및 호출

// 함수 생성
function func1(){
	// ...
}

// 변수 형태로 함수 생성
var func2 = function(){
	// ...
}

func1();	// 함수 호출. 함수 안의 코드 실행.
func2();

매개변수(parameter) 와 인자(argument)

  • 매개변수 : 인자로부터 전달받은 값이 들어가는 통로.
  • 인자 : 함수에게 전달하는 데이터.
  • return
    :  함수 안에 데이터를 저장할 때 사용.
    : 함수 호출시 출력. return 사용해야 function 외부에서도 value를 가질 수 있음.
    : return 이후에 작성된 코드는 작동하지 않음.
var area = funtion(width, height){	// width와 height는 매개변수.
	return width * height;
}

area(10, 20);	// 괄호 안 데이터의 순서 중요! 그 순서대로 매개변수에 전달되기 때문.
area(10, 20, 30);	// 10 * 20만 실행됨. 매개변수 개수만큼만 인수 전달.

함수는 매개변수와 반환값을 가질수도, 가지지 않을 수도 있음.

// 매개변수 X, 반환값 X
function hey() {
    console.log("Hey :)");
}

hey();   // Hey :) 출력

// 매개변수 X
function three() {
    return 3;
}

let a = three();
console.log(a);    // 3

// 반환값 X
function hello(name) {
    console.log("Hi, "+name+"!");
}

let b = hello("jungle");  // Hi, jungle!이 출력
console.log(b);           // undefined

함수 데이터 호출 방법

var area = function(width, height){
	return width * height;
}

// 새 변수 생성 후, 그 변수를 console.log로 감싸 출력
var result = area(10, 20);
console.log(result);

// 변수를 거치지 않고 함수 자체를 console.log로 감싸 출력
console.log(area(10, 20));

배열 (Array)

유사한 성격을 가진 데이터를 하나의 변수 안에서 관리하기 위한 데이터 타입.

배열의 요소는 문자열, 숫자, 객체, 함수 등 어떠한 데이터 타입이여도 ok!

 

배열은 객체와 달리 프로퍼티를 가지지 않으며, index와 값(element)으로 구성되어 있음.

index는 0과 양의 정수여야 하며, 0부터 시작함. => 첫번째 element의 index 값은 0, 두번째 element의 index 값은 1.

음의 정수로 index를 나타낼 수 없음. => array[-1] 은 undefined. 맨 마지막 요소 값 아님 !!

var arr = [1, "수박", {three:3}, [4,5], function(){return"six";}, 3 + 4, true];
console.log(arr[0]);	// index가 0인 element 추출 => 1

arr[0] = "사과";	// index가 0인 element 변경
console.log(arr[0]);	// 사과
console.log(arr[-1]);	// undefined
console.log(arr[2.5]);	// undefined
console.log(arr[7]);	// undefined

배열의 index가 0 또는 정수가 아니라면?

존재하지 않는 index에 접근한다면 undefined 반환.

따라서 위 예제에서 console.log(arr[7]); 도 undefined 가 반환됨.

객체 (Object)

property(속성), 메서드, 데이터로 구성.

하나의 entity에 관한 변수들을 묶어주며, property를 가진 데이터를 다루게 해줌.

여러 종류의 데이터 타입 삽입 가능.

property와 메서드들은 ','로 연결.

var student = {
	id : "hyrmzz1",	// id는 property, "hyrmzz1"는 data.
	age : 23,
	hobby : ["웨이트", "산책", "사진 찍기", "여행"],
	sum : function(num1, num2){	// sum은 method.
    	return num1 + num2;}
}

프로퍼티 vs 메서드

프로퍼티는 이름을 가지고 있는 데이터,

메서드는 이름을 가지고 있는 함수를 뜻한다.

즉 메서드는 객체가 가지고 있는 함수, 프로퍼티는 객체가 가지고 있는 데이터.

객체 데이터 출력 및 변경

var student = {
	id : "hyrmzz1",
	age : 23
}

console.log(student);
// {} 안의 내용 다 출력.
// {id : "hyrmzz1", age : 23}

console.log(student.age);	// 객체명.프로퍼티명
console.log(student['age']);	// 객체명["프로퍼티명"]

student.age = 25;	// object 자체가 constant. constant 안의 요소는 재할당 가능.
console.log(student.age);	// 23=>25로 데이터 변경되어 출력.

student.grade = "A+";	// property 추가
console.log(student);	// {id : "hyrmzz1", age : 25, grade : "A+"}

객체 반환

객체를 반환하고 싶을 때, 객체 변수를 만들어 return 할 수도 있지만,

변수를 {} 안에 넣어서 return 해도 객체 타입으로 반환된다.

function solution() {
	// ...
	// case1, case2, case3, case4는 boolean 값을 가진 변수.
	obj_case = {
		case1, case2, case3, case4
    }
	return obj_case;	// { case1: true, case2: true, case3: true, case4: false } 객체 형태로 출력.
}
function solution() {
	// ...
	// case1, case2, case3, case4는 boolean 값을 가진 변수.
	return {case1, case2, case3, case4};	// { case1: true, case2: true, case3: true, case4: false } 객체 형태로 출력.
}

undefined와 null

undefined

변수는 정의되었으나 변수 안에 데이터를 입력하지 않아 데이터가 없는 상태.

null

변수 안에 빈 데이터를 삽입한 상태. (빈 데이터를 지정한 것.)

=> 자연적으로 발생하지 않음. 값이 "없다"라고 의도적으로 표현해주는 것.

var unde;
var empty = null;

Boolean

참(true) 또는 거짓(false) 데이터가 들어가 있는 상태. true == 1, false == 0.

Python에선 True, False로 나타냄. (앞자리 대문자)

"true"와 "false"는 string이다.

var t = true;
var f = false;
Comments