JavaScript 개발자 수업 61일차(1) - Casting, String, Date, Array

1. Casting

2. String

3. Date

4. Array

---

1. Casting

- 형변환 함수

  1) 정수: parseInt(값)

  2) 실수: parseFloat(값)

[ 형변환 예제 ]

var n1= 3.14;
console.log(parseInt(n1)); //실수 -> 정수

var n2 = '100';
console.log(parseInt(n2)); //문자열 -> 정수

var n3 = 200;
console.log(parseFloat(n3)); //정수 -> 실수

var n4 = '3.14';
console.log(parseFloat(n4)); //문자열 -> 실수

 

[ 형변환시 유의점! ]

- 문자열 -> 정수 변환시 시작부터 연속된 숫자만을 취급하고, 나머지는 버린 뒤 형변환 된다.

- 자바스크립트의 형변환에서 만약 CSS 속성을 조작할때 주의해야한다. 예제를 살펴보자.

/* 자바스크립의 형변환 주의사항 */

//예제1 - width: 150px; 를 2배로 늘리고싶다. -> width: 300px;
var width = "150px";
//틀린 답
console.log(width * 2); // NaN (Not a Number)

//맞는 답
console.log(parseInt(width) * 2); // '150px' -> 150 * 2


//예제2
console.log(parseInt('20살입니다')); // 20
console.log(parseInt('나는20살입니다')); // NaN
console.log(parseInt('20살이며 키는 180입니다.)); // 20

 

2. String

[ 문자열 길이(문자 수) ]

- length

- '메소드'가 아닌, '프로퍼티'라고 부른다.

var txt = "hello world!";

console.log(txt.length); 

--> 12

 

[ 문자열 검색 ]

- indexof()

- lastIndexOf()

- zero-based index

var txt = "hello world!";

console.log(txt.indexOf('o');
console.log(txt.indexOf('o', 5));
console.log(txt.lastIndexOf('o'));

--> 4
    7
    7

 

[ 대/소문자 변환 ]

- toUpperCase()

- toLowerCase()

var txt = "hello world!";

console.log(txt.toUpperCase());
console.log(txt.toLowerCase());

--> HEELO WORLD!
    hello world!

 

[ 문자열 치환 ]

- replace

- 자바와 다른점은 1번만 치환한다.

- 모든 대상을 치환하려면 정규 표현식을 사용해야 한다.

var txt = "hello world!!!!";

console.log(txt.replace('!', '?'));
console.log(txt.replace(/!/gi, '??'));

--> hello world?!!!
    hello world????

 

[ 문자열 추출 ]

- substring()

- substr()

- charAt()

var txt = 'abcdefghijk';

console.log(txt.substring(2, 5)); // 2번째부터 5번째까지 추출
console.log(txt.substr(2, 5)); // 2번째부터 5글자 추출

console.log(txt.substring(2)); // 2번째부터 추출
console.log(txt.substr(2)); // 2번째부터 추출
console.log(txt.charAt(2)); // 2번째글자만 추출


--> cde
    cdefg
    cdefghijk
    cdefghijk
    c
    

 

[ 문자열 공백 제거 ]

- trim()

var txt = '     하나  둘 셋   ';
console.log(txt.trim()); // 시작, 끝 공백제거
console.log(txt.trimStart()); // 시작 공백제거
console.log(txt.trimEnd()); // 끝 공백제거

--> '하나  둘 셋'
    '하나  둘 셋   '
    '     하나  둘 셋'

 

[ 문자열 패턴 검색 ]

- startsWith()

- endsWith()

var txt = '안녕하세요!!';

console.log(txt.startsWith('안'));
console.log(txt.endsWith('!'));

console.log(txt.startsWith('요');
console.log(txt.endsWith('요');

--> true
    true
    false
    false

 

[ 문자열 분할 ]

- split()

var txt = '병아리, 강아지, 염소, 하마, 고래';
var temp = txt.split(',');

console.log(temp); 
console.log(temp[0]);

--> [ '병아리, 강아지, 염소, 하마, 고래' ]
    병아리

 

3. Date

- 날짜 시간 자료형 + 함수

- new Date();

var now = new Date();
console.log(now) // 2021-06-26T08:39:31.108Z

 

[ 요소 추출 ]

- get

var now = new Date();

console.log(now.getYear());         // 1999년 이전 2자리 표기 함수
console.log(now.getFullYear());     // 2000년 이후
console.log(now.getMonth());        // 월 (0 ~ 11)
console.log(now.getDate());         // 일
console.log(now.getDay());          // 요일
console.log(now.getHours());        // 시
console.log(now.getMinutes());      // 분
console.log(now.getSeconds());      // 초
console.log(now.getMilliseconds()); // 밀리초
console.log(now.getTime());         // 틱값


--> 121
    2021
    5
    26
    6
    17
    43
    27
    329
    1624697007329

 

[ 날짜 덤프값 ]

var now = new Date();

console.log(now.toString());           // Sat Jun 26 2021 17:43:27 GMT+0900 (대한민국 표준시)
console.log(now.toLocaleString());     // 2021. 6. 26. 오후 5:43:27

console.log(now.toDateString());       // Sat Jun 26 2021
console.log(now.toTimeString());       // 17:43:27 GMT+0900 (대한민국 표준시)

console.log(now.toLocaleDateString()); // 2021. 6. 26.
console.log(now.toLocaleTimeString()); // 오후 5:43:27

 

[ 특정 시각 설정 ]

- set

var birthday = new Date();

birthday.setFullYear(1995);
birthday.setMonth(10);
birthday.setDate(28);
birthday.setHours(0);
birthday.setMinutes(0);
birthday.setSeconds(0);

console.log(birthday.toLocaleString());

--> 1995. 11. 28. 오전 12:00:00

 

[ 간단한 날짜 연산 예제 ]

- tick값 연산

//예제 - 오늘날짜부터 100일 뒤는 몇일인가?

var now = new Date();
var tick = new Date();

tick.setTime(now.getTime() + (100 * 24 * 60 * 60 * 1000));

console.log(now.toLocaleString());
console.log(tick.toLocaleString());


--> 2021. 6. 26. 오후 5:54:02
    2021. 10. 4. 오후 5:54:02

 

4. Array

- 자바의 Array + Collection

- new Array();

var nums = new Array();

nums[0] = 10;
nums[1] = 20;
nums[2] = 30;

console.log(nums);    // [ 10, 20, 30 ]

nums[5] = 50; //사용 금지(중간에 빈 방 절대 두지 말 것!!)

console.log(nums);    // [ 10, 20, 30, <2 empty items>, 50 ]
console.log(nums[3]); // undefined
console.log(nums[6]); // undefined

 

[ 배열 초기화 리스트 ]

var nums = new Array();

nums = new Array(10, 20, 30); // 틀린 방법
nums = [10, 20, 30]; // 정답

console.log(nums);

--> [ 10, 20, 30 ]

 

[ 배열 길이 구하기 ]

var nums = new Array();

nums = [10, 20, 30, 40, 50];
console.log(nums.length);

--> 5

 

[ 배열의 메소드 ]

var nums = new Array();

nums = [10, 20, 30];

nums.push(40);              // push(): 배열 끝에 추가하기
nums.push(50);
console.log(nums);          // [ 10, 20, 30, 40, 50 ]

console.log(nums.pop());    // 50, pop(): 배열의 마지막 방 가져오기. 
console.log(nums);          // [ 10, 20, 30, 40 ] 

console.log(nums.shift());  // 10, shift(): 배열의 첫번째 방 가져오기.
console.log(nums);          // [ 20, 30, 40 ]

 

[ for문을 이용해서 배열 탐색하기 ]

 1) 기존 for문을 이용한 방법

 2) forEach(향상된 for문)을 이용한 방법

var nums = new Array();

nums = [10, 20, 30, 40, 50];

// 방법1. 기존 for문을 사용
for ( var i=0; i<nums.length; i++ ) {
    console.log(i, nums[i]);
}

--> 0 10
    1 20
    2 30
    3 40
    4 50
    

// 방법2. forEach. 향상된 for문 ( = iterator )
nums.forEach ( function (item, index) {
    console.log(item, index);
});

--> 10 0
    20 1
    30 2
    40 3
    50 4

 

---