[javascript] 배열(Array)

jinwonShen·2022년 8월 15일

javascript

목록 보기
6/52
post-thumbnail

👍 배열(Array)

  • 배열은 특별한 종류의 변수이다. 하나의 변수에 여러 값의 목록을 저장할 수 있는 유형으로 배열을 가져 올 때는 인덱스번호 0부터 시작한다. 배열을 만들 떄는 대괄호를 사용하고 값은 쉼표로 구분한다.

const apple = "사과";
const orange = "오렌지";
const pear = "배";
const strawberry = "딸기            -> const fruits = ['사과','오렌지','배','딸기']

👉 Array을 이용한 코드 제작

  • rps = ["가위","바위","보"]라고 저장된 배열에서 "바위"를 가져오는 코드를 작성해 보자.
<script>
	const rps = ["가위","바위","보"]
    document.write(rps[1] + '<br>');
    
    //배열의 길이를 알고 싶을때에는 length를 사용한다.
    const rpsLength = rps.length;
    document.write(rpsLength);
</script>

🤞 결과

👉 배열의 길이 구하기

  • colors = ["white","black","custom"] 라고 저장된 배열에서 "black"을 가져오는 코드를 작성해 보자. 배열의 길이를 구하는 length메서드를 활용하여 길이를 구하는 코드를 작성해 보자.
<script>
 	const colors = ["white","black","custom"]
 	document.write(colors[1] + '<br>');
 	document.write(colors.length);
</script>

🤞 결과

👉 배열 내의 값에 접근해 수정하기

  • colors = ["white","black","custom"]배열을 만들고 세 번째 배열의 아이템을 "beige"로 수정하고 출력해보자.
<script>
 	const colors = ["white","black","custom"]
 	document.write(colors[2] + '<br>');
    
    colors[2] = "beige";
    document.write(colors[2]);
</script>

🤞 결과

👉 배열 호출 메서드

  • 배열에 대해 호출할 수 있는 많은 메서드들이 있다. 유용한 메서드 몇 가지만 실습해보자.
아이템 추가 / 제거
아이템 추가 - push()배열의 끝에 하나 또는 그 이상의 아이템을 추가
아이템 추가 - unshift()배열의 시작에 하나 또는 그 이상의 아이템을 추가
아이템 제거 - pop()배열의 마지막 요소 제거
아이템 제거 - shift()배열의 첫번째 요소 제거

🤞 결과

<script>
	const fruits = ['apple','banana','orange']
    //배열의 길이 확인
    console.log(fruits.length); // 3
    
    //배열의 끝에 아이템 추가
    fruits.push('pear');
    console.log(fruits); //['apple','banana','orange','pear']

    //배열 시작위치에 추가
    fruits.unshift('melon');
    console.log(fruits); //['melon','apple','banana','orange','pear']

    //배열 마지막 제거
    fruits.pop();
    console.log(fruits); //['melon','apple','banana','orange',]

    //배열 첫번째 제거
    fruits.shift();
    console.log(fruits); //['apple','banana','orange',]
</script>
profile
하면 된다. | 좋은 FE 개발자 되기

0개의 댓글