배열
생성
- 기본 생성
let fruits = ["사과", "바나나", "샤인머스캣"]- 크기 지정: n개의 요소를 가진 배열을 만들 수 있다.
let number = new Array(5);
console.log(number); // <5 empty items>- Array.length: 배열 안에 있는 요소의 갯수를 알 수 있다.
요소 접근
array[0부터 시작하는 인덱스]를 통해 배열 안의 특정 요소에 접근할 수 있다.
배열 메소드 1
- push(): 배열의 마지막에 새로운 요소를 추가한다.
- pop(): 배열의 마지막 요소를 삭제한다.
- shift(): 배열의 첫 번째 요소를 삭제한다.
- unshift(): 배열의 맨 앞에 요소를 추가한다.
- splice(start, deleteCount ,string): start번째 요소부터 deleteCount번째까지 요소를 삭제하고 그 자리에 string요소를 집어 넣는다.
let fruits = ["사과", "바나나", "샤인머스캣"]
fruits.splice(1, 1, "딸기");
console.log(fruits); // ['사과', '딸기', '샤인머스캣']- slice(start, end): start번째 요소부터 end번째 바로 앞 요소까지만 잘라서 새로운 배열을 만든다.
let fruits = ["사과", "바나나", "샤인머스캣"]
fruits.splice(1, 2); // 바나나부터 샤인머스캣 앞까지만 잘라서 새로운 배열을 만든다.
console.log(fruits); // ['바나나']배열 메소드 2
- forEach(function())
콜백함수(매개변수 자리에 함수를 넣는 함수) 중 하나이다. 실행하면 배열 안에 들어있는 요소의 갯수만큼 함수가 실행된다. return 없이도 결과값이 반환된다.
let numbers = [6, 1, 2, 8];
numbers.forEach(function (item) {
console.log("item입니다: " + item);
};
// item입니다: 6
item입니다: 1
item입니다: 2
item입니다: 8- map(function())
반드시 return문이 있어야 하는 콜백함수. 기존의 배열을 가공해서 새로운 배열을 생산하는 역할을 한다. 항상 원본 배열의 길이만큼 return된다. (return문이 없어도 원본 배열의 길이와 같은 undefinend 배열이 만들어진다.)
let numbers = [6, 1, 2, 8];
let newNumbers = numbers.map(function(item) {
return item *2; //기존 배열의 요소 각각에 *2
};
console.log(newNumbers);
// [12, 2, 4, 16]- filter(function())
마찬가지로 return문이 반드시 있어야 한다. return문에 조건이 있고, 그 조건에 맞는 것들을 골라내서 새로운 배열을 반환한다. 따라서 map 메소드와는 다르게 원본 배열의 길이와 항상 같은 길이의 배열이 만들어지는 것은 아니다.
let numbers = [5, 1, 2, 8];
let filteredNumbers = numbers.filtered(function (item) {
return item !==5; //조건으로 기존 배열을 걸러냄
});
console.log(filteredNumbers); // [1, 2, 8] //새로운 배열이 반환- find(function())
마찬가지로 조건이 있는 return문이 있고, 조건에 맞는 첫번째 요소만 찾아낸다.
let numbers = [6, 1, 2, 8];
let result = numbers.find(function (item) {
return item >3; //3보다 큰 첫번째 값을 찾는다
});
console.log(result); // 6반복문
for(초기값, 조건식, 증감식) {}
초기값이 조건에 도달하기 전까지 계속 초기값에 증감식을 적용한다.
for (let i = 0; i < 5 ; i++) {
console.log("for문 작동중" + i);
}
// for문 작동중 0
for문 작동중 1
for문 작동중 2
for문 작동중 3
for문 작동중 4
- 배열과 for문은 짝궁이다. 같이 쓰이는 경우가 아주 많음!
const arr = ["one", "two", "three", "four"]
for (let i = 0; i < arr.length; i++) { //배열의 갯수에 도달하기 전까지 계속
console.log(i, arr[i]);
}
// 0, one
1, two
2, three
3, four- 0부터 10까지의 수 중에서 2의 배수만 console.log()로 출력해보기
나는 이렇게 했는데, 처음에 증감식을 i+2로 했더니 터미널창에 무한의 2가 발생하는 문제가 발생했다. 이렇게 하면 값을 i에 할당하지 못한 채로 함수가 끝없이 반복되기 때문에 i+=2로 고쳤더니 제대로 값을 얻을 수 있었다. 그런데 강사님의 모범답안은 뭐랄까 훨씬 더 수학적이고 고차원적인 법이었다...
for (let i = 0 ; i < 11; i++) {
if (i >=2) {
if (i % 2 === 0) { // 2로 나누었을 때 나머지가 없으니까 2의 배수 맞다
console.log(i + "는 2의 배수입니다.");
}
}
}for - in문
객체의 속성을 출력한다.
- 객체의 value에 접근하는 방법
let person = {
name: "Jin",
age: 25,
gender: "female",
}
for (let key in person) {
console.log(person[key]);
}
// Jin
25
femalewhile문
- while (조건) {}: 조건에 맞는 동안 함수를 실행한다.
- 3초과 100미만 중 5의 배수만 출력해보기:
3을 초과한다는 조건 때문에 함정에 빠진 경우였다. while 조건에 (3<i<100)이런 식으로 넣었더니 혼돈의 카오스에 빠지게 됐다.
뭐야 이거 무서워.jpg
이번에는 i++도, i+=1로도 무한루프 문제를 해결할 수 없었다. 그냥 i를 처음부터 3으로 지정했더니 해결(?)됐다.
do - while문
일단 한번 코드를 실행한 다음에 조건문을 실행한다.
let i = 0;
do {
console.log(i);
i++;
} while (i > 10);
// 0은 10보다 작아 while 조건에 맞지 않지만 do로 인하여 최초 1번은 코드가 실행된다. (0 출력)break continue문
for (i = 0 ; i <=10 ; i++) {
if (i === 5) {
break; // i가 5가 되는 순간 for 조건 종료
}
console.log(i);
}
// 0 1 2 3 4
for (i = 0; i <=10; i++) {
if (i === 5) {
continue; // i가 5가 되면 다음으로 넘어가서 계속함
}
console.log(i);
}
// 0 1 2 3 4 6 7 8 9 10