배열 (with 반복문)
배열 반복하기(값 나열하기)
- while문
const target = ['가', '나', '다', '라', '마'];
let i = 0;
while (i < target.length) { // i가 target.length일 때 중단
console.log(target[i]);
i++;
}
// 출력: 가 나 다 라 마- for문
const target = ['가', '나', '다', '라', '마'];
for (let i = 0; i < target.length; i++) {
console.log(target[i]);
}
// 출력: 가 나 다 라 마Quiz. 배열 메서드
🔆 indexOf와 splice를 사용해 아래 배열에서 '라'를 모두 제거하기
✨Tip! '모두' 가 들어있는 문제는 반복문을 사용할 확률이 높다.
<문제 풀이 방법>
한 번에 해당 문자를 찾는 것은 불가하기 때문에 반복문을 돌면서 인덱스 한 개씩 '찾기 -> 제거'를 수행하기!
<코드>
- while문
const arr = ['가', '라', '다', '라', '마', '라'];
let i = 0;
let index = 0;
while(i < arr.length) {
// 첫번째로 찾은 해당 문자 인덱스를 저장
index = arr.indexOf('라');
// 해당 문자가 위치한 index부터 문자 하나(본인)만 삭제
arr.splice(index, 1);
}
console.log(arr);
// 출력: ['가', '다', '마']- for문
const arr = ['가', '라', '다', '라', '마', '라'];
for(let i = 0; i < arr.length; i++) {
let index = arr.indexOf('라');
arr.splice(index, 1);
}
console.log(arr);- 추가 코드
const arr = ['가', '라', '다', '라', '마', '라'];
// 해당 문자를 못찾을 때까지(-1은 값을 발견하지 못했다는 뜻) 제거하라
while (arr.indexOf('라') > -1) {
arr.splice(arr.indexOf('라'), 1);
}※ 핵심 : 반복하고 싶을 동안은 true가 되게 하고, 반복을 멈추고 싶을 때는 false가 되게 하라!
false가 되는 값 6가지 (암기★)
=> ''(빈 문자열), 0, false, null, undefined, NaN
만약, 해당 문자가 첫번째 인덱스에 위치하여 indexOf('가')의 값이 0이라면?
값이 존재함에도 불구하고 false가 출력될 수 있다.😱
const arr = ['가', '나', '다'];
if (arr.indexOf('가')) { // 값이 0으로 false가 됨
console.log('찾았다!');
} else {
console.log('없다!');
}
// 출력: 없다!if문에 '-1보다 크다(해당 문자가 한 개라도 존재한다)' 라는 조건을 작성하여 0의 값이어도 오류가 발생하지 않는다.
✨Tip! indexOf에는 '(□ > -1)' 의 조건을 함께 사용할 확률이 높다.
const arr = ['가', '나', '다'];
if (arr.indexOf('가') > -1) { // 값이 0으로 false가 됨
console.log('찾았다!');
} else {
console.log('없다!');
}
// 출력: 없다!함수
함수 선언문: function 키워드 뒤에 함수 이름을 넣어주는 방식
함수 표현식: 함수를 상수나 변수에 대입하는 방식
function a() {} // 함수 선언문
const b = function() {}; // 함수 표현식
const c = () => {}; // 화살표 함수(함수 표현식)위의 함수 선언하는 세 가지 종류는 각각 작동 방식이 다르다. (차이점 있음!)
if, for, while, 함수 선언문 뒤에는 세미콜론(;)이 붙지 않는다.
익명함수는 함수를 한 번만 사용하는 경우에 이름이 없는 함수를 선언한다. (주로 콜백으로 쓰임)
일반적으로 이름이 있는 함수의 경우에는 이름으로 함수를 호출하여 여러번 사용 가능하다.
화살표 함수는 코드가 짧을 경우 많이 사용되며, 중괄호와 return 예약어를 생략할 수 있다.
const multiply = (x, y, z) => {
return x * y * z;
}
const multiply = (x, y, z) => x * y * z; // 축약 버전
// 다른 예시
(a, b) => a + b; // 매개변수 a와 b를 받아 a+b를 리턴
(x, y, z) => x * y * z;return
함수를 호출할 때 항상 결과값이 나오는데 기본값으로 'undefined'가 나온다.
반환값(return value)으로 undefined이 출력되면 보통 반환값이 없다고 한다.
실은 반환값이 없는 것이 아니라 함수는 기본적으로 'return undefined'이 숨어 있는 것이다. (생략 가능)
그리고 return문은 함수를 종료하면서 반환한다.
function a() {
// 별도로 return문을 작성하지 않았다면 아래 return문이 생략된 것
return undefined;
// retrun; <- 위와 동일
// (아무것도 없음) <- 위와 동일
}
a();
// 출력: undefined여러개의 값을 리턴하고 싶은 경우, 한 번만 리턴되기 때문에 배열로 묶어서 한 번에 리턴하거나 객체 리터럴을 사용한다.
function a() {
return [1, 2, 3]; // 배열
}
a();
// 출력: [1, 2, 3]매개변수(parameter)와 인수(argument)
매개변수와 인수 각각 들어갈 자리 파악하기!
아래 코드에서 a(parameter)의 parameter는 'argument'의 값을 가지게 되어 결국 같은 값이 된다. (parameter = 'argument')
실제로 parameter는 변수와 같은 특성을 가진다.
용어 암기★
- 함수 선언 시 : parameter(파라미터) or 매개변수
- 함수 호출 시 : argument(아규먼트) or 인수
function a(parameter) { // 함수 선언
console.log(parameter);
}
a('argument'); // 함수 호출