[JavaScript] 기본 함수 몇 가지 _2탄

기본 함수 몇 가지 1탄은 아래의 링크에서 확인할 수 있다.

 

1탄에서 소개한 함수들

1. parseInt()
2. isNaN()
3. getElementById(), getElementByClassName()
4. querySelector(), querySelectorAll()
5. addEventListener()
6. localStorage.setItem(), localStorage.getItem(), localStorage.removeItem()

https://unit-15.tistory.com/entry/JavaScript-%EA%B8%B0%EB%B3%B8-%ED%95%A8%EC%88%98-%EB%AA%87-%EA%B0%80%EC%A7%80

[JavaScript] 기본 함수 몇 가지 _1탄

 

 

 

[JavaScript] 기본 함수 몇 가지 _2탄

 

7. padStart(), padEnd()

padStart() 함수는 string에 쓸 수 있는 함수이다.

 

문법은 아래와 같다.

문자열.padStart(length)
문자열.padStart(length, padString)

length에는 목표하는 문자열의 길이를 적는다.

padString에는 빈 공간에 채워넣을 문자열을 적으면 된다. padString을 적지 않을 경우 default값은 공백이다.

 

 

ex) 숫자를 1, 2, ..., 99, 100, 101, ... 이 아닌 001, 002, ..., 009, 100, 101, ... 으로 적고 싶다면 아래와 같이 사용할 수 있다.

문자열.padStart(3, "0");    // 세 자리 숫자로 표현되고, 빈 곳은 0으로 채우기

 

 

padEnd() 함수는 padStart()와 같은 방식으로 구현되고

문자열의 앞이 아닌 뒤부터 채워진다는 것만 다르다.

 

 

 

8. append(), appendChild(), prepend()

이 함수는 자바스크립트를 통해 HTML의 tag를 추가하는 일을 한다.

 

append()와 appendChild() 함수는 한 엘리먼트를 특정 엘리먼트의 가장 마지막 자식으로 붙이는 기능을 한다.

 

사용법은 아래와 같다.

ex)

const p = document.createElement("p");
document.body.appendChild(p);

위의 결과는 HTML에 p 태그를 body의 가장 마지막에 <p></p>와 같이 추가한다.

 

appendChild()나 append()가 아닌 prepend()를 이용하면

body의 가장 윗부분에 <p></p>와 같이 p 태그가 추가된다.

 

 

 

9. JSON.stringify(), JSON.parse()

JSON은 JavaScript Object Notation의 약자로, 브라우저와 서버 사이에 오고가는 데이터의 형식이다.

 

JSON.stringify() 함수는 자바스크립트의 값을 JSON 문자열로 변환해주는 함수이다.

이 함수는 JS object나 array 또는 어떤 JS 코드든 string으로 변환해준다.

 

위 함수의 문법은 아래와 같다.

JSON.stringify(value)

value값에는 JSON 문자열(string)로 변환할 값을 입력한다.

 

 

 

JSON.parse()는 이와 반대로 작용한다.

parse()는 문자열(string)을 JSON 객체로 변환해준다.

문법은 아래와 같다.

JSON.parse(text)

text값에는 JSON으로 변환할 문자열을 입력한다.

 

 

JSON.stringify()와 JSON.parse() 함수는 서로 반대 작용을 한다.

JSON.stringify([1, 2, 3, 4]);    // "[1,2,3,4]"
JSON.parse("[1,2,3,4]");    // [1, 2, 3, 4]

JSON.stringify() 함수를 이용하면 array가 string이 되고,

JSON.parse() 함수를 이용하면 string이 array가 된다.

 

 

 

10. splice(), slice()

splice()와 slice()는 배열에서 사용하는 함수이다.

둘 다 배열에서 특정 항목을 제거할 때 사용하는 함수이고,

차이점은 원래 배열을 유지하느냐 마느냐이다.

 

splice()를 통해 배열에서 특정 항목을 제거하면, 말 그대로 그 배열에서 특정 항목이 제거된다.

slice()를 통해 배열에서 특정 항목을 제거하면, 특정 항목을 제거한 새로운 배열이 생성된다.

즉, slice()는 기존의 배열은 건드리지 않고 작업하고, splice()는 기존의 배열을 건드리면서 작업한다.

 

const array = [1, 2, 3, 4];
array.splice(2, 1);
console.log(array);    // [1, 2, 4]

splice() 함수의 첫 번째 파라미터는 몇 번째 인덱스부터 제거할 것인지를 의미하고,

두 번째 파라미터는 그 인덱스부터 몇 개를 지울지를 의미한다.

 

const array = [1, 2, 3, 4];
myArray = array.slice(0, 2);
console.log(array);    // [1, 2, 3, 4]
console.log(myArray);    // [1, 2]

slice() 함수의 파라미터는 splice()와 다르니 주의해야 한다.

slice()의 첫 번째 파라미터는 몇 번째 인덱스부터 자를지를 의미하고,

두 번째 파라미터는 몇 번째 인덱스까지 자를지를 의미한다.

 

 

 

11. shift()와 unshift() & pop()과 push()

shift(): 배열의 첫 번째 원소를 추출한다.

unshift(): 배열의 첫 번째 원소에 새 원소를 추가한다.

pop(): 배열의 마지막 원소를 추출한다.

push(): 배열의 마지막 원소에 새 원소를 추가한다.

 

위의 네 가지 함수의 공통점은, 함수의 진행 과정에서 원래 배열은 유지되지 않는다는 것이다.

 

 

1) shift()

const array = [1, 2, 3, 4];
array.shift();
console.log(array);    // [2, 3, 4]

 

2) unshift()

const array = [1, 2, 3, 4];
array.unshift(0);
console.log(array);    // [0, 1, 2, 3, 4]

 

3) pop()

const array = [1, 2, 3, 4];
array.pop();
console.log(array);    // [1, 2, 3]

 

4) push()

const array = [1, 2, 3, 4];
array.push(5);
console.log(array);    // [1, 2, 3, 4, 5]