배열을 생성하는 방법
1. 배열 리터럴
const arr = [];
const arr = [1,2,3,4,5];2. 생성자 함수
const arr = new Array();-
아래와 같이 배열의 길이를 정해줄 수도 있습니다.
-
숫자만큼 배열에
undefined로 초기화됩니다.
const arr = new Array(5); //[undefined,undefined,undefined,undefined,undefined]-
array.fill() 메서드를 같이 사용하면 배열의 길이와 값 초기화를 동시에 할 수 있습니다.
-
배열의 길이만큼 array.fill()안의 값으로 채워집니다.
const arr = new Array(5).fill(); //[0,0,0,0,0]-
1,2,3,4,5와 같이 순차적으로 값을 초기화할 수도 있습니다.
-
Array.from()이라는 메서드를 사용하면 순차적인 로직으로 값을 초기화할 수 있습니다.
const arr = Array.from(Array(5), x => x + 1)배열의 length
-
배열은 배열의 길이를 나타내는 length라는 프로퍼티를 갖습니다.
-
length에 현재 배열의 길이보다 작은 값을 할당하면, 초과된 부분은 잘립니다.
-
length에 현재 배열의 길이보다 큰 값을 할당하면, 값이 바뀌지만 실제 배열의 값에는 변함이 없습니다.
const arr = [1,2,3,4,5];
//현재 배열의 길이보다 작은 값을 할당하면?
arr.length = 3; // [1,2,3]
//현재 배열의 길이보다 큰 값을 할당하면?
arr.length = 7; //[1,2,3,4,5,empty * 2]왠지 남는 만큼
undefined를 할당할 것 같지만, 그렇지 않다는 것에 주의해야 합니다. 이렇듯 의도하지 않는 동작이 일어날 수도 있으므로 length 속성을 직접 조작하는 것은 좋지 않은 방법이라고 합니다.
배열의 유용한 메서드
Array.join()
-
배열의 요소들을 하나의 문자열로 합치는 메서드입니다.
-
원본 배열을 바꾸지 않고 문자열로 합친 새로운 값을 반환합니다.
const arr = [1,2,3,4,5];
console.log(arr.join(", ")); //"1, 2, 3, 4, 5"Array.reverse()
- 원본 배열의 순서를 바꾸는 메서드입니다.
const arr = [1,2,3,4,5];
console.log(arr.reverse()); //[5,4,3,2,1]Array.concat()
- 기존 배열에 다른 배열이나 값을 합쳐서 새로운 배열을 반환하는 메서드입니다.
const arr1 = [1,2,3,4,5];
const arr2 = [6,7,8,9,10];
console.lo(arr1.concat(arr2)) // [1,2,3,4,5,6,7,8,9,10]배열 끝에 추가, 삭제하는 메서드
Array.push()
-
배열의 맨 끝에 요소를 추가하는 메서드입니다.
-
요소를 추가하면 원본 배열에 추가가 되고 배열의 길이도 새로운 값으로 변경됩니다.
-
참고로
array.push()의 반환값은새로운 배열의 길이입니다.
const arr = [1,2,3,4,5];
console.log(arr.push(6,7,8,9)) //6
console.log(arr) //[1,2,3,4,5,6,7,8,9]Array.pop()
-
배열의 맨 끝의 요소를 제거하는 메서드입니다.
-
맨 끝에 있는 요소 1개를 제거하기 때문에 argument를 전달하지 않습니다.
-
참고로
array.pop()의 반환값은제거한 요소입니다.
const arr = [1,2,3,4,5];
console.log(arr.pop()) //5
console.log(arr) //[1,2,3,4]배열 앞에 추가, 삭제하는 메서드
Array.unshift()
-
배열의 맨 앞에 요소를 추가하는 메서드입니다.
-
arr.push()와 마찬가지로, 반환값은 값들을 추가된 새로운 배열의 길이입니다.
const arr = [1,2,3,4,5];
console.log(arr.unshift(0)) //6
console.log(arr) //[0,1,2,3,4,5]Array.shift()
-
맨 앞에 있는 요소를 제거하는 메서드입니다.
-
array.pop()과 마찬가지로, argument를 따로 전달하지 않으며 반환값은 제거된 요소입니다.
const arr = [1,2,3,4,5];
console.log(arr.shift()) //2
console.log(arr) //[2,3,4,5]⭐️ 배열에 추가, 삭제하는 메서드 정리
추가하는 메서드를 호출하면 값이 추가된새로운 길이를 반환제거하는 메서드를 호출하면제거된 요소를 반환
배열을 자르는 메서드
Array.slice(startIdx, ednIdx)
-
배열을 시작 인덱스부터 끝나는 인덱스 직전까지 자르는 메서드입니다.
-
원본 배열을 변경하지 않는다는 점을 주의해서 사용해야 합니다.
const arr = [1,2,3,4,5];
console.log(arr.slice(2,4)) //[3,4]
console.log(arr) //[1,2,3,4,5]Array.splice(start, deleteCount, item1...)
-
start부터 deleteCount만큼 잘라 item을 추가하는 메서드입니다.
-
원본 배열이 변경됩니다. (바뀌고 안 바뀌고 기준이 뭐야...?)
-
array.splice()가 반환하는 값은 제거한 요소가 담긴 배열입니다.(제거한 요소가 없을 경우 빈배열)
const arr = [1,2,3,4,5];
console.log(arr.splice(0,2,100)) //[1,2]
console.log(arr) //[100,3,4,5]이 밖에도 다른 메서드들이 있습니다. 여기서는 제가 자주 헷갈리는 것들만 정리했습니다.😊
객체 생성
- 객체 리터럴로 생성할 수 있습니다.
const obj = {};- 객체 생성자 함수로 생성할 수도 있습니다.
const obj = new Object();- 직접 프로퍼티와 값을 초기화할 수도 있습니다.
const obj = { name: "daisy" };객체의 프로퍼티 추가
점표기법
- 점을 통해 객체의 프로퍼티에 접근하고 값을 추가할 수 있습니다.
const obj = {};
obj.name = "daisy";
console.log(obj) //{name: "daisy"}대괄호 표기법
- 대괄호 내부에 프로퍼티를 작성해 프로퍼티에 접근하고 값을 추가할 수 있습니다.
const obj = {};
obj["name"] = "daisy";
console.log(obj); //{name: "daisy"}프로퍼티 존재 여부 확인
in키워드를 사용하면 존재 여부에 따라 true 또는 false를 반환합니다.
const obj = {
name: "daisy",
age: 25
};
console.log("name" in obj); //true
console.log("job" in obj); //false유용한 메서드
Object.keys()
- 객체의 key를 순회해 배열로 반환하는 메서드입니다.
const obj = {
name: "daisy",
age: 25
};
console.log(Object.keys(obj)); //["name", "age"]Object.values()
- 객체의 value를 순회해 배열로 반환하는 메서드입니다.
const obj = {
name: "daisy",
age: 25
};
console.log(Object.values(obj)); //["daisy", 25]객체 순회라고도 할 수 있지만 배열로 값을 반환하기 때문에 임의로 유용한 메서드라고 표현했습니다.😊
객체 순회
-
for...in 반복문을 활용해 객체의 key값을 순회할 수 있습니다.
-
반복문 안에서 value에 접근하고 싶으면 프로퍼티 값에 접근하는 방법을 사용할 수 있습니다.
const obj = {
name: "daisy",
age: 25
}
for(const key in obj){
console.log("key: ", key);
}
//"key: name"
//"key: age"
for(const key in obj){
console.log("value: ", obj[key])
}
//"value: daisy"
//"value: 25"