JavaScript String 문자열 자르기, 변경, 비교

결과

결과

코드

<script>
    let s = "Hello Wolrd!";

    console.log(s);
    console.log("변경한 문자열 :", s.replace("Hello", "Bye"));
    console.log("변경한 문자열 :", s.replace("He", "Bye"));
    console.log(s);

    console.log("문자열 자르기 : ", s.slice(2,4)); // index 2이상 4미만
    console.log("문자열 자르기 : ", s.slice(-6)); // 음수로 뒤에서부터 접근
    console.log("문자열 나누기 : ", s.substring(2,4));  // slice와 동일 음수 불가능
    console.log("문자열 나누기 : ", s.substr(2,1)); // a부터 b개의 문자열 자름
    
    console.log("특정 문자 기준으로 나누기 : ", s.split(' '));
    
    console.log(s);
    console.log("문자열 정렬 순 비교 : ", s.localeCompare("ABC"));
    console.log("문자열 정렬 순 비교 : ", s.localeCompare("good"));

    console.log("문자열 정렬 순 비교 : ", s.localeCompare("Hello Wolrd!"));
    console.log("문자열 정렬 순 비교 : ", s.localeCompare("mnm"));

</script>

- replace(a, b) : 문자열 a를 찾아서 b로 변경한다. 

a 문자열이 없다면 원래의 문자열을 반환한다.

JS에서는 문자열이 불변이므로 위 7라인 결과를 보면 원래 문자열은 변경되지 않을 것을 확인할 수 있다.

문자열 자르기

1. slice(a, b) : index a이상 b미만의 문자열을 자른다.

음수값을 사용하여서 뒤에서부터 접근할 수 있으며 맨 뒤가 -1이다.

2. substring(a, b) : slice와 동일한 동작을 한다.

단, 음수 값을 사용할 수 없다.

3. substr(a, b) : index a부터 b개의 문자열을 자를 수 있다.

- split(s) : s 문자(문자열)을 기준으로 문자열을 분리한 후 배열 형태로 반환해 준다.

- localeCompare(s) : 문자열을 사전순으로 비교하여 순서에 따라 1, 0, -1로 반환

비교 문자열이

s 보다 뒤에 있다면 = 1

s 와 동일하다면 = 0

s 보다 앞에 있다면 = -1

을 반환해 준다. 이를 이용하여서 정렬을 할 수 있다.

JavaScript String 문자열 문자 찾기, 유니코드 변환, 대문자 변환

결과

코드

<script>
    let s = "Hello Wolrd!";
    s[1] = 'E';  // 변경 X

    console.log(s);
    console.log("index n번 째 문자 : ", s.charAt(0), s[0]);
    console.log("index n번 째 문자의 유니코드 10진수값 : ", s.charCodeAt(0));
    console.log("유니코드 값을 다시 문자로 : ", String.fromCharCode(72) );

    console.log("시작 문자 검사 : ", s.startsWith("G"));
    console.log("마지막 문자 검사 : ", s.endsWith("!"));
    console.log("문자 포함 여부 검사 : ", s.includes("a","e")); // a,e 둘다 갖고있어야 true
    console.log("특정 문자 인덱스 찾기 : ", s.indexOf('l', 4));  // 'l'을 인덱스 4부터 찾는다.

    console.log("소문자 변환 : ", s.toLowerCase());
    console.log("대문자 변환 : ", s.toUpperCase());
    console.log("문자열 반복 : ", s.repeat(2));
    console.log("문자열 길이 : ", s.length);
</script>

- 문자열 객체는 불변이므로 s[1] = 'E'처럼 값을 변경하는 시도하여도 변경되지 않는다.

(소문자, 대문자 변환같은 것은 변환된 새로운 문자열을 반환해주는 것이다.)

- charCodeAt() 메소드 : 문자 -> 유니코드

- String.fromCharCode() : 유니코드 -> 문자

- includes() : 특정 문자, 문자열을 포함하고 있는지 여부를 검사할 수 있다.

인수로 여러 값을 주었을 경우 모두 포함하고 있어야만 true를 리턴해준다.

- indexOf() : 특정 문자, 문자열을 찾아 index를 리턴해준다.

2번 째 인수로는 검색을 시작할 index를 지정해 줄 수 있으며 생략 시 0부터다.

해당 문자, 문자열이 없을 경우 -1을 반환해준다.

- 문자열 길이를 구하기 위해서는 length 프로퍼티를 사용한다.

JavaScript Math 반올림, 제곱, 최대값, 제곱근

결과

결과

코드

<script>
    console.log("PI : ", Math.PI);
    console.log("절대값 : ", Math.abs(-5));

    console.log("올림 : ", Math.ceil(5.5));
    console.log("내림 : ", Math.floor(4.5));
    console.log("반올림 : ", Math.round(5.456));
    console.log("소수점 아래 3번째 자리 반올림 : ", Math.round(5.456*100)/100);
    console.log("정수값 : ", Math.trunc(6.53242));

    console.log("2의 4제곱 : ", Math.pow(2,4));
    console.log("16 제곱근 : ", Math.sqrt(16));
    console.log("밑이 2인 로그 : ", Math.log2(7));  // log₂7

    console.log("최대값 : ", Math.max(5, 3, 2, 7));
    console.log("최초값 : ", Math.min(5, 3, 2, 7));

    console.log("부호 검사(양수:1, 0:0, 음수:-1) : ", Math.sign(-5));
    console.log("랜덤 수(0이상 1미만) : ", Math.random());
    console.log("랜덤 수(10이상 15미만) : ", Math.random()*5+10);
</script>

- 반올림 값을 구하는 round() 메소드에는 따로 반올림할 자리수를 지정해 줄 수 없다.

(따라서 8라인처럼 연산을 통하여 반올림할 자리를 지정할 수 있다.)

( pow(10,n-1)처럼 pow메소드를 사용하여 연산해줌으로써 더욱 직관적으로 구현할 수도 있다. )

- trunc() 메소드를 사용하면 정수부분만을 가져올 수 있다.

- pow(a, n) 메소드는 a의 n제곱 값을 구할 수 있다.

- random() 메소드는 0이상~1미만의 무작위 값을 반환해준다. 

이 값의 특정 값을 곱하고 더해줌으로써 20라인처럼 특정 범위의 랜덤한 수를 구할 수 

JavaScript Date(날짜, 시간) 구하기

결과

결과

코드

<script>
    let date = new Date();
    console.log(date);
    console.log("현재 년도 : ", date.getFullYear());
    console.log("현재 월(0~11) : ", date.getMonth());
    console.log("현재 일 : ", date.getDate());
    console.log("현재 요일(일:0 ~ 토:6) : ", date.getDay());
    console.log("현재 시 : ", date.getHours());
    console.log("현재 날짜 : ", date.toLocaleDateString());
    console.log("현재 시간 : ", date.toLocaleTimeString());

    let date2 = new Date(2020, 4, 1);   // 20.05.01
    console.log(date2.getDay());    // 금요일=5
    console.log( (date2-date)/1000/60 + "분 차이");
</script>

- Date() 객체를 생성하면 현재 시점의 날짜와 시간을 갖는 객체가 생성된다.

- 12라인처럼 인수를 주어서 날짜를 지정해 줄 수도 있다.

(단, 주의할점은 '월'은 -1의 값을 주어야 한다. )

- getMonth() 메서드는 월을 반환해주는데 이는 우리가 사용하는 1부터 시작하는 1~12의 값이 아니라 0부터 시작하는 0~11 값을 반환한다. (0 = 1월)

- getDay() 메서드는 요일 값(0~6)을 반환해주며 0=일요일 ~ 6=토요일 이다.

- Date() 객체간 차이를 구하면 시간차를 구할 수 있다.

이는 ms단위로서 1000ms = 1초 이다.

따라서 위 예에서는 /1000/60 을 해줌으로써 두 객체간 시간차를 분단위로 구하였다.

JavaScript var, let, const 차이

1. var

- 자바스크립트에서 변수를 선언하기 위한 선언자이다.

- 변수의 유효 범위의 대한 문제가 존재한다.

ex) 기존의 존재하는 변수 a를 재선언하여도 에러가 발생하지 않는다.

<script>
    var a = 5;
    console.log(a);
    var a = "e";
    console.log(a);
</script>

2. let

- 위 같은 var의 문제점을 보완하기 위해 ECMAScript 6부터 추가된 변수 선언자다.

ex) 위 var과는 다르게 이미 존재한다는 에러 메시지를 보여준다.

<script>
    let a = 5;
    console.log(a);
    let a = "e";
    console.log(a);
</script>

※ var보단 let을 사용해주는 것이 더욱 에러 발생을 대비할 수 있다.

3. const

- let과 마찬가지로 ECMAScript 6부터 추가된 선언자 이다.

- let과는 다르게 선언 시 한번만 초기화 할 수 있는 상수 이다.

- 단, 배열이나 객체와 같은 참조타입일 경우 값(프로퍼티)을 수정할 수 있다.

JavaScript eval 함수

- 인수로 문자열을 받으며 문자열을 자바스크립트 코드로서 해석한 후 동작한다.

		var mul = 5;
		
		eval("mul *= 10; var temp = 10");
		document.write(mul, " ", temp);	// 50 10

- 3~4라인을 보면 eval 함수 내에 선언한 변수 temp를 밖에서도 사용할 수 있다.

- 이렇게 함수로 코드를 실행 가능한 이유는 자바 스크립트가 스크립트 언어로서 컴파일러를 사용하지 않는 인터프리터 방식으로 한줄 한줄 해석하므로 코드를 해석하는 도중 코드를 해석할 수 있다.

- 문자열로 코드를 실행하므로 외부로부터 코드를 입력받아 그것을 실행 시킬 수 도 있다.

- 단, 코드를 읽는도중 또 코드를 읽는 이중 작업으로서 실행 속도가 더욱 느려지며, 보안상 문제가 발생하기 쉬워서 사용은 권장되지 않는다.

JavaScript 함수

함수의 기본적인 형태 

		function sum(a,b) {
			let result = a+b;
			return result;
		}

디폴트 매개변수 (Default Parameter)

		function sum(a=5,  b=50) {
			let result = a+b;
			return result;
		}

- C++에서와 마찬가지로 디폴트 매개변수를 지정할 수 있다. 디폴트 매개변수는 함수 호출 시 파라미터가 없으면 디폴트로 지정해 놓은 값으로 함수를 실행한다.

- 디폴트 매개변수는 우측부터 지정하여야 한다.

암시적으로 생성되는 인수의 배열

		function sum2() {
			let result = 0;
			for(var i=0; i<arguments.length; i++) {
				result += arguments[i];
			}
			return result;
		}
		document.write(sum2(1,2,3,4,5,6,7,8,9,10));	// 55

- 함수는 암시적으로 arguments라는 인수들의 배열을 가진다.

- 위 sum2함수는 1~10까지의 수를 인수로 받고 이를 가지고 있는 arguments 배열을 통하여 그 합을 return 해준다.

익명 함수

		let mul = function(a,b) { return a*b; }
		
		document.write(function(a,b) {return a+b;}(5,10) );	// 15
		document.write(mul(5,10));	// 50

- 익명 함수는 간단하게 1회용 함수라 할 수 있고 이를 변수의 저장하지 않으면 위 3라인처럼 사용할 때마다 다시 구현하여야 한다.

- mul은 변수에 저장해 놓으므로 재활용 할 수 있다.

- 익명 함수와 달리 함수는 페이지가 로드할 때 모든 함수를 읽어 해석해 놓지만 익명 함수는 그렇지 않다.

JavaScript 예외 처리

: 에러가 발생하였을 시 에러가 발생한 위치를 특정하거나 어떠한 에러가 발생하였는지를 확인 할 수 있다.

		try {
			document.write("예외처리 발생<br>");
			throw new Error("전달할 메시지");
		} catch(e) {
			document.write(e.name + " 가 발생<br>");
			document.write("전달받은 메시지 : " + e.message + "<br>");
		} finally {
			document.write("상관없이 실행");
		}

실행 결과

- 3라인에서 throw를 사용하여 임의적으로 에러를 발생시켰다. 에러가 발생하여 catch문이 실행된다.

- 5라인에서는 전달받은 에러 객체의 name 속성을 이용하여 어떠한 에러가 발생하였는지 이름을 확인할 수 있다.

- 6라인에서는 에러의 관한 설명을 담은 message 속성을 이용하여 설명을 볼 수 있다.

- finally는 에러의 발생 여부와 상관없이 실행되는 문으로써 문법상 명확하기 위하여 사용한다.

		try {
			document.write("예외처리 발생<br>");
			throw new ReferenceError("전달할 메시지");
		} catch(e) {
			document.write(e.name + " 가 발생<br>");
			document.write("전달받은 메시지 : " + e.message + "<br>");
		} finally {
			document.write("상관없이 실행");
		}

실행 결과

- ReferenceError가 발생한 것을 볼 수 있다.

- 해당 코드에서는 에러를 임의적으로 발생시켰지만 실제 try문에서 에러가 발생한 경우 발생한 에러의 종류에 따라서 그에 맞는 서로 다른 처리를 해줄 수 있다.