본문 바로가기

JAVASCRIPT

[javascript] 02. 타입, 값, 변수_part1

프로그래밍 언어에서 표현하고 조작할 수 있는 값의 종류를 타입이라 부르고 어떤 타입을 지원하는지가 프로그래밍 언어의 가장 기본적인 특징을 이룹니다. 프로그램에서 값을 나중에 사용하기 위해 유지하려면 변수에 값을 할당(저장)합니다. 변수에는 이름이 있으며 프로그램은 변수 이름을 통해 값을 참조합니다. 

 

자바스크립트 타입은 기본 타입과 객체 타입으로 나뉩니다.

 

기본 타입

- 숫자

- 문자열

- 불(boolean)

- null

- undefined

- 심벌

 

객체 타입

기본 타입에 속하지 않는 모든 값

 

 

첫번째. 숫자

1-1. 정수 리터럴

 

10진수

ex) 0 , 3, 100000  ...

 

16진수

ex) 0xff => 255

 

1-2. 부동 소수점 리터럴

부동 소수점 리터럴에는 소수점이 포함 될 수 있다.

1-3. 자바스크립트의 산술 연산

자바스크립트의 산술연산자에는 덧셈( + ), 뺄셈( - ), 곱셈( * ), 나눗셈( / ), 나머지(%) 가 있습니다.

이것 이외에도 Math 객체의 프로퍼티로 정의된 함수와 상수를 통해 더 복잡한 수학 계산도 가능합니다.

 

Math.pow(2,53)                // 900741995254740992 : 2의 53승

Math.roud(.6)                   // 1.0 : 가장 가까운 정수로 반올림

Math.ceil(.6)                     // 1.0 : 정수로 올림

Math.floor(.6)                   //  0.0 : 정수로 내림

Math.abs(-5)                    //  5 : 절댓값

Math.max(x,y,z)               // 인자 중 가장 큰 것을 반환

Math.min(x,y,z)                // 인자 중 가장 작은 것을 반환

Math.random()                // 0 이상 1.0 미만의 랜던한 숫자 x를 반환

Math.PI                           // 원주율

Math.E                            // 자연 로그의 밑

 

등등

 

자바스크립트는 산술 연산 과정에서 오버플로, 언더플로가 발생해도 에러를 일으키지 않습니다. 오버플로에는 특별한 값 infinity를 반환하고 언더플로일 때는 0 을 반환합니다.

 

두번째. 문자열

2-1. 문자열 리터럴

믄자열을 사용할 때는 그 문자열을 앞뒤가 맞는 작은 따옴표(''), 큰따옴표(""), 벡틱(``) 쌍으로 묶으면 됩니다.

ex)

"hello"

'안녕하세요'

`벡틱입니다`

 

2-2. 문자열 리터럴 안의 이스케이프 시퀀스

자바스크립트에서 역슬래시는 특별한 의미를 갖습니다. 그 다음 문자와 조합해 일반적인 방법으로는 문자열에 표시할 수없는 문자를 표현합니다.

 예를 들면 작은 따옴표로 작성된 문자열 안에서 아포스트로피를 작성해야할 때 사용합니다. 이스케이프 시퀀스를 사용하면 문자열의 종료인 구분자로 사용되지 않고 아포스트로피로 사용이 가능합니다.

ex) ' You'\re right, It can\'t be quote'

시퀀스 표현하는 문자
\0 NUL 문자
\b 백스페이스
\t
\n 뉴라인
\v 세로 탭
\f 폼 피드
\r 캐리지 리턴
\" 큰따옴표
\' 작은 따옴표
\\ 역슬래시
\xnn 16진수 숫자 두개 nn으로 표현하는 유니코드 문자
\unnn 16진수 숫자 네개 nnnn으로 표현하는 유니코드 문자
\u{n} 코드 포인트 n으로 표현하는 유니코드 문자. 여기서 n은 0에서 10FFFF 범위에 있는 16진수 숫자

2-3. 문자열 다루기

자바스크립트에는 문자열을 +연산자를 사용하여 병합할 수 있습니다.

ex) let favorite = " I like " + " apple.";        // "I like apple."

 

문자열을 다루는 다양한 API 

let s = "Hello, world";

 

s.length                      // 11 : 문자열의 길이

//문자열의 일부를 가져옵니다.

s.substring(1,4)          // "ell" : 두번째, 세번째, 네번째 문자 

s.slice(1,4)                 // "ell" : substring과 같은 결과

s.slice(-3)                  // "rld" : 마지막 세글자

s.split(",")                  // ["Hello", "world"] 구분자를 기준으로 나눕니다.

 

//문자열 검색

s.indexOf("l")            // 2 : l이 처음 나타나는 위치

s.indexOf("l",3)         // 3 : 3번째 문자부터 시작해 l이 나타나는 위치

s.indexof("zz")          // -1 : s에는 zz문자열이 들어있지 않습니다.

s.lastIndexOf('l")       // 10 : l이 마지막으로 들어있는 위치

 

//불을 반환하는 검색 함수

s.startWith("Hell")    // true : s는 Hell로 시작합니다.

s.endWith("!")          // false : s는 !로 끝나지 않습니다.

s.includes("or")        // true : s에는 or이 들어있습니다.

 

//문자열을 변경

s.replace("llo","ya")   // "Heya, world"

s.toLowerCase()       // "hello, world"

s.toUpperCase()       // "HELLO, WORLD"

s.nomalize()              // 유니코드 정규화

 

// 문자열의 각 16비트 문자를 검사

s.charAt(0)              // "H" : 첫번째 문자

s.charAt(s.length - 1) // "d" : 마지막 문자

s.charCodeAt(0)          // 72 :  주어진 위치의 16비트 숫자

s.codePontAt(0)          // 72 : 16비트보다 큰 코드 포인트에서 동작하는  ES6의 기능

 

// 패딩함수 (ES2017 에서 추가)

"x".padStart(3)           //"   x" :  왼쪽에 스페이스 3개 추가

"x".padEnd(3)            // "x   " : 오른쪽에 스페이스 3개 추가

"x".padStart(3, "*")     // "**x" : 왼쪽에 *를 붙여 길이를 3으로 맞춤

"x".padEnd(3,"*")       // "x**" : 오른쪽에 *를 붙여 길이를 3으로 맞춤

 

// 공백제거

"  test".trim()              // "test" : 앞뒤 공백을 제거합니다.

"  test  ".trimStart()    // " test  " : 앞 공백을 제거합니다.

"  test  ".trimEnd()     // "  test" : 뒤 공백을 제거합니다.

 

// 그 외의 문자열 메서드

s.concat("!")            // "Hello, world!" : + 연산자를 쓰는게 더 간편

"<>".repeat(5)         // "<><><><><>" : n번 복사됩니다.

 

2-4.탬플릿 리터럴

임의의 자바스크립트 표현식을 넣을 수 있는 템플릿 리터럴입니다. 벡틱으로 둘러싼 문자열 리터럴의 최종 값은 그 안에 표현된 표현식을 평가해서 그 표현식의 값을 문자열로 변환하여 변환된 문자열을 벡틱 안의 리터럴 문자와 결합한 값으로 리턴합니다.

 

ex)

let name = "Bill";

let greeting = ` Hello, ${name}.`;      //greeting == "Hello, Bill."

 

세번째.불(boolean)

주로 조건에 대한 결과값으로 사용됨.

true

false

 

네번째. null 과 undefined

null과 undefined 는 모두 값이 없음을 나타내지만 둘의 의미는 약간은 다르다.

 

null : 객체가 없을 때 값이 없음을 나타내는 값

undefined : 값이 정의되지 않았을 때 값이 없음을 나타내는 값

 

 

 

'JAVASCRIPT' 카테고리의 다른 글

[javascript] element node 선택하기  (0) 2023.03.01
[javascript] 태그 선택하기  (0) 2023.03.01
[javascript] 01. 자바스크립트 어휘 구조  (0) 2023.02.09