TIL 25 | Javascript 데이터 타입 (1) - String & Number

meow·2020년 8월 19일
JavaScriptTILweb
0

JavaScript

목록 보기
13/46
post-thumbnail

typeof 연산자

typeof 연산자를 통해 이 값, 이 변수는 무슨 데이터 타입인지 알 수 있다. typeof 연산자를 적용하면 다음 문자열 중 하나를 반환한다.

  • "undefined" : 정의되지 않은 변수
  • "boolean"
  • "string"
  • "number"
  • "object" : 함수를 제외한 객체 또는 "object"
  • "function"

다음과 같이 사용한다.

let msg = "message";
console.log(typeof msg);
console.log(typeof 100);

null은 빈 객체를 참조하고 있어서 데이터 타입이 object로 반환된다.
Array [] 역시도 object이다. 배열은 확장된 객체이기 때문이다.
객체(Object) 데이터 타입은 키와 조합으로 이루어진 데이터이다. 중괄호로 감싸진 key-value 쌍의 형태를 갖는다.
ex. { key: value }

String

쌍따옴표든, 홑따옴표든 모두 String형 값에 사용한다. 둘 중에 어떤 것을 써야 하는지는, 회사 규정에 따라 다르다고 생각하면 된다. 회사에서는 보통 코딩 컨벤션(코드작성가이드)을 맞춘다.

let good = '이것도 맞고';
let better = "이것도 맞습니다";

대소문자 바꾸기

String형에서 제공하는 기본 함수들이 많은데 대표적으로 알아서 대소문자를 바꿔주는 함수가 있다.

String 함수들 참고 : https://www.w3schools.com/jsref/jsref_obj_string.asp

console.log('js' === 'js'); // true
console.log('Js' === 'js'); // false

웹사이트에 검색기능이 있는 경우 "Js"라고 검색했을 때, J가 정확히 대문자인 것만 찾아주는 것이 아니라 대소문자 구분 없이 "js"라는 단어가 포함된 모든 컨텐츠를 찾고 싶을 수 있다.

let lastName = 'Yeri Kim';
let upperLastName = lastName.toUpperCase();
let lowerLastName = lastName.toLowerCase();

console.log(lastName);
// 'Yeri Kim'
console.log(upperLastName);
// YERI KIM'
console.log(lowerLastName);
// 'yeri kim'

위와 같이 String형이 제공하는 toUpperCase와 toLowerCase함수를 호출하여 lastName 변수의 값 자체를 바꾸지 않고 변형된 형태의 변수를 만들 수 있다.

문자 길이

문자인 String형도 length라는 속성으로 길이를 알 수 있다.

회원가입을 받을 때 이름에 10자가 넘어갔는지 체크하거나, 한국의 핸드폰 번호는 무조건 10자 아니면 11자 이므로 사용자가 값을 잘못 입력했는지 체크할 때 유용하게 사용된다.

다음 예제는 phoneNumber가 10자리도 아니고 11자리도 아니면 alert를 보여준다.

if (phoneNumber.length !== 10 &&  phoneNumber.length !== 11) {
  alert("폰 번호 제대로 입력하셨나요?");
}

중요해요!
핸드폰 번호는 01012349876 으로 항상 0으로 시작한다. 0으로 시작하는 숫자 표현식은 없습니다. 그래서 핸드폰 번호는 숫자로 이루어져 있지만, 문자열로 관리해야 컴퓨터가 첫 숫자인 "0"도 갖고 있게 된다. 또한 Number형에는 length라는 속성이 존재하지 않는다. 때문에 아래와 같이 String형으로 저장해야한다.
let phoneNumber = "01012349876";

문자열 찾기

indexOf() 함수는 문자열에 특정 문자열이 들어있는지 확인하고, 만약 있다면 몇번 째 순서에 해당 문자열이 있는지 알려준다. 해당 문자열이 없다면 -1을 반환한다.

이렇게 특정 문자열을 찾는 함수가 왜 필요할까? 예를 들어, 댓글에 욕설이 포함되면 달지 못하도록 차단할 때 사용할 수 있다. 차단할 단어 모음이 존재한다고 하고, 사용자가 댓글을 입력한 뒤 "댓글달기"를 누를 때, 차단할 단어 모음 중에 하나라도 매치되면 댓글을 달지 못하도록 막을 수 있다.

let info = "JavaScript는 프로래밍 언어이다.";
let firstChar = info.indexOf("프로래밍"); 

console.log(info, firstChar);

if (firstChar !== -1) { 
  info = info.slice(0, firstChar) + "프로그래밍" + info.slice(firstChar+4, info.length); 
}
console.log(info);

// "프로래밍" 이라는 오타를 "프로그래밍" 이라고 바꾸어 주는 코드다.

텍스트 자르기

info.slice(0, firstChar)

위 나온 코드에서 slice는 이름그대로 텍스트를 잘라주는 함수다.

slice(잘릴 시작위치, 잘릴 끝위치)

문구의 첫 번째 값은 0입니다. 그래서 info 문구의 0부터 12번째까지 잘라서 반환한다. 12번째가 끝이라면 해당 문자는 포함되지 않는다! 그 직전에 끊는다.

String <-> Number 변환

alert("김예리" + "님 안녕하세요."); 
let place = "위코드";
alert(place + "에 오신 것을 환영합니다");

+ 연산은 숫자끼리의 더하기는 물론이고, String끼리 문자를 연결할 수도 있다.

console.log("안녕하세요" - "안녕");

하지만 - 의 경우, 오로지 숫자에만 사용되는 연산이다. 왠지 같은 "안녕"을 빼니까 "하세요"만 남으면 좋겠지만..? 전 세계 공통적으로 약속된 연산이 아니기 때문에 존재하지 않는 연산이다. 그렇기 때문에 NaN 이라는 결과가 반환된다.

String과 Number의 연산

console.log(2019+"2000");
// 20192000
console.log(2019-"2000");
// 19

하나는 String, 하나는 Number의 수학계산인데, 코드에 오류가 없다. 컴퓨터가 + 의 양쪽을 보고, 하나라도 String이 있으면 문자열로서 합쳐준다. 그런데 - 라면, String의 마이너스는 존재 하지 않으므로 양쪽의 값을 모두 숫자로 변환해서 계산해준다.

코드가 동작을 한다고 하더라도, 텍스트로 표현된 숫자는 반드시 숫자로 바꿔서 계산을 해주어야 한다.

String -> Number

다음과 같이 Number 함수를 사용해서 String에서 Number형으로 전환할 수 있다.

var birthYearInput = "2000";
console.log(typeof birthYearInput);

var numberBirthYear = Number(birthYearInput);
console.log(typeof numberBirthYear);

Number함수 말고 parseInt, parseFloat 등이 있다.

parseInt("1.901"); // 1
parseFloat("1.901"); // 1.901
Number("1.901"); // 1.901
parseInt("200") + 1; // 201

Number -> String

var numberAsNumber = 1234; 
var numberAsString = numberAsNumber.toString();

console.log(numberAsNumber, typeof numberAsNumber); // 1234 'number'
console.log(numberAsString, typeof numberAsString); // 1234 string

+ 연산의 특성을 활용하여 아래와 같이도 변환할 수 있다.

var numberAsNumber = 1234; 
var numberAsString = 1234 + "";

console.log(numberAsNumber, typeof numberAsNumber); // 1234 'number'
console.log(numberAsString, typeof numberAsString); // 1234 string

- 연산의 특성을 활용해서 String 형을 Number형으로 변환할 수도 있다.

var numberAsNumber = "1234"; 
var numberAsString = numberAsNumber - 0;

console.log(numberAsNumber, typeof numberAsNumber); // 1234 string
console.log(numberAsString, typeof numberAsString); // 1234 'number'

Number

JS Math 객체 메소드 : https://www.w3schools.com/js/js_math.asp

절대값 구하기, sin, cos, 제곱근 등등, Math 객체에 수학계산 메서드가 많이 있다.

반올림 함수 Math.round()

평점을 별점으로 나타낼때 사람들이 보기 쉽게 하기 위해 반올림을 하는 경우 등 유용하게 사용될 수 있는 함수이다.

console.log(Math.round(2.5)); // 3
console.log(Math.round(2.49)); // 2
console.log(Math.round(2)); // 2
console.log(Math.round(2.82)); // 3

올림 함수 Math.ceil()

console.log(Math.ceil(2.5)); // 3
console.log(Math.ceil(2.49)); // 3
console.log(Math.ceil(2)); // 2
console.log(Math.ceil(2.82)); // 3

내림함수 Math.floor()

console.log(Math.floor(2.5)); // 2
console.log(Math.floor(2.49)); //
console.log(Math.floor(2));
console.log(Math.floor(2.82));

랜덤함수 Math.random()

랜덤 숫자도 쉽게 구할 수 있다.

var randomNumber = Math.random();
console.log(randomNumber);
최소(min), 최대값(max)을 받아 그 사이의 랜덤수를 return하는 함수를 구현해주세요.

비록 0.0000000000000000에서 0.9999999999999999 사이의 값에서 랜덤수를 제공하지만, 이 랜덤함수를 이용해서 개발자가 원하는 범위의 랜덤수를 설정할 수 있다.

예 1. 최소(min), 최대값(max)을 받아 그 사이의 랜덤수를 return하는 함수

// Assignment
function getRandomNumber (min, max) {
  return Math.random() * (max - min) + min;
}

getRandomNumber(10, 100);

예 2. 최댓값과 최솟값을 포함하는 랜덤 정수를 return하는 함수

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //최댓값도 포함, 최솟값도 포함
}
profile
meow
🌙｀、、｀ヽ｀ヽ｀、、ヽヽ、｀、ヽ｀ヽ｀ヽヽ｀ ヽ｀、｀ヽ｀、ヽ｀｀、ヽ｀ヽ｀、ヽヽ｀ヽ、ヽ ｀ヽ、ヽヽ｀ヽ｀、｀｀ヽ｀ヽ、ヽ、ヽ｀ヽ｀ヽ 、ヽ｀ヽ｀ヽ、ヽ、ヽ｀ヽ｀ヽ 、ヽ、ヽ、ヽ｀｀、ヽ｀、ヽヽ 🚶‍♀ ヽ｀｀ヽ｀｀、ヽ｀、
이전 포스트

TIL 24 | Javascript 놓치지 않을거예요..

다음 포스트

TIL 26 | Javascript 데이터 타입(2) - Date

0개의 댓글