BOM (Browser Object Model)
BOM은 웹 브라우저와 상호작용하는 데 사용되는 객체들의 계층 구조를 나타냅니다. 웹 브라우저가 제공하는 API들을 통해 BOM을 사용하여 웹 페이지의 브라우저와 관련된 속성과 기능에 접근할 수 있습니다. BOM은 웹 브라우저 자체를 제어하고 관리하는 기능들을 포함합니다. 예를 들어, 브라우저 창의 크기 조절, 브라우저의 히스토리 조작, 타이머 설정 등이 BOM에 속하는 기능입니다.
DOM (Document Object Model)
DOM은 웹 페이지의 문서 구조를 표현하는 객체들의 계층 구조입니다. 즉, HTML, XML 또는 XHTML로 작성된 문서의 각 요소들을 계층적으로 표현하고, 이들에 접근하고 조작하는 방법을 제공합니다. DOM은 웹 페이지의 구조와 콘텐츠에 접근하여 동적으로 웹 페이지를 변경하거나 조작하는 데 사용됩니다. 예를 들어, JavaScript를 사용하여 DOM을 조작하여 웹 페이지의 내용을 추가, 삭제, 수정하거나 이벤트를 처리할 수 있습니다.
push
배열의 뒤에 값을 추가함(반환값 : 배열의 크기)
let arr = [1,2,3,4]
arr.push(5)
console.log(...arr) // 1 2 3 4 5pop
뒤에서 값을 꺼내고 반환(반환값 : 꺼낸 값)
let arr = [1,2,3,4,5]
arr.pop()
console.log(...arr) // 1 2 3 4unshift
배열의 앞에 값을 추가함 / 여러 개 추가도 가능(반환값 : 배열의 길이)
let arr = [1,2,3,4]
arr.unshift(10,20)
console.log(...arr) // 10 20 1 2 3 4shift
배열의 앞에서 값을 꺼내고 반환(반환값 : 꺼낸 값) 한개씩만 값이 꺼내짐
let arr = [1,2,3,4]
arr.shift()
console.log(...arr) //2 3 4splice
배열에 지정한 부분을 없애고 원하는 값을 넣음
💡 splice는 원본을 수정함arr.splice(start, deleteCount, item1, item2, ...)
let arr = [10,20,30];
arr.splice(1,0,100); // 1번째에 0개를 지우고 100을 넣어라
console.log(...arr); // 10, 100, 20, 30
let arr = [10,20,30];
arr.splice(1,1,100,200); // 1번째에 1개를 지우고 100과 200을 넣어라
console.log(...arr); // 10, 100, 200, 30
// 만들고 싶은 값: [10, 1, 2, 3, 20, 30, 40, 1, 2, 3, 100]
let arr = [10,20,30,40];
let x = [1,2,3];
arr.splice(1,0,...x);
arr.splice(7,0,...x);
arr.push(100);
let arr = [10,20,30,40];
arr.splice(1); //1번째부터 끝까지 다 지워라
arr.splice(1, 2); //1번째부터 2개를 지워라(삽입값은 없음)slice
배열을 자름
💡 slice는 원본을 수정하지 않음arr.slice(start, end)
let arr = [1, 2, 3, 4];
arr.slice(1,3); //1번째부터 3번째 전까지 자른다. //[2,3]sort
//에러가 발생하지 않는 코드
// data.sort((a, b) => (a[key] > b[key] ? -1 : (a[key] < b[key] ? 1 : 0)))
//sort는 사전식 정렬이어서 그냥 sort()를 하게 되면 제대로 정렬이 되지 않을 수 있다.
ex) let data = [1, 11, 2, 111, 22];
data.sort(); //[1, 11, 111, 2, 22]
//문자 정렬
data.sort((a, b) => (a < b ? -1 : (a > b ? 1 : 0))) //오름차순 [1, 2, 11, 22, 111]
data.sort((a, b) => (a > b ? -1 : (a < b ? 1 : 0))) //내림차순 [111, 22, 11, 2, 1]
//숫자 정렬
data.sort((a,b)=>a-b) //오름차순 [1, 2, 11, 22, 111]
data.sort((a,b)=>b-a) //내림차순 [111, 22, 11, 2, 1]forEach(콜백함수)
💡 forEach는 return, break, continue를 사용할 수 없음.arr.forEach((value, index, array)=>{})
//배열의 모든 요소를 더하는 코드
let arr=[1, 2, 3, 4, 5]
let sum = 0
arr.forEach(v=>{
sum += v
})
console.log(sum) // 15
//짝수 인덱스의 값을 더하는 코드
let arr = [1,2,3,4,5,6,7,8,9,10]
let sum = 0
arr.forEach((v,i)=>{
if(i%2==0){
sum += v
}
})
console.log(sum) // 30
//forEach로 배열 값 바꾸기
let arr = [1,2,3,4]
arr.forEach((v,i,arr)=>{arr[i]=v**2})
console.log(...arr) // 1 4 9 16map
arr.map((value,index,arr)=>{return value;})
let arr = [1,2,3,4]
console.log(arr.map((v)=>v**2)) // [1, 4, 9, 16]forEach VS map
- forEach는 return값이 없고 map은 return값이 있다.
- map은 새로운 배열을 만들고, forEach는 새로운 배열을 만들지 않고 순회 돌며 실행만 한다.
let arr = [1,2,3,4]
arr.forEach((v,i,arr)=>{arr[i]=v**2})
console.log(...arr) // 1 4 9 16
let arr = [1,2,3,4]
arr.map((v,i,arr)=>v=v**2) //[1, 4, 9, 16]
console.log(...arr) // 1 2 3 4filter
let arr = [1,2,3,4,5,6,7,8,9,10]
let result = arr.filter(v=>v%2===0)
console.log(...result) //2 4 6 8 10
let arr = [1,2,3,4,5,6,7,8,9]
let result = arr.filter(v=>{return v>5})
console.log(...result) //6 7 8 9reduce
[10, 20, 30, 40, 50].reduce((a, c) => a + c, 0) // 암기코드
//150
[10, 20, 30, 40, 50].reduce((a, c) => a + c) // Xincludes
안에 특정 문자가 포함되어있으면 true를 반환 없으면 false를 반환
const arr1 = ['hello', 'world', 'minju']
arr1.includes('world') //true
const arr1 = ['hello', 'world', 'minju']
arr1.includes('min') //falsejoin
배열 안 요소들을 원하는 문자를 기준으로 합친다.
let arr = ['hello', 'world', 'minju']
arr.join('!') //hello!world!minju
let arr = ['010', '1234', '5678']
arr.join('-') //010-1234-5678reverse
배열 안 요소들을 뒤집음
[10, 20, 30].reverse() //[30,20,10]배열 만들기
let arr = Array(10) //[empty*10]
//arr안에 모든 값을 0으로 만들기
let arr = Array(10).fill(0) //[0,0,...,0]
//arr안에 1부터 10까지 차례대로 넣기
let arr = Array(10).fill(0).map((_,i)=>i+1); //[1,2,3,4,...,10]
//짝수 원소들만 넣기
let arr = Array(10).fill(0).map((_,i)=>i+1).filter((v)=>v%2===0); //[2,4,6,8,10]sort
//숫자 정렬
let numbers = [1,4,2,3,5,6];
numbers.sort(function(a,b){
return a - b;
})
// [1,2,3,4,5,6]
//문자 정렬
let avengers = ["spiderman", "ironman", "hulk", "thor"];
avengers.sort();
avengers.sort(function(a,b){
if(a<b) return -1;
else if(a>b) return 1;
else return 0;
});
// ['hulk', 'ironman', 'spiderman', 'thor']객체
여러개의 데이터를 한 변수에 저장할 수 있는 자료형.
VS 배열 : 배열이 값에 접근하기 위해서는 인덱스 번호를 이용, 객체는 특별한 키(key)를 통해 원하는 값(value)에 접근 할 수 있는 키-쌍 값으로 이루어져 있다.
key-value 쌍 → 속성이라 표현
속성의 값이 함수인 경우 → 메소드
const talent = {
name: "suzi",
age: 28,
from: "MISS-A",
greeting(){
console.log("Hi, I'm suzi. Nice to meet you");
}
};객체의 속성값에 접근- 두가지 방법
console.log(`${talent.name} from ${talent.from}`);
console.log(`${talent['name']} from ${talent['from']}`);객체에 속성을 추가
talent.company = "매니지먼트 숲";객체에서 속성 삭제
delete talent.company;in연산자를 이용 → 특정 프로퍼티가 객체 안에 존재하는지 확인가능
console.log('age' in talent); //true
console.log('gender' in talent); //false객체의 메소드
1. hasOwnProperty()
hasOwnProperty() 메소드는 객체가 특정 프로퍼티를 가지고 있는 지를 나타내는 불리언 값을 반환
const aespa = {
members: ['카리나', '윈터', '지젤', '닝닝'],
from: '광야',
sing: function(){
return "적대적인 고난과 슬픔은 널 더 popping 진화시켜!"
}
};
console.log(aespa.hasOwnProperty('itzy')); //false
console.log(aespa.hasOwnProperty('from')); //true2. keys(), values()
Object.keys() 메소드는 객체의 속성 이름(key)들을, Object.values() 메소드는 객체의 속성 값(value)들을 배열로 반환
console.log(Object.keys(aespa)); //(3) ['members', 'from', 'sing']
console.log(Object.values(aespa)); //(3) [Array(4), '광야', ƒ]
ex)
const person = {
name: "민주",
age: 20,
gender: "male",
};
const keys = Object.keys(person);
console.log(keys); // (3) ['name', 'age', 'gender']
for (let i = 0; i < keys.length; i++) {
console.log(`key: ${keys[i]} , value : ${person[keys[i]]} `);
}3. for… in
객체의 반복을 위해 만들어진 기능
주로 객체 안의 프로퍼티들에 접근하여 어떠한 키와 값을 가지는지 살펴보고 싶거나, 조건에 따라 값을 수정해야 할 경우 사용
const person = {
name: '민주',
age: 26,
gender: 'male'
};
for (let key in person) {
console.log(`${key}: ${person[key]}`);
}
// name: 민주
// age: 26
// gender: male
}
나의 기억저장소