Javascript 5장 배열 / 6장 문자열, 타이머

김도형·2022년 9월 28일
0

5장 배열

배열 순서는 0부터 시작한다.

간단히 배열의 값을 변경할 수 있다. 관련된 메서드들이다.

var fruits = ['사과', '배', '바나나', '딸기'];
var animals = ['사자', '호랑이', '곰'];

		// concat : 다른 배열 합치기 
		var newArr3 = fruits.concat(animals); 
		// 사과,배,바나나,딸기,사자,호랑이,곰
		
		/*slice는 원본을 자르지 않고 유지. 
        원본 유지. 1번째 부터 3번째 이전까지 
        */
		var newArr4 = fruits.slice(1,3); 
		// 배, 바나나

		/*
        fruits 원본을 1 ~ 3번까지를 잘라냄. 원본 손상. 
        1번째 부터 3번째까지
        */
		var newArr5 = fruits.splice(1,3); 
		// fruits 원본은 사과만 남음.
		
		// 배열 길이
		var amount = fruits.length;
		// 4

		// 배열 사의 '/' 추가 
		var newStr = fruits.join('/');
		// 사과/배/바나나/딸기
		
		// 배열 역순
		var newArr = fruits.reverse();

		// sort : 가나다순 
		// function 은 첫번째 <-> 두번째 자리 변경 
		var newArr2 = fruits.sort(function(a,b){
			return b-a; 
		}); 
		// 딸기,바나나,배,사과

값을 앞 뒤 추가, 앞 뒤 삭제

<h2> 값 추가하기 - push</h2>
	<p>기존의 값 뒤에 추가한다.</p>
	<script>
		var beers = ['하이네켄', '코로나', '스텔라', '카스'];
		beers.push('수제맥주', '제주비어');
		document.write(beers);
	</script>
	<h2> 값 추가하기 - unshift</h2>
	<p>기존의 값 앞에 추가한다.</p>
	<script>
		var beers = ['하이네켄', '코로나', '스텔라', '카스'];
		beers.unshift('수제맥주', '제주비어');
		document.write(beers);
	</script>
	<h2> 값 삭제하기 - pop</h2>
	<p>기존의 값 뒤에 삭제한다.</p>
	<script>
		var beers = ['하이네켄', '코로나', '스텔라', '카스'];
		beers.pop();
		document.write(beers);
	</script>
	<h2> 값 삭제하기 - shift</h2>
	<p>기존의 맨 앞에 값을 삭제한다.</p>
	<script>
		var beers =['하이네켄', '코로나', '스텔라', '카스'];
		beers.shift();
		document.write(beers);
	</script>

6장 문자열, 타이머

문자열 합치기, 해당 문자열 순번 찾기

		var str = 'hello world';
		var str1 = 'javascript';

		var newStr1 = str.concat(str1); // hello worldjavascript
		var str = str.charAt(2); // hello world 중 'l' 출력

특정 문자열 있는지 없는지 유무 확인

var str1 = 'javascript';
// worlds 없으므로 -1 이 출력 
var str2 = str.indexOf('worlds'); // -1

타이머

setTimeout

  • setTimeout(할일, 시간) : 시간이 흐른 뒤 할일 동작

타이머 함수를 사용할 때 항상 아래의 주석과 같이 쓴 다음 함수를 사용해야 실수를 줄일 수 있음.
순서는
1. setTimeout(할일, 시간)
2. setTimeout(할일, 3000)
3. setTimeout(function(){실제로 할일}, 3000)
4. setTimeout(function(){alert('힘들죠');}, 3000)

//setTimeout(할일, 시간)
// 시간이 지나면 할일
// 할일 = function(){실제로 할일}
// 3초 = 3000
// 실제로 할일 = alert('힘들죠');

var timer = setTimeout(function(){alert('힘들죠');} , 3000)

위 코드 실행 시 3초 뒤 알림 팝업 "힘들죠" 발생

clearTimeout

  • setTimeout 시간 종료(더 이상 알림 팝업 미발생)
clearTimeout(timer);

setInterval

  • setInterval(할일, 시간) : 시간마다 할일 발생
/* 일정시간마다 할일 */ 
/*
setInverval(할일, 시간);	
clearInterval(이름); 인터벌 멈추기
*/
var timer2 = setInterval(function(){alert('힘들
죠');}, 3000);

위 코드 실행시 3초마다 알림 팝업 "힘들죠" 계속 발생

clearInterval

  • clearInterval : 인터벌 시간 종료(더 이상 알림 팝업 미발생)
clearInterval(timer2);

출처 : Rock's Easyweb 유튜브(https://www.youtube.com/watch?v=Mga3LXPnWdc)

profile
3년간 웹/앱, 자동제어 QA 🔜 개발자로 전향하여 현재 교육 회사에서 백엔드 개발자로 근무 중입니다.(LinkedIn : https://www.linkedin.com/in/dohyoung-kim-5ab09214b)

0개의 댓글