※ 본 내용은 해당 교재를 참고하여 공부한 내용과 본인의 생각을 정리한 글입니다.
https://www.yes24.com/Product/Goods/105608999
바닐라 자바스크립트 - 예스24
실무 역량까지 한 번에 잡을 수 있는바닐라 자바스크립트 이론서자바스크립트는 이제 브라우저를 넘어 웹 애플리케이션뿐만 아니라 마이크로 컨트롤러까지 점점 사용하는 곳이 늘어나고 있다.
www.yes24.com
배열을 많이 쓰는 편이니 관련 메소드는 알고 있으면 좋다.
● toString()
배열 안의 모든 문자를 쉼표(,)를 이용해 모두 결합해서 하나의 문자열로 반환.
● join()
배열 안의 모든 문자를 파라미터로 지정한 문자를 이용해서 모두 결합해서 하나의 문자열로 반환
문자열을 합쳐야 하는 경우 더하기(+)를 이용해서 문자열을 합칠 수도 있지만, 합쳐야 할 문자열이 많은 경우는 더하기를 이용하는 것보다, 배열의 push() 함수를 사용해서 합쳐야 할 문자열을 배열에 넣고, 나중에 한번에 join() 함수를 사용해서 합치는 것이 프로그램 성능 면에서 훨씬 우수하다.
(예제 코드 참고)
● pop()
배열에서 마지막 데이터를 제거하고, 마지막 데이터를 반환.
● push()
배열에 새로운 요소(데이터, 객체 등)를 추가한다.
● shift()
배열에서 첫 번째 요소를 제거하고, 첫 번째 요소를 반환.
● unshift()
배열의 맨 앞에 요소를 추가하고, 배열의 길이를 반환.
● splice()
새로운 요소를 특정 위치에 추가한다.
● concat()
2개 이상의 배열을 하나의 배열로 결합한다.
● slice()
2개의 파라미터를 사용하며, 첫 번째 파라미터는 시작 인덱스, 두 번째 파라미터는 종료 인덱스(생략가능).
생략하면 시작 인덱스에서 마지막 배열 요소까지 잘라내서 배열 형태로 반환.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script>
console.log('=======================toString()=======================');
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits);
console.log(fruits.toString()); // Banana,Orange,Apple,Mango
console.log('=======================join()=======================');
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.join(" * ")); // Banana * Orange * Apple * Mango
console.log('=======================pop()=======================');
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.pop()); // x = "Mango"
console.log(fruits);
console.log('=======================push()=======================');
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.push("Kiwi")); // "Kiwi"가 fruits 배열에 추가 됩니다.
console.log(fruits);
console.log('=======================shift()=======================');
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits);
fruits.shift(); // "Banana"를 fruits 배열에서 제거하고, 반환합니다.
console.log(fruits.shift());
console.log('=======================unshift()=======================');
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.unshift("Lemon")); // "Lemon"을 fruits 배열 제일 앞에 추가하고 배열의 길이를 반환합니다.
console.log('=======================array index=======================');
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits);
fruits[0] = "Kiwi"; // 배열에서 인덱스가 0인 요소인 "Banana"를 "Kiwi"로 변경합니다.
console.log('fruits[0]="Kiwi"');
console.log(fruits);
console.log('=======================splice()=======================');
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits);
console.log('fruits.splice(2, 0, "Lemon", "Kiwi")');
fruits = fruits.splice(2, 0, "Lemon", "Kiwi")
console.log(fruits); // [Banana, Orange, Lemon, Kiwi, Apple, Mango]
console.log('=======================concat()=======================');
console.log('arr1, arr2, arr3 순서');
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
console.log(arr1);
console.log(arr2);
console.log(arr3);
myChildren = arr1.concat(arr2, arr3);
console.log('arr1.concat(arr2, arr3)');
console.log(myChildren);
console.log('=======================slice()=======================');
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
console.log(fruits);
console.log('fruits.slice(3)');
console.log(fruits.slice(3)); // [Apple, Mango]
console.log('fruits.slice(1, 3)');
console.log(fruits.slice(1, 3)); // [Orange, Lemon]
</script>
</body>
</html>
● sort()
배열에 문자형 데이터가 있는 경우 오름차순으로 정렬한다.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log('===================String sort===================');
console.log(fruits.sort()); // ["Apple", "Banana", "Mango", "Orange"];
console.log('===================Number sort===================');
//오름차순 정렬
var points = [40, 100, 1, 5, 25, 10];
let result1 = points.sort(function (a, b) {
return a - b;
});
console.log(result1); //[1, 5, 10, 25, 40, 100]
//숫자 정렬 시 sort 메소드 실행 시 문자처럼 정렬이 된다.
console.log(points.sort()); //[1, 10, 100, 25, 40, 5]
//내림차순 정렬
var points2 = [40, 100, 1, 5, 25, 10];
let result2 = points2.sort(function (a, b) {
return b - a;
});
console.log(result2);
console.log('===================etc===================');
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.sort());
console.log(fruits.reverse());
var persons = [
{
name: "유재석",
point: 78,
city: "서울",
},
{
name: "김종국",
point: 92,
city: "서울",
},
{
name: "양세찬",
point: 76,
city: "제주",
},
{
name: "하하",
point: 81,
city: "서울",
},
];
// sort custom
let result3 = persons.sort(function (a, b) {
return a.point > b.point ? -1 : a.point < b.point ? 1 : 0;
});
console.log(result3);
</script>
</body>
</html>
● filter()
배열에서 특정 조건을 만족하는 배열의 요소만을 찾아서 새로운 배열로 반환.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script>
var persons = [
{
name: "유재석",
point: 78,
city: "서울",
},
{
name: "김종국",
point: 92,
city: "서울",
},
{
name: "양세찬",
point: 76,
city: "제주",
},
{
name: "하하",
point: 81,
city: "서울",
},
];
var pass = persons.filter(function (person) {
return person.point > 80;
});
console.log('point가 80점 초과한 사람');
console.log(pass);
</script>
</body>
</html>
● map()
배열의 데이터가 Object형일 때, 배열에 담긴 Object를 새로운 형태의 Object로 변환해서 배열로 반환.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script>
//map 함수 이해를 돕기위한 예시 코드
const numbers = [1, 2, 3, 4, 5];
const squaredWithIndex = numbers.map(function (currentValue, index, array) {
console.log(`Current Value: ${currentValue}`); //현재 값
console.log(`Index: ${index}`); //현재 index
console.log(`Original Array: ${array}`); // 원래 배열(numbers)
// 현재 요소의 값을 제곱하여 반환
return currentValue * currentValue;
});
console.log(squaredWithIndex);
var userList = [
{
firstName: "재석",
lastName: "유",
email: "yu@gmail.com",
},
{
firstName: "종국",
lastName: "김",
email: "kim@gmail.com",
},
{
firstName: "세찬",
lastName: "양",
email: "yang@gmail.com",
},
{
firstName: "석진",
lastName: "지",
email: "ji@gmail.com",
},
];
var userList2 = userList.map(function (user) {
//user 파라미터는 데이터를 의미
return {
fullName: user.lastName + user.firstName,
firstName: user.firstName,
lastName: user.lastName,
email: user.email,
};
});
console.log(userList2);
</script>
</body>
</html>
● reduce()
배열에 담긴 데이터를 하나씩 순회하며 callback 함수의 실행 값을 누적하여 결과값을 반환.
주로 배열에 담긴 데이터의 합계를 구할 때 가장 많이 사용한다. callback 함수는 다음과 같이 4개의 매개변수를 가질 수 있다.
첫 번째 매개변수 : accumulator (누적 값)
두 번째 매개변수 : currentValue (현재 배열의 요소)
세 번째 매개변수 : currentIndex (인덱스 번호)
네 번째 매개변수 : arr (배열)
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script>
var points = [40, 100, 1, 5, 25, 10];
var sum = points.reduce(function (total, currentValue) {
//데이터를 하나씩 순회하며 누적 값에 현재 값 계속 더한다.
return total + currentValue;
}, 0);
console.log(sum); //181
</script>
</body>
</html>
'02. JavaScript > 01. 기본개념, 문법 (ES6)' 카테고리의 다른 글
| JavaScript_03. 내장 객체_Set (0) | 2023.11.28 |
|---|---|
| JavaScript_03. 내장 객체_Date (0) | 2023.11.28 |
| JavaScript_03. 내장 객체_Number (0) | 2023.11.28 |
| JavaScript_03. 내장 객체_String (0) | 2023.11.27 |
| JavaScript_03. 내장 객체_Object (0) | 2023.11.27 |
