[본 캠프 7일차] JavaScript 문법 종합밥 1주차 강의 마무리
배열
● 생성
- 기본 생성
- 대괄호를 이용하고 콤마(,) 로 각각의 요소들을 구분할 수 있다.
let fruits = ["사과", "바나나", "오렌지"];
0 1 2
console.log(fruit.length);
3 - 크기 지정
- 5개의 요소를 가지고 있는 배열을 만들 수 있다
let number = new Array(5);
console.log(number.length);
5
배열의 length 는 진짜 많이 쓴다.
배열의 길이를 가지고 연산하는 문제가 많다.
● 요소 접근
- for문과 배열은 짝꿍이다.
console.log(fruits[0]); // 사과
console.log(fruits[1]); // 바나나
console.log(fruits[2]); // 오렌지
● 배열 메소드
- push
- 배열에 요소를 추가한다.
let fruits = ["사과", "바나나"];
fruits.push("오렌지");
console.log(fruits);
[ '사과', '바나나', '오렌지'] - pop
- 배열 마지막 요소를 삭제한다.
let fruits = ["사과", "바나나"];
fruits.pop();
["사과"]; - shift
- 배열 첫번째 요소를 삭제한다.
let fruits = ["사과", "바나나", "키위"];
fruits.shift();
console.log(fruits);
["바나나", "키위"]; - unshift
- 배열 첫번째 요소에 추가한다.
let fruits = ["사과", "바나나", "키위"];
fruits.unshift("포도");
console.log(fruits);
["포도", "사과", "바나나", "키위"]; - splice
- 위치를 지정하여 시작과 끝지점의 요소를 삭제 후 다른 요소를 추가한다.
let fruits = ["사과", "바나나", "키위"];
fruits.splice(1, 1, "포도");
console.log(fruits);
["사과", "포도", "키위"]; // 첫번째 시작점부터 첫번째 끝까지 삭제 후 요소를 추가 - slice
- 위치를 지정하여 시작점과 끝점까지 새로운 배열로 만든다.
let fruits = ["사과", "바나나", "키위"];
let slicedFruits = fruits.slice(1, 2); // 두번째 요소부터 세번째 요소까지 새로운 배열로 만든다.
console.log(slicedFruits);
[ '바나나' ] - foreach
- 각 요소들을 한번씩 다 순회를 돌며 어떤 작업을 수행하는 것
let numbers = [4, 2, 3, 1, 5]; // 배
numbers.foreach(function(item){
console.log(item);
});
4 2 3 1 5 // 각 요소 하나씩 5번 작업을 수행
* 실행된 횟수(5번)는 배열의 개수와 일치한다.
// 매개변수 자리에 함수를 넣는 것 : 콜백함수
// (매개변수) 값자리에 function () {} (함수) 를 넣는다.
// function(콜백함수)의 input 에는 item 이나 i 등 다양한 이름을 넣는다.
// 원본 배열이 아닌 새로운 배열을 사용할 땐 새로운 값을 지정한다. (밑에 다시 강조) - map
- 기존에 있던 배열을 수정해서 새로운 배열을 만든다.
let numbers = [4, 2, 3, 1, 5];
let newNumbers = numbers.map(function(item){
return item * 2; // return 수정한 값
});
console.log(newNumbers);
[8, 4, 6, 2, 10]
// map 함수에 들어가는 function은 반드시 return 문을 사용해야 한다.
// 항상 원본 배열의 길이만큼이 return 된다. - filter
- map 과 달리 return 수정한 값이 들어가는 게 아니라 조건이 들어간다.
let numbers = [4, 2, 3, 1, 5];
let filteredNumbers = numbers.filter(function(item){
return item === 3;
});
console.log(filteredNumbers);
[3]
return item !== 3;
[4, 2, 1, 5]
return item > 3;
[4, 5]
// map과는 다르게(5) 조건에 해당되는 요소만 리턴한다. - find
- return 문을 통해 조건문에 맞는 첫번째 들어오는 요소만 반환한다.
let numbers = [4, 2, 3, 1, 5];
let result = numbers.find(function(item){
return item > 3;
});
console.log(result);
4
* foreach 를 제외하고 나머지는 다 return 문이 필요했고, 새로운 배열이 나옴으로써 새로운 값으로 받아줘야 한다.
for문
- for, while => ~ 하는 동안 : 반복문
// for (초기값; 조건식; 증감식) {한사이클}
for (let i = 0; i < 10; i++) { // i라는 변수는 0부터 시작 = 초기값
console.log(i); // i라는 변수가 10에 도달하기 전까지 계속 진행 = 조건식
} // i라는 변수는 한 사이클이 돌고 나면 1을 더한다. = 증감식
0 1 2 3 4 5 6 7 8 9
// 배열과 for 문은 짝꿍이다.
const arr = ["one", "two", "three", "four", "five"];
for (let i = 0; i < arr.length; i++) { // i를 0부터, arr의 length보다 작을 때 까지, 1을 더한다.
console.log(i); // 0 1 2 3 4
console.log(arr[i]); // one two three four five
}
for ~ in문
- 객체의 속성을 출력하는 문법
let person = {
name: 'John',
age: 30,
gender: 'male'
};
for (let key in person) {
console.log(key + ":" + person[key]);
}
// person['key'] 객체의 속성에 접근했다.
name: John
age: 30
gender: male
while 문
- for 문과 완전히 똑같다.
let i = 0;
while (i < 10) { // (조건)
console.log(i); // 메인로직
i++ // 증감
}
// while 문을 활용해서, 3초과 100 미만의 숫자 중 5의 배수인 것만 출력해라
do ~ while 문
- 일단 한번 코드를 실행하고 while을 실행해라
let i = 0;
do {
console.log(i);
i++
} while (i < 10);
// 조건을 실행하기 전에, do 먼저 한번 실행한다. console.log(i) 0,1,2,3,4,5,6,7,8,9
break, continue 문
- for 문과 결합하여 쓰인다.
- for 문을 멈출 수 있다.
for (let i = 0;, i < 10; i++) {
if(i === 5) {
break;
}
console.log(i)
}
0 1 2 3 4 // i 가 5가 되었을 때, 끝내라
for (let i = 0;, i < 10; i++) {
if(i === 5) {
continue;
}
console.log(i)
}
0 1 2 3 4 6 7 8 9 // i 가 5가 되었을 때, 그 다음 순서로 넘어간다.
1주차 강의 끝 - 숙제
대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다.
예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다.
| s | answer |
| "pPoooyY" | true |
| "Pyy" | false |
function solution(s) {
}