New 병아리 개발자

# 자바스크립트 학습

# 함수 호출 구조

## toString()

• data 위치의 값을 String 타입으로 변환

var value = 123;
var result = value.toString();
log(typeof result);

=>
string

• 빌트인 toString 오브젝트는 "123".toString(); 처럼 문자열로 작성해야 한다.
• String 타입을 String 타입으로 변환이 필요한 이유

 __proto__ 로 구조적으로 가져가는데
 
 앞의 __proto__ 에 함수이름을 작성한 것은 아래의 toString이 실행되지 않도록 하기 위함이다.
 (아래에 있는 것은 프로퍼티를 toString 으로 변환하는 것이고,
 위이 것은 문자열을 toString 으로 변환하는 것이다.)
 
 =>
 즉, 문자열을 문자열로 변환하는 것이지만,
 프로퍼티를 문자열로 변환하는 것을 방지하기 위해
 빌트인 String 오브젝트에 toString 함수를 작성한다.

__proto__;
	toString();		// 빌트인 String 오브젝트의 toString
__proto__;
	toString();		// 빌트인 오브젝트의 toString

• 대부분의 빌트인 오브젝트에는 toString()과 valueOf()가 있다. (없는것도 있다.)

## 자바스크립트의 함수 호출 구조

• 먼저 데이터 타입으로 오브젝트를 결정한다.
• 오브젝트의 함수를 호출한다.

var value = 123;
value.toString();

"123".toString();

• toString(123) 처럼 123을 파라미터에 작성

var result = toString(123);
log(result)

=>
[object Undefined]


빌트인 오브젝트의 toString 함수로 호출,
123을 오브젝트로 간주하여 object 형태를 문자열로 변환한다.

# 인덱스로 문자열 처리

## charAt()

• 인덱스의 문자를 반환한다.

var value = "sports";
log(value.charAt(1));
log(value[1]);

=>
p
p

• 문자열 길이보다 인덱스가 클 경우, 빈 문자열을 반환한다.

var value = "sports";
log(value.charAt(12));

=>
""	// 빈 문자열 반환.

• 일반적으로 존재하지 않으면 undefined를 반환한다.

var value = "sports";
log(value[12]);

=>
undefined

## indexOf()

• data 위치의 문자열에서 파라미터의 문자와 같은 첫 번째 인덱스를 반환한다.
• 검색 기준

1. 왼쪽에서 오른쪽으로 검색
var value = "123123";
log(value.indexOf(2));
log(value.indexOf(23));

=>
1
1

처음에 검색되는 문자의 인덱스가 반환.
값을 구하게 되면 더 이상 값을 구하지 않는다.


2. 두 번째 파라미터를 작성하면 작성한 인덱스부터 검색한다.
var value = "123123";
log(value.indexOf(2, 3));

=>
4


3. 같은 문자가 없으면 -1을 반환한다.
var value = "123123";
log(value.indexOf(15));

=>
-1

• 두 번째 파라미터의 검색 기준

var value = "123123";
log(value.indexOf(2, -1));		// 두 번째 파라미터 값이 0보다 작으면 처음부터 검색(0번 인덱스 부터)
log(value.indexOf(2, 9));		// 두 번째 파라미터 값이 length보다 크면 -1 반환
log(value.indexOf(2, "A"));		// 두 번째 파라미터가 NaN이면 처음부터 검색(0번 인덱스 부터)

=>
1
-1
1

## lastIndexOf()

• data 위치의 문자열에서 파라미터의 문자와 같은 인덱스를 반환한다. (단, 뒤에서 앞으로 검색한다.)

var value = "123123";
log(value.lastIndexOf());

=>
4

• 검색 기준

1. 투 번째 파라미터를 작성하면 작성한 인덱스부터 검색
var value = "1231231";
log(value.lastIndexOf(1, 4));
log(value.lastIndexOf(2, -1));

=>
3
-1		// 두 번째 파라미터가 0보다 작으면 -1 반환

# 문자열 연결, 대소문자 변환

## concat()

• data 위치의 값에 파라미터 값을 작성 순서로 연결하여 문자열로 반환한다.
• String 인스턴스를 작성하면 프리미티브 값을 연결한다.

var result = "sports".concat("축구", 11);
log(result);

var obj = new String(123);
log(obj.concat("ABC"));

=>
sports축구11
123ABC

## toLowerCase()

• 영문 대문자를 소문자로 변환한다.

log("ABCDE".toLowerCase());

=>
abcde

## toUpperCase()

• 영문 소문자를 대문자로 변환한다.

log("abcde".toUpperCase());

=>
ABCDE

# 자바스크립트 학습

# String 오브젝트

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

## 문자열 연결 방법

• 한 줄에 작성하여 연결한다. (기준은 세미콜론, 세미콜론이 나올떄까지 모든 문자열을 연결)

var book = "12" + "AB" + "가나";

• 줄을 분리하여 연결한다. (+로 문자열을 연결한다.)

var concat = 123 + "abc" +
				"가나다";
                
log(concat);

=>
123abc가나다

• 역슬래시(\)로 문자열 연결

var concat = abc" \ 가나다라";

log(concat)

=>
abc가나다라

## 프로퍼티 리스트

## 문자열로 변환

• 파라미터 값을 String 타입으로 변환하여 반환한다.
• 값을 작성하지 않으면 빈 문자열을 반환한다.

var value = String(123);

log(value);
log(typeof value);

log(typeof ("" + 123));

=>
123
string
string

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

## new String()

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

var obj = new String(123);
log(typeof obj);

=>
object

## valueOf()

• 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() 

• 문자열 앞뒤의 화이트 스페이스를 삭제한다.

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 인스턴스를 생성하여 반환한다.

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()

• Number 인스턴스의 프리미티브 값을 반환한다.

var obj = new Number("123");
log(obj.valueOf());

=>
123

# String 타입으로 변환

## toString()

• 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()

• 숫자를 브라우저가 지원하는 지역화 문자로 변환
• 지역화 지원 및 형태를 브라우저 개발사에 일임하여 브라우저마다 조금씩 차이가 날 수 있다.
• 지역화를 지원하지 않으면 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

• 숫자를 지수 표기로 변환하여 문자열로 반환
• 파라미터에 소수 이하 자릿수를 작성한다. (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()

• 고정 소숫점 표기로 변환하여 문자열로 반환
• 파라미터에 소수 이하 자릿수 작성 (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 연산자

• 오브젝트로 인스턴스를 생성하여 반환한다.

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