(JS 달리기반 강의 2회차 정리)
배열 메서드
JS에서 배열 메서드는 크게 변경 메서드와 비변경 메서드로 나눌 수 있다.
변경 메서드
변경 메서드는 배열 자체를 변경하는 메서드이다. 원본 배열을 수정하기 때문에 주의해서 사용해야 한다.
1. push()
- 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.
let fruits = ['Apple', 'Banana'];
fruits.push('Cherry');
console.log(fruits); // ['Apple', 'Banana', 'Cherry']2. pop()
- 배열의 마지막 요소를 제거하고, 그 요소를 반환한다.
let fruits = ['Apple', 'Banana', 'Cherry'];
let lastFruit = fruits.pop();
console.log(fruits); // ['Apple', 'Banana']
console.log(lastFruit); // 'Cherry'3. shift()
- 배열의 첫 번째 요소를 제거하고, 그 요소를 반환한다.
let fruits = ['Apple', 'Banana', 'Cherry'];
let firstFruit = fruits.shift();
console.log(fruits); // ['Banana', 'Cherry']
console.log(firstFruit); // 'Apple'4. unshift()
- 배열의 앞에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.
let fruits = ['Banana', 'Cherry'];
fruits.unshift('Apple');
console.log(fruits); // ['Apple', 'Banana', 'Cherry']5. splice()
- 배열의 기존 요소를 삭제 또는 교체하거나, 새 요소를 추가하여 배열의 내용을 변경한다.
let fruits = ['Apple', 'Banana', 'Cherry'];
fruits.splice(1, 1, 'Blueberry');
console.log(fruits); // ['Apple', 'Blueberry', 'Cherry']6. sort()
- 배열의 요소를 정리한다. 기본적으로 요소를 문자열로 취급하여 정렬한다.
| compareFn(a, b) return value | sort order |
|---|---|
| > 0 | sort a after b, e.g. [b, a] |
| < 0 | sort a before b, e.g. [a, b] |
| === 0 | keep original order of a and b |
let fruits = ['Banana', 'Apple', 'Cherry'];
fruits.sort();
console.log(fruits); // ['Apple', 'Banana', 'Cherry']
let numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b); // 숫자 정렬
console.log(numbers); // [1, 2, 3, 4, 5]비변경 메서드
비변경 메서드는 배열을 변경하지 않고, 새로운 배열을 반환하거나 값을 반환하는 메서드이다.
1. concat()
- 두 개 이상의 배열을 결합하여 새로운 배열을 반환한다.
let fruits = ['Apple', 'Banana'];
let moreFruits = ['Cherry', 'Date'];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits); // ['Apple', 'Banana', 'Cherry', 'Date']2. slice()
- 배열의 일부를 복사하여 새로운 배열을 반환한다.
let fruits = ['Apple', 'Banana', 'Cherry'];
let citrus = fruits.slice(1, 3);
console.log(citrus); // ['Banana', 'Cherry']3. join()
- 배열의 모든 요소를 문자열로 결합한다.
let fruits = ['Apple', 'Banana', 'Cherry'];
let fruitString = fruits.join(', ');
console.log(fruitString); // 'Apple, Banana, Cherry'4. includes()
- 배열에 특정 요소가 포함되어 있는지 확인하고, 불리언 값을 반환한다.
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits.includes('Banana')); // true
console.log(fruits.includes('Date')); // false5. indexOf()
- 배열에 특정 요소를 찾고, 그 요소의 첫 번째 인덱스를 반환한다.
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits.indexOf('Banana')); // 1
console.log(fruits.indexOf('Date')); // -16. map()
- 배열의 각 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
let numbers = [1, 2, 3];
let doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6]7. filter()
- 배열의 각 요소에 대해 주어진 함수를 호출한 결과가 참인 요소만 모아 새로운 배열을 반환한다.
let numbers = [1, 2, 3, 4, 5];
let even = numbers.filter(n => n % 2 === 0);
console.log(even); // [2, 4]객체 메서드
객체 메서드는 객체의 속성에 접근하거나 객체를 조작하는 다양한 기능을 제공한다.
1. Object.keys()
- 객체의 열거 가능한 속성 이름(key)들을 배열로 반환한다.
let person = { name: 'John', age: 30, city: 'New York' };
let keys = Object.keys(person);
console.log(keys); // ['name', 'age', 'city']2. Object.values()
- 객체의 열거 가능한 속성 값(value)들을 배열로 반환한다.
let person = { name: 'John', age: 30, city: 'New York' };
let values = Object.values(person);
console.log(values); // ['John', 30, 'New York']3. Object.entries()
- 객체의 열거 가능한 속성 [key, value] 쌍을 배열로 반환한다.
let person = { name: 'John', age: 30, city: 'New York' };
let entries = Object.entries(person);
console.log(entries); // [['name', 'John'], ['age', 30], ['city', 'New York']]4. Object.assign()
- 하나 이상의 출처 객체(source object)로부터 대상 객체(target object)에 속성을 복사합니다.
let target = { name: 'John' };
let source = { age: 30, city: 'New York' };
let returnedTarget = Object.assign(target, source);
console.log(target); // { name: 'John', age: 30, city: 'New York' }
console.log(returnedTarget); // { name: 'John', age: 30, city: 'New York' }5. Object.freeze()
- 객체를 동결(freeze)하여 더 이상 수정할 수 없게 만든다.
let person = { name: 'John', age: 30 };
Object.freeze(person);
person.age = 31; // 무시됨
console.log(person.age); // 306. Object.seal()
- 객체를 밀봉(seal)하여 새로운 속성을 추가하거나 기존 속성을 삭제할 수 없게 하지만, 속성의 값은 변경할 수 있다.
let person = { name: 'John', age: 30 };
Object.seal(person);
person.age = 31; // 변경 가능
person.city = 'New York'; // 추가 불가
delete person.name; // 삭제 불가
console.log(person); // { name: 'John', age: 31 }