2022년9월23일 TIL - 자바스크립트 - break, continue, 중첩 반복문, 별찍기, 배열, 배열 메서드, 함수, 매개변수와 인수

 

자바스크립트

---

2-18. break 와 continue

break 문으로 반복문 멈추기

let i = 0;
while (true) {
	if (i === 5) break;
	i++;
}

while 문과 for 문 비교

while 문

let i = 0;
while (true) {
	console.log(i);
	i++
}

for 문

for (let i = 0;  ; i++) {
	console.log(i);
}

for 문은 조건식이 생략되어 무한 반복된다. 하지만 보통은 조건식을 잘 생략하지 않기 때문에 어색해보일 수 있다.

그래서 언제 끝날지 모르는 반복문이나 무한 반복을 표현할 때는 while 문을 더 많이 쓴다.

continue 문으로 코드 실행 건너뛰기

continue 문을 넣으면 이후 코드는 건너뛰게 된다.

let i = 0;
while (i < 10) {
	i++;
	if (i % 2 === 0) {
		continue;
	}
	console.log(i);
}

2-19. 중첩 반복문

중첩된 반복문 사용하기

반복문 안에 반복문이 있는 경우 반복문이 중첩됐다고 표현한다.

for (let i = 0; i < 10; i++) {
	for (let j = 0; j < 10; j++) {
		console.log(i, j);
	}
}

2-20. 별찍기

*
**
***
****
*****
for (let i = 0; i < 5; i++) {
	console.log('*'.repeat(i + 1))
}

*****
****
***
**
*
for (let i = 5; i >= 1; i = i - 1) {
	console.log('*'.repeat(i))
}
for (let i = 0; i < 5; i = i++) {
	console.log('*'.repeat(5 - i))
}

*
***
*****
*******
*********

*********
*******
*****
***
*

*****
 ****
  ***
   **
    *

    *
   **
	***
 ****
*****

2-21. 배열 기본

객체

객체(object) 는 자료형의 일종으로 다양한 값을 모아둔 또다른 값이다. 객체의 종류는 크게 배열(array), 함수(function), 배열이나 함수가 아닌 객체로 나눌 수 있다.

배열

배열을 사용해 값들을 하나로 묶을 수 있다

const fruits = ['사과', '오렌지', '배', '딸기'];

네개의 과일을 fruits 라는 상수로 묶었다. 배열을 만들려면 대괄호로 값들을 감싸주면 된다. 값은 쉼표로 구분한다.

배열 이름 뒤에 불러오고 싶은 값의 자릿수를 적어주면, 배열 내부의 값을 개별적으로 불러올 수 있다.

const fruits = ['사과', '오렌지', '배', '딸기'];

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
console.log(fruits[3]);

자릿수는 0부터 시작한다. 프로그래밍에서는 자릿수를 인덱스(index) 라고 한다.

배열 안에 있는 값의 자료형이 모두 같아야 할 필요는 없다. 배열 안에 다른 배열이나 변수를 넣을 수도 있다.

const arrayOfArray = [[1, 2, 3], [4, 5];
arrayOfArray[0]; // [1, 2, 3]
const a = 10;
const b = 20;
const variableArray [a, b, 30];
variableArray[1]; // 20 (b 의 값)

배열 내부에 배열이 들어있는 것을 이차원 배열이라고 한다.

배열 내부의 값은 중복되어도 되고, 아무 값이 없는 배열도 만들 수 있다.

const everything = ['사과', 1, undefined, true, '배열', null];
const duplicated = ['가', '가', '가', '가', '가'];
const empty = [];

배열 내부에 든 값을 요소(element) 라고 한다. everything 배열에는 6개의 요소가 있고, empty 배열에는 0개의 요소가 있다.

배열의 요소 갯수 구하기

배열 이름 뒤에 .length 를 붙이면 배열의 요소 갯수를 구할 수 있다.

const everything = ['사과', 1, undefined, true, '배열', null];
console.log(everything.length);

빈 값도 유효한 값이기 때문에 요소 개수를 셀 때 포함된다.

const emptyValue = [null, undefined, false, '', NaN];
console.log(emptyValue.length);

배열의 요소 개수를 활용해 원하는 인덱스 요소를 찾을 수 있다. 배열의 요소 개수는 항상 마지막 인덱스보다 1 크다.

배열의 요소 갯수에서 1을 빼면 마지막 요소의 인덱스가 된다.

const findLastElement = ['a', 'b', 'c', 'd', 'e'];
console.log(findLastElement[findLastElement.length - 1]);

마지막 요소 다음 요소를 추가하려면 배열.length 에 값을 넣으면 된다

const target = ['가', '나', '다', '라', '마'];
target[target.length] = '바';
console.log(target);

배열[0] = 값 이라고 입력하면 첫번째 값이 ‘수정’ 된다.

const target = ['나', '다', '라', '마', '바']
target[0] = '가';
console.log(target);

// ["가", "다", "라", "마", "바"]

배열의 제일 앞에 값을 추가하고 싶다면 unshift 라는 기능을 실행하면 된다.

const target = ['나', '다', '라', '마', '바'];
target.unshift('가');
console.log(target);

주어진 값이 배열의 첫 번째 요소로 추가되고, 다른 요소들의 인덱스는 하나씩 뒤로 밀린다.

제일 뒤에 요소를 추가하는 방법으로 배열[배열.length] = 값 방식으로도 가능하지만, 배열 자체에서 값을 추가하는 push 기능이 있다.

const target = ['가', '나', '다', '라', '마'];
target.push('바');

target 변수가 const 인데 수정이 가능한 이유는?

const 는 엄밀히 상수는 아니다. const 에는 새로운 값을 대입(=)하지만 못한다고 생각하면 된다.

const 에 객체(배열, 함수, 객체 리터럴)가 대입된 경우 객체 내부의 속성이나 배열의 요소는 수정할 수 있다.

const target2 = ['a', 'b', 'c', 'd', 'e'];
target2 = ['f', 'g']; // 불가능
target2[0] = 'h'; // 가능

2-22. 배열 메서드(수정, 조회)

배열의 요소 수정하기

원하는 인덱스에 바꿀 값을 넣어주면 된다.

const target = ['가', '나', '다', '라', '마'];
target[3] = '카';
console.log(target);

배열에서 요소 제거하기

pop 을 사용하면 마지막 요소가 제거된다.

const target = ['가', '나', '다', '라', '마'];
target.pop();

shift 를 쓰면 첫 번째 요소를 제거할 수 있다.

const target = ['가', '나', '다', '라', '마'];
target.shift();

splice 기능을 사용해서 중간 요소를 제거할 수 있다.

const target = ['가', '나', '다', '라', '마'];
target.splice(1, 1);

splice(지울 인덱스 위치, 지울 요소 개수). 인덱스 1부터 1개를 지우겠다는 의미이다.

인덱스가 0부터 시작한다는 것에 유의해야한다.

splice 에 값을 하나만 넣으면 해당 인덱스부터 끝까지 모든 요소를 제거하겠다는 뜻이다.

const target = ['가', '나', '다', '라', '마'];
target.splice(1);
console.log(target);

// ["가"]

splice 로 값을 지우면서 지워진 자리에 다른 값을 넣을 수도 있다.

splice 의 세 번째 자리부터 바꿀 값들을 넣어준다.

const target = ['가', '나', '다', '라', '마'];
target.splice(1, 3, '타', '파');

하나도 지우지 않고 끼워넣을 수도 있다.

const target = ['가', '나', '다', '라', '마'];
target.splice(1, 0, '바')

// ["가", "바", "나", "다", "라", "마"]

배열에서 요소 찾기

배열에서 특정 요소가 있는지 찾아보는 일종의 검색 기능이다. includes 기능을 사용한다.

요소가 있으면 true, 없으면 false 가 반환된다.

const target = ['가', '나', '다', '라', '마'];
const result = target.includes('다');
const result2 = target.includes('카');
console.log(result);
console.log(result2);

// true
// false

indexOf 와 lastIndexOf 를 사용하면 검색하고 싶은 값이 몇 번째 인덱스에 위치하는지 알 수 있다.

const target = ['라', '나', '다', '라', '다'];
const result = target.indexOf('다');
const result2 = target.lastIndexOf('라');
const result3 = target.indexOf('가');

// 2
// 3
// -1

indexOf 는 앞에서부터 찾고, lastIndexOf 는 뒤에서부터 찾는다. 없으면 -1

배열 반복하기

배열은 값들을 나열한 것이기 때문에 반복문과 같이 사용하는 경우가 많다.

배열의 모든 요소를 console.log 해보자. while 문이나 for 문 모두 사용할 수 있다.

const target = ['가', '나', '다', '라', '마'];
let i = 0;
while (i < target.length) {
	console.log(target[i]);
	i++;
}

/*
가
나
다
라
마
*/

for 문

const target = ['가', '나', '다', '라', '마'];
for (let i = 0; i < target.length; i++) {
	console.log(target[i]);
}

2-23. 배열 메서드 응용하기

배열에서 ‘라’를 모두 제거하기

indexOf 로 ‘라’ 를 찾은 다음, splice 를 이용해서 찾은 인덱스 위치를 이용해서 하나씩 지우기를 반복

1. 언제까지 반복할 것인지 = (arr.indexOf(’라’) > -1)

const arr = ['가', '라', '다', '라', '마', '라']
while (arr.indexOf('라') > -1) {
	arr.splice(arr.indexOf('라'), 1)
}
// 중복되는 코드 없애주기

let index = arr.indexOf('라');
while (index > -1) {
	arr.splice(index, 1);
	index = arr.indexOf('라'); // 중요. 빼먹지 않기
}

indexOf 로 값이 존재하는지 안하는지를 조건문에 넣었을때, 첫번째 자리면 0이 나오는데 0을 형변환하면 false 가 나오므로 원하는 값이 안나올 수 있다.

if (arr.index(1) > -1) {}

조건문에 넣을때는 첫자리인 0 을 고려해서 -1 보다 클때를 true 로 반환하도록 만들자

2-24. 함수 기본

함수

프로그래밍에서 함수(function)는 일정한 동작을 수행하는 코드를 의미한다. 함수를 미리 만들어두고 원할 때 실행해 정해진 동작을 수행하게 할 수 있다.

함수를 만들 때는 보통 function 예약어를 사용하거나 =>(화살표) 기호를 사용한다. 화살표 기호를 사용한 함수를 화살표 함수(arrow function)라고 한다.

function() {}

// 또는

() => {}

함수에 이름을 붙여보자

function a() {} // 함수 선언문
const b = function() {}; // 함수 표현식
const c = () => {}; // 화살표 함수

두 번째와 세 번째는 각각 상수 b 와 c 에 대입했다. 이렇게 대입하면 상수 또는 변수의 이름이 함수의 이름이 된다. 함수 a 는 특별하게 상수에 대입하지 않았는데, 이렇게 함수를 상수에 대입하는 대신 function 키워드 뒤에 함수 이름을 넣어주는 방식을 함수 선언문(function declaration statement) 이라고 한다.

반대로 함수 b 와 같이 상수나 변수에 대입하는 방식을 함수 표현식 (function expression) 이라고 한다.

여기에 화살표 함수까지 포함해 함수를 만드는 방식은 크게 세가지라고 보면 된다.

변수와 마찬가지로 함수를 만드는 행위도 선언한다(declare)고 표현한다.

왜 함수 a 뒤에는 세미콜론은 안붙이는가?

변수 선언문 외에 ‘문’ 즉 if, for, while, 함수 선언문 뒤에는 세미콜론을 붙이지 않는다.

관습적인것으로 햇갈린다면 붙여도 괜찮다.

그리고 붙여서 에러나는 경우는 없는데 안붙여서 에러나는 경우는 생길 수 있으므로 붙이는 것을 추천한다.

function a() {} // 선언
a();  // 호출

함수를 사용하는 행위를 호출한다(call) 고 표현한다.

함수 a를 선언한 후 a 뒤에 ()를 붙이면 함수가 실행된다.

지금까지 console.log 나 parseInt 같은 명령 뒤에도 ()를 붙여 사용했는데, console.log 와 parseInt 도 함수이기 때문이다

함수안에 동작문을 넣어보자. 함수의 중괄호 안에 실행할 코드를 넣어주면 된다.

function a() {
	console.log('Hello');
	console.log('Function');
}
a();

함수 안에서 함수를 다시 호출할 수 있다.

이름을 안붙인 함수를 익명함수라고 하는데, 한번밖에 못쓰므로, 한번만 쓸지, 여러번 쓸지 결정해서 이름을 붙여줘야한다.

return 이해하기

function a() {}
//< undefined

a();
//< undefined

함수를 선언할 때 undefined 가 나오는 것은 신경쓰지 않아도 된다. 함수 a 를 호출할 때 (a();) 결괏값이 undefined 라는 것에 주목해야한다. 함수를 호출하면 항상 결괏값이 나오는데, 기본값으로 undefined 가 나온다.

이 값을 반환값(return value) 라고 한다. console.log 를 호출할 때마다 콘솔에 undefined 가 출력되는 것은 console.log 함수의 반환값이 undefined 라서 그렇다.

function c() {
	return 'hello';
	console.log('hi');
}

function d() {
	return undefined;
}

function e() {
	return;
}

return 값을 정해서 반환값을 정해줄 수 있다. 함수가 기본적으로 undefined 를 반환하는 것은 return undefined; 이라는 코드가 기본적으로 내장되어 있음을 생각할 수 있다. return 만 쓰고 undefined 가 생략되어도 똑같이 반환된다.

return 은 함수를 종료시키므로 return 뒤에 코드를 넣으면 실행되지 않는다.

function a() {
	return 10;
}

console.log(a());

함수를 호출한다는 것은 리턴값을 거기 넣어준다고 생각할 수 있다.

function a() {
	return 1, 5; // 잘못된 방법 5만 리턴된다.
}

function a() {
	return [1, 5]; // 배열로 반환할 수 있다.
}

한번에 여러 값을 리턴하고 싶다면, 리턴 값은 하나이기 때문에, 하나로 묶어서 리턴해줘야 한다.

2-25. 매개변수와 인수

매개변수와 인수 사용하기

function a(parameter) {
	console.log(parameter);
}
a('argument');

// < argument

a 호출 시 소괄호에 넣은 ‘argument’ 문자열은 함수 a를 선언할 때 소괄호에 넣은 parameter 와 연결된다. 따라서 parameter 는 ‘argument’ 의 값을 가진다. parameter = ‘argument’ 와 같고, 실제로 parameter 는 변수와 같은 특성을 가진다.

함수가 하나의 매개변수와 하나의 인수만을 가지는 것은 아니다. 각각 여러 개를 가질 수 있고, 매개변수와 인수의 개수가 일치하지 않아도 된다.

function a(w, x, y, z) {
	console.log(w, x, y, z);
	console.log(arguments);
}
a('Hello', 'Parameter', 'Argument');

// 실행 결과
Hello Parameter Argument undefined
Arguments(3) ['Hello', 'Parameter', 'Argument']

특수하게 함수 안에서 argument 를 사용할 수 있다. 화살표 함수 안에서는 못쓰고 function 함수 안에서만 쓸 수 있다.

호출할 때 넣은 argument 들이 뭐였는지 배열형태로 나타내어 준다.

짝지어지지 않은 z 는 기본값인 undefined 가 된다.

function add(x, y) {
	return x + y;
}

add(5, 3)
// > 8

매개변수의 개수가 인수보다 적은 경우