[JS] JS 입출력, 배열

hye0n.gyu·2024년 7월 21일
0

JS

목록 보기
2/13
post-thumbnail

console, Alert, Prompt

consol.log은 출력할 때 사용하고 Alert는 알림 팝업을 띄울 때 사용한다.
prompt는 입력받을 때 사용한다.

alert("알림")
let input = prompt("입력하세요.")
console.log(input)

⭐ 배열

배열의 생성

let days = []
typeof days //object

let colors = ['red', 'orange', 'yellow'];
typeof colors //object

colors[10] = "indigo"
colors // ['red', 'orange', 'yellow', emptyx7, 'indigo']

let arrayEx = [true, undefined, 12, 9.999, NaN, false, null, "Haru"] //가능

push와 pop(Stack)

push는 끝에 추가하는 것이다. pop은 끝을 제거하는 것이다.

let listOfMember = ['haru', 'hyeongyu']
listOfMember.push('Bri') // ['haru', 'hyeongyu', 'Bri']
listOfMember.pop() //Bri (삭제)

shift와 unshift

unshift는 시작부분에 추가하는 것이다. shift는 시작 부분을 제거하는 것이다.

let listOfMember = ['haru', 'hyeongyu']
listOfMember.unshift와('Bri') // ['Bri', 'haru', 'hyeongyu']
listOfMember.shift() //Bri (삭제)

이 외 메소드들

🔎concat: 배열 병합

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// Expected output: Array ["a", "b", "c", "d", "e", "f"]

🔎includes: 배열에 특정 값이 포함되어 있는지 (true or false)

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// Expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// Expected output: true

console.log(pets.includes('at'));
// Expected output: false

🔎indexOf: 배열에 어떤 요소가 있는 지 없는 지 (찾는 요소의 첫 번째 index 반환)

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// Expected output: 1

// Start from index 2
console.log(beasts.indexOf('bison', 2));
// Expected output: 4

console.log(beasts.indexOf('giraffe'));
// Expected output: -1

includes와 indexOf 차이
indexOf()는 특정 문자열이 존재하는 첫 번째 index도 알 수 있지만, includes()는 알 수 없다.

🔎join: 배열의 모든 요소를 쉼표나 지정된 구분 문자열로 구분하여 연결한 새 문자열을 만들어 반환한다.

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// Expected output: "Fire,Air,Water"

🔎reverse: 배열을 뒤집는다.

const a = [1, 2, 3];
console.log(a); // [1, 2, 3]

a.reverse();
console.log(a); // [3, 2, 1]

slice, splice

🔎 slice

slice는 말 그대로 배열을 잘라 새 배열을 반환해준다.
기본형

arr.slice(begin, end)
const elements = ['Fire', 'Air', 'Water', 'soil'];
elements.slice(1) //'Air', 'Water', 'soil'
elements.slice(1,2) //'Air', 'Water'

🔎 splice

splice는 기존 요소들을 제거하거나 대체하거나 아니면 새로운 요소들을 추가해서 배열의 내용을 변경한다.

기본형

 array.splice(start, deleteCount, item1, item2, ...)

start: 배열의 변경을 시작할 인덱스
deleteCount: 배열에서 제거할 요소의 수
item1, item2, ...: 배열에 추가할 요소

예시

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// 1번 index에 'Feb' 추가
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "June"]
months.splice(1, 1);
//Feb 제거 
console.log(months);
// Expected output: Array ["Jan", "March", "April", "June"]


months.splice(4, 1, 'May');
// Replaces 1 element at index 4
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "May"]

참조 타입과 동일성 테스트

'hi' === 'hi' //true
['hi', 'bye'] === ['hi', 'bye'] //false
[1] === [1] //false
[1] == [1] //false
[] == [] //false

let a = ['hi', 'bye']
let b = a
b==a //true
a==b //true
b===a //true
a===b //true

결론적으로 위 예시들은 같은 것을 참조했는지 test하는 것이다.

===과 ==의 차이
==은 다른 점은 서로 다른 유형의 두 변수의 값을 비교했을 때 true가 나온다는 점이다. 이 점이 =====와는 다른 점이다.

const 배열

const 배열은 배열에 값을 추가하거나 변경은 가능하지만
아예 다른 배열을 재참조하는 것은 안 된다.

const a = ['hi', 'bye']
a.push("oh") // 가능
a[0] = 'hello' // 가능

a = ['why', 'bye'] //불가
profile
반려묘 하루 velog

0개의 댓글