본문 바로가기

FrontEnd/JavaScript

초보자를 위한 기초 7일 완성, 자바스크립트 강좌(Javascript) - 2 (DataType, 메소드, parseFloat, isFinite, parseInt, toUpperCase, indexOf, 변수)

안녕하세요

인포돈 입니다.

 


초보자를 위한 자바스크립트입니다.   코딩 초보자, 일반인, javascript를 처음 접하시는 분들에게 추천드립니다.

시리즈 별로 조금씩 학습해보면 일주일 안에  javascript가 무엇인지 알게 되는 경험을 할 수 있습니다.

지금 바로 시작합니다.

* 참고사항
 - 개발환경은 Atom을 기준으로 작성되었습니다.
 - 웹 브라우저는 크롬을 기준으로 작성되었습니다.
 - javascript 시리즈는 웹에서의 활용을 집중적으로 다루어 나갑니다.

 


1. 데이터 타입

 

데이터 타입은 프로그래밍에 있어어서 데이터 종류를 의미합니다.

 

javascript에는 크게 7가지의 데이터 종류가 있습니다.

 

Number(숫자), String(문자열), Null, Boolean, Undefine, Symbol, Object

 

 1) Number

해석 그대로 숫자의 의미를 담고 있다. 숫자들을 이용해 사칙연산과 같은 연산 작업을 손쉽게 할 수 있다.

 

 2) String

문자열데이터 타입이라고 부른다. 즉, 텍스트를 나타내는 데 사용하는 데이터 타입이다.

기본적인 사용법은 "", ''사이에 입력한다. (작은 따움표, 큰 따옴표 모두 가능합니다.)

"DataType"
'DataType'

 

 3) Null

'아무것도 없다.'라는 의미가 있다. 알반적으로 우리가 현실에서 사용할 때는 '0'이라는 표현을 쓰지만, 프로그래밍 언어에서의 무는 Null로 표시가 된다.

 

 4) Boolean

참/거짓(True/False)을 나타내는 데이터 타입이다. 

 

 5) Undefine

 Undefine데이터 타입은 정의되지 않았다는 상태를 의미하는 데이터 타입이다.

*Null과의 차이점이 분명히 존재

a=null;
a;

이 두개의 차이가 바로 Undefine과 Null의 차이이다. a-null 코드는 null이라 데이터 타입이 들어가 있는 것이고, 그 의미는 비어있다는 의미이다. 그러나 아래 코드 a는 정의되지 않은 Undefine데이터 타입이라고 볼 수 있다.

 

6. Symbol

ES6에서 추가된 타입으로 중복 되지 않는 유일한 객체의 속성 key를 지정하기 위해 사용된다.

 

7) Object

객체타입이라고도 하며, 앞서 설명한 6가지의 데이터 타입이 아닐 경우 모두 객체 타입으로 명시된다.

 

7가지의 데이터 타입을 간략하게 설명하였지만, 아직 모든 데이터타입을 이해할 필요성이 없습니다.

차근차근 하나씩 배울 수 있는 실력이 될때 알게 될 수 있습니다.

 

그렇기 때문에 저희는 가장 많이 사용되면서도 기초가되는 Number와 String에 대해서 알아보겠습니다.

 


2. Number와 String의 차이

1+1
"1"+"1"

(해당 코드는 크롬 console을 이용하여 진행하였습니다.)

두 코드의 차이점을 아시나요?

 

실행 웹페이지

 

1+1은 우리가아는 연산처럼 2가 되지만, "1"+"1"은 "11"이라는 문자가 되는 것입니다.

 

같은 숫자지만 Number와 String의 데이터 타입 형태에 따라 다르게 동작하는 것을 알 수 있습니다.

 


 

3. Number, String메소드

여기서 메서드는 무엇일까요?

 

함수라고도 불리며, 이전 javascript를 만드신 대단하신 분들이 사용률이 굉장히 높고 많은 사람들이 필요로 하는 기능들을 미리 정의해 놓고 저장하여, 우리는 간단한 단어를 적는 것만으로 해당 기능을 구현하게 해주는 기능입니다.

 

간단한 예제를 몇 개 살펴보겠습니다.

Number.parseFloat(2);	//2
Number.isFinite(2);		//true
Number.parseInt(2.3)	//2

parseFloat() : 문자열에 포함된 숫자들을 모두 실수 형태로 반환한다.

isFinite() : 해당 숫자가 유한/무한을 파악한다.

parseInt() : 문자열에 포함된 숫자들을 모두 정수 형태로 반환한다.

 

이 외에도 여러 메서드들이 있으며, 필요에 따라 검색을 통해 해결하면 된다. (모든 메서드를 알 필요가 전혀 없다)

ex) javascript number method, javascript number 함수

 

'Hello world'.toUpperCase();		//HELLO WORLD
'Hello world'.indexOf('o');			//4
'Hello world'.indexOf('world');		//6
'Hello world'.indexOf('1');			//-1

toUpperCase() : 소문자를 대문자로 변환해준다.

indexOf() : 해당 문자의 인덱스 번호를 반환해준다. (해당 문제가 포함되어 있지 않다면 -1을 반환)

 

사실상 Number의 메서드보다 String의 메서드를 많이쓰는 경향이 있습니다. 자신이 필요한 메소드를 찾고 싶다면, String  ~~ method 이런 식으로 검색해 본다면 합당한 결과를 얻으실 수 있을 겁니다.


4. 변수와 대입 연산자

x=1;
y=1;
x+y;	//2

해당 코드를 살펴보면 x, y는 변수라 고한다.

 

변수 = 변할 수 있는 수

즉, x, y는 각 1이 들아가 있는 수지만, 다른 수를 넣으면 별할 수 있기에 변수라고 부른다.

(x, y가 아니어도 변수 지정은 가능하다.)

 

여기서 '=' 기호는 대입 연산자이다.

의미 : '오른쪽에 있는 값을 왼쪽의 변수에 넣는다'

 

그렇다면, 

1=2

해당 코드에서 '1'은 변수 일까?

 

정답은 아니다. 왜냐하면 1은 변하지 않는 수이기 때문이다. 이를 곧 상수라고 한다. (항상 변하지 않는 수)

 

즉, 변수에 상수를 넣어 계속해서 바뀔 수 있는 것은 변수

다른 상수를 대입하여 바꿀 수 없는 것이 상수라고 생각할 수 있습니다.

 

그러면 이런 변수는 왜 필요할까?

 

프로그래머는 기본적으로 엄청난 과장을 항상 상상해야 합니다.

 

" When selling whale Tokens, the seller first takes half of the cost of each sold token from the general supply. This money can immediately be used for other whales on the same or another ship.

 Next, in clockwise order aaaaa from the seller, each aaaaa other player can buy one of the sold tokens or pass. The other players take turns either buying or passing, until all of the sold tokens are bought, or all players pass. The selling player may not repurchase whales they have sold. A buyer aaaaa pays the full cost of each token to the general supply, and adds the whale to their supply to be scored. Tokens that are not bought by any player are removed from the game.

 After all of the whales are taken from a Returning ship, aaaaa the ship piece is returned to the player. Each ship's Return - including Buying and Selling - is performed 1 ship at a time in or der of Return and must be completed before Returning the next ship."

 

해당 글에서 aaaaa를 bbbbb로 바꾸고 싶어 합니다. 그러면 하나하나 일일이 바꿔야 하는 번거로움이 있죠. 이제 이런 식으로 고쳐야 되는 게 1억 개쯤 된다고 상상해보세요

 

끔찍하죠??

 

이런 문제점을 바로 변수를 통해서 획기적으로 바꿀 수 있죠.

 

바로 이렇게요

 

target="aaaaa"

 

여기서 "aaaaa"를 "bbbbb"로 바꾸면 한 번에 1억 개의 단어가 바뀌게 되는 엄청난 효율을 볼 수 있습니다.

 

이처럼 변수는 많은 프로그래밍 언어에서 필수불가결로 이용되는 문법입니다.