[3주차] 오브젝트, 빌트인, Number 오브젝트, String 오브젝트

3주차에는 '자바스크립트 비기너: 튼튼한 기본 만들기'에서 오브젝트의 전체적인 개념을 살펴보고 그 중 Number 오브젝트와 String 오브젝트를 공부했습니다. 또한 빌트인 개념을 다뤘습니다. 😁✌✌

 

---

 

주차	진도	강의시간(분)	기간
3주차	5.오브젝트 6.빌트인 7.Number 오브젝트 8.String 오브젝트	123	21년 10월 29일 ~ 21년 11월 4일

 

---

Object

 

Property

• {name: value} 형태
• name에 property 이름/키를 작성 (따옴표 생략)
• value에 JS에서 지원하는 타입 작성
  • {a: 123, b: "ABC", c: true, d: {}}
  • {book: function(){코드}}
• Object와 객체 구분

---

 

Property 추가, 변경

• 오브젝트에 프로퍼티 추가, 변경
  • var obj = {};
  • obj.abc = 123;
  • obj 오브젝트에 프로퍼티 이름으로 abc가 없으면 abc:123이 추가, 있으면 프로퍼티 값이 123으로 변경
• 작성 방법
  • 점(.)과 프로퍼티 이름 사용
  • 대괄호 사용: obj["abc"]
  • abc 변수 이름 작성: obj[abc]

var book = {};
book.title = "JS책";
log(book);
---
var book = {};
book["title"] = "JS책";
log(book);
---
var book = {title: "JS책"};
var varName = "title";
book[varName] = "HTML책";
log(book);
---
//세 경우 다 실행 결과 {title: HTML책}

---

 

Property 값 추출

• 오브젝트에서 프로퍼티 값 추출
  • var obj = {book: "책"}
  • var value = obj.book;
• obj 오브젝트에 프로퍼티 이름인
  • book이 있으면 프로퍼티 값 반환
  • book이 없으면 undefined 반환

var obj = {book: "책"};
log(obj.book);
log(obj["sports"]);

// [실행 결과]
// 책
// undefined

---

 

for~in

• 오브젝트에서 프로퍼티를 열거
• 형태:
  • for (변수 in 오브젝트) 문장;
  • for (표현식 in 오브젝트) 문장;
• for (var item in sports){코드}
  • 프로퍼티 이름이 item에 설정
  • sports[itme]으로 프로퍼티 값을 구함
  • 프로퍼티를 작성한 순서대로 읽혀진다는 것을 보장하지 않음

var sports = {
	soccer: "축구",
    baseball: "야구"
};
for (var item in sports){
	log(item);
    log(sports[item]);
}

/* [실행 결과]
* soccer
* 축구
* baseball
* 야구
*/

 

 

 

---

Built-in

 

Built-in

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

---

 

빌트인 오브젝트

• Number 오브젝트
  • 숫자, 상수, 지수
• String 오브젝트
  • 문자열, 분리, 연결
• Boolean 오브젝트
  • true, false
• Object 오브젝트
  • {key: value} 형태
• Array 오브젝트
  • [1, 2, "A", "가나다"] 형태
• Function 오브젝트
  • function abc(){} 형태
• Math 오브젝트
  • abs(), round() 등의 수학 계산
• Date 오브젝트
  • 연월일, 시분초
• JSON 오브젝트
  • [{"name": "value"}] 형태
  • 서버와 데이터 송수신에 사용
• RegExp 오브젝트
  • ^, $와 같은 정규 표현식
• 글로벌 오브젝트
  • 소스 파일 전체에서 하나만 존재
  • 모든 코드에서 공유, 접근 가능
  • 전역 객체라고도 하며, 뉘앙스에 차이 있음

---

 

빌트인 오브젝트 형태

• 빌트인 Number 오브젝트
  • 숫자, 상수, 지수를 처리하는 오브젝트
  • 여기서 오브젝트는 소문자 object
• 빌트인 Number 오브젝트 형태

 

 

 

---

Number 오브젝트

 

• Number 오브젝트에 숫자 처리를 위한 함수와 프로퍼티가 포함되어 있으며, 함수를 호출하여 숫자 처리.

 

Number()

• 파라미터 값을 Number 타입으로 변환
• 파라미터 값이 String 타입이더라도 값이 숫자이면 변환 가능
• 숫자로 변환할 수 있으면 변환
• 파라미터 값을 작성하지 않으면 0을 반환

log(Number("123") + 500);
log(Number("ABC"));
log(Number(0x14)); // 16진수는 10진수로 변환
log(Number(true));
log(Number(null));
log(Number(undefined)); // NaN로 변환

// [실행 결과]
// 623
// NaN
// 20
// 1
// 0
// NaN

---

 

Number 상수

• 상수는 값을 변경, 삭제 불가능
• 영문 대문자 사용이 관례
• Number.MAX_VALUE 형태로 값 사용

---

 

new 연산자

• 오브젝트로 인스턴트를 생성하여 반환
  • 원본을 복사하는 개념
  • new 연산자를 사용하면 인스턴스
  • 코딩 관례로 첫 문자를 대문자로 작성
• 인스턴스 생성 목적
  • 인스턴스마다 값을 갖기 위한 것

var obj = new Number();
log(typeof obj);

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

// [실행 결과]
// object
// 123
// 456

---

 

Number 인스턴스 생성 => new Number()

• 빌트인 Number 오브젝트로 새로운 Number 인스턴스를 생성

---

 

프리미티브 값

• Primitive value
  • 언어에 있어 가장 낮은 단계의 값
  • var book = "책" // "책"은 더 이상 분해, 전개 불가
• 프리미티브 타입
  • Number, String, Boolean : 인스턴스 생성 가능
  • Null, Undefined : 인스턴스 생성 불가
  • Object는 프리미티브 값을 제공하지 않음

📍 [[PrimitiveValue]] - 대괄호 2개 있으면 자바스크립트 엔진이 이름을 작성했다는 표시

---

 

인스턴스의 프리미티브 값

• var obj = new Number(123);
  • 인스턴스를 생성하면 파라미터 값을 인스턴스의 프리미티브 값으로 설정
• 프리미티브 값을 갖는 오브젝트
  • Boolean, Date, Number, String

---

 

valueOf()

• Number 인스턴스의 프리미티브 값 반환

---

 

toString()

• data를 String 타입으로 변환
• 변환할 때 주의 사항 (20..toString())

var value = 20;
log(20 === value.toString()); // 타입이 달라서 false
log(value.toString(16)); // 20을 16진수로 변환

log(20..toString()); // 점 2개 사용

// [실행 결과]
// false
// 14
// 20

---

 

toLocalString()

• 숫자를 브라우저가 지원하는 지역화 문자로 변환
  • 지역화 지원 및 형태를 브라우저 개발사에 일임
  • 지역화를 지원하지 않으면 toString()으로 변환
• 스펙 상태
  • ES5: 파라미터 사용 불가
  • ES6: 파라미터에 언어 타입 사용 가능

---

 

toExponential()

• 숫자를 지수 표기로 변환하여 문자열로 반환
  • 파라미터에 소수 이하 자릿수 작성 (0~20)
• 표시 방법
  • 변환 대상의 첫 자리만 소수점(.) 앞에 표시
  • 나머지는 소수 아래에 표시
  • 지수(e+) 다음에 정수에서 소수로 변환된 자릿수 표시

var value = 1234;
log(value.toExponential());

// [실행 결과]
// 1.234e+3

var value = 123456;
log(value.toExponential(3)); // 3자리로 반올림

// 1.235e+5

---

 

toFixed()

• 고정 소숫점 표기로 변환하여 문자열로 반환
  • 파라미터에 소수 이하 자릿수 작성 (0~20)
• 표시 방법
  • 파라미터 값보다 소수 자릿수가 길면 작성한 자리수에 1을 더한 위치에서 반올림
  • 변환 대상 자릿수보다 파라미터 값이 크면 나머지를 0으로 채워 반환

var value = 1234.567;
log(value.toFixed(2));
log(value.toFixed()); // 파라미터 값을 0으로 간주

// 1234.57
// 1235

 

 

 

---

String 오브젝트

 

• 문자 처리를 위한 함수와 프로퍼티가 포함되어 있으며 함수를 호출하여 문자 처리를 하게 됨

 

문자열 연결 방법

• 한 줄에서 연결
  •   var book = "12" + "AB" + "가나";
• 줄을 분리하여 연결
  •   +로 문자열 연결
  •   역슬래시로 문자열 연결

---

 

String()

• 파라미터 값을 String 타입으로 변환하여 반환
  • 값을 작성하지 않으면 빈 문자열 반환
• 가독성
  • ("" + 123)도 숫자가 String 타입이 되지만 String(123) 형태가 가독성이 좋음

---

 

new String()

• String 인스턴스를 생성하여 반환
• 파라미터 값을 String 타입으로 변환
  • 파라미터 값이 프리미티브 값이 됨

---

 

valueOf()

• String 인스턴스의 프리미티브 값 반환

---

 

length 프로퍼티

• 문자 수 반환

var value = "ABC";

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

// A
// B
// C

---

 

trim()

• 문자열 앞뒤의 화이트 스페이스 삭제
• 메소드 체인(Method chain) : . 과 . 으로 계속 연결되는 형태 

var value = "  abcd  ";
log(value.length);
log(value.trim().lenth);

// 8
// 4

---

 

JS 함수 호출 구조

• 우선, 데이터 타임으로 오브젝트를 결정하고 오브젝트의 함수롤 호출
• toString(123)
  • 123을 파라미터에 작성

var value = 123;
value.toString(); // Number 오브젝트의 toString()을 호출
"123".toString(); // String 오브젝트의 toString()을 호출

// 실행 결과 없음

var result = toString(123); // Object 오브젝트의 toString() 호출
log(result) // 123을 오브젝트로 간주하여 Object 형태를 문자열로 변환

// [object Undefined]

 

 

---

인덱스로 문자열 처리

charAt()

• 인덱스의 문자를 반환
• 문자열 길이보다 인덱스가 크면 빈 문자열 반환
• 일반적으로 존재하지 않으면 undefined 반환

var value = "sports";
log(value.charAt(1));
log(value[1])); // ES5부터 이 형태로도 가능
log(value.charAt(12)); // 파라미터의 인덱스가 전체 문자열 길이보다 크면 빈 문자열 반환
log(value[12]); // 12번째 인덱스가 존재하지 않으므로 undefined 반환. 
				//charAt(12)에서 빈 문자열을 반환하는 것과는 차이 있음. 
                //개념적으로 undefined 반환이 적절 (undefined는 시맨틱적으로 인덱스 번째가 없다는 뉘앙스)

// p
// p
// ""
// undefined

---

 

indexOf()

• data 위치의 문자열에서 파라미터의 문자와 같은 첫 번째 인덱스를 반환
• 검색 기준
  • 왼쪽에서 오른쪽으로 검색
  • 두 번째 파라미터를 작성하면 작성한 인덱스부터 검색
  • 같은 문자가 없으면 -1 반환

var value = "123123";
log(value.indexOf(2)); // 2가 두 개이지만 처음 인덱스인 1을 반환
log(value.indexOf(23)); // 23이 존재하며 2가 검색된 인덱스를 반환
log(value.indexOf(2, 3)); // 3은 3번 인덱스부터 검색하므로 1이 아닌 4를 반환
log(value.indexOf(15)); 
log(value.indexOf(2, -1)); // 두 번째 파라미터가 0보다 작으면 처음부터 검색
log(value.indexOf(2, 9)); // 두 번째 파라미터가 length보다 크면 -1 반환
log(value.indexOf(2, "A")); // 두 번째 파라미터가 NaN이면 처음부터 검색

// 1
// 1
// 4
// -1
// 1
// -1
// 1

---

 

lastIndexOf()

• data 위치의 문자열에서 파라미터의 문자와 같은 인덱스를 반환. 단, 뒤에서 앞으로 검색
• 검색 기준
  • 두 번째 파라미터를 작성하면 작성한 인덱스부터 검색
  • 같은 문자가 없으면 -1 반환

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

// 4

var value = "1231231";
log(value.lastIndexOf(1, 4)); // 앞에 1231 빼고 231에서 검색
log(value.lastIndexOf(2, -1)); // 두 번째 파라미터가 0보다 작으면 -1 반환

// 3
// -1

---

 

concat()

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

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

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

// sports축구11
// 123ABC

---

 

toLowerCase()

• 영문 대문자를 소문자로 변환

 

toUpperCase()

• 영문 소문자를 대문자로 변환

 

 

---

문자열 추출

subString()

• 파라미터의 시작 인덱스부터 끝 인덱스 직전까지 반환
• 두 번째 파라미터를 작성하지 않으면 반환 대상의 끝까지 반환

var value = "01234567";
log(value.substring(2, 5)); // 2~4번 인덱스
log(value.substring(5)); // 5~끝
log(value.substring()); // 전체

log(value.substring(5, 20)); // 두 번째 파라미터 값이 전체 length보다 크면 시작 인덱스부터 끝까지 반환
log(value.substring(-7, 2)); // 파라미터 값이 음수이면 0으로 간주
log(value.substring(5, 1)); // 첫 번째 파라미터 > 두 번째 파라미터 => 파라미터 값을 바꿔서 처리 (value.substring(1,5))
log(value.substring(5, "A")); // NaN은 0으로 간주. 따라서 이 경우는 value.substring(0, 5) 형태

// 234
// 567
// 01234567
// 567
// 01
// 1234
// 01234

---

 

substr()

• 파라미터의 시작 인덱스부터 지정한 문자 수를 반환
• 첫 번째 파라미터 값이 음수이면 length에서 파라미터 값을 더해 시작 인덱스로 사용
• 두 번째 파라미터를 작성하지 않으면 양수 무한대로 간주

var value = "01234567";
log(value.substr(0, 3); // 0번 인덱스부터 문자 3개 반환
log(value.substr(-3, 3); 
log(value.substr(4)); // 두 번째 파라미터를 작성하지 않으면 첫 번째 파라미터부터 전체 반환
log(value.substr()); // 첫 번째 파라미터를 작성하지 않으면 0으로 간주 => 전체 반환

// 012
// 567
// 4567
// 01234567

---

 

slice()

• 파라미터의 시작 인덱스부터 끝 인덱스 직전까지 반환
• 첫 번째 파라미터 값을 작성하지 않거나 NaN이면 0으로 간주
• 두 번째 파라미터 작성하지 않으면 length 사용. 음수이면 length에 더해 사용

var value = "01234567";
log(value.slice(1, 4)); 
log(value.slice(false, 4)); // false, undefined, null, 빈 문자열은 0으로 간주
log(value.slice("A")); // 첫 번째 파라미터가 NaN이면 0으로 간주
log(value.slice()); // 파라미터를 모두 작성하지 않으면 전체 반환
log(value.slice(5)); // 두 번째를 작성하지 않으면 length 사용
log(value.slice(5, 3)); // 첫 번째 >= 두 번째 -> 빈 문자열
// 파라미터 값이 음수면 length를 더해 사용. 더한 값이 0보다 작으면 0을 사용
log(value.slice(4, -2));
log(value.slice(-5, -2));
log(value.slice(-2, -5));

// 123
// 0123
// 01234567
// 01234567
// 567
// ""
// 45
// 345
// ""

 

 

---

정규 표현식을 사용할 수 있는 함수

match()

• 매치 결과를 배열로 반환
  • 매치 대상에 정규 표현식의 패턴을 작용하여 매치하고 매치 결과를 반환
  • 문자열 작성 가능, 엔진이 정규 표현식으로 변환하여 매치
• 정규 표현식
  • 문자열을 패턴으로 매치
  • 패턴 형태 : ^, &, *, + 등

// 매치는 정규 표현식 용어
var value = "Sports";
log(value.match(/s/); // 정규 표현식으로 소문자 s를 매치. "Sports" 끝에 s가 있으므로 매치되며 매치된 문자를 배열로 반환
log(value.match("spo")); // spo가 있으나 대문자 s이므로 null 반환

// [s]
// null

---

 

replace()

• 매치 결과를 파라미터에 작성한 값으로 대체하여 반환
• 두 번째 파라미터에 함수를 작성하면 먼저 함수를 실행하고 함수에서 반환한 값으로 대체

var value = "abcabc";
log(value.replace("a", "바꿈"));
log(value.replace(/a/, "바꿈")); // 처음 하나만 바꿈

fuction change(){
	return "함수";
};
log(value.replace(/a/, change())); // 함수를 실행하고 반환된 값으로 바꿈

// 바꿈bcabc
// 바꿈bcabc
// 함수bcabc

---

 

search()

• 검색된 첫 번째 인덱스 반환
  • 매치되지 않으면 -1 반환

var value = "cbacba";
log(value.search(/a/));
log(value.search("K"));

// 2
// -1

---

 

split()

• 분리 대상을 분리자로 분리하여 배열로 반환
• 분리자를 작성하지 않은 경우
• 두 번째 파라미터에 반환 수를 작성

log("12_34_56".split("_"));
// [12, 34, 56]

var value = "123";
log(value.split("")); // 문자를 하나씩 분리하여 반환
log(value.split()); // 분리 대상 전체를 하나의 배열로 반환
// [1, 2, 3]
// [123]

var value = "12_34_56_78";
log(value.split("_", 3)); // 두 번째 파라미터에 숫자를 작성하면 앞에서부터 수만큼만 반환
value = "123";
log(value.split("A")); // 분리자가 분리 대상에 없으면 분리 대상 전체를 하나의 배열로 반환
// [12, 34, 56]
// [123]

 

 

---

Unicode 관련 함수

charCodeAt()

• 인덱스 번째의 문자를 유니코드의 코드 포인트 값을 반환
• 인덱스가 문자열 길이보다 크면 NaN 반환

var value = "1Aa가";
for (var k = 0; k < value.length; k++){
	log(value.charCodeAt(k));
};
log(value.charCodeAt(12));

// 49
// 65
// 97
// 44032
// NaN

---

 

fromCharCode()

• 파라미터의 유니코드를 문자열로 변환하고 연결하여 반환
  • 작성하지 않으면 빈 문자열 반환
• 작성 방법
  • data 위치에 String 오브젝트 작성. 변환 대상 값을 작성하지 않음
  • String.fromCharCode() 형태

log(String.fromCharCode(49, 65, 97, 44032));
// 1Aa가

---

 

localCompare()

• 값을 비교하여 위치를 나타내는 값으로 반환
• 위치 값: 1(앞), 0(같음), -1(뒤)
• Unicode 사전 순으로 비교

var value = "나";
log(value.localCompare("가"));
log(value.localCompare("나"));
log(value.localCompare("다"));

// 1
// 0
// -1