1. 배열
배열은
순서가 있는 값(요소, element)이다. 순서는인덱스라고 부르며, 1이 아닌0부터번호를 매긴다. 대괄호([ ])를 이용해서 배열을 만들고 각각의 요소는쉼표로 구분해준다.
1-1. 배열의 index
✍️ 값은 인덱스를 이용해 접근한다.
let myNumber = [ 73, 98, 86, 61, 96 ];
//myNumber라는 배열의 3번째 인덱스의 값을 변경하려면
myNumber[3] = 200;
myNumber; // [ 73, 98, 86, 200, 96 ]let fruits = [ 'banana', 'apple', 'pineapple' ];
// fruits의 2번째 인덱스 값은?
fruits[2]; // 'pineapple'
// fruits의 3번째 인덱스 값은?
fruits[3]; // undefined✍️ 배열의 요소가 배열인 이중배열(2차원 배열)
let myNumber = [ [13, 30], [73, 8], [47, 17] ];
// myNumber의 1번째 인덱스 값은?
myNumber[1]; // [73, 8]
// myNumber의 1째 인덱스값의 0번째 인덱스 값은?
myNumber[1][0]; // 731-2. length 배열의 길이
let myNumber = [ 73, 98, 86, 61 ];
// myNumber라는 배열의 길이를 알아내려면
myNumber.length; // 41-3. 배열의 반복
✍️ 반복문을 이용해 배열의 요소(element)를 한번씩 출력하려면?
let myNum = [ 73, 98, 86, 61 ];
for( let n = 0; n < myNum.length; n++ ){
console.log(myNum[n])
}✍️ 배열의 모든 요소를 누적해서 더한 값을 구하려면?
let sum = 0;
for( let n = 0; n < myNum.length; n++ ){
sum = sum + myNum[n]
}
1-4. 배열에 사용되는 메서드(method)
Array.isArray()배열인지 아닌지 판별
let words = [ '피', '땀', '눈물' ];
Array.isArray(words) // truepush()배열의 끝에 값을 추가
let arr = [ 'code', 'states' ];
arr.push('pre'); // arr 배열의 끝에 'pre'라는 값을 추가pop()배열의 마지막 값을 삭제
arr.pop(); // arr 배열의 마지막 값을 삭제shift()배열의 처음 값을 삭제
let arr = [ 'code', 'states' ];
arr.shift(); // arr 배열의 처음 값을 삭제unshift()배열의 처음에 값을 추가
let arr = [ 'code', 'states' ];
arr.unshift('creative'); // arr 배열의 처음에 'creative'라는 값을 추가indexOf배열에 특정 값이 포함되어 있는지 확인, 포함되어 있지 않으면-1
let words = [ 'Radagast', 'the', 'Brown' ]
words.indexOf('the') // 1
words.indexOf('Brown') // 2
words.indexOf('없는단어') // -1
words.indexOf('Brown') !== -1 // true
words.indexOf('없는단어') !== -1 // falseincludes()배열에 특정 값이 포함되어 있는지 boolean값으로 반환
words.includes('Brown') // true
words.includes('없는단어') // false✍️ indexOf()와 inclues()가 비슷하지만 indexOf가 배열의 정보도 알 수 있고 브라우저 호환성이 더 좋기 때문에 indexOf가 더 유용하다.
split('separator', limit)
split을 문자열에 사용하면 구분자를 기준으로 여러개의 문자열로 나누고배열로 반환한다.separator와limit은 생략가능하나생략하면 문자열 원본을 담은 배열을 반환한다.
const str = 'The quick brown fox jumps over the lazy dog.';
const words = str.split(' ');
console.log(words[3]); // "fox"
const chars = str.split('');
console.log(chars[8]); // "k"
const strCopy = str.split();
console.log(strCopy);
// Array ["The quick brown fox jumps over the lazy dog."]join('separator')배열의 모든 요소를 연결해 하나의 문자열로 만듬
separator는 필요한 경우 문자열로 변환된다.생략하면 배열의 요소들이 쉼표로 구분됩니다.separator가 빈 문자열이면 모든 요소들이 사이에 아무 문자도 없이 연결됩니다.
const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join());
// expected output: "Fire,Air,Water"
console.log(elements.join(''));
// expected output: "FireAirWater"
console.log(elements.join('-'));
// expected output: "Fire-Air-Water"slice(begin, end)배열의 begin부터 end까지(end 미포함) 잘라서새로운 배열 객체로 반환한다. 이 때 원본 배열은 바뀌지 않는다.
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// ["camel", "duck"]
console.log(animals.slice(1, 5));
// ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2));
// ["duck", "elephant"]
console.log(animals.slice(2, -1));
// ["camel", "duck"]
console.log(animals.slice());
// ["ant", "bison", "camel", "duck", "elephant"]splice(start, deleteCount, item1, item2m ...)
배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.
start배열의 변경을 시작할 인덱스. 배열이 길이보다 큰 값이면 실제 시작 인덱스는 배열의 길이로 설정된다. 음수인 경우 배열의 끝에서부터 요소를 세어나간다. 값의 절대값이 배열의 길이보다 큰 경우 0으로 설정된다.
deleteCount배열에서 제거할 요소의 수
item배열에 추가할 요소아무 요소도 지정하지 않으면 요소를 제거하기만 한다.
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "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"]2. 객체
데이터의 값은 다르지만 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있다.
배열과 객체의 특징을 구분, 개발시 어떻게 사용되는지
객체 속성의 추가,조회,변경,삭제
객체 속성 조회법 dot notation, bracket notation
2-1. 객체 기초
✍️ 객체는 키와 값의 쌍(key-value pair)으로 이루어져 있다. 중괄호({ })를 이용해서 객체를 만들고 키-값 쌍은 쉼표(,)로 구분해준다.
let user = { //중괄호를 이용해서 객체를 만듬
// 키(key) : '값(value)'
firstName : 'Steve', //키-값 쌍을 쉼표로 구분
lastName : 'Lee',
email : 'steve@codestates.com',
city : 'Seoul'
}2-2. 객체 조회하기
✍️ 객체를 사용하는 방법은 두 가지가 있다.
- 방법 1
Dot notation
user.fisrtName; //'Steve'
user.city; //'Seoul'- 방법 2
Bracket notation
user['firstName']; // 'Steve'
user['city']; // 'Seoul'✍️ stevelee라는 아이디를 가진 유저가 SNS에 새로운 글을 올렸습니다. 그가 작성한 글의 내용을 bracket nontaion으로 어떻게 가져올 수 있을까요?
let tweet = {
writer : 'stevelee',
createdAt : '2022-07-08 09:41:33',
content : '프리코스 재밌어요!'
}
tweet['content']; // '프리코스 재밌어요!'2-3. 객체 다루기
✍️ Dot/Bracket notation을 이용한 값 추가
let tweet = {
writer : 'stevelee',
createdAt : '2022-07-08 09:41:33',
content : '프리코스 재밌어요!'
}
// Bracket notaion 방법으로 category : '잡담' 을 추가
tweet['category'] = '잡담';
// Dot notaion 방법으로 isPublic : true 을 추가
tweet.isPublic = true;
// 배열을 추가할 수 있다.
tweet.tags = ['#코드스테이츠', '#프리코스'] 추가;✍️ delete 키워드를 이용한 삭제
let tweet = {
writer : 'stevelee',
createdAt : '2022-07-08 09:41:33',
content : '프리코스 재밌어요!'
}
// createAt 키-값 쌍을 삭제
delete tweet.createAt;
console.log(tweet);
// {writer : 'stevelee', content : '프리코스 재밌어요!'}✍️ in 연산자를 이용한 키 확인
let tweet = {
writer : 'stevelee',
createdAt : '2022-07-08 09:41:33',
content : '프리코스 재밌어요!'
}
'content' in tweet; // true
'updateAt' in tweet; // false✍️ Object.keys() 함수를 이용해 객체의 키들의 배열 구하기
let obj = {
name : 'lee',
age : 30,
city : 'seoul'
}
console.log(Object.keys(obj)) // ['name', 'age', 'city']
console.log(Object.keys(obj).length) // 3✍️ Object.values() 함수를 이용해 객체의 키값들의 배열 구하기
let obj = {
name : 'lee',
age : 30,
city : 'seoul'
}
console.log(Object.values(obj)) // ['lee', 30, 'seoul']✍️ Object.assign()
let obj1 = { a : 1, b : 2 };
let obj2 = { b : 3, c : 4 };
let obj3 = Object.assign(obj1, obj2)
console.log(obj3) // { a : 1, b : 3, c : 4 }
console.log(obj1) // { a : 1, b : 3, c : 4 }✍️ Array.from()
유사배열객체나 반복 가능한 객체를 얕게 복사해 새로운 Array객체를 만든다.
<FrontendDeveloper name="seungmin😊" />