TIL

TIL 24 :: JS란? 변수와 자료형을 알아보자

Deeb 2022. 4. 28. 18:40

JS는 어떤 언어일까?

웹브라우저가 해석해서 실행할수 있는 유일한 프로그래밍 언어로 사용자의 이벤트를 받고 내장 객체들을 이용한 CSS나 태그의 스타일 관련 속성, 날짜, 텍스트 등을 조작할 수 있다. 요즘에는 게임프로그래밍, 서버프로그래밍 등 다양한 분야에서 쓰여지고있다고 한다. 

 

쉽게 얘기하자면 HTML에서 만들어진 <button>을 제어해 클릭이 되었을 때 함수를 실행하는식으로 쓰인다. 

 

그리고 인터프리터 언어이다. 인터프리터 언어는 별도의 실행 파일 없이도 바로 실행 가능하고 컴파일하는 과정이 없기때문에 수정, 디버깅에 유리하다.

 

인터프리터 언어와 컴파일 언어

출처 : 위니브

.exe 같은게 이미 소스코드가 컴파일된 파일들이다. 기계가 알아듣기 편한 언어로 번역되어있다는것이다.

출력해보기

document.getElementById("one").innerHTML = "hello <strong>document</strong>";
console.log("hello console");
console.info("hello info");
console.error("hello error");
console.table([{"one": "two", "three" : "four"}])
window.alert("hello alert");
document.write("hello write");

 

개발할 때 사용하면 편리한 브라우저 기능

window.alert() : 브라우저에 메세지 다이얼로그를 띄웁니다.

window.prompt() : 브라우저에 사용자의 데이터를 입력받을 수 있는 입력 창을 띄웁니다.

window.confirm() : true 혹은 false 값을 반환하는 다이얼로그를 띄웁니다.

console.log() : 콘솔창에 로그 메세지를 보여줍니다.

console.error() : 콘솔창에 에러 메세지를 보여줍니다.

console.table() : 콘솔창에 데이터를 테이블 형태로 제공합니다.

 

prompt 결과

변수

: 선언하고 할당하고 사용할 수 있다. 변수는 ‘변할 수 있는 수’이므로 지정된 값을 계속 바꿀 수 있다.

 

변수명 조건

  • 변수이름은 $, _ 를 제외한 공백, 특수문자, 구두점(글의 여러 가지 경계를 구분하기 위해 사용되는 반점(,), 온점(.), 물음표(?) 등등…)을 사용할 수 없다.
  • 첫 글자는 숫자가 될 수 없다.
  • 대소문자를 구별한다.
  • 예약어가 쓰일 수 없다.
  • 유니코드 문자도 사용할 수 있다.
  • var, let, const의 키워드를 사용할 수 있다. 보통은 let을 사용하지만, 정확한 scope를 배우기 전에는 var를 사용하도록 한다.

+ 변수명은 꼭 의미가 담겨있는 이름으로 지어야한다

 

$,_는 변수에서 사용가능한데 대부분 변수명으로 잘 쓰이지 않는다 그러면 언제 쓰일까?

 

$는 DOM을 Control 하는 변수일 때  사용

_는 의미없는 변수일때 자주 사용

 

 

자료형

원시 자료형과 참조 자료형

원시자료형(primitive type) 

:객체가 아니면서 method를 가지지 않는 6가지의 타입으로 원시자료형이 저장된 변수를 다른 변수에 할당하면 값자체가 복사되고 복사된 변수를 변경해도 원래 변수는 변하지 않는다. 값을 할당할 때 값이 복사되어 전달된다.

종류 - string, number, bigint, boolean, undefined, symbol, (null)

 

객체 자료형(reference data type)

: 원시 자료형이 아닌 모든 것들로 대표적으로 배열과 객체, 함수가 있다. 객체 자료형은 참조자료형이라고도 불리는데 그 이유는 객체를 생성하여 값을 할당하고 그 값이 위치한 ‘주소’를 복사합니다. 객체를 생성해서 값을 할당할 때에는 그 값을 복제하면 “값 자체”를 복제하는 것이 아니라 참조값 (위치하는 메모리 주소, 레퍼런스)가 복사되어 전달된다. 

 

 

둘의 차이를 비교해보면 원시 자료형은 하나의 변수에는 하나의 데이터만을 담을 수 있는데, 참조 자료형은 여러 데이터를 담을 수 있다.

원시타입 - copy by value
객체 - copy by reference

이렇게 생각하여 외우는게 쉽다. 

 

출처 : 위니브

변수의 자료형은 다양한 데이터를 용도에 맞게 쓰기 위해서이다. 보통 언어에서는 변수의 자료형과 함께 변수를 선언하지만 자바스크립트는 자료형을 함께 쓸 필요는 없다.

 

  • Null은 원시자료형인데 왜 객체자료형이냐하면 이건 개발자의 실수이다..! 예외처리를 잘못해서 타입을 오브젝트로 처리해버렸기 때문이다. null은 할당하면 메모리에 object로 들어간다. 
  • [ ] : 배열 { } : 객체
  • undefined : 변수를 메모리 상에 올려만 놨기에 메모리 상에는 아무것도 없다. 정해지지 않은 상태

 

어떤 자료형인지 찾는 방법 1

Object.prototype.toString.call(데이터).slice(8, -1);

prototype에 객체가 상속받고 있는 부모의 메소드들의 정보도 담겨있다.

object->prototype->toString이 들어있다. call()은 앞에있는 toString의 this값을 고정시킨다. 

값을 문자열로 받아오는데 문자열의 8번째 인덱스부터 끝에서 두번째까지 자른다.

 

만약 slice빼면 Object가 붙어서 출력된다. 

 

어떤 자료형인지 찾는 방법 2

(객체).contstructor 를 이용해 생성자를 반환하면된다. 

 

const str = 'hello';
const str1 = new String('hello');
str.constructor;

str 이라는 변수를 생성하고 리터럴(값)으로 hello라는 문자열을 담았다.

String()은 생성자 함수이다. 

그리고 str.constructor을 console에서 실행하면 변수 str의 자료형을 반환해준다. 

 

변수의 자료형은 다양한 데이터를 용도에 맞게 쓰기 위해서이다. 보통 언어에서는 변수의 자료형과 함께 변수를 선언하지만 자바스크립트는 자료형을 함께 쓸 필요는 없다.

 

출처: 위니브

문자열 타입

- 템플릿 리터럴

+) 이스케이프 표현

코드출력

\XXX 8진수 Latin-1 문자
\' 작은따옴표
\" 큰따옴표
\\ 역슬래시
\n 개행
\r 캐리지 리턴
\v 세로 탭
\t 탭
\b 백 스페이스
\f 폼 피드
\uXXXX 유니코드 코드포인트
\u{X} ... \u{XXXXXX} 유니코드 코드포인트 Experimental
\xXX Latin-1 문자

출처: mdn

 

NaN

NaN 여부 판단하는 법 isNaN(숫자);

 

 

이러한것들은 라이브러리 Big.js, BigNumber.js, Decimal.js, Math.js 등으로 해결할 수 있다.

 

JS에서 표현할 수 있는 숫자의 범위가 있다! 

Number.MAX_SAFE_INTEGER 로 찾아보면된다.

BigInt라는게 있지만 IE에서는 사용되지 않는다. 

 

 

 ` `(백틱) 템플릿 리터럴을 사용해서도 문자열을 만들 수 있다. 

템플릿 리터럴이란?

내장된 표현식을 허용하는 문자열 리터럴이다. 

자세한 내용은 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals 에서 확인할 수 있다. 

const one = 'hello';
document.write(`5${one}`)​

변수 호출하고 싶을 때 ` `안에 ${변수명}으로 호출해서 사용할 수 있다. 그리고 템플릿 리터럴 안에서 enter치면 줄바꿈된다.

 

toLocalString

- 숫자의 사용 언어에 따른 표현을 포함한 문자열을 반환한다

 == 은 값이 같은지 비교 === 은 값과 타입이 같은지 비교

 

replace

- string으로 해주면 처음 만난애만 대체해주고 정규표현식으로 해줘야 전체를 바꿔준다. 

 

parseInt

- 숫자로 된 문자열을 숫자로 반환한다. 

parseInt('10'); // 10
parseInt('20asdf'); // 20
parseInt('30ad40'); // 30
parseInt('adsf40'); // NaN

숫자가 아닌 값(문자 또는 , 등)가 들어가면 그 전까지의 숫자만 보여준다

 

parseInt('10', 8); // 8
parseInt('10', 2); // 2
parseInt('56', 16); // 86

진수 변환도 가능하다. 숫자 2가 2진수로 표현하면 10인데 parseInt('10', 2) 하면 2진수 값 10을 받은거라서 10진수 정수인 2로 반환한다. 

 

toFixed 

const num = 1.3456789;
num.toFixed(2); //1.35

 

Number

 

공백만 있을 때 : 0

공백도 있을 때 : 숫자만 출력

Number는 생성자 함수로 new Number(2) 이런식으로 더 자주쓰인다. 이걸로 숫자를 출력하는것보다 parseInt나 parseFloat을 이용해 변경하는게 좋다. 

 

Math

ceil : 올림, 주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자를 integer 로 반환

floor : 내림, 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환

round :  입력값을 반올림한 수와 가장 가까운 정수 값을 반환

pow 

Math.pow(base, exponent)

base 에 exponent를 제곱한 값을 반환

sqrt : 숫자의 제곱근을 반환

abs : 절댓값

random : random한 값 출력

 

 

Math 실습

Math.random 메서드를 이용해서 원하는 두 정수 사이의 랜덤한 정수 뽑아내보기

Math.floor(Math.random()*15 + 20);

 

20부터 35까지의 랜덤한 숫자를 출력하고 소수점 내림처리를 했다. 

 

함수? 메서드?

객체안에서 사용되는 함수를 메서드라고한다

document.write(`n.toLocaleString() : ${n.toLocaleString()} <br>`);

.을 통해 접근하는것이 메서드, 여기서는 toLocalString()이다 

 

인스턴스는 생성자 함수가 만든 여러메서드를 사용할 수 있다.

 

참고하기 좋은 블로그: https://webclub.tistory.com/500 [Web Club]

 

JS Basics #3 - Array(배열), Object(객체) 그리고 함수(Function)

배열 배열(Array)은 많은 데이터를 순번을 가지고 저장할 때 사용됩니다. 배열에는 원소라는 index 번호를 할당받은 저장소가 있으며, 배열의 원소에 index 로 접근하여 할당된 값을 읽어 올 수 있습

webclub.tistory.com

 

 

 

반응형
저작자표시 변경금지