개체의 구성원 액세스
개체는 이름을 사용하여 "구성원"에 액세스할 수 있습니다. 예를 들어, 다음 개체가 있다고 할 때:
const person = {firstName: "John", lastName: "Doe", age: 46};
여기서 person.firstName는 "John"을 반환합니다.
자바스크립트 배열과 순환
예제 코드
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;
결과
- JavaScript Arrays
- Looping an Array
- Banana
- Orange
- Apple
- Mango
forEach를 사용하는 방법
다음 기능을 사용할 수도 있습니다: Array.forEach().
예:
forEach는 배열의 각 요소에 대해 지정된 함수를 한 번씩 실행하는 메서드입니다.
문법
array.forEach(function(currentValue, index, arr), thisValue)
currentValue: 현재 처리 중인 요소의 값
index(선택사항): 현재 처리 중인 요소의 인덱스
arr(선택사항): forEach가 호출된 배열
thisValue(선택사항): 함수 내에서 사용할 this의 값
예제
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.forEach(function(item, index, array) {
console.log(item, index); // 각 요소와 해당 인덱스를 출력
});
사용 사례
forEach를 사용하면 반복문을 사용하는 것보다 코드를 더 간결하게 만들 수 있습니다.
예:
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach(function(number) {
sum += number;
});
console.log(sum); // 출력: 15
주의사항
forEach는 break를 사용하여 중간에 종료할 수 없습니다. 중간에 반복을 종료해야 한다면 for 루프나 Array.some() 같은 다른 메서드를 사용해야 할 수도 있습니다.
forEach는 원본 배열을 변경하지 않지만, 지정된 함수가 배열을 변경하면 원본 배열이 변경됩니다.
결론
forEach는 배열의 각 요소에 대해 특정 작업을 수행할 때 유용한 메서드입니다. 코드를 간결하게 만들어 가독성을 높이고, 로직의 복잡성을 줄이는 데 도움이 됩니다.
배열을 인식하는 방법
일반적인 질문 중 하나는 변수가 배열인지 어떻게 알 수 있는지에 대한 것입니다. 문제는 JavaScript 연산자가 typeof를 사용하면 "object"를 반환한다는 것입니다.
예:
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
typeof 연산자는 JavaScript 배열이 객체이기 때문에 객체를 반환합니다.
Array.isArray().
예:
Array.isArray(fruits);
이 방법을 사용하면 배열인지 여부를 쉽게 확인할 수 있습니다.
Array.toString()
숫자의 경우
숫자 객체의 toString() 메서드를 사용하면 해당 숫자를 문자열로 변환할 수 있습니다. 선택적으로 기수(진법)를 인수로 전달할 수 있습니다.
예시:
let number = 123;
console.log(number.toString()); // 출력: "123"
console.log(number.toString(2)); // 출력: "1111011" (2진법)
배열의 경우
배열 객체의 toString() 메서드는 배열의 각 요소를 문자열로 변환하고, 쉼표로 연결하여 하나의 문자열을 반환합니다.
예시:
let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.toString()); // 출력: "Banana,Orange,Apple,Mango"
객체의 경우
객체의 toString() 메서드는 기본적으로 "[object Object]"와 같은 형태의 문자열을 반환합니다. 이는 종종 개발자가 원하는 정보를 제공하지 않으므로, 객체를 적절히 표현하는 문자열을 반환하도록 toString() 메서드를 직접 정의하곤 합니다.
예시:
let person = {
firstName: "John",
lastName: "Doe",
toString: function() {
return this.firstName + " " + this.lastName;
}
//여기서 this 키워드는 현재 객체, 즉 person을 참조하며, this.firstName은 "John"을, this.lastName은 "Doe"를 반환합니다. 따라서 toString 메서드는 "John Doe"라는 문자열을 반환합니다.
이런 식으로 toString 메서드를 재정의하면, 객체를 더 의미있게 문자열로 표현할 수 있으며, 로깅이나 디버깅 등의 상황에서 유용하게 사용될 수 있습니다.
};
console.log(person.toString()); // 출력: "John Doe"
결론
toString() 메서드는 객체의 문자열 표현을 얻는 데 사용됩니다. 기본 객체 타입마다 다르게 작동하며, 필요에 따라 커스텀 객체에 대해서는 메서드를 직접 정의하여 사용할 수 있습니다.
※join 메소드로도 가능 (Ex: document.getElementById("demo").innerHTML = fruits.join(" * ");)
Array.shift()
이 명령어는 배열의 첫번째 요소(Array[0])를 제거시키면서 뒤에 나머지 (Array[1]~) 요소들을 앞으로 한칸씩 이동시킵니다.
위 사진에서는 맨첫번째 요소인 Banana를 외부로 이동시킨 후 다시 fruits 요소들을 출력해본 결과, 첫번째 요소 Banana를 제외한 나머지 요소들이 출력되는 것을 볼 수 있습니다.
※unshift는 (shift와 반대로) 함수 매개변수로 입력된 요소를 첫번째 요소에 추가합니다.
Array.shift()=Array.pop()=delete Array[0] 기능이 거의 비슷하다.
Array.concat()
const array1=[...]
const array2=[...]
const array3=[...]
array1.concat(array2, array3)
위와 같이 array1과 array2, array3를 병합시킬 수 있음. (뒤쪽으로 연결됨)
array1.concat("new")
해당 배열의 새로운 요소를 인자를 통해 병합시킬 수 있음. (뒤쪽으로 들어감)
Array.flat() : 2차원, 3차원, ... 등의 배열들을 1차원으로 평면화 시킬 수 있음.
Array.splice()
JavaScript에서 splice() 메서드는 배열에서 요소를 추가하거나 제거하는 데 사용됩니다. 이 메서드는 매우 유연하며, 배열을 여러 가지 방식으로 조작할 수 있게 해줍니다.
splice() 메서드의 문법
array.splice(index, howMany, item1, ..., itemX)
index: 배열에서 변경을 시작할 위치.
howMany: 제거할 요소의 수. 0인 경우 어떤 요소도 제거되지 않습니다.
item1, ..., itemX: 배열에 추가할 요소.
splice() 메서드 사용 예제
요소 제거
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 1); // 인덱스 2에서 1개의 요소 제거
console.log(fruits); // 출력: ["Banana", "Orange", "Mango"]
요소 추가
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi"); // 인덱스 2에서 0개의 요소 제거, "Lemon", "Kiwi" 추가
console.log(fruits); // 출력: ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]
요소 교체
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 1, "Lemon"); // 인덱스 2에서 1개의 요소 제거, "Lemon" 추가
console.log(fruits); // 출력: ["Banana", "Orange", "Lemon", "Mango"]
반환 값
splice() 메서드는 제거된 요소로 이루어진 배열을 반환합니다.
let fruits = ["Banana", "Orange", "Apple", "Mango"];
let removed = fruits.splice(2, 1);
console.log(removed); // 출력: ["Apple"]
결론
splice() 메서드는 배열에서 요소를 추가, 제거 또는 교체하는 강력한 도구입니다. 인덱스, 제거할 요소의 수, 추가할 요소를 지정함으로써 배열을 다양한 방법으로 조작할 수 있습니다.
Array.slice()
array.slice(start, end)
start: 새 배열을 시작할 인덱스. 생략하면 0에서 시작합니다.
end: 새 배열의 마지막 인덱스 바로 이전 인덱스. 이 값은 포함되지 않습니다. 생략하면 배열의 끝까지 포함됩니다.
slice() 메서드 사용 예제
부분 배열 추출
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let citrus = fruits.slice(1, 3);
console.log(citrus); // 출력: ["Orange", "Lemon"]
시작 인덱스만 지정
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let softFruits = fruits.slice(2);
console.log(softFruits); // 출력: ["Lemon", "Apple", "Mango"]
음수 인덱스 사용
음수 인덱스를 사용하면 배열의 끝에서부터 요소를 계산합니다.
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let lastTwo = fruits.slice(-2);
console.log(lastTwo); // 출력: ["Apple", "Mango"]
Array.sort(): 배열 정렬
map() method
let newArray = array.map(function(currentValue, index, arr), thisValue)
function(currentValue, index, arr): 배열의 각 요소에 적용될 콜백 함수.
currentValue: 현재 처리 중인 요소.
index (선택 사항): 현재 처리 중인 요소의 인덱스.
arr (선택 사항): map이 호출된 배열.
thisValue (선택 사항): 콜백 함수 내에서 사용할 this 값.
예:
let numbers = [1, 4, 9, 16];
let doubles = numbers.map(function(item) {
return item * 2;
});
console.log(doubles); // 출력: [2, 8, 18, 32]
※flatmap(): 1차원으로 새로운 배열을 만듬.
Array.filter()
let newArray = array.filter(function(currentValue, index, arr), thisValue)
function(currentValue, index, arr): 배열의 각 요소에 적용될 콜백 함수.
currentValue: 현재 처리 중인 요소.
index (선택 사항): 현재 처리 중인 요소의 인덱스.
arr (선택 사항): filter가 호출된 배열.
thisValue (선택 사항): 콜백 함수 내에서 사용할 this 값.
filter() 메서드 사용 예제
짝수만 필터링하기
let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(function(item) {
return item % 2 === 0;
});
console.log(evenNumbers); // 출력: [2, 4, 6]
특정 조건을 충족하는 객체 찾기
let users = [
{ name: "John", age: 25 },
{ name: "Jane", age: 18 },
{ name: "Tom", age: 30 }
];
let adults = users.filter(function(item) {
return item.age >= 18;
});
console.log(adults); // 출력: [{ name: "John", age: 25 }, { name: "Jane", age: 18 }, { name: "Tom", age: 30 }]
반환 값
filter() 메서드는 주어진 콜백 함수의 조건을 충족하는 요소로 구성된 새 배열을 반환합니다.
주의사항
filter() 메서드는 원본 배열을 변경하지 않습니다.
콜백 함수에서 true를 반환하면 해당 요소가 새 배열에 포함됩니다.
Array.reduce()
function(accumulator, currentValue, index, arr): 배열의 각 요소에 적용될 리듀서 함수.
accumulator: 누산기, 이전 호출의 반환값 또는 초기값.
currentValue: 현재 처리 중인 요소.
index (선택 사항): 현재 처리 중인 요소의 인덱스.
arr (선택 사항): reduce가 호출된 배열.
initialValue (선택 사항): 누산기의 초기값.
예:
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum); // 출력: 10
예2:
let products = [
{ name: "Apple", price: 200 },
{ name: "Banana", price: 100 },
{ name: "Cherry", price: 150 }
];
let total = products.reduce(function(accumulator, currentValue) {
return accumulator + currentValue.price;
}, 0);
console.log(total); // 출력: 450
예3:
let names = ['Alice', 'Bob', 'Alice', 'Charlie', 'Bob'];
let countNames = names.reduce(function(obj, name) {
obj[name] = (obj[name] || 0) + 1;
return obj;
}, {});
console.log(countNames); // 출력: { Alice: 2, Bob: 2, Charlie: 1 }
예3 작동 방식
1.reduce() 메서드가 호출되면 빈 객체 {}가 누산기의 초기값으로 전달됩니다.
2.배열의 각 이름에 대해, 리듀서 함수가 호출됩니다.
3.obj[name] = (obj[name] || 0) + 1; 이 부분은 현재 이름이 객체에 이미 존재하는 경우 해당 키의 값을 1 증가시키고, 그렇지 않은 경우 해당 키를 1로 설정합니다.
=>obj[name] 확인: 객체 obj에서 name에 해당하는 키의 값을 확인합니다. 만약 name이 obj에 존재하면 obj[name]은 그 값을 반환합니다.
값이 있으면 반환: obj[name]이 존재하고 "truthy" 값(즉, false, null, undefined, 0, 빈 문자열 등이 아닌 값)이면, 그 값이 반환됩니다.
값이 없으면 0 반환: obj[name]이 "falsy" 값(즉, false, null, undefined, 0, 빈 문자열 등)이라면 || 연산자는 오른쪽 피연산자인 0을 평가하고 반환합니다.
4.return obj;는 현재 상태의 객체를 반환하여 다음 순회에 누산기로 전달합니다.
5.모든 배열 요소에 대한 순회가 완료되면 결과 객체가 반환되고, 콘솔에 출력됩니다.
※reduceRight()방법은 오른쪽에서 왼쪽으로 이동합니다.
array.indexOf("대상 요소"): 대상 요소가 위치한 인덱스 위치값 반환
array.lastIndexOf("대상 요소"): 같은 요소가 배열에 있을 시에 마지막 인덱스 위치값 반환
array.find()
JavaScript의 find() 메서드는 배열에서 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 만약 그러한 요소가 없다면 undefined를 반환합니다. find()는 주로 특정 조건을 만족하는 배열 내의 요소를 찾을 때 사용됩니다.
예시:
const numbers = [5, 12, 8, 130, 44];
const found = numbers.find(function(element) {
return element > 10;
});
console.log(found); // '12'만을 출력
※array.findIndex()는 테스트 함수를 거쳐서 통과하는 첫번째 요소의 인덱스 위치를 반환한다.
array.from()
JavaScript의 Array.from() 메서드는 유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운 Array 인스턴스를 만듭니다. 이 메서드는 유용하게 사용되는 여러 상황이 있는데, 특히 DOM에서 선택된 요소의 목록과 같은 유사 배열 객체를 실제 배열로 변환할 때 유용합니다.
유사 배열 객체 변환
const arrayLike = { length: 2, 0: 'a', 1: 'b' };
const arr = Array.from(arrayLike);
console.log(arr); // ['a', 'b']
매핑 함수 사용
const numbers = [1, 2, 3];
const doubleNumbers = Array.from(numbers, x => x * 2);
console.log(doubleNumbers); // [2, 4, 6]
문자열의 문자를 배열로 변환
const str = 'hello';
const chars = Array.from(str);
console.log(chars); // ['h', 'e', 'l', 'l', 'o']
Array.includes("Target"): 배열에 Target이 포함되어 있으면 True를 리턴.
Array.entries()
<!DOCTYPE html>
<html>
<head>
<title>Fruits List</title>
</head>
<body>
<h1>Fruits and Their Indexes</h1>
<div id="demo"></div>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries(); //이미 여기서 배열의 각 요소와 해당 요소의 인덱스를 [인덱스, 요소] 형태의 배열로 반환하는 반복 가능한 객체를 생성.
for (let x of f) { //이 for 구문을 단순 출력 기능임.
document.getElementById("demo").innerHTML += "Index: " + x[0] + ", Fruit: " + x[1] + "<br>";
}
</script>
</body>
</html>entries() 메서드는 fruits 배열의 [인덱스, 값] 형식의 쌍을 반환하는 반복 가능한 객체를 생성합니다. 이 반복 가능한 객체를 for...of 루프로 순회하며 각 과일과 해당 인덱스를 출력합니다.
결과:
Index: 0, Fruit: Banana
Index: 1, Fruit: Orange
Index: 2, Fruit: Apple
Index: 3, Fruit: Mango
'JavaScript' 카테고리의 다른 글
| JavaScript math method (0) | 2023.08.21 |
|---|---|
| javascript 날짜 date 디테일 기본 개념 잡기 (0) | 2023.08.21 |
| JavaScript String Methods(스트링 매소드) (0) | 2023.08.18 |
| JavaScript 이벤트(Event) (0) | 2023.08.18 |
| JavaScript 표시 기능 사용 (0) | 2023.08.17 |
