웹 스터디

코스 전체목록

닫기

배열

본 수업은 폐지 예정입니다. 자바스크립트 언어 수업웹브라우저 자바스크립트로 수업이 리뉴얼 되었기 때문에 이것을 이용해주세요.

배열 - Array

  • 연관된 여러개의 데이터를 하나처럼 관리하고 싶을 때 사용
  • 복수의 데이터를 제어할 수 있는 다양한 함수(method)를 제공
  • 배열의 함수를 이용해서 데이터를 편리하게 조작할 수 있음

문법(Syntax)

var arr = new Array(element0, element1, element2, ..., elementN);

// Array literals
var lit = [element0, element1, element2, ..., elementN];

예제

example1.html - (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<script type="text/javascript">
			// firstArray라는 변수에 apple, orange, mango 값이 들어있는 배열을 생성해서 담는다.
			var firstArray = new Array('apple', 'orange', 'mango');

			// 배열의 데이터에 엑세스 할 때는 '[인덱스]'를 사용함, 인덱스(index)는 0부터 순차적으로 올라감
			alert('첫번째 값은' + firstArray[0]);

			// 배열에 저장된 데이터의 수는 배열.length; 를 통해서 알 수 있음.
			alert('저장된 배열의 수는 ' + firstArray.length);

			// 배열에 값을 추가할 때는 배열.push('새로운 값')을 통해서 할 수 있음.
			firstArray.push('tangerine');
			alert(firstArray);

			var removed = firstArray.shift();
			// 첫번째 원소를 제거한 후에 이를 리턴
			alert(removed);
			alert(firstArray);

			// 배열과 반복문,조건문을 조합해서 사용하는 예
			// 조건문을 이용해서 마지막 항목에는 ','를 찍지 않는다.
			for (var i = 0; i < firstArray.length; i++) {
				document.write(firstArray[i]);
				if (i < firstArray.length - 1)
					document.write(',');
			}

			// 배열을 이용하면 한줄에!
			document.write('<br />');
			document.write(firstArray.join(','));
		</script>
	</body>
</html>

example2.html - (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

	</head>
	<body>
		<script type="text/javascript">
			// 배열과 반복문,조건문을 조합해서 사용하는 예
			function getWeek() {
				var week = ['월', '화', '수', '목', '금', '토', '일'];
				return week;
			}

			var week = getWeek();
			for (var i = 0; i < week.length; i++) {
				document.write(week[i] + '<br />');
			}
		</script>
	</body>
</html>

댓글

댓글 본문
  1. 첫번째 예제 line 27, 오타 '조건물' -> '조건문'
    두번째 예제 line 9, 주석 '배열과 반복문,조건문을 조합해서 사용하는 예' -> '배열과 반복문, 함수를 조합해서 사용하는 예'
    인 것 같습니다.

    항상 감사합니다 :)
  2. 감사합니다
  3. ㅁㅁ
    좋은 강의 감사드립니다 ^^
  4. Guest
    document.write(week.join('')
  5. 숫자놀이
    헐..이분 뭔가 무섭다..ㅠㅠㅠ 그것도 새벽에..!!
    대화보기
    • hazz
      동영상 볼때는 이해가 가는데 직접 하려고 써보니까 헷갈리네여...ㅋㅋ후딱 한바퀴돌구 다시 정주행해야겟엉 퐈팅!!!
    • 수업 잘듣고있어요!
      강의를 잘 들어보면.. 구분자를 바꿔준다는 내용으로 설명하셨어요.. ㅎㅎArrayName.join('-')으로 orange-mango 이런식으로 바꿔준다고..ㅋ
      대화보기
      • manorgass
        1) document.write(ArrayName);2) document.write(ArrayName.join(','));
        1과 2의 결과는 동일합니다. 디폴트 값으로 콤마가 배열 속성 사이에 들어가네요.참고하세요. ;-)
      • Wmchang
        복사 붙여 넣기 했더니 소스가 ㅠ.ㅠ 이거 삭제 어뜩게 하는거죠?
        대화보기
        • Wmchang
          배열과 반복문,조건문을 조합해서 사용하는 예문을 이클립스로 돌리니 마지말에 디폴트 값이 생기네요 마지막 소스에 if문을 추가하면 어떨까요?function getWeek(){var week=['월','화','수','목','금','토','일',];return week;}var week = getWeek();for(var i =0; i<week.length; '<br="" +="" document.write(week[i]="" i++){="" if(i<week.length-1){="">');}</week.length;>
        • JoonYoung Yi
          parameter 예제부분에 오타난건가요? lenght->length
        • egoing
          고쳤습니다. ^^
          대화보기
          • Velvetpreneur
            헐 이거 삭제가.. ㅜ..
            대화보기
            • Velvet.preneur
              오잉 "참고"의 링크가 깨졌네용^^;
            버전 관리
            egoing@gmail.com
            현재 버전
            선택 버전
            graphittie 자세히 보기