dh_0e

[JavaScript] How to use String(문자열), Array(배열), Object(객체) in JavaScript 본문

내일배움캠프/HTML,CSS,JavaScript

[JavaScript] How to use String(문자열), Array(배열), Object(객체) in JavaScript

dh_0e 2024. 4. 22. 21:04

 

1. String

 

string.length = 문자열 길이
string.substr(a, b) = a부터 b개의 문자를 불러옴
string.slice(a, b) = a부터 b-1까지의 문자를 불러옴
string.search("word") = string에 word가 시작되는 위치를 불러옴
string.replace("word", "word2") = string에 word를 word2로 바꿔줌

let string = "hello";
console.log(string.length); // 5
console.log(string.substr(1, 3)); // ell
console.log(string.slice(2, 4)); // ll
console.log(string.search("e")); // 1
console.log(string.replace("e", "i")); // hillo


string.split("word") = string을 word 기준으로 분할시켜 배열로 만들어줌
string1.concat(string2) = string1 + string2

let string = "apple, banna, carret, durian";
console.log(string.split(",")); // [ 'apple', ' banna', ' carret', ' durian' ]

let string1 = "Hello my ", string2 = "name is John";
console.log(string1.concat(string2)); // Hello my name is John

 

 

2. Array

 

new Array(n) = n 크기의 배열 생성

Array.push(a) = 배열의 마지막에 a를 추가
Array .pop() = 배열의 마지막 요소 삭제
Array .shift() = 배열의 첫 번째 요소 삭제
Array .unshift(a) = 배열의 첫 번째에 a를 추가
Array .splice(a, b, data) = 배열의 a번째에 b개의 데이터 삭제 후 data를 추가
Array .slice(a, b) = 배열의 a부터 b - 1까지를 새로운 배열을 생성하여 반환

let Arr = new Array(5); // 크기 5인 배열 Array 생성
Arr = [1, 2, 3, 4, 5];

Arr.push(6);
console.log(Arr); // [ 1, 2, 3, 4, 5, 6 ]

Arr.pop();
console.log(Arr); // [ 1, 2, 3, 4, 5 ]

Arr.shift();
console.log(Arr); // [ 2, 3, 4, 5 ]

Arr.unshift(1);
console.log(Arr); // [ 1, 2, 3, 4, 5 ]

Arr.splice(2, 2, 3.5);
console.log(Arr); // [ 1, 2, 3.5, 5 ]

Arr = Arr.slice(0, 2);
console.log(Arr); // [ 1, 2 ]

 


Array .foreach(function (element) { }) = 콜백 함수를 넣어 함수 안에서 배열의 각 요소가 한 번씩 수행되게 하는 메소드
Array .map(function (element) { }) = 콜백 함수에 return문이 꼭 필요하며 가공한 값이 항상 원본 배열의 길이를 가진 배열 반환
Array .filter(function (element) { }) = 콜백 함수에 return문이 꼭 필요하며 조건에 맞는 값들만을 배열 반환
Array .find(function (element) { }) = 콜백 함수에 return문이 꼭 필요하며 조건에 맞는 첫 값만 반환

콜백 함수란? <매개변수로써 쓰이는 함수>

let Arr = [1, 2, 3, 4, 5];
let Output = [];

Arr.forEach(function (val) {
    Output.push(val);
});
console.log(Output); // [ 1, 2, 3, 4, 5 ]

Arr = Arr.map(function (val) {
    return val * 2;
});
console.log(Arr); // [ 2, 4, 6, 8, 10 ]

Arr = Arr.filter(function (val) {
    return val % 4 !== 0;
});
console.log(Arr); // [ 2, 6, 10 ]

Arr = Arr.find(function(val){
    return val > 5;
});
console.log(Arr); // 6

 

 

 

3. Object

 

Object.keys(객체) = key들만으로 된 배열을 만들어줌
Object.values(객체) = value들만으로 된 배열을 만들어줌
Object.entries(객체) = [Key, value] 로 이루어진 2차원 배열을 만들어줌
Object.assign(객체1, 객체2, { key: value }) = 객체1에 객체2의 내용을 복사(key를 value로 바꾸면서)

let Obj = {
    name: "kdh",
    age: 23,
    height: 182,
    weight: 75
};

let KeyArr = Object.keys(Obj);
console.log(KeyArr); // [ 'name', 'age', 'height', 'weight' ]

let ValArr = Object.values(Obj);
console.log(ValArr); // [ 'kdh', 23, 182, 75 ]

let EntArr = Object.entries(Obj);
console.log(EntArr); /* 
[
    [ 'name', 'kdh' ],
    [ 'age', 23 ],
    [ 'height', 182 ],
    [ 'weight', 75 ]
] */

let Obj2 = {};
Object.assign(Obj2, Obj, { name: "kdg", age: 18, height: 176, weight: 67 });
console.log(Obj2); // { name: 'kdg', age: 18, height: 176, weight: 67 }

 


JSON.stringify(객체) = 객체를 문자열화 시켜 객체끼리 값이 같은 지 비교할 수 있게 해줌

let Obj = {
    name: "kdh",
    age: 23,
    height: 182,
    weight: 75
};

let Obj2 = {
    name: "kdh",
    age: 23,
    height: 182,
    weight: 75
};

console.log(Obj===Obj2); // false
console.log(JSON.stringify(Obj)===JSON.stringify(Obj2)); // true

console.log(JSON.stringify(Obj)); // {"name":"kdh","age":23,"height":182,"weight":75}