■ 내용정리
<배열>
· string에서도 문자열을 구분지어서 처리
const str = "안녕하세요"
console.log(str[1]) // 배열이 아니지만, [1] 이렇게 값을 출력가능
console.log(str.length)
· 배열 만들기
배열은 [...] 형식으로 만듭니다.
// 배열안에 배열을 넣을수도 있고, 다양한 구성을 할수 있습니다.
const array = [273, 'String', true, function () {}, {}, [23,4,5,5], undefined]
console.log(array.length) // 7
· 배열 뒷부분에 요소 추가하기
3가지 방법이 있습니다.
1) 배열.push(요소)
2) 배열 뒷부분에 요소 추가
3) 인덱스를 식별해서 추가
// case1
const data1 = ["가", "나", "다"]
data1.push("라")
console.log(data1) // [ '가', '나', '다', '라' ]
// case2
const data2 = ["가", "나", "다"]
data2[10] = "라"
console.log(data2) // [ '가', '나', '다', <7 empty items>, '라' ]
console.log(data2.length) // 11, 빈값까지 포함해서 길이에 포함
console.log(data2[5]) // 빈값으로 정의한 것은 undefined 의 값을 가집니다.
// case3
const data3 = ["가", "나", "다"]
data3[data3.length] = "라" // 마지막 index를 지정한다.
console.log(data3) // [ '가', '나', '다', '라' ]
· 배열 요소 제거하기
1) 인덱스를 기반으로 제거하기 : splice() 이용
L splice는 접합의 의미로, 제거하는 역활 또는 중간에 넣을때도 사용 가능 / slice와 splice를 혼돈하면 안됩니다.
- slice에 대해서 살펴보기
// slice는 배열, 문자열 모두 사용이 가능합니다.
// slice의 결과값은 잘라낸, 결과값이 있고
// 원본데이터 Item은 그대로 유지된다.
const item = ["가", "나", "다"]
const result = item.slice(1) // result : [ '나', '다' ] / item : [ '가', '나', '다' ]
const result = item.slice(1,2) // result : [ '나' ] / item : [ '가', '나', '다' ]
const item = "가나다라마"
const result = item.slice(1) // result : 나다라마 / item : 가나다라마
const result= item.slice(2,4) // result : 다라 / item : 가나다라마
- splice에 대해서 살펴보기
: 사용법 - 배열.splice(인덱스, 제거할 요소의 개수)
// splice 배열에만 사용이 가능하고, 문자열에서는 사용불가능하다
// slice의 return값은 제거된 요소가 배열로 리턴됩니다
// 원본데이터 Item의 항목이 제거된다.!!!
const item = ["가", "나", "다"]
const result = item.splice(1) // result : [ '나', '다' ] / item : [ '가' ]
const result = item.splice(1,2) // result : [ '나', '다' ] / item : [ '가' ]
const item = "가나다라마"
const result = item.splice(1) // 오류 TypeError: item.splice is not a function
const result= item.splice(2,4) // 오류 TypeError: item.splice is not a function
2) 값을 기반으로 제거하는 경우
// 값으로 삭제하는 것은 indexOf를 활용한 응용기법
// 실제 값을 넣어서 삭제하는 방법은 아니다.
const item = ["사과", "배", "바나나"]
const index = item.indexOf("바나나")
item.splice(index, 1) // 특정값을 삭제하니, 갯수는 1이다.
console.log(item) // [ '사과', '배' ], 바나나가 삭제된 결과
· 배열안에 동일한 값을 한번에 모두 제거하는 방법
java의 stream처리와 비슷한 문법입니다. 뒤에 더 자세히 다루는 chapter가 있습니다.
const item = ["가", "나", "다", "가", "가", "라", "가"]
const result = item.filter( (item) => item !="가")
console.log(result) // [ '나', '다', '라' ]
· 특정 위치에 요소 추가하기
형식 : 배열.splice(인덱서, 0, 추가요소)
// 아래 예시를 보면, 의도한대로 특정 배열에 넣기 위해서는 두번째 인자를 0을 사용해야 한다.
// 0을 넣으므로써, 삭제를 하지만 실제 삭제된것이 없는 것이다.
const item = ["가", "나", "다", "라", "마", "바", "사"]
item.splice(2, 0, "ADD_TEXT") // [ '가', '나', 'ADD_TEXT', '다', '라', '마', '바', '사' ]
item.splice(2, 2, "ADD_TEXT") // [ '가', '나', 'ADD_TEXT', '마', '바', '사' ]. 2개의 항목 (다,라)가 삭제된 예시
item.splice(2, 3) // [ '가', '나', '바', '사' ], 3개의 항목, (다,라,마) 가 삭제된 경우
item.splice(2) // [ '가', '나' ] , 삭제할 갯수를 지정하지 않으면, 마지막 항목까지 모두 삭제됨
console.log(item)
<반복문>
for문으로 구성된 다양한 방법이 있습니다.
· for in 반복문 / for of 반복문 / for 반복문
보통은 for 반복문만 일반적으로 생각하는데, 다양한 방법을 알아둘 필요가 있습니다.
반복문을 사용시. for in보다, for of / for반복문을 주로 사용하는 것이 더 좋습니다.
· for in 반복문
index를 반환해서, 실제 값을 사용하기 위해서는 배열[키]를 통해서 사용해야 합니다.
그래서 해당 배열에 문제가 있을때, 오류가 발생할수 있기 때문에 사용하기에 안정성이 떨이지는 부분이 있습니다.
const todos = ["가", "나", "다", "라", "마"]
for (const todosKey in todos) {
console.log(`${todosKey}번째 글자는 ${todos[todosKey]}`)
}
console.log("--------------------------")
for (let todosKey in todos) {
console.log(`${todosKey}번째 글자는 ${todos[todosKey]}`)
}
/* 결과
0번째 글자는 가
1번째 글자는 나
2번째 글자는 다
3번째 글자는 라
4번째 글자는 마
--------------------------
0번째 글자는 가
1번째 글자는 나
2번째 글자는 다
3번째 글자는 라
4번째 글자는 마
*/
· for of 반복문
배열과 같은 경우, 바로 값을 사용할때 for of 를 사용하면 좋다.
// 반복변수에 요소의 값이 바로 들어가서, 바로 사용가능합니다.
const todos = ["가", "나", "다", "라", "마"]
for (const todo of todos) {
console.log(`배열안에 값=${todo}`)
}
· for 반복문
가장 일반적인 횟수만큼 반복을 한다.
이 부분이 조금 이해가 가지 않는다. for~in방식을 사용해도 index를 통해서 값을 호출해서 사용하는데, 어떠한 부분이 더 위험하다고 책에서 설명하는지 조금 더 알아봐야 할것 같다.
const todos = ["가", "나", "다", "라", "마"]
for (let i = 0; i < todos.length; i++) {
console.log(`index=${i}이고, 값은 ${todos[i]}`)
}
· while문
// while문에 조건으로 confirm을 사용할수 있따.
let i = 0;
while (confirm("계속 진행할까요?")){
alert(`${i}번째 반복입니다.`)
i = i + 1;
}· break : for, while, switch등 반복문을 벗어날때 사용하는 키워드
· continue : 반복문안의 반복 작업을 멈추고, 반복문의 처음으로 돌아가 다음 반복작업을 진행
■ 기본미션
· 비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기
· 정의
1. 비파괴적 처리 : 원본이 변경되지 않는다
2. 파괴적 처리 : 원본이 변경된다.
3. 동작요소 : 자료처리연산자, 함수, 메소드
위에서 예시를 든 slice, splice을 통해서 원본이 변경되는경우, 안되는 경우를 확인했다.
· 이렇게 구분지은 이유는, 즉 원본 데이터를 수정하는지 수정안하는 방법을 택하는지는 메모리 영역을 효율적으로 관리, 사용하기 위함입니다. 최근에는 메모리의 공간이 예전보다 충분하기 때문에 프로그램 적으로 "비파괴적인 처리"를 많이 사용합니다.
■ 선택미션
// case1 : 비파괴적(원본 유지)
// 문자열형태
const strA = "사과,배,바나나,귤"
const strATmp = strA.split(",")
console.log(strATmp) // [ '사과', '배', '바나나', '귤' ]
console.log(strA) // 사과,배,바나나,귤
console.log("--------------------------")
// case2 : 파괴적(원본이 변경됨)
// 배열
const arrayB = ["사과", "배", "바나나", "귤"]
const arrayBTmp = arrayB.push("감")
console.log(arrayBTmp) // 5
console.log(arrayB) // [ '사과', '배', '바나나', '귤', '감' ]
console.log("--------------------------")
// case3 : 비파괴적(원본 유지)
const arrayC = [1,2,3,4,5]
const arrayCTmp = arrayC.map((x) => x*x)
console.log(arrayCTmp) // [ 1, 4, 9, 16, 25 ]
console.log(arrayC) // [ 1, 2, 3, 4, 5 ]
console.log("--------------------------")
// case4 : 비파괴적(원본 유지)
const strD = "여백이 포함된 메세지 "
const strDTmp = strD.trim();
console.log("[" + strDTmp + "]") // [여백이 포함된 메세지]
console.log("[" + strD + "]") // [여백이 포함된 메세지 ]
