반응형

# 자바스크립트 학습

# String 오브젝트

  • "ABC" 처럼 문자 처리를 위한 빌트인 오브젝트이다.
  • String 오브젝트에는 문자 처리를 위한 함수와 프로퍼티가 포함되어 있다.
  • 함수를 호출하여 문자 처리를 하게 된다.

## 문자열 연결 방법

  • 한 줄에 작성하여 연결한다. (기준은 세미콜론, 세미콜론이 나올떄까지 모든 문자열을 연결)
var book = "12" + "AB" + "가나";
  • 줄을 분리하여 연결한다. (+로 문자열을 연결한다.)
var concat = 123 + "abc" +
				"가나다";
                
log(concat);

=>
123abc가나다
  • 역슬래시(\)로 문자열 연결
var concat = abc" \ 가나다라";

log(concat)

=>
abc가나다라

## 프로퍼티 리스트

이름 개요
new String() 인스턴스 생성
String 함수
String() 문자열로 변환하여 반환
fromCharCode() 유니코드를 문자열로 변환하여 반환
String 프로퍼티
length 문자열의 문자 수 반환
String.prototype
constructor 생성자
valueOf() 프리미티브 값 반환
toString() 문자열로 반환
charAt() 인덱스 번째 문자 반환
indexOf() 일치하는 문자열 중 가장 작은 인덱스 반환
lastindexOf() 일치하는 문자열 중 가장 큰 인덱스 반환
concat() 문자열 연결
toLowerCase() 영문 소문자로 변환
toUpperCase() 영문 대문자로 변환
trim() 문자열 앞뒤의 화이트 스페이스 삭제
substring() 시작에서 끝 직전까지 값 반환
substr() 시작 위치부터 지정한 문자 수 반환
slice() 시작에서 끝 직전까지 값 반환
match() 매치 결과 반환
replace() 매치 결과를 지정한 값으로 대체
search() 검색된 첫 번째 인덱스 반환
split() 구분자로 분리하여 반환
charCodeAt() 인덱스 번째 문자를 유니코드로 반환
localeCompare() 값의 위치를 1, 0, -1로 반환

## 문자열로 변환

구분 데이터(값)
파라미터 변환 대상
반환 변환한 값
  • 파라미터 값을 String 타입으로 변환하여 반환한다.
  • 값을 작성하지 않으면 빈 문자열을 반환한다.
var value = String(123);

log(value);
log(typeof value);

log(typeof ("" + 123));

=>
123
string
string
  • 가독성을 위해 ("" + 123) 보다는 String(123) 형태로 작성한다.

## new String()

구분 데이터(값)
파라미터 값opt
반환 생성한 String 인스턴스
  • new 연산자로 String 생성자 함수를 호출하면 String 인스턴스를 생성하여 반환한다.
  • 아래와 같이 new 연산자로 String 생성자 함수를 호출하면서 파라미터 값으로 Number 타입으로 123 작성, 그러면 인스턴스를 생성하여 obj에 할당하게 되고, 123을 인스턴스의 프리미티브 값으로 설정하게 된다.
var obj = new String(123);
log(typeof obj);

=>
object

## valueOf()

구분 데이터(값)
data String 인스턴스, 문자
파라미터 사용하지 않음
반환 프리미티브 값
  • valueOf 함수는 String 인스턴스의 프리미티브 값을 반환한다.
var obj = new String(123);
log(obj.valueOf());

=>
123

# length 프로퍼티

문자 수를 반환한다.

var value = "ABC";

log(value.length);

=>
3
  • length 프로퍼티 활용한 형태
var value = "ABC";

for (var l = 0; k < value.length; k++ ) {
	log(value[k]);
};

=>
A
B
C
  • length 값이 반환되는 논리
1. length가 출력되는 원리
var obj = new String("ABC");

new 연산자로 String 생성자 함수를 호출하면서 파라미터에 "ABC"를 작성해서 인스턴스 생성

obj에 length가 존재.

value가 obj가 된 것.(즉, value가 인스턴스가 된 것)


2. 출력원리
var value = "ABC";
console.log(value.length);		// 3출력

value.length 진행 시, value에 대한 타입을 구한 후
내부적으로 해당 타입에 맞는 new String("ABC"); 가 진행된다. 
이로인해 자바스크립트 내부에서 인스턴스를 생성.(temp라고 하면)
생성된 인스턴스를 갖고 temp.length 진행하여 3출력.

정리)
1. value.length 진행 시 value에 맞는 타입 확인
2. 타입에 맞는 생성자 함수 호출하여 인스턴스 생성
3. 이로인해 value.length 사용 가능

# 화이트 스페이스 삭제

## trim() 

구분 데이터(값)
data 삭제 대상
파라미터 사용하지 않음
반환 삭제한 결과
  • 문자열 앞뒤의 화이트 스페이스를 삭제한다.
var value = "  abcd  ";
log(value.length);

log(value.trim().length);

=>
8	//	abcd 앞뒤로 공백이 2개씩 존재.
4	// trim() 함수로 공백 제거
  • 메소드 체인(Method chain) : value.trim().length 처럼 점과 점으로 연결된 형태를 의미
반응형
반응형

# 자바스크립트 학습

# Number 인스턴스 생성

  • new Number() : new 연산자로 Number() 생성자 함수를 호출하면, 빌트인 Number 오브젝트로 새로운 Number 인스턴스를 생성하여 반환한다.
구분 데이터(값)
파라미터 값opt
반환 생성한 Number 인스턴스
var obj = new Number("123");
log(obj.valueOf());

=>
123
  • 인스턴스의 형태 : prototype 오브젝트를 기준으로, prototype에 연결되어 있는 함수를 복사하여 인스턴스에 할당한다. prototype이 아닌 다른 것들은 인스턴스에 복사해 주지 않는다. (빌트인 Number 오브젝트를 복사해서 할당하는데, prototype에 있는 것만 할당한다.) 이때, 다른 것과의 혼동을 줄이기 위해 __proto__ 에 값을 넣어 전달한다.

# 프리미티브 값 (Primitive Value)

  • 언어에 있어 가장 낮은 단계의 값 (더이상 분해 or 전개할 수 없다.)
var book = "책";

=> 더이상 분해 or 전개 불가능

## 프리미티브 타입

  • Number, String, Boolean : 인스턴스 생성 가능
  • Null, Undefined : 인스턴스 생성 불 가능
  • Object : 프리미티브 값을 제공하지 않는다.
var book = "책";
var point = 123;

=>
book = "책"
point = 123
더이상 전개 불가능. key-value의 형태.

## 인스턴스의 프리미티브 값

  • new 연산자를 이용하여 Number 생성자 함수를 호출하면, 인스턴스를 생성하여 반환하고, 파라미터 값을 인스턴스의 프리미티브 값으로 설정한다.
var obj = new Number(123);
  • 프리미티브 값을 갖는 오브젝트 : Number, Boolean, Date, String 등이 있다.
var obj = new Number(123);
log(obj + 200);

=>
323
프리미티브 값을 갖는 인스턴스에 값을 더하면 인스턴스는 프리미티브 값에 값을 더한다.

## valueOf()

구분 데이터(값)
data Number 인스턴스, 숫자
파라미터 사용하지 않음
반환 프리미티브 값
  • Number 인스턴스의 프리미티브 값을 반환한다.
var obj = new Number("123");
log(obj.valueOf());

=>
123

# String 타입으로 변환

## toString()

구분 데이터(값)
data 변환 대상
파라미터 진수(2-36)opt, 디폴트: 10진수
반환 변환한 값
  • data를 String 타입으로 변환 (변환 대상을 String 타입으로 변환)
var value = 20;
log(20 === value.toString());

log(value.toString(16));

=>
false
14
  • 변환할 때 주의 사항
log(20..toString());

=>
20
20.toString() 형태로 작성 시 에러 발생
20이 아니라 20.을 변환 대상으로 인식하므로, 점(.)이 없는 valuetoString() 형태가 되기 때문
20. 을 자바스크립트에서는 실수로 처리(20.0)

## toLocaleString()

구분 데이터(값)
data 변환 대상
파라미터 사용하지 않음
반환 변환한 값
  • 숫자를 브라우저가 지원하는 지역화 문자로 변환
  • 지역화 지원 및 형태를 브라우저 개발사에 일임하여 브라우저마다 조금씩 차이가 날 수 있다.
  • 지역화를 지원하지 않으면 toString()으로 변환한다.(지역화를 지원하지 않을 경우 문자열로 변환하여 반환)
  • 스펙 상태 : ES5는 파라미터 사용 불가능 / ES6는 파라미터에 언어 타입 사용 가능
var value = 1234.56;
log(value.toLocaleString());	// 한국에서 사용하는 형태(3자리마다 콤마 사용)
log(value.toLocaleString('de-DE'));		// 독일에서 사용하는 형태(콤마을 점으로, 점을 콤마로 표시)
log(value.toLocaleString('zh-Hans-CN-u-nu-hanidec));	// 중국에서 사용하는 형태(한자)

=>
1,234.56
1.234,56
一, 二三四.五六

# 지수 표기, 고정 소숫점 표기

## toExponential(0

구분 데이터(값)
data 변환 대상
파라미터 소수 이하 자릿수(0~20)
반환 변환한 값
  • 숫자를 지수 표기로 변환하여 문자열로 반환
  • 파라미터에 소수 이하 자릿수를 작성한다. (0에서 20까지)
var value = 1234;
log(value.toExponential());

=>
1.234e+3

## toExponential() 지수 표기 표시 방법

  • 변환 대상의 첫 자리만 소수점(.)앞에 표시
  • 나머지는 소수 아래에 표시
var value = 123456;
log(value.toExponential(3));	// 소수 이하 3자리만 표시

=>
1.235e+5
  • 지수(e+) 다음에 정수에서 소수로 변환된 자릿수 표시

## toFixed()

구분 데이터(값)
data 변환 대상
파라미터 변환할 소수 이하 자릿수
반환 변환한 값
  • 고정 소숫점 표기로 변환하여 문자열로 반환
  • 파라미터에 소수 이하 자릿수 작성 (0에서 20까지)
var value = 1234.567;
log(value.toFixed(2));
log(value.toFixed());

=>
1234.57
1235

## toFixed() 고정 소숫점 표시 방법

  • 파라미터 값보다 소수 자릿수가 길면 작성한 자리수에 1을 더한 위치에서 반올림
  • 변호나 대상 자릿수보다 파라미터 값이 크면 나머지를 0으로 채워 반환
var value = 1234.567;
log(value.toFixed(5));

=>
1234.56700
반응형
반응형

# 자바스크립트 학습

# new 연산자

구분 데이터(값)
constructor 생성자
파라미터 값opt
반환 생성한 인스턴스
  • 오브젝트로 인스턴스를 생성하여 반환한다.
var obj = new Number();	// obj에 인스턴스 할당.
log(typeof obj);

=>
object

원본을 복사하는 개념이다. (복사를 하는 것이 new 연산자)
new 연산자를 사용하면 인스턴스 (new Number())이며, 생성한 인스턴스를 obj에 할당.
new Number(); 는 Number 함수라 하지 않고, 생성자 함수라고 한다.
코딩의 관례로 첫 문자를 대문자로 작성한다.
  • 인스턴스 생성의 목적 : 인스턴스 마다 값을 갖기 위한 것이다.
var oneObj = new Number("123");
log(oneObj.valueOf());

var twoObj = new Number("456");
log(twoObj.valueOf());

=>
123
456
반응형
반응형

# 자바스크립트 학습

# 오브젝트(Object)

## 프로퍼티 (Property)

  • 프로퍼티의 형태
{name: value}	// 이름: 값
  • name에 프로퍼티의 이름(키)를 작성하며, 따옴표 작성은 생략 가능하다.
var book = {
	title: "책",
    point: 123
};

// 따옴표 작성 생략의 경우, 자바스크립트가 따옴표를 작성하지 않아도 문자열로 간주하기 때문
  • value에 자바스크립트에서 지원하는 타입을 작성한다.
{a: 123, b: "ABC", c: true, d: {}}
{book: function(){코드}}
var book = {
	title: "책",
    point: {
    	ten: 10,
        bonus: 200,
        promotion: function(){}
    }
};
  • 오브젝트(Object)를 객체라고 부르기도 하지만, 여기서 오브젝트는 프로퍼티라는 실체가 있는 것을 의미.

## 프로퍼티의 추가, 변경

  • 오브젝트에 프로퍼티 추가, 변경
var obj = {};
obj.abc = 123;
obj 오브젝트에 프로퍼티 이름으로 abc가 없으면 abc:123이 추가되고,
abc가 있다면 프로퍼티 값이 123으로 변경된다.
  • 작성방법
1. 점과 프로퍼티 이름 사용
var book = {};
book.title = "JS책";
log(book);

=>
{title: JS책}


2. 대괄호 사용
var book ={};
book["title"] = "JS책";
log(book);

=>
{title: JS책}


3. 변수 이름 사용
var book = {title: "JS책"};
var varName = "title";
book[varName] = "HTML책";
log(book);

=>
{title: HTML책}

## Object 프로퍼티 값 추출

  • 오브젝트에서 프로퍼티 값 추출
var obj = {book: "책"}	// 일떄..
var value = obj.book;	// obj.book 시 value 에 "책"이 할당된다.
						// 만약 obj에 book 없을 경우 value에 undefined를 반환한다.
var obj = {book: "책"};
log(obj.book);
log(obj["sports"]);

=>
책
undefined

sports라는 프로퍼티 이름이 없으므로 undefined 반환

## for ~ in

  • 오브젝트에서 프로퍼티를 열거한다. (처음부터 끝까지 모두 읽음)
var sports = {
	soccer : "축구".
    baseball : "야구"
};
for (var item in sports) {
	log(item);
    log(sports[item]);
};

=>
soccer
축구
baseball
야구

# 빌트인(Built-in)

  • 값 타입, 연산자, 오브젝트를 자바스크립트 코드를 처리하는 영역에 사전에 만들어 놓은 것.
  • 사전 처리하지 않고 즉시 사용 가능하다.
  • 빌트인 값 타입 : Undefined, Null, Boolean, Number, String, Object
  • 빌트인 연산자(Opeartor) : +, -, *, /, %, ++, --, new 등

## 빌트인 오브젝트

  • 빌트인 오브젝트의 형태
빌트인 Number 오브젝트	(object)

=>
123과 같은 숫자, 상수, 지수를 처리하기 위한 오브젝트
(오직 Number를 위한 프로퍼티와 함수가 있다.)


빌트인 String 오브젝트 (object)

=>
오직 string을 위한 프로퍼티와 함수가 있다.

...
  • 대문자 Object는 키-값으로 데이터를 저장하는데 중점, 소문자 object는 데이터를 처리하는데 중점을 둔 것

 ## 빌트인 오브젝트의 유형

  • Number 오브젝트 : 123과 같이 숫자, 상수, 지수를 처리하기 위한 오브젝트
  • String 오브젝트 : "abc"와 같이 문자열을 처리하기 위한 오브젝트로, 문자열을 분리, 연결할 수 있다.
  • Boolean 오브젝트 : 단지 true, false를 처리하기 위한 오브젝트
  • Object 오브젝트 : {key: value} 형태로 프로퍼티를 처리하기 위한 오브젝트
  • Array 오브젝트 : [1, 2, "가나다"] 형태의 데이터를 처리하기 위한 오브젝트
  • Function 오브젝트 : function abc() {} 형태의 함수를 지원하기 위한 오브젝트
  • Math 오브젝트 : abs(), round() 등의 수학 계산용 함수를 지원하는 오브젝트
  • Date 오브젝트 : 연월일, 시분초, 밀리초 등의 시간 값을 구하고 설정할 수 있는 오브젝트
  • JSON 오브젝트 : 서버와 통신하는 데이터 형태를 지원하는 오브젝트
[{"key": "value"}] 형태
  •  RegExp 오브젝트 : ^, $와 같은 정규 표현식을 지원하는 오브젝트
  • 글로벌(Global) 오브젝트 : 소스 파일 전체에서 하나만 존재, 모든 코드에서 공유 및 접근이 가능하다. 

## 빌트인 Number 오브젝트

  • 숫자 처리를 위한 오브젝트
  • 숫자 처리를 위한 함수와 프로퍼티가 포함되어 있고, 함수를 호출하여 숫자 처리를 하게 되고, 프로퍼티 키로 값을 구하게 된다.

## 빌트인 오브젝트의 프로퍼티 리스트

  • 프로퍼티 리스트의 경우 전체적으로 보고 파악하는 것이 중요, 그 후 개별적으로 접근
new Number()	: 인스턴스 생성
Number 함수
Number()		: 숫자 값으로 변환하여 반환
Number prototype
constructor		: 생성자
toString()		: 숫자 값을 문자열로 변환
toLocaleString(): 숫자 값을 지역화 문자로 변환
valueOf()		: 프리미티브 값 반환
toExponential()	: 지수 표기로 변환
toFixed()		: 고정 소숫점 표기로 변환
toPrecision()	: 고정 소숫점 또는 지수 표기로 변환

## Number() // Number 함수

  • 파라미터 : 소괄호() 안에 작성하는 것으로, 변환할 값opt (선택 입력사항)
  • 반환 : 함수가 실행 된 후, 함수에서 반환한 값(변환 한 값)
  • 파라미터 값을 Number 타입으로 변환한다.
  • 파라미터 값이 String 타입이라도 값이 숫자이면 변환 가능하다.
1. 문자열을 숫자로 변환
log(Number("123") + 500);
log(Number("ABC"));		// 숫자로 변환 불가능 하므로 Not A Number 반환

=>
623
NaN		// 변환을 했는데 결괏값이 NaN인 경우, 변환 하려고 했는데 파라미터 값이 NaN인 경우.
log(Number(0x14));
log(Number(true));
log(Number(null));
log(Number(undefined));

=>
20	// 0x는 16진수*1+4 = 20
1
0
NaN	// 숫자로 변환할 수 없거나, 변환 했는데 그 결과가 Number 아닌 경우

## Number 상수

  • 상수는 값을 변경, 삭제할 수 없다.
  • 영문 대문자 사용이 관례이다.
  • Number.MAX_VALUE 형태로 값을 사용한다.
상수 이름
Number.MAX_VALUE 1.7976931348623157 * 10 (308승)
Number.MIN_VALUE 5 * 10(-324승)
Number.NaN Not-a-Number
Number.POSITIVE_INFINITY Infinity
Number.NEGATIVE_INFINITY -Infinity

 

반응형

+ Recent posts