스파르타 코딩강의 : JavaScript 문법 종합반 1주차 - 객체와 배열
✨ 이번 글에서 사용할 주요 기능
- 객체와 배열의 개념 알기
- 객체와 배열의 요소에 접근하는 방법 알아보기
- 객체와 배열에서 활용할 수 있는 메소드 알아보기
배열
- 변수를 차례대로 저장하는 자료 구조
- 배열을 선언할 때에는 []를 사용
- 배열을 선언할 때 배열에 들어있는 값을 지정할 수도 있고, 배열의 크기만 지정하여 생성할 수도 있다.
- 배열의 요소를 접근할 때에는 인덱스를 사용한다.
- 배열의 인덱스는 0부터 시작하는 것에 유의하자.
- 배열이 제공하는 메소드
- push() : 배열에 맨 끝에 요소 추가하기
- pop() : 배열의 마지막 요소 삭제하기
- shift() : 배열의 첫번째 요소 삭제하기
- unshift() : 배열의 첫번째 자리에 요소 추가하기
- splice() : 위치를 지정하여 해당 자리에 배열의 요소를 대신 넣기
- slice() : 배열의 인덱스 범위를 지정하여 반환하기
- forEach() : 배열의 요소 중 for문을 도는 것이라고 생각하기
- map() : 기존의 배열을 새로운 배열로 만들어 리턴해주기
- filter() : 조건에 부합하는 배열의 요소값을 리턴해주기
- find() : 배열의 요소 중 조건을 만족하는 첫 번째 요소를 반환하기
배열 활용하기
//배열
//생성 방법 : []
//배열의 인덱스는 0부터 시작함
let fruits = ["사과", "바나나", "오렌지"]
//배열의 크기를 지정하여 생성하기
let number = new Array(5)
console.log(number)
console.log(number.length)
console.log(fruits.length)
//배열에서의 요소 접근하기 : 인덱스
console.log(fruits[0]) //사과 출력하기
console.log(fruits[1]) //바나나 출력하기
//배열 메소드
//push() : 배열에 요소 추가하기
fruits.push("키위")
console.log(fruits)
//pop() : 배열의 마지막 요소 삭제하기
fruits.pop()
console.log(fruits)
//shift() : 배열의 첫번째 요소 삭제하기
fruits.shift()
console.log(fruits)
//unshift() : 배열의 첫번째 자리에 요소 추가하기
fruits.unshift("포도")
console.log(fruits)
//splice() : 위치를 지정하여 해당 자리에 배열의 요소를 대신 넣기
//1번 인덱스부터 1개의 요소를 삭제하고 그 자리에 포도를 넣기
fruits.splice(1, 1, "포도")
console.log(fruits)
//slice() : 배열의 인덱스 범위를 지정하여 반환하기
//1번 인덱스부터 2번 인덱스까지만 잘라서 반환하기
let slicedFruits = fruits.slice(1,2)
console.log(slicedFruits)
//forEach, map, filter, find
//forEach : 배열의 요소 중 for문을 도는 것이라고 생각하기
//콜백 함수 : 매개변수 자리에 함수를 넣는 것
let numbers = [1, 2, 3, 4, 5]
numbers.forEach(function(item){
console.log('item입니다 : ' + item)
item = item+1
})
//map : 기존의 배열을 새로운 배열로 만들어야 하기 때문에 return이 꼭 있어야 함
//항상 원본 배열만큼의 길이값이 리턴된다
let newNumbers = numbers.map(function(item){
return item*2
})
console.log(newNumbers)
//filter : 조건에 부합하는 배열의 요소값을 리턴함
let filteredNumbers = numbers.filter(function(item){
return item <=4
})
console.log(filteredNumbers)
//find : 배열의 요소 중 조건을 만족하는 첫 번째 요소를 반환하기
let result = numbers.find(function(item){
return item >= 3
})
console.log(result)객체
- 하나의 변수에 여러 개의 속성을 저장하여 관리할 수 있는 자료구조
- 기본 형태 : 변수 이름 = {속성 : 속성값}
- 생성자 함수를 이용하여 객체를 생성할 수 있다.
- 객체의 요소에 접근할 때에는 "객체 이름.속성"을 이용한다.
- 객체가 제공하는 메소드
- Object.keys() : key를 가져오기
- Object.values() : value 가져오기
- Object.entries() : keys와 values를 묶어서 배열로 가져오기 (2차원 배열)
- Object.assign() : 객체를 복사한다
- 객체 비교 : 객체의 속성값이 다르면 === 연산자로 비교할 경우 false 반환함 -> 객체를 저장하는 주소가 다르기 때문
- JSON.stringify : 문자열화하여 비교하면 속성이 같은 두 객체를 비교했을 때 true 반환- 객체 병합 : ... : spread operator 이용하기
객체 활용하기
//객체 : key-value pair
//하나의 변수에 여러개의 속성값을 넣을 수 있음
//기본적인 객체 생성 방법
let person = {
age : 24,
name : "김정원"
};
//생성자 함수를 이용한 객체 생성 방법
function Person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
}
let person1 = new Person("홍길동", 30, "남자")
let person2 = new Person("홍길순", 30, "여자")
//객체에 접근하는 방법
console.log(person1.name)
console.log(person.age)
//객체 메소드(객체가 가진 여러가지 기능 : Object.~~~)
//Object.keys() : key를 가져오기
let keys = Object.keys(person);
console.log(keys)
//Object.values() : value 가져오기
let values = Object.values(person);
console.log(values)
//Object.entries() : keys와 values를 묶어서 배열로 가져오기 (2차원 배열)
let entries = Object.entries(person);
console.log(entries)
//Object.assign() : 객체를 복사한다
let newPerson = {};
let newPerson2 = {};
Object.assign(newPerson, person);
console.log("newPerson : ", newPerson)
Object.assign(newPerson2, person, {gender:"남자"})
console.log("newPerson2 : ", newPerson2)
//객체 비교 : 객체의 속성값이 다르면 === 연산자로 비교할 경우 false 반환함 -> 객체를 저장하는 주소가 다르기 때문
//JSON.stringify : 문자열화하여 비교하면 속성이 같은 두 객체를 비교했을 때 true 반환
//객체 병합
//... : spread operator
let person3 = {
name : "홍길동",
age : "30"
}
let person4 = {
gender : "남자"
}
//person3와 person4를 합침
let perfectMan = {
...person3, ...person4
}
console.log(perfectMan)
0w0