JavaScript / Object / Array.reverse() / 원소의 순서를 반대로 만드는 메서드

.reverse()

.reverse()는 배열의 원소의 순서를 반대로 만드는 메서드입니다. 순서가 바뀐 배열을 새로 만드는 것이 아니라, 기존 배열의 순서를 바꿉니다.

예제

4개의 원소를 가진 배열을 만들고 출력합니다..

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
		<style>
			body {
				font-family: Consolas, sans-serif;
			}
		</style>
  </head>
  <body>
		<script>
			var jbAry = [ 1, 2, 3, 4 ];
      for ( var i = 0; i < jbAry.length; i++ ) {
        document.write( '<p>jbAry[' + i + '] : ' + jbAry[i] + '</p>' );
      }
		</script>
  </body>
</html>

.reverse() 메서드를 붙이면 원소의 순서가 반대로 바뀝니다.

<script>
	var jbAry = [ 1, 2, 3, 4 ];
	jbAry.reverse();
	for ( var i = 0; i < jbAry.length; i++ ) {
		document.write( '<p>jbAry[' + i + '] : ' + jbAry[i] + '</p>' );
	}
</script>

Related Posts

JavaScript / Object / String.replace() / 문자열을 바꾸는 메서드

JavaScript / Object / String.replace() / 문자열을 바꾸는 메서드

.replace() .replace()는 특정 문자열을 찾아 다른 문자열로 바꾸는 메서드입니다. 문법 string.replace( 'string1', 'string2' ) string에서 string1을 찾아 string2로 바꿉니다. 예제 jbStr 문자열에서 Lorem을 찾아 Amet으로 바꾼 후 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript | .replace()</title> </head> <body> <script> ...

JavaScript / window.matchMedia() / CSS 미디어쿼리를 자바스크립트에 사용하는 메소드

JavaScript / window.matchMedia() / CSS 미디어쿼리를 자바스크립트에 사용하는 메소드

window.matchMedia() CSS는 미디어쿼리를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 설정을 할 수 있습니다. 자바스크립트에서도 window.matchMedia()를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 작업을 할 수 있습니다. 반응형 웹디자인을 할 때 유용한 메소드입니다. 문법 window.matchMedia( mediaQueryString ) mediaQueryString : CSS 미디어쿼리를 입력합니다. window는 생략할 수 있습니다. 예를 들어 window.matchMedia( '( min-width: 500px )' ) 는 500px 이상을 뜻합니다. 속성 .media : mediaQueryString을 ...

JavaScript / Event / onsubmit / 폼 전송하기 전에 작업 수행하게 하는 이벤트

JavaScript / Event / onsubmit / 폼 전송하기 전에 작업 수행하게 하는 이벤트

JavaScript의 onsubmit 이벤트를 이용하면 폼의 값을 전송하기 전에 어떤 작업을 하게 할 수 있습니다. 간단한 예제로 어떻게 작동하는지 알아보겠습니다. 예제 1 간단한 회원 가입 페이지를 만듭니다. 전송 버튼은 input 태그로 만듭니다. Register를 클릭하면 ok.html로 이동합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...

JavaScript / 함수 / String() / 숫자를 문자열로 변환하는 함수

JavaScript / 함수 / String() / 숫자를 문자열로 변환하는 함수

String() String()은 숫자를 문자열로 변환하는 함수입니다. 문법 String( object ) object : 숫자 또는 숫자를 값으로 하는 변수 등을 입력합니다. 예제 변수 c의 값은 숫자 1과 숫자 2를 더한 3입니다. 변수 d의 값은 문자 1과 문자 2를 더한 12입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> ...

JavaScript / Object / document.querySelectorAll() / 특정 CSS 선택자를 가진 모든 요소 선택하는 메서드

JavaScript / Object / document.querySelectorAll() / 특정 CSS 선택자를 가진 모든 요소 선택하는 메서드

.querySelectorAll() .querySelectorAll()은 특정 CSS 선택자를 가진 모든 요소를 배열로 가져오는 메서드입니다. 문법 document.querySelectorAll( 'selector' ) 예를 들어 document.querySelectorAll( '.abc' ) 는 클래스 값이 abc인 모든 요소를 가져옵니다. document.querySelectorAll( '.abc, .def' ); 클래스 값이 abc 또는 def인 모든 요소를 가져옵니다. 예제 1 클래스 값이 abc인 요소 중 두번째 요소의 색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

JavaScript / Object / Array.length / 배열의 길이 반환하는 속성

JavaScript / Object / Array.length / 배열의 길이 반환하는 속성

.length .length는 배열의 길이를 반환하는 속성입니다. 마지막 원소의 인덱스 값보다 1 큰 수를 반환합니다. 배열에 속한 원소의 개수와는 의미가 다릅니다. 문법 array.length 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, sans-serif; font-style: italic; } </style> </head> <body> <script> var jbAry1 = ; document.write( '<p>jbAry1.length : ' ...

JavaScript / Object / Math.floor(), Math.ceil(), Math.round()

JavaScript / Object / Math.floor(), Math.ceil(), Math.round()

Math.floor() Math.floor()는 어떤 수보다 크지 않은 최대의 정수를 반환합니다. 문법 Math.floor( Number ) Number에는 숫자가 들어갑니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; ...

JavaScript / 반복문 / while, do - while, for

JavaScript / 반복문 / while, do - while, for

자바스크립트 반복문에는 while, do – while, for 세가지가 있습니다. while 문법 var i = 0; while ( i < 10 ) { // do something i++; } i의 값이 0부터 9일 때까지 실행되고 i의 값이 10이면 실행되지 않고 다음으로 넘어갑니다. i의 값을 증가시키는 i++을 꼭 넣어야 한다는 것에 주의해야 합니다. 만약 i++이 없으면 i의 값이 ...

JavaScript / Object / document.characterSet / 문자 인코딩 반환하는 속성

JavaScript / Object / document.characterSet / 문자 인코딩 반환하는 속성

.characterSet .characterSet은 문서의 문자 인코딩을 반환하는 속성입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( "<p>document.characterSet : " + document.characterSet + "</p>" ); </script> </body> </html>

JavaScript / Object / String.startsWith() / 특정 문자열로 시작하는지 확인하는 메서드

JavaScript / Object / String.startsWith() / 특정 문자열로 시작하는지 확인하는 메서드

.startsWith() .startsWith()는 문자열이 특정 문자열로 시작하는지 확인하는 메서드입니다. IE는 Edge부터 지원합니다. 문법 string.startsWith( searchString, length ) searchString : 검색할 문자열로 필수 요소입니다. 대소문자를 구분합니다. length : 문자열 중 어디까지 검색할지 정합니다. 선택 요소로, 값이 없으면 전체 문자열을 대상으로 합니다. 예제 'abcde'.startsWith( 'a' ) 는 abcde가 a로 시작하는지 검사합니다. a로 시작하므로 true를 반환합니다. 'abcde'.startsWith( 'a', 1 ) bcde가 a로 시작하는지 검사합니다. ...

JavaScript 강좌