본문 바로가기
JS/JavaScript 강의

21. Array 기본 메소드 part.1 (Basic Array Operations-Methods)

by 박기린 2022. 10. 17.
Array 내장메소드
part 1. https://arnopark.tistory.com/549
part 2. https://arnopark.tistory.com/499

 

안녕하세요. 박기린입니다.

자바스크립트의 배열은 다양한 메소드(Array.prototype.method())를 지원합니다.

지금부터 대표적인 배열 메소드들에 대해 알아보겠습니다.


 

 

Add elements

arrayName.push() : push() 메소드는 ()안에 있는 인수를 배열의 맨 뒤에 요소로 삽입합니다.

push() 메소드 자체는 배열에 요소를 삽입한 후, 그 array의 length(길이)를 return 합니다.

const friends = ['Michael', 'Steven', 'Peter'];
const newLength = friends.push('Jay');
console.log(friends); // ['Michael', 'Steven', 'Peter', 'Jay'];
console.log(newLength); // 4

 

arrayName.unshift() : unshift() 메소드는 () 안에 있는 인수를 배열의 맨 앞에 요소로 삽입하니다.

shift() 메소드는 length를 return하지 않습니다.

friends.unshift('John'); // ['John', 'Michael', 'Steven', 'Peter', 'Jay']

 

 

 

Remove elements

arrayName.pop() : push() 메소드의 반대로, 맨 뒤의 요소를 제거합니다.

pop() 메소드는 제거한 값을 return 합니다.

const friends = ['John', 'Michael', 'Steven', 'Peter'];
friends.pop();
const popped = friends.pop();
console.log(popped); // Peter
console.log(friends); // ['John', 'Michael', 'Steven']

 

arrayName.unshift() : shift()의 반대로, 맨 앞의 요소를 제거합니다.

shift() 메소드도 제거한 값을 return 합니다.

const friends = ['John', 'Michael', 'Steven'];
friends.shift();
console.log(friends); // ['Michael', 'Steven']

 

 

 

 

요소의 index를 계산하는 방법

arrayName.indexOf() : ()안에 있는 인수와 동일한 arrayElement를 찾아서, 해당하는 arrayElement의 index값을 return 합니다. (zero-based에 기반합니다. == 0부터 시작합니다.)

이때 비교는 strict 비교입니다.

const friends = ['Michael', 'Steven', 'Peter'];
console.log(friends.indexOf('Steven')); // 1
console.log(friends.indexOf('Bob')); // -1

해당하는 arrayElement 없을 경우엔 -1 return 합니다.

 


 

 

 

 

특정 값이 array 안에 있는 지 확인하는 방법

arrayName.includes() : ()안에 있는 인수와 동일한 arrayElement를 찾아서, 여부에 따라 boolean(true/false) 값을 return 합니다.

이때 비교는 strict 비교입니다.

const friends = ['Michael', 'Steven', 'Peter'];
console.log(friends.includes('Steven')); // true
console.log(friends.includes('Bob')); // false
// exercise
if (friends.includes('Steven')) {
 console.log('You have a friend called Steven');
}

 

반응형

'JS > JavaScript 강의' 카테고리의 다른 글

23. Object 메소드  (0) 2022.10.19
22. Object 소개  (0) 2022.10.18
20. Array 소개  (0) 2022.10.14
19. 화살표 함수 (Arrow Functions)  (1) 2022.10.13
18. 함수 (Functions)  (0) 2022.10.11