[JS] JavaScript 입문 - Data Type

데이터타입

---

데이터타입이란?

변수에 전달되는 데이터 타입에도 여러 종류가 존재한다.

 

대표적인 8가지 데이터 타입

• string : 문자열
• number : 숫자
• function : 함수
• array : 배열
• object : 객체
• boolean : 불린
• undefined : 정의되지 않음
• null : 널

 

문자열

“큰 따옴표” 혹은 ‘작은 따옴표’를 활용하여 작성

var strl = "Hello World";
var str2 = 'Nice to meet you';
var str3 = "20";    // 숫자가 아닌 문자열

• 주의!

var str1 = "He's a boy";     // '를 써야 할 때는 큰 따옴표 활용하기 등
var str2 = 'He\'s a boy';    // 혹은 \'를 활용하여 오류를 피한다.

 

숫자형

별도의 기호 없이 숫자 입력

var num1 = 10;    //정수
var num2 = -10;   //음수
var num3 = 3.14   //실수

 

함수

기본 - 생성 및 호출

• 함수 생성 : function 키워드를 사용하여 생성
• 함수 호출 : 함수 안에 있는 코드를 실행시키겠다는 의미
  • [방법 1] 함수를 변수의 형태로서 상환
  • var func1 = function(){ console.log("Func1") } // 함수 생성 func1(); // 함수 호출
  • [방법 2] function 자체에 이름 붙여주기
  • function func1() { console.log("Func1") } // 함수 생성 func1(); // 함수 호출

 

그 외 용어 정리

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

area(10, 20);

• 매개변수 : 인자로부터 전달받은 값이 들어가는 통로. 상황에 따라 생략 가능 (width, height)
• 인자 : 함수에게 전달하는 데이터 10, 20
• return : 함수 안에 데이터를 저장할 때 사용 return

 

함수 데이터 호출 방법

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

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

// 함수 자체를 console.log()로 감싸기
console.log(area(100, 200));

 

배열

데이터의 좌표값(index) 작성. 첫 번째 좌표값은 0부터 시작

var fruit = ["사과", "배", "수박"]

console.log(fruit[0]);  // 0번째 index의데이터 추출. 즉, 사과 추출

배열 데이터 변경하기

인덱스를 사용하여 새로운 데이터 대입

 

객체

property, method, 데이터로 구성됨. 여러 종류의 데이터 타입 삽입 가능

📌 property : 객체가 가지고 있는 데이터들

method : 객체가 가지고 있는 함수들

객체 데이터 출력하기

 

객체 데이터 변경하기

• 객체에 여러 데이터를 넣을 때는 쉼표를 사용하면 됩니다!
• 객체의 특정 데이터에 접근하려면 .혹은 []를 사용합니다.
• 기본 연습문제
  1. var를 사용하여 변수 student를 선언하고, 객체 데이터 타입을 넣기 위해 중괄호{}를 입력합니다.
  2. 객체에 프로퍼티 name: "Elice", age:20, skills: ["Java", "HTML", "CSS", "JavaScript"]를 추가합니다.
  3. 객체에 메서드 sum: function(num1,num2) { return num1 + num2; }를 추가합니다.
  4. student.name 혹은 student["name"]을 입력하여 name 데이터에 접근합니다.
  5. name의 데이터를 park으로 변경하고, document.write();를 사용하여 올바르게 변경됐는지 확인합니다.
  6. sum 메서드에 인자 10, 20을 넣고, document.write();를 사용하여 올바르게 출력되는지 확인합니다.
  7. var student = { name : "Elice", age : 20, skills : ["Java", "HTML", "CSS", "JavaScript"], sum : function(num1, num2){ return num1 + num2; } } student.name = "park"; document.write(student.name); document.write(student.sum(10, 20));

 

Boolean

참 또는 거짓 데이터가 들어가 있는 상태

 

undefined, null

• undefined : 변수 안에 데이터를 입력하지 않은 상태 (데이터가 없는 것)
• null : 개발자가 임의로 변수 안에 빈 데이터를 삽입한 상태 (빈 데이터를 지정한 것)