자바스크립트 튜토리얼 - 2

이자용·2022년 7월 31일
0

바닐라JS

목록 보기
2/5
post-thumbnail

1.1 기본 자료형

자바스크립트는 6가지 기본자료형 데이터 타입이 있다.

  • String(문자열)
  • Number(숫자)
  • Boolean(참/거짓)
  • Undefined
  • Null
  • Symbol

1.1.1 String

쌍따옴표("") 혹은 홑따옴표('')를 사용해 변수에 할당할수 있다.

let name1 = "zayong" //쌍따옴표를 사용해서 문자열 데이터를 저장
let name2 = 'zayong2' //홑따옴표를 사용해서 문자열 데이터를 저장

문자열안에 쌍따옴표를 사용하려면, 문자열을 홑따옴표로 할당, 문자열 안에 홑따옴표를 사용하라면, 문자열을 쌍따옴표로 할당

let singleQuote = "He is called 'zayong'" // 문자열 안에 홑따옴표 사용
let doubleQuote = 'He is called "zayong"' // 문자열 안에 홑따옴표 사용

let singleQuote2 = 'He is called 'zayong'' //error
let doubleQuote2 = "He is called "zayong"" //error

쌍따옴표를 사용하여 문자열을 할당하면서 문자열안에 쌍따옴표를 사용하려면 역슬래시()를 사용할수 있다.

let singleQuote2 = 'He is called \'zayong\'' 
let doubleQuote2 = "He is called \"zayong\"" 

1.1.2 Number

자바스크립트에서 Number는 쌍따옴표("")나 홑따욤표('') 없이 사용한다

let x = 34.13
let y = 34

1.1.3 Boolean

불리언은 참/거짓을 나타내는 데이터 타입이다. 코딩할때 수많은 조건식을 사용하는데, 여기서 특정조건을 만족하는지 여부를 참(true), 거짓(false)으로 나타낸다. 아주중요하다

let x = 5;
let y = 5;
let z = 6;
(x == y) //true
(x == z) //false

let isOk = true;

1.1.4 undefined

데이터 타입이자 데이터 값이다. 단어 그대로 존재하지 않다는 표현식이다. 변수를 선언하고 값을 할당하지 않으면 런타임 시 해당변수를 사용하려고할때 undefined가 자동으로 할당되어 출력된다.

let hi; //변수를 선언하고 데이터를 할당하지 않으면 undefined

1.1.5 Null

null 역시 undefined와 마찬가지로 데이터 타입이자 데이터 값이다. null은 undefind와 마찬가지로 없음을 의미한다. 그렇다면 어떤 차이가 있을까?

undefined는 웹브라우저에서 자바스크립트를 실행할때 값이 할당되지 않은 변수에 자동으로 undefined를 할당하는 것으로 개발자가 아니라 브라우저 엔진이 할당하고 리턴해주는 값이다.

null은 개발자가 명시해서 사용한다. 선언된 변수에 아직 어떤 값을 할당할지 모르거나 어떤 데이터 타입이 할당될지 모를 경우 개발자가 명시적으로 null을 사용한다.

즉 null은 개발자의 의도, undefined는 개발자가 의도하지 않은 경우라고 봐도 무방하다.

1.1.6 객체(Objects)

기본적으로 자바스크립트의 모든 것이 객체(Objects)이다. 여기서는 데이터 관점에서 많이 사용하는 Objects, Array객체를 정리한다.

Object는 키(key)-값(value) 쌍으로 데이터를 저장한다.

const person = {
	firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue",
}

firstName, lastName, age, eyeColor가 키가 된다. 키를 이용해서 데이터를 변경하거나 가져올수 있다.

데이터 변경방법

person["age"] = 51; //오브젝트명[key] 형태로 데이터 변경
person.age = 51; ////오브젝트명.key 형태로 데이터 변경

데이터를 가져오는 방법

console.log(person["firstName"]) 
console.log(person.firstName) 

오브젝트의 키에 대한 값으로는 문자형, 숫자형뿐만 아니라 자바스크립트의 모든 객체를 값으로 할당해서 사용할 수 있다.

1.1.7 Array(배열)

하나 이상의 다중 데이터를 저장할 수 있다. 배열에 저장된 데이터의 특징은 순서를 갖는다는 것이다.

const cars = ["Saab","Volvo","Bents"];

배열의 요소에 접근하려면 변수명[인덱스번호] 형식을 사용한다.

console.log(cars[0]); // Saab
console.log(cars[1]); // Volvo

배열 값으로는 문자형, 숫자형뿐만 아니라 모든 자바스크립트 객체를 값으로 할당해서 사용할수 있다.

배열데이터 변경하는 방법

cars[0] = "현대"; //배열의 첫번째 요소의 값이 "현대"로 변경
cars[1] = "기아"; //배열의 두번째 요소의 값이 "기아"로 변경
console.log(cars[0]); // 현대
console.log(cars[1]); // 기아

1.1.8 typeof

자바스크립트에서는 typeof 연산자를 이용해서 현재 변수의 데이터 타입을 알아낼수 있다

typeof "John"                 // "string"
typeof 3.14                   // "number"
typeof NaN                    // "number"
typeof false                  // "boolean"
typeof [1,2,3,4]              // "object"
typeof {name:'John', age:34}  // "object"
typeof new Date()             // "object"
typeof function () {}         // "function"
typeof undefined              // "undefined"
typeof null                   // "object"

배열도 자바스크립트에서는 Object이기 때문에 데이터 타입은 Array가 아니라 Object가 된다.

profile
이자용

0개의 댓글