Chapter2-3. Boolean 타입
- 개념학습: Boolean 타입을 다루는 방법에 대해 학습하고 실습한다.
- 퀴즈: Boolean 타입에 대한 이해도를 퀴즈를 통해 점검합니다.
개념학습
Boolean 타입
Boolean(불리언)은 사실 관계를 구분하기 위한 타입입니다. 불리언 타입의 값은 true 혹은 false 둘 중 하나입니다.
true;
false;
falsy
불리언 타입은 아니지만, 자바스크립트에서 false로 “여겨지는” 값이 일부 있는데, 이를 falsy 값이라고 합니다. 반대로 true로 “여겨지는” 값은 truthy 값이라고 합니다. truthy 값은 매우 많아서, falsy 값을 암기하면 구분하기 쉽습니다.
// 대표적인 falsy 값
false
0
-0
0n
""
''
``
null
undefined
NaN
비교연산자(comparison operator)
불리언은 비교연산자(comparison operator)로 두 값이 같은지 다른지를 확인할 때 유용합니다.
- ===, !== : 엄격한 동치 연산자
두 피연산자의 값과 타입이 같으면 true, 다르면 false를 반환합니다. 엄격한 동치 연산자는 보이는 값이 같아도, 두 값의 타입이 다르면 false가 됩니다.
123 === (100 + 23); // true ("123의 값과 100 + 23의 값은 같다."는 사실이기 때문에 true)
123 === '123'; // false ("123의 값과 '123'의 값은 같다."는 사실이 아니기 때문에 false)
123 !== (100 + 23); // false ("123의 값과 100 + 23의 값은 같지 않다."는 사실이기 아니기 때문에 false)
123 !== '123'; // true ("123의 값과 '123'의 값은 같지 않다."는 사실이기 때문에 true)
- ==, != : 느슨한 동치 연산자 (사용X)
느슨한 동치 연산자는 “대체로” 타입이 달라도 값이 같으면 true, 다르면 false를 반환합니다. 이렇게 “느슨하게” 동치 여부를 판단하기 때문에 예외가 많아 현대 웹 개발에서는 사용을 권장하지 않습니다. 참고로 다른 프로그래밍 언어에서는 == , != 를 주로 사용하는데, JavaScript에서는 ===, !== 로 비교해야 합니다.
1
12 == '12' // true
- > , < , >= , <= : 대소 관계 비교 연산자
두 피연산자의 값의 크기를 비교합니다. 수학에서의 부등호 기호의 사용법과 유사합니다.
100 > 200; // false ("100은 200보다 크다."는 거짓)
200 > 100; // true ("200은 100보다 크다."는 참)
100 >= 100; // true ("100은 100보다 크거나 같다."는 참)
200 <= 100; // false ("200은 100보다 작거나 같다."는 거짓)
논리연산자(logical operator)
논리연산자(logical operator)로 두 값 간의 논리 관계를 확인할 수 있습니다.
- || : 논리합(OR)
- 두 값 중 하나만 true여도 true로 판단합니다.
- true || false; // true false || true; // true 100 > 200 || 200 > 100; // true ("100은 200보다 크다" 혹은 "200은 100보다 크다" 중 하나는 true)
- 두 값이 모두 false면 false로 판단합니다.
- false || false // false 200 < 100 || 20 < 10; // false
- && : 논리곱(AND)
- 두 값이 모두 true면 true로 판단합니다.
- true && true // true 200 > 100 && 20 > 10; // true
- 두 값 중 하나만 false여도 false로 판단합니다.
- true && false // false false && true // false 100 > 200 && 200 > 100; // false
논리 부정 연산자(!)의 경우, 사실 관계를 반대로 표현합니다.
- ! : 부정(NOT)
- 오른쪽 피연산자와 반대의 사실을 반환합니다.
- !true // false !(100 > 200) // true
- falsy, truthy의 반대 값을 반환합니다.
- !0 // true !'' // true !1 // false !'자바스크립트' // false
퀴즈
Chapter3. 변수
사전에 따르면 커피란 끓여서 마실 수 있도록 볶아 놓은 커피나무 열매의 씨앗, 또는 그것을 빻은 분말 상태의 물질로 그 씨를 끓이거나 분말을 뜨거운 물에 타서 만든 짙은 갈색 음료를 의미합니다. 하지만 이 커피를 말할 때마다 이 정의를 모두 말하는 사람은 없습니다. 커피라는 이름으로 부르기로 약속이 되어 있기 때문입니다. 그래서 카페에서 커피를 주문할 때, '커피 열매의 씨앗을 볶은 뒤 갈아서 물에 타서 만든 짙은 갈색 음료를 주세요.'라고 하지 않아도 됩니다. '커피 주세요.'라고 말해도 커뮤니케이션이 가능합니다. 이처럼 모든 사물에는 이름이 있습니다. 우리가 학습할 JavaScript에서도 데이터를 편하게 다루기 위해 데이터에 이름을 붙일 수 있습니다. 그 이름을 바로 변수라고 부릅니다. 여러분은 이번 챕터를 통해 데이터를 편리하게 저장하고 꺼내 쓸 수 있도록 변수에 대해 학습합니다. 이번 챕터를 학습하고 나면 여러분은 각각의 데이터에 이름을 짓는 방법을 알게 됩니다. 개발자답게 표현하자면 변수를 선언하고 값을 할당할 수 있는 것을 의미합니다. 또 변수를 활용하여 복잡한 작업을 간단하게 처리할 수 있게 됩니다.
학습 목표
- 변수가 메모리에 데이터를 저장하는 방법이라는 것을 기억한다.
- let 키워드를 활용하여 변수를 선언하고 원하는 값을 할당할 수 있다.
- 변수를 활용하여 더 쉽게 구구단을 출력할 수 있다.
- template literal을 사용할 수 있다.
Chapter3-0. 변수 개요
Chapter3-1. 변수의 선언과 할당
- 개념학습: 변수를 선언하고 값을 할당하는 방법을 학습합니다.
개념학습
변수의 선언과 할당
어떤 사물을 다루기 위해서는 이름을 알아야 합니다. 데이터도 마찬가지입니다. 문제를 해결하기 위해 컴퓨터와 소통하기 위해서는 특정 데이터에 대해 같은 이름을 공유하고 있어야 합니다. JavaScript에서도 특정 데이터에 이름을 붙일 수 있는데, 이를 변수라고 합니다. 이해를 돕기 위해 구구단 2단을 출력하는 코드를 예로 들어 보겠습니다.
// 구구단 2단
console.log(2 * 1); // 2
console.log(2 * 2); // 4
console.log(2 * 3); // 6
console.log(2 * 4); // 8
console.log(2 * 5); // 10
console.log(2 * 6); // 12
console.log(2 * 7); // 14
console.log(2 * 8); // 16
console.log(2 * 9); // 18
구구단 2단을 출력한다는 것은 숫자 2와, 1부터 9까지의 숫자의 곱을 차례대로 나열한 것이라고 할 수 있습니다. 만약 이 구구단 2단을 구구단 3단으로 바꾸어 출력하려면 어떻게 해야 할까요?
// 구구단 3단
console.log(3 * 1); // 3
console.log(3 * 2); // 6
console.log(3 * 3); // 9
console.log(3 * 4); // 12
console.log(3 * 5); // 15
console.log(3 * 6); // 18
console.log(3 * 7); // 21
console.log(3 * 8); // 24
console.log(3 * 9); // 27
이렇게 좌변에 있는 숫자 2를 모두 숫자 3으로 바꿔 주어야 합니다. 이번에는 여러분이 직접 구구단 3단을 구구단 4단으로 바꾸어 출력하는 코드를 작성해 볼까요?
💻 실습 1)
구구단 3단을 출력하는 코드가 작성되어 있습니다. 이 코드를 구구단 4단을 출력하는 코드로 변경해 보세요.
// 구구단 3단을 출력하는 코드가 작성되어 있습니다.
// 이 코드를 구구단 4단을 출력하는 코드로 변경해 보세요.
// 구구단 3단
console.log(3 * 1);
console.log(3 * 2);
console.log(3 * 3);
console.log(3 * 4);
console.log(3 * 5);
console.log(3 * 6);
console.log(3 * 7);
console.log(3 * 8);
console.log(3 * 9);
[실습] 3-1. 변수의 선언과 할당 - 1
구구단 n단을 출력하고 싶을 때마다 좌변에 있는 숫자를 일일이 바꿔주어야 한다면, 매우 비효율적인 작업일 수밖에 없습니다. 하지만 만약 반복적으로 사용하는 숫자를 컴퓨터가 특정한 이름(변수명)으로 기억하도록 하고 그 이름을 사용하여 구구단 n단을 출력하면 어떻게 될까요? 컴퓨터가 기억하고 있는 숫자를 바꾸어주는 것만으로도 손쉽게 구구단 n단을 출력할 수 있을 겁니다. 특정 데이터를 컴퓨터가 기억할 수 있도록 메모리 공간을 확보하고 그 메모리 공간에 이름을 부여하는 것을 변수 선언이라고 합니다. 변수를 선언해 보겠습니다. 변수 선언 키워드인 let을 사용하여 변수를 선언하면 컴퓨터는 값을 저장하기 위한 메모리 공간을 확보하고 그 공간의 이름을 num으로 기억합니다. 그 공간의 이름인 num을 변수라고 합니다.
let num; // 변수 선언
이제 컴퓨터가 확보한 num이라는 이름의 메모리 공간에 값을 넣어보겠습니다. 할당연산자(=)를 사용하여 메모리 공간에 특정한 값을 넣을 수 있습니다. 이것을 값 할당이라고 합니다.
num = 5; // 값 할당
변수 선언과 값 할당을 통해 컴퓨터는 값을 저장하기 위해 num이라는 이름의 메모리 공간을 확보하고, 그 메모리 공간에 숫자 5를 저장했습니다. 변수 num을 사용하여 구구단 5단을 출력하는 코드를 작성해 보겠습니다.
// 구구단 5단
let num; // 변수 선언
num = 5; // 값 할당
console.log(num * 1); // 5
console.log(num * 2); // 10
console.log(num * 3); // 15
console.log(num * 4); // 20
console.log(num * 5); // 25
console.log(num * 6); // 30
console.log(num * 7); // 35
console.log(num * 8); // 40
console.log(num * 9); // 45
오히려 코드의 양이 많아진 것처럼 느껴질 수도 있습니다. 하지만 앞서 설명한 것처럼 변수 사용의 이점은 구구단 n단을 출력하기 용이하다는 것에 있습니다. 현재 구구단 5단을 출력한 코드를 구구단 6단, 7단, 8단 등으로 직접 변경해 보면서 변수 사용의 편리함을 직접 경험해 보시기 바랍니다.
💻 실습 2)
변수 num에 할당된 값을 변경하여 구구단 n단을 출력해 보세요.
// 변수 num에 할당된 값을 변경하여 구구단 n단을 출력해 보세요.
let num; // 변수 선언
num = 5; // 값의 할당
console.log(num * 1);
console.log(num * 2);
console.log(num * 3);
console.log(num * 4);
console.log(num * 5);
console.log(num * 6);
console.log(num * 7);
console.log(num * 8);
console.log(num * 9);
[실습] 3-1. 변수의 선언과 할당 - 2
요약 및 정리
변수의 선언과 할당
변수를 선언할 때는 let 키워드를 사용합니다. let 키워드 뒤에 선언하고자 하는 변수명을 입력합니다.
let name;
선언된 변수에 값을 할당할 때는 할당 연산자(=)를 사용합니다.
name = 'kimcoding';
변수 선언과 값 할당을 동시에 할 수 있습니다.
let name = 'kimcoding';
변수에는 JavaScript에서 사용이 가능한 모든 타입의 값을 할당할 수 있습니다. 아래 예제에서 string, number, boolean 외의 다른 타입은 추후에 학습하게 될 자료형입니다.
let string = '원주율';
let number = 3.141592;
let boolean = true;
let array = [1, 'two', false];
let object = {name: 'kimcoding', age: 25, course: 'FE'};
let empty = null;
let notDefined = undefined;
아무것도 할당하지 않은 변수
아무것도 할당되지 않은 변수는 undefined가 자동으로 할당됩니다. 이는 초기화라는 JavaScript의 독특한 특징입니다.
let variable;
console.log(variable) // undefined
값의 재할당
let키워드로 선언한 변수에 새로운 값을 할당할 수 있습니다. 이를 재할당이라고 합니다. 재할당에도 할당연산자(=)를 사용합니다.
let name = 'kimcoding';
console.log(name) // 'kimcoding'
name = 'parkhacker';
console.log(name) // 'parkhacker'
재할당이 불가능한 변수(상수)
let 키워드가 아닌 const 키워드를 사용하면 재할당이 금지됩니다.
const name = 'kimcoding';
console.log(name) // 'kimcoding'
name = 'parkhacker'; // Uncaught TypeError: Assignment to constant variable.
var키워드
var키워드는 let키워드와 const키워드가 등장하기 이전에 사용되던 변수 선언 키워드입니다. var키워드에는 여러 단점이 존재하고, 이를 보완하기 위해 let키워드와 const키워드가 등장하였습니다. 따라서 var키워드는 사용을 되도록 지양하고, let키워드와 const키워드를 사용할 것을 권장합니다. 재할당이 필요한 변수에는 let키워드를, 재할당이 불필요하거나 변경되는 것을 방지해야 하는 변수는 const키워드를 사용해야 합니다. 변수 선언 키워드의 차이점은 추후에 더욱 자세히 학습하겠습니다.
var name = 'kimcoding'; // var키워드가 가지고 있는 단점으로 인해 사용을 지양하는 것이 좋다.
네이밍 규칙
변수명은 다음과 같은 네이밍 규칙을 준수해야 합니다.
- 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
- let name, $head, _score // 사용 가능한 변수명
- 단, 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야 한다. 숫자로 시작하는 것은 허용하지 않는다.
- let 1st; // 사용할 수 없는 변수명
- 예약어는 식별자로 사용할 수 없다.
- 예약어: 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어를 말한다.
- ex) let, const, true, false, typeof 등
- let true; // 사용할 수 없는 변수명
- 그 외 규칙들
- 변수명은 변수의 존재 목적을 이해할 수 있도록 의미를 명확히 표현해야 합니다.
- // 변수의 존재 목적을 이해할 수 없는 변수명 let x = 100; let y = 5; // 변수의 존재 목적을 명확히 알 수 있는 변수명 let name = 'kimcoding'; let age = 25;
네이밍 컨벤션
하나 이상의 영어단어를 사용하여 식별자를 만들 경우 네이밍 컨벤션을 잘 지키면 가독성을 높일 수 있습니다. JavaScript에서는 일반적으로 카멜 케이스(camelCase)를 사용합니다. 카멜 케이스는 낙타의 등모양에서 유래된 이름으로써, 첫 단어의 첫 문자는 소문자로, 그 이후에 연결되는 단어의 첫 문자는 대문자로 작성하는 방법입니다.
Chapter3-2. 변수 활용하기
- 개념학습: 변수의 다양한 활용 방법을 학습합니다.
개념학습
변수 활용하기
지난 시간에 변수를 선언하고 값을 할당하는 방법을 학습했습니다. 이번 시간에는 변수를 활용하는 다양한 방법을 학습해 보겠습니다.
변수를 활용한 연산
변수에 숫자 타입의 값이 할당되어 있는 경우 숫자 타입에 사용 가능한 모든 연산이 가능합니다.
let number = 10;
console.log(number + 2); // 12
console.log(number - 5); // 5
console.log(number * 3); // 30
console.log(number / 2); // 5
console.log(number % 3); // 1
console.log(number); // 10
그러나 각각의 연산은 독립적으로 이뤄질 뿐, number는 그대로 10이 할당되어 있습니다. 연산의 결과를 변수에 반영하려면 어떻게 해야 할까요? 앞서 학습한 재할당을 하면 됩니다.
let number = 10;
number = number + 2;
console.log(number); // 12
number = number * 3;
console.log(number); // 36
변수끼리의 연산도 가능합니다. 변수를 활용하여 삼각형의 너비를 구하는 코드를 직접 작성해 보세요. (삼각형의 너비 = 밑변 * 높이 / 2)
💻 실습 1)
주어진 두 변수를 활용하여 삼각형의 너비를 출력해 보세요.
// 다음 두 변수를 활용하여 삼각형의 너비를 출력해 보세요.
let base = 10;
let height = 5;
// console.log()내부에 삼각형의 너비를 구하는 코드를 작성하세요.
console.log();
[실습] 3-2. 변수 활용하기 - 1
템플릿 리터럴(template literal)
값을 큰따옴표(”), 작은따옴표(’), 백틱(`)으로 값을 감싸면 문자열(string) 타입이 된다는 것을 이전에 학습했습니다. 이 중에서 백틱을 사용하는 방법을 템플릿 리터럴이라고 합니다. 템플릿 리터럴은 큰따옴표, 작은따옴표를 사용한 표기 방법과는 다른 기능을 가지고 있습니다. 특히, 문자열 내부에 변수 삽입할 수 있는 기능은 매우 유용하게 사용되므로 반드시 알아두어야 합니다.
템플릿 리터럴 내부에 ${}를 사용하여 변수를 삽입할 수 있습니다. 이때, 문자열이 할당되지 않은 변수도 문자열로 취급됩니다.
let course = 'FE';
let cohort = 99;
let name = 'kimcoding';
console.log(`${course} ${cohort} ${name}`); // 'FE 99 kimcoding'
단어와 단어 사이에 공백을 삽입하기 위해 ‘ ‘를 사용하는 것보다 템플릿 리터럴을 사용하는 것이 가독성 측면에서 훨씬 우수합니다.
Chapter4. 조건문
우리는 매 순간 선택을 합니다. 밥을 먹을지, 먹지 않을지, 그리고 먹는다면 어떤 것을 먹을지 선택합니다. 마찬가지로 어떤 옷을 입을지, 어떤 음악을 들을지 선택하고, 집을 나설 때 우산을 들고나갈지 말지도 선택합니다. 우리는 각자의 판단 기준이 있고 그 판단 기준에 따라 일상생활 속에서 자연스럽게 판단하고 행동합니다.
반면 컴퓨터는 그렇지 않습니다. 컴퓨터는 작성된 코드를 위에서부터 아래로 순차적으로 실행할 뿐입니다. 하지만 특정한 조건에 따라 코드가 실행되도록 하는 방법이 있습니다. 바로 조건문입니다. 조건문을 활용하면, 아침 6시가 되면 알람을 울리도록 하거나, 물이 100도가 될 때까지만 가열하거나, 마우스를 클릭하면 프로그램이 실행되도록 프로그래밍을 할 수 있습니다.
학습 목표
- 특정한 조건에서만 실행되는 코드를 작성할 수 있다.
- truthy와 falsy 가 조건문에서 작동하는 방식을 이해할 수 있다.
- 비교 연산자를 통한 엄격한 비교(=== , !==)에 대해 이해할 수 있다.
- if, else if, else를 사용하여 여러 개의 조건을 중첩해서 사용할 수 있다.
- 논리 연산자를 (&&, ||, ! ...) 통해 복잡한 조건을 간결하게 작성할 수 있다.
Chapter4-1. if문
- 개념학습: 대표적인 조건문인 if문에 대해 학습하고, 불리언 타입에 대해 복습합니다.
- 퀴즈: 퀴즈를 통해 if문에 대한 이해도를 점검합니다.
개념학습
if문
가장 대표적인 조건문인 if문에 대해서 학습하겠습니다. if문은 주어진 조건식의 참(true)/거짓(false) 여부에 따라 실행이 결정됩니다. 이전에 학습 참과 거짓을 판단하기 위한 JavaScript의 타입은 불린 타입이라는 것을 학습했습니다. 따라서 조건식은 결과가 불린 타입이 되도록 작성해야 합니다.
조건식의 평가 결과가 참일 때 문자열 ‘hello world’를 출력하기 위한 코드는 아래와 같습니다.
if (true) {
console.log('hello world');
}
if 뒤에 있는 소괄호에 조건식을 넣으면, 조건식이 참으로 평가된 경우 코드블록 내부의 코드가 실행됩니다. 지금은 true를 넣었기 때문에 console.log('hello world')가 실행됩니다.
조건식을 상황에 맞게 작성하면 특정 상황에만 코드가 실행되도록 할 수 있습니다. 이전에 학습했던 불린 타입을 복습하면서 다양한 조건문을 작성해 보겠습니다.
동치연산자 (===)
동치연산자는 두 피연산자가 동일하면 true, 그렇지 않으면 false를 반환합니다. !==는 반대로 두 피연산자가 동일하지 않으면 true, 동일하면 false를 반환합니다.
let name = 'kimcoding';
if (name === 'kimcoding') {
console.log('중복된 이름입니다.'); // '중복된 이름입니다.'
}
let name = 'parkhacker';
if (name !== 'kimcoding') {
console.log('가입할 수 있는 이름입니다.'); // '가입할 수 있는 이름입니다.'
}
💻 실습 1)
if문 내부의 코드가 실행되도록 변수 course에 올바른 값을 할당하세요.
[실습] 4-1. if문 - 1
// 실습1) if문 내부의 코드가 실행되도록 변수 course에 올바른 값을 할당하세요.
let course;
if (course === 'fe') {
console.log('변수 course에 "fe"를 할당했습니다.');
}
💡 정답 - 실습1)
let course;
course = 'fe';
if (course === 'fe') {
console.log('변수 course에 "fe"를 할당했습니다.');
}
비교연산자(> , < , >= , <=)
비교연산자는 두 피연산자의 값의 크기를 비교합니다. 수학에서의 부등호 기호의 사용법과 유사합니다.
let num = 5;
if (num < 10) {
num = num + 1;
}
console.log(num); // 6
if (num > 5) {
num = num - 1;
}
console.log(num); // 5
논리연산자(&&, ||)
논리합(||)과 논리곱(&&)을 사용하면 복수의 조건을 작성할 수 있습니다. ||은 여러 조건 중 하나만 true여도 true로 판단됩니다. &&은 여러 조건 중 하나라도 false이면 false로 판단됩니다.
let age = 15;
if (age > 13 && age <= 19) {
console.log('청소년입니다.'); // '청소년입니다.'
}
부정연산자(!)
부정연산자는 조건을 부정합니다. 조건이 true이면 false, 조건이 false이면 true를 리턴합니다.
let num = 11;
if (num !== 10) {
console.log('변수 num은 10이 아닙니다.'); // '변수 num은 10이 아닙니다.'
}
💻 실습2)
age가 19보다 크고, job이 student가 아닐 경우 코드가 실행되도록 조건식을 작성하세요.
// 실습2) age가 19보다 크고, job이 student가 아닐 경우 코드가 실행되도록 조건식을 작성하세요.
let age = 25;
let job = 'sw engineer';
// false대신 새로운 조건식을 작성하세요.
if (false) {
console.log('조건을 만족합니다.');
}
[실습] 4-1. if문 - 2
💡 실습2 - 정답)
// 실습2) age가 19보다 크고, job이 student가 아닐 경우 코드가 실행되도록 조건식을 작성하세요.
// age > 19
// job !== 'student'
let age = 25;
let job = 'sw engineer';
// false대신 새로운 조건식을 작성하세요.
if (age >= 19 && job !== 'student') {
console.log('조건을 만족합니다.');
}Chapter4-2. else문
- 개념학습: else문, else if문으로 if문에 조건을 추가하는 방법을 학습합니다.
- 퀴즈: 퀴즈를 통해 else문에 대한 이해도를 점검합니다.
개념학습
else문
if문을 사용하여 조건식이 true일 때만 코드가 실행되도록 할 수 있었습니다. 그런데 조건이 true일 때, 그리고 false일 때 각각 다른 코드가 실행되도록 할 수는 없을까요? else문을 사용하면 가능합니다.
let num = 5;
if (num % 2 === 0) {
console.log('짝수입니다.');
} else {
console.log('홀수입니다.'); // '홀수입니다.'
}
else문은 독립적으로 사용할 수 없고, if문 바로 뒤에 작성해야 합니다. 여기서 조건을 더 추가하고 싶으면 else if문을 사용합니다.
let name = 'kimcoding';
let course = 'seb be'
if(name === 'kimcoding' && course === 'fe') {
console.log('정보가 일치합니다.')
} else if (name === 'kimcoding' && course !== 'fe') {
console.log('코스를 확인하세요.') // '코스를 확인하세요.'
} else {
console.log('일치하지 않는 정보입니다.')
}
if문과 else문은 두 번 이상 사용할 수 없지만 else if문은 여러 번 사용이 가능합니다.
let age = 15;
if (age < 8) {
console.log('미취학아동입니다.');
} else if (age >= 8 && age < 14) {
console.log('초등학생입니다.');
} else if (age >= 14 && age < 17) {
console.log('중학생입니다.'); // '중학생입니다.'
} else if (age >= 17 && age < 20) {
console.log('고등학생입니다.');
} else {
console.log('성인입니다.');
}
다시 한번 구구단을 떠올려 보겠습니다. 우리는 지금까지 구구단 n단을 출력하는 코드를 다음과 같이 작성했습니다.
let num = 2;
console.log(num * 1); // 2
console.log(num * 2); // 4
console.log(num * 3); // 6
console.log(num * 4); // 8
console.log(num * 5); // 10
console.log(num * 6); // 12
console.log(num * 7); // 14
console.log(num * 8); // 16
console.log(num * 9); // 18
이처럼 변수를 활용하면 보다 편리하게 구구단 n단을 출력할 수 있었습니다. 하지만 여기서 생각해 볼 문제가 있습니다. 일반적으로 구구단은 2단부터 9단까지를 의미합니다. 만약 변수 num이 2와 9 사이의 수가 아니라면 어떻게 될까요? 예를 들어 num이 0이거나, 또는 매우 큰 수라면, 우리가 일반적으로 알고 있는 구구단과는 거리가 먼 결과가 나오게 될 것입니다.
let num = 0;
console.log(num * 1); // 0
console.log(num * 2); // 0
console.log(num * 3); // 0
console.log(num * 4); // 0
console.log(num * 5); // 0
console.log(num * 6); // 0
console.log(num * 7); // 0
console.log(num * 8); // 0
console.log(num * 9); // 0
그렇다면 변수 num이 2와 9 사이의 숫자라면 구구단을 출력하고, 그렇지 않다면 2와 9 사이의 숫자를 입력해 달라는 메시지를 콘솔에 출력하는 방식으로 코드를 작성하면 어떨까요? 여러분이 직접 실습해 보시기 바랍니다.
💻 실습1)
구구단을 출력하는 함수에서 변수 num이 2와 9 사이의 수일 경우 구구단을 출력하고, 그렇지 않은 경우 2와 9 사이의 숫자를 입력해 달라는 메시지를 콘솔에 출력하도록 코드를 완성하세요.
[실습] 4-2. else문 - 1
// 실습) 구구단을 출력하는 함수에서 변수 num이 2와 9사이의 수일 경우 구구단을 출력하고, 그렇지 않은 경우 2와 9사이의 숫자를 입력해 달라는 메시지를 콘솔에 출력하도록 코드를 완성하세요.
// hint: if ~ else문을 사용하세요.
let num = 0;
console.log(num * 1);
console.log(num * 2);
console.log(num * 3);
console.log(num * 4);
console.log(num * 5);
console.log(num * 6);
console.log(num * 7);
console.log(num * 8);
console.log(num * 9);
console.log('2와 9사이의 수를 입력하세요.');
💡실습1 - 정답
let num = 3;
if (num <= 9 && num >= 2) {
console.log(num * 1);
console.log(num * 2);
console.log(num * 3);
console.log(num * 4);
console.log(num * 5);
console.log(num * 6);
console.log(num * 7);
console.log(num * 8);
console.log(num * 9);
} else {
console.log('2와 9 사이의 수를 입력하세요.');
}
if(num < 2 || num > 9) {
console.log('2와 9 사이의 수를 입력하세요.');
} else {
console.log(num * 1);
console.log(num * 2);
console.log(num * 3);
console.log(num * 4);
console.log(num * 5);
console.log(num * 6);
console.log(num * 7);
console.log(num * 8);
console.log(num * 9);
}
삼항 조건 연산자
if문과 else문을 삼항 조건 연산자로 바꿔 쓸 수 있습니다.
let num = 5;
num % 2 === 0 ? console.log('짝수') : console.log('홀수'); // '홀수'
(조건식) ? true일때 실행되는 코드 : false일때 실행되는 코드
if(num % 2 === 0) {
console.log('짝수');
} else {
console.log('홀수');
}
삼항 조건 연산자는 조건식을 먼저 작성한 후 ?를 입력하고, ? 뒤로 참/거짓일 때 실행할 코드를 각각 입력합니다. 참/거짓일 때 실행할 코드는 :로 구분합니다. 위 코드는 아래 코드와 동일하게 동작합니다.
let num = 5;
if (num % 2 === 0) {
console.log('짝수입니다.');
} else {
console.log('홀수입니다.'); // '홀수입니다.'
}
위의 예시처럼 조건에 따라 실행할 코드가 간단하다면, 삼항 조건 연산자를 활용하는 것이 편리할 뿐만 아니라 가독성도 좋습니다. 그러나 조건에 따라 실행해야 할 내용이 복잡하다면, if문과 else문을 사용하는 것이 좋습니다.
Chapter5. 반복문
만약 컴퓨터에게 한 번에 한 가지 일만 시킬 수 있다면, 사람이 그 일을 처리하는 속도와 큰 차이가 없을지도 모릅니다. 컴퓨터가 한 번의 일을 처리할 때마다 같은 명령을 반복적으로 해주어야 하기 때문입니다. 우리가 의도한 만큼 같은 동작을 반복하도록 할 수는 없을까요? 이것이 바로 조건문과 함께 JavaScript의 대표적인 제어문인 반복문을 사용하는 이유입니다. 이번 시간에는 코드를 불필요하게 중복해서 작성하지 않아도 컴퓨터가 반복적으로 동작을 수행하도록 하는 방법인 반복문에 대해 학습해 보겠습니다.
학습 목표
- for 반복문을 작성할 수 있다.
- for 반복문이 여러 개의 코드 블록의 조합이라는 것을 이해한다.
- 구구단 n단 출력을 반복문으로 구현할 수 있다.
- 반복문 내부에 조건문을 활용할 수 있다.
- 이중반복문의 동작 순서를 이해할 수 있다.
- 구구단 1-9단 출력을 이중반복문으로 구현할 수 있다.
- for반복문과 while반복문의 차이점을 설명할 수 있다.
- for반복문으로 작성된 코드를 while반복문으로 바꿀 수 있다.
Chapter5-1. for문
- 개념학습: 대표적인 반복문이 for문에 대해 학습합니다.
- 퀴즈: 퀴즈를 통해 이해도를 점검합니다.
개념학습
for문
JavaScript의 대표적인 반복문인 for문에 대해서 학습해 보겠습니다.
먼저, 1부터 5까지의 수를 차례대로 더한 값을 구하는 코드를 작성해 보겠습니다. 가장 쉽게 떠올릴 수 있는 방법은 1부터 5까지의 수를 모두 직접 입력하는 것입니다.
let result = 0;
result = result + 1; // result = 0 + 1 -> result = 1 // result+= 1;
result = result + 2; // result = 1 + 2
result = result + 3; // result = 2 + 3
result = result + 4; // result = 3 + 4
result = result + 5; // result = 4 + 5
console.log(result); // 15
5! XX 100,000!
이런 식으로 작성해도 원하는 결과를 얻을 수 있습니다. 하지만 만약 1부터 5까지의 합이 아니라 100,000까지의 합이라면 어떻게 될까요? 같은 코드를 100,000줄을 반복해서 작성해야 할 것입니다. 코드를 작성하는 것도 힘들지만, 그런 코드는 가독성도 매우 떨어질 수밖에 없습니다.
이때 반복문을 사용하면 불필요한 코드를 반복적으로 사용하지 않고 간결하게 코드를 작성할 수 있습니다. 1부터 5까지의 수를 모두 더하는 코드를 for문으로 구현하면 다음과 같습니다.
let result = 0;
for (let num = 1; num <= 5; num++) {
result = result + num;
}
console.log(result); // 15
이 코드를 살펴보면, 아래와 같은 순서로 진행됩니다.
- for문 내부에 num이라는 변수를 선언하고 1이라는 초기값을 할당한다.
- 변수 num이 5보다 작거나 같은지 확인한다.
- 2의 결과가 true면, 코드블록 내부의 코드를 실행한다.
- 변수 num을 1 증가시킨다.
- 2부터 4까지 반복한다.
- 2의 결과가 false면, 반복문이 종료된다.
이렇게 for문을 사용하면 코드를 몇 번 반복하여 실행할지 결정할 수 있습니다. 조건식만 바꾸면 되기 때문에 1부터 5까지의 합을 구하는 코드와, 1부터 100,000까지의 합을 구하는 코드는 큰 차이가 없습니다.
let result = 0;
for (let num = 1; num <= 100000; num++) {
result = result + num;
}
console.log(result); // 5000050000
이처럼 반복 횟수가 크다고 해도 for문을 사용하면 간결하게 구현할 수 있습니다.
for문은 다음과 같은 형식으로 이루어져 있습니다.
for (초기값; 조건식; 증감식) {
// 실행할 코드
}
for 뒤에 오는 소괄호(())에는 각각 초기값, 조건식, 증감식이 들어갑니다. 코드블록에는 반복해서 실행할 코드가 들어갑니다. for문을 구성하는 각 요소에 대해 하나하나 자세히 살펴보겠습니다.
- 초기값: 증감식 반복 횟수를 카운트하는 역할을 하는 변수입니다. (이때 변수는 정수를 의미하는 **‘index’**의 약자인 i를 주로 사용합니다.) 초기값은 반복문의 코드블록 내부에서만 유효합니다.
- // 초기값(i)을 선언하고 1을 할당 for (let i = 1; 조건식; 증감식) { console.log(i); }
- 조건식: 코드블록 내부의 코드를 실행 여부를 결정합니다. true일 경우에는 코드를 실행하며, false일 경우 반복문이 종료됩니다.
- // i가 3보다 작거나 같을 경우 코드 실행, 3보다 클 경우 반복문 종료 for (let i = 1; i <= 3; 증감식) { console.log(i); }
- 증감식: 코드블록 내부의 코드를 실행한 후 초기값으로 선언된 변수를 증가 또는 감소시키기 위한 표현식입니다.
- // 코드가 실행될 때마다 i가 1씩 증가 for (let i = 1; i <= 3; i++) { console.log(i); // 1 2 3 }
위 예제의 실행 순서는 다음과 같습니다.
- for문 내부에서 유효한 변수 i를 선언하고 1을 할당한다.
- 조건식에 따라 i가 3보다 작거나 같은지 여부를 평가한다. 현재 i는 1이므로 i <= 3은 true로 평가된다.
- 코드블록 내부의 console.log(i)가 실행되어 1이 출력된다.
- 증감식에 따라 i가 1 증가한다. i는 2가 된다.
- 조건식에 따라 i가 3보다 작거나 같은지 여부를 평가한다. 현재 i는 2이므로 i <= 3은 true로 평가된다.
- 코드블록 내부의 console.log(i)가 실행되어 2가 출력된다.
- 증감식에 따라 i가 1 증가한다. i는 3이 된다.
- 조건식에 따라 i가 3보다 작거나 같은지 여부를 평가한다. 현재 i는 3이므로 i <= 3은 true로 평가된다.
- 코드블록 내부의 console.log(i)가 실행되어 3이 출력된다.
- 증감식에 따라 i가 1 증가한다. i는 4가 된다.
- 조건식에 따라 i가 3보다 작거나 같은지 여부를 평가한다. 현재 i는 4이므로 i <= 3은 false로 평가된다.
- 반복문이 종료된다.
💻 실습1)
0부터 10까지의 숫자를 출력하는 코드를 반복문으로 작성하세요.
// 실습) 0부터 10까지의 숫자를 출력하는 코드를 반복문으로 작성하세요.
for (;;) {
console.log();
}
[실습] 5-1. for문 - 1
💡 실습1 - 정답)
for(let num = 0;num < 11; num++) {
console.log(num);
}Chapter5-2. 반복문 활용하기
- 개념학습: 반복문을 활용하는 다양한 방법에 대해 학습합니다.
- 퀴즈: 퀴즈를 통해 반복문을 활용하는 다양한 방법에 대한 이해도를 점검합니다.
개념학습
반복문 활용하기
이번에는 반복문으로 구구단을 출력해 보겠습니다. 조건문을 학습한 후 다음과 같이 구구단 n단을 출력했습니다.
let num = 3;
if (num >= 2 && num <= 9) {
console.log(num * 1); // 3
console.log(num * 2); // 6
console.log(num * 3); // 9
console.log(num * 4); // 12
console.log(num * 5); // 15
console.log(num * 6); // 18
console.log(num * 7); // 21
console.log(num * 8); // 24
console.log(num * 9); // 27
} else {
console.log('2와 9사이의 수를 입력하세요.');
}
변수 num에 할당된 값에 따라 구구단의 결과가 다르게 출력됩니다. 그런데 반복문을 학습한 지금 시점에 이 코드를 보니, for문을 사용하면 지금보다 간결하게 코드를 작성할 수 있을 것 같지 않나요? 좌변에 있는 변수 num과 곱해지는 우변에 있는 숫자들을 보니, 1부터 9까지의 숫자가 차례대로 나열되어 있습니다. 우변에 들어갈 숫자를 반복문으로 구현하면 어떻게 될까요?
let num = 3;
if (num >= 2 && num <= 9) {
for (let i = 1; i <= 9; i++) {
console.log(num * i);
}
} else {
console.log('2와 9사이의 수를 입력하세요.');
}
💻 실습1)
위 코드를 입력하고 콘솔에서 결과를 확인하세요.
이처럼 반복문을 활용하면, 훨씬 간결하게 코드를 작성할 수 있습니다.
문자열과 반복문
이번에는 문자열에 반복문을 사용해 보겠습니다. 문자열에 반복문을 활용하기 위해 문자열에 대해 몇 가지 복습을 해보겠습니다.
인덱스(index)
문자열의 각 문자는 순서를 가지고 있습니다. 첫 번째 문자의 인덱스는 0입니다.
let str = 'codesandbox';
console.log(str[0]); // 'c'
console.log(str[4]); // 's'
특정 문자의 인덱스를 확인하는 메서드는 indexOf()입니다.
let str = 'codesandbox';
console.log(str.indexOf('c')); // 0
console.log(str.indexOf('e')); // 3
만약 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회합니다.
길이(length)
문자열의 길이는 문자열 뒤에 .length를 붙임으로써 조회할 수 있습니다.
let str = 'codesandbox';
console.log(str.length); // 11
for문의 초기화, 조건식, 증감식은 모두 숫자 타입과 관련이 있습니다. 만약 문자열의 첫 번째 문자부터 마지막 문자까지 모두 출력하는 코드를 구현하려면 어떻게 해야 할까요?
let str = 'codesandbox';
for (let i = 0; i <= 10; i++) {
console.log(str[i]);
}
위의 코드를 살펴보면, 변수 i가 0부터 9까지 1씩 증가하며 반복문이 실행됩니다. 변수 str에 할당된 문자열 'codesandbox'의 첫 번째 문자인 ‘c’의 인덱스는 0, 마지막 문자인 ‘x’의 인덱스는 10이므로, 결과적으로 이 코드는 각 문자를 하나씩 차례대로 출력하는 코드가 됩니다.
그런데 이렇게 코드를 구현하려면 문자열의 길이를 알고 있어야만 합니다. 문자열의 길이가 매우 길거나 또는 알 수 없는 상태일 때는 어떻게 해야 할까요?
let str = 'codesandbox';
for (let i = 0; i <= str.length - 1; i++) {
console.log(str[i]);
}
문자열 'codesandbox'의 길이는 11입니다. 0부터 시작하는 인덱스와는 달리, 길이는 말 그대로 문자열에 속한 문자의 개수를 나타냅니다. 따라서, 문자열의 마지막 문자의 인덱스는 문자열의 길이보다 1만큼 작습니다. 위의 예제처럼 i <= str.length - 1(또는 i < str.length)로 조건식을 작성하면, 문자열의 끝까지 순회하는 반복문을 구현할 수 있습니다.
Chapter5-3. 반복문과 조건문
- 개념학습: 반복문 내부에 조건문을 사용하여 보다 복잡한 문제를 해결하는 방법을 학습합니다.
- 퀴즈: 퀴즈를 통해 이해도를 점검합니다.
개념학습
반복문과 조건문
이제 반복문을 사용하는 이유와 사용 방법에 대해 어느 정도 이해가 되었을 겁니다. 반복문만 가지고도 다양한 문제를 해결할 수 있습니다. 하지만 반복이 진행되는 동안, 특정 조건에 따라 문제를 해결하도록 코드를 작성한다면, 더욱 복잡한 문제도 해결할 수 있습니다. 특정한 조건이라는 말을 들었을 때 조건문이라는 단어가 떠오르셨다면, 이전 학습을 충분히 잘 따라오신 겁니다.
💻 실습1)
1부터 10까지의 숫자 중 홀수만 출력하도록 코드를 작성하세요.
// 실습1) 1부터 10까지의 숫자 중 홀수만 출력하도록 코드를 작성하세요.
for (let i = 1; i <= 10; i++) {
// 조건문을 사용하여 홀수만 출력하도록 코드를 작성하세요.
}
[실습] 5-3. 반복문과 조건문 - 1
💡 실습1 - 정답)
// 실습) 1부터 10까지의 숫자 중 홀수만 출력하도록 코드를 작성하세요.
for (let i = 1; i <= 10; i++) {
// 조건문을 사용하여 홀수만 출력하도록 코드를 작성하세요.
if (i % 2 === 1) {
console.log(i);
}
}
위 실습 예제에서 i는 1에서 시작하여 1씩 증가하는 동안 반복하여 실행됩니다. i가 10일 때까지 실행된 후, i가 11이 된 시점에서 반복문이 종료됩니다. 반복문 내부에서 실행되고 있는 코드는 if문입니다. if문은 소괄호 안에 있는 조건식이 true로 평가될 경우, 코드블록 내부의 코드가 실행됩니다. 조건식은 i를 2로 나누었을 때 나머지가 1인지, 즉 홀수인지 여부를 확인하고 있습니다. 따라서 i가 1부터 10까지 차례대로 증가하는 가운데 i가 홀수인 경우에만 i를 출력하고 있는 것입니다.
조금 더 나아가 i가 홀수인지, 짝수인지 여부를 확인하고 싶다면 다음과 같이 코드를 작성하면 됩니다.
for (let i = 1; i <= 10; i++) {
if (i % 2 === 1) {
console.log(`${i}는 홀수입니다.`);
} else {
console.log(`${i}는 짝수입니다`);
}
}
💻 실습2)
주어진 문자열의 문자들 중, 인덱스가 짝수인 문자만 출력하도록 코드를 구현하세요.
// 실습2) 주어진 문자열의 문자들 중, 인덱스가 짝수인 문자만 출력하도록 코드를 구현하세요.
let str = 'software engineering';
// 변수 str에 할당된 문자열의 모든 문자를 순회하도록 for문을 작성하세요.
for (;;) {
// false가 입력되어 있는 부분에 알맞은 조건식을 넣어야 합니다.
if (false) {
console.log();
}
}
[실습] 5-3. 반복문과 조건문 - 2
💡실습2 - 정답)
let str = 'software engineering';
for (let i = 0; i < str.length; i++) {
if (i % 2 === 0) {
console.log(str[i]);
}
}
💻 실습3)
주어진 문자열의 문자열의 길이가 10 이상이라면, 해당 문자열의 모든 문자를 대문자로 변경하여 하나씩 문자를 출력하도록 코드를 구현하세요.
// 실습**3**) **주어진 문자열의 문자열의 길이가 10 이상이라면,
// 해당 문자열의 모든 문자를 대문자로 변경하여 하나씩 문자를 출력하도록 코드를 구현하세요.**
let str = 'javascriptjavaspring';
let str = 'spring';
// 출력
/**
J
A
V
A
S
C
R
I
P
T
J
A
V
A
S
P
R
I
N
G
**/
[실습] 5-4. 반복문과 조건문 - 3
Chapter5-4. 반복문의 중첩
- 개념학습: 반복문을 중첩하는 방법과 코드가 실행되는 과정을 학습합니다.
- 퀴즈: 퀴즈를 통해 반복문의 중첩에 대한 이해도를 점검합니다.
개념학습
반복문의 중첩
반복문은 중첩이 가능합니다. 다시 말해 반복문 내부에 또 다른 반복문을 사용할 수 있습니다.
다음 예시는 정육면체 주사위 두 개를 굴려서 나올 수 있는 모든 경우의 수를 구하기 위한 코드입니다.
for (let i = 1; i <= 6; i++) {
for (let j = 1; j <= 6; j++) {
console.log(`첫번째 주사위는 ${i}, 두번째 주사위는 ${j}입니다.`);
}
}
💻 실습1
위 코드를 복사 붙여 넣기 해서 결과를 확인하고, 왜 이런 결과가 나왔는지 생각해 보세요.
위 코드의 실행순서는 다음과 같습니다.
- 변수 i를 선언하고 1을 할당한다.
- i가 6보다 작거나 같은지 평가한다.
- 변수 j를 선언하고 1을 할당한다.
- 변수 j가 6보다 작거나 같은지 평가한다.
- i와 j를 각각 출력한다. (첫번째 주사위는 ${1}, 두번째 주사위는 ${1}입니다.)
- j가 1 증가한다.
- 변수 j가 6보다 작거나 같은지 평가한다.
- i와 j를 각각 출력한다. (첫번째 주사위는 ${1}, 두번째 주사위는 ${2}입니다.)
- j가 1 증가한다.
- 변수 j가 6보다 작거나 같은지 평가한다.
- i와 j를 각각 출력한다. (첫번째 주사위는 ${1}, 두번째 주사위는 ${3}입니다.)
- j가 1 증가한다.
- 변수 j가 6보다 작거나 같은지 평가한다.
- i와 j를 각각 출력한다. (첫번째 주사위는 ${1}, 두번째 주사위는 ${4}입니다.)
- j가 1 증가한다.
- 변수 j가 6보다 작거나 같은지 평가한다.
- i와 j를 각각 출력한다. (첫번째 주사위는 ${1}, 두번째 주사위는 ${5}입니다.)
- j가 1 증가한다.
- 변수 j가 6보다 작거나 같은지 평가한다.
- i와 j를 각각 출력한다. (첫번째 주사위는 ${1}, 두번째 주사위는 ${6}입니다.)
- j가 1 증가한다.
- i가 6보다 작거나 같은지 평가한다.
- 내부 반복문을 종료한다.
- i가 1증가한다.
- i가 6보다 작거나 같은지 평가한다.
- 변수 j를 선언하고 1을 할당한다.
- 변수 j가 6보다 작거나 같은지 평가한다.
- i와 j를 각각 출력한다. (첫번째 주사위는 ${2}, 두번째 주사위는 ${1}입니다.)
- j가 1 증가한다.
- 변수 j가 6보다 작거나 같은지 평가한다.
- i와 j를 각각 출력한다. (첫번째 주사위는 ${2}, 두번째 주사위는 ${2}입니다.)
- j가 1 증가한다.
- …(중략)…
- 변수 j가 6보다 작거나 같은지 평가한다.
- i와 j를 각각 출력한다. (첫번째 주사위는 ${6}, 두번째 주사위는 ${6}입니다.)
- j가 1 증가한다.
- 변수 j가 6보다 작거나 같은지 평가한다.
- 내부 반복문을 종료한다.
- i가 1증가한다.
- i가 6보다 작거나 같은지 평가한다.
- 외부 반복문을 종료한다.
이처럼 외부 반복문의 초기화와 조건식 평가가 이루어진 후, 내부 반복문이 실행됩니다. 내부 반복문 또한 초기화와 조건식 평가가 이루어진 후 내부에 있는 코드가 실행되고, 증감식, 조건식 평가가 반복적으로 이루어집니다. 내부 반복문의 조건식 평가가 false가 되면, 내부 반복문은 종료가 되고 외부 반복문의 증감식과 조건식 평가가 이루어집니다. 이때 조건식 평가가 true면, 다시 내부 반복문을 순환하는 방식으로 진행됩니다. 외부 반복문의 조건식이 false가 되면 모든 반복문이 종료가 됩니다.
반복문은 두 개 이상 중첩 가능합니다. 2개의 반복문이 중첩된 경우 이중반복문, 3개의 반복문이 중첩된 경우 삼중반복문이라고 부르기도 합니다. 아래는 3개의 반복문이 중첩된 삼중반복문의 예시입니다.
for (let first = 0; first <= 3; first++) {
for (let second = 0; second <= 3; second++) {
for (let third = 0; third <= 3; third++) {
console.log(
`first는 ${first}, second는 ${second}, third는 ${third}입니다.`);
}
}
}
💻 실습2
위 코드를 복사 붙여 넣기 해서 결과를 확인하고, 왜 이런 결과가 나왔는지 생각해 보세요.
이중반복문의 좋은 예시 중 하나가 바로 구구단입니다. 구구단을 2단부터 9단까지 모두 출력할 때, 좌변에 있는 숫자는 고정된 상태로 우변에 있는 숫자가 1씩 증가합니다. 우변에 있는 숫자가 9까지 진행된 후에 좌변에 있는 숫자가 1 증가합니다. 이제 이중반복문으로 구구단 전체를 여러분이 직접 구현해 보세요.
💻 실습3
이중반복문으로 구구단 전체를 출력하는 코드를 구현하세요.
// 이중반복문으로 구구단 전체를 출력하는 코드를 구현하세요.
// 2 x 1 = 2
// 2 x 2 = 4
// 2 x 3 = 6
.....~~~~~
// 9 x 9 = 81
[실습] 5-4. 반복문의 중첩 - 3
💡실습3 -정답)
for (let i = 2; i <= 9; i++) {
console.log(`${i}단`);
for (let j = 1; j <= 9; j++) {
console.log(`${i} x ${j} = ${i * j}`);
}
}
// 구구단 출력 2단부터 9단 까지 출력해야 합니다.
// 이중 반복문 사용
// 이중 반복문의 출력 위치까지 확인해 볼 수 있는 코드입니다.
// 다중 반복문이 어렵다면 아래 코드를 디버깅을 활용하여 꼭 여러번 살펴보세요.
for(firstNum = 2; firstNum < 10; firstNum++) {
console.log(`${firstNum}단 시작합니다`);
for(secoundNum = 1; secoundNum < 10; secoundNum++) {
console.log(`${firstNum} x ${secoundNum} = ${firstNum * secoundNum}`);
}
console.log(`${firstNum}단이 끝났습니다.`);
console.log(``);
}Chapter5-5. while문
- 개념학습: 또 다른 반복문인 while문에 대해 학습합니다.
- 퀴즈: 퀴즈를 통해 while문에 대한 이해도를 점검합니다.
개념학습
대표적인 반복문인 for문을 학습했습니다. 이번에는 또 다른 반복문인 while문을 배워 보겠습니다.
초기화, 조건식, 증감식이 모두 필요한 for문과 달리 while문은 조건식만 입력한 후 조건식의 평가결과가 true인 경우 코드블록 내부의 코드를 반복하여 실행합니다.
let num = 0;
while (num < 3) {
console.log(num);
num++;
}
console.log("while loop exit");
위 코드를 for문으로 바꾸면 다음과 같습니다.
for (let num = 0; num < 3; num++) {
console.log(num); // 0 1 2
}
while문을 사용할 때는 무한루프를 주의해야 합니다. 무한루프란 반복문이 종료되는 조건식이 항상 참으로 평가되어 무한히 반복되는 현상을 말합니다.
let num = 1;
while (num > 0) {
console.log(num);
num++;
}
위 코드에서 num은 항상 0보다 크므로, 무한루프가 발생합니다. 따라서 while문을 작성할 때는 조건식이 false로 평가되는 순간이 있는지 반드시 주의하여야 합니다.
do…while문
do…while문은 while 뒤에 오는 조건식이 true로 평가되는 동안 do 뒤에 오는 코드블록 내부의 코드를 반복하여 실행합니다. 단, 이 경우 do의 코드블록 내부의 코드가 최소 한 번은 실행됩니다.
do {
console.log('코드블록 내부의 코드는 최소 한 번은 실행됩니다.')
// '코드블록 내부의 코드는 최소 한 번은 실행됩니다.'
} while (false)
💻 실습1)
위 코드를 복사 붙여넣기 하고 결과를 확인하세요.
[실습] 5-5. while문 - 1
while 뒤에 오는 조건식이 항상 false임에도 do의 코드블록 내부에 있는 코드가 한 번은 실행되는 것을 확인할 수 있습니다.
for문과 while문
for문과 while문의 용도는 명확하게 구분되지 않습니다. while문으로 할 수 있는 것을 for문으로 구현이 가능하고, for문으로 할 수 있는 것을 while문으로 구현이 가능합니다. 그러나 주로 사용하는 상황은 있습니다. 아래 내용을 참고하여 상황에 맞는 반복문을 사용하시기 바랍니다.
for문을 사용하는 경우
- 반복 횟수가 비교적 명확할 때
- 배열, 문자열 내부를 순회할 때
- 반복문의 중첩이 필요할 때
while문을 사용하는 경우
- 반복 횟수가 명확하지 않을 때
Chapter6. 함수
학습 목표
- 함수표현식, 함수선언문으로 함수를 정의하고 호출할 수 있다.
- 매개변수와 전달인자에 대해 설명할 수 있다.
- 함수에 return문이 필요한 이유를 이해한다.
- 함수를 이용해 구구단 n단을 출력하는 재사용이 가능한 코드를 작성할 수 있다.
Chapter6-0. 함수 개요
현실에서 발생하는 대부분의 복잡한 문제는 더 작고 간단한 문제로 나눌 수 있습니다. 복잡한 문제를 해결하기 위해서는 반대로 작고 간단한 문제를 하나씩 해결하고, 마지막에는 크고 복잡한 문제를 해결합니다. 이러한 과정을 컴퓨터는 함수라는 것을 사용해 해결합니다.
함수는 입력에 따라 그에 걸맞은 작업을 하는 하나의 작업 단위입니다. 샌드위치를 만드는 과정도 함수로 나타낼 수 있습니다. 우리가 하나의 샌드위치를 만들기 위해서는 여러 재료와 만들고자 하는 샌드위치의 종류에 맞는 레시피가 필요합니다. 샌드위치를 만드는 레시피의 종류에 따라 빵을 얼마나 구울지, 양상추를 어떻게 자를지, 토마토를 넣을지 말지가 달라집니다.
만약 베이컨 에그 샌드위치를 기대하고 베이컨과 달걀을 재료로 사용했는데, 토마토 샌드위치가 나오는 경우를 생각해 봅시다. 이 경우에는 준비한 재료가 베이컨이나 달걀이 아니라 토마토였거나, 밖에서 토마토 샌드위치를 사 온다는 황당한 내용이 레시피에 적혀 있을 수 있습니다. 이런 황당한 일이 일어나지 않도록, 논리적인 일련의 작업을 하는 하나의 단위를 함수라고 합니다.
Chapter6-1. 함수 정의
- 개념학습: 동영상 강의를 통해 함수를 정의하는 방법을 학습합니다.
- 퀴즈: 퀴즈를 통해 함수를 정의하는 방법에 대한 이해도를 점검합니다.
개념학습
함수 정의
이번 시간에는 JavaScript에서 매우 중요한 개념인 함수에 대해서 배워보도록 하겠습니다. 함수는 입력을 받아서 코드블록 내부의 코드를 실행한 후 함수의 실행결과를 반환하는 일련의 과정의 묶음입니다.
[그림] 함수 정의 - 1
먼저, 함수 외부에서 특정한 입력값을 전달하여 호출할 수 있습니다. 함수가 호출되면 함수의 내부의 코드가 실행됩니다. 그리고 함수의 실행결과는 다시 함수 외부로 반환(return)할 수 있습니다.
[그림] 함수 정의 - 2
예를 들어, 함수 외부에서 x는 2, y는 3이라는 입력값이 주어졌다고 해보겠습니다. 함수 내부에는 x와 y를 더하여 함수 외부로 반환하도록 코드가 작성되어 있습니다. x와 y를 더한 값은 5이기 때문에, 이 함수는 5를 반환하게 됩니다. 만약 함수외부에서 x와 y에 2와 3이 아닌 다른 값을 전달했다면, 다른 결과가 나왔을 거라는 것을 유추할 수 있을 겁니다.
정리하자면, 함수를 사용한다는 것은 특정한 코드실행 과정을 하나의 묶음으로 묶어서 필요할 때마다 호출하여 실행한다는 것을 의미합니다. 그리고 이때, 특정한 코드실행 과정을 묶어서 함수를 생성하는 것을 ‘함수를 정의한다.’고 합니다.
함수선언문과 함수표현식
JavaScript에서 함수를 정의하는 방법은 여러 가지가 있습니다. 그중에서 가장 대표적인 함수 정의 방법인 함수선언문과 함수표현식을 배워보도록 하겠습니다.
먼저 문자열 ‘hello world’를 출력하는 함수를 함수선언문으로 정의해 보겠습니다.
// 함수선언문으로 정의한 함수
function greeting () {
console.log('hello world')
};
greeting();
변수를 선언할 때 let키워드를 사용하듯, 함수를 정의할 때는 function 키워드를 사용합니다. function 키워드 다음에는 함수명을 지정해 줍니다. 위 예제에는 greeting이라는 함수명을 사용했습니다. 그 뒤에는 소괄호(())를 입력해야 합니다. 소괄호 안에는 함수 내부에서 사용할 수 있는 매개변수를 사용할 수 있습니다. 매개변수와 관련된 내용은 뒤에서 따로 학습하도록 하겠습니다. 다음으로, 실행할 코드를 코드블록({}) 내부에 넣어주면 됩니다. 코드블록 안에는 문자열 ‘hello world’를 출력하는 코드를 작성했습니다.
이번에는 직접 함수선언문으로 함수를 정의해 보겠습니다.
💻 실습1)
문자열 ‘함수선언문’을 출력하는 declared라는 이름의 함수를 함수선언문으로 정의해 보세요.
// 실습1) 문자열 ‘함수선언문’을 출력하는
// declared라는 이름의 함수를 함수선언문으로
// 정의해 보세요.
[실습] 6-1. 함수의 정의 - 1
💡 실습1 - 정답)
// 문자열 '함수선언문'을 출력하는 declared라는 이름의 함수를 함수선언문으로 정의해 보세요.
function declared () {
console.log('함수선언문');
}
그런데 신기하게도, 지금까지와 달리 터미널에 node index.js를 입력해도 ‘함수선언문’이라는 문자열이 출력되지 않는다는 것을 발견하셨을 겁니다. 위에서 언급한 것처럼, 함수는 호출되었을 때만 코드블록 내부의 코드가 실행됩니다. 함수 호출에 관련된 내용은 다음 시간에 다루도록 하겠습니다.
이번에는 함수표현식으로 똑같은 함수를 정의해 보겠습니다.
// 함수표현식으로 정의한 함수
let greeting = function () {
console.log('hello world')
};
함수표현식은 변수를 선언할 때 사용했던 let 키워드를 사용해서 변수를 선언하고, 함수를 할당하는 형태로 코드를 작성하면 됩니다. 이때, 함수선언문과는 달리, 함수에는 특별한 식별자를 지정할 필요가 없습니다. JavaScript에서는 이처럼 함수를 변수에 할당하는 것이 가능합니다. 그리고 이렇게 변수에 함수를 할당한 것과 같은 형태로 함수를 정의하는 것을 함수표현식이라고 합니다.
💻 실습2)
문자열 ‘함수표현식’을 출력하는 expression이라는 이름의 함수를 함수표현식으로 정의해 보세요.
// 실습2) 문자열 ‘함수표현식’을 출력하는
// expression이라는 이름의 함수를 함수표현식으로 정의해 보세요.
[실습] 6-1. 함수의 정의 - 2
💡 실습2 - 정답)
// 문자열 '함수표현식'을 출력하는 expression이라는 이름의 함수를 함수선언문으로 정의해 보세요.
let expression = function () {
console.log('함수표현식');
}
함수선언문은 function이라는 함수 선언 키워드를 사용했고, 함수표현식은 변수 선언 키워드로 변수를 선언한 후, 함수를 할당하는 형태로 함수를 정의했습니다. 변수를 선언하듯 함수 선언 키워드인 function 키워드를 사용하여 함수를 선언하는 방식을 함수선언문, 함수 선언 키워드가 아닌 변수 선언 키워드를 사용하여 함수를 ‘표현’한 방식을 함수표현식이라고 기억하면 이 두 가지 함수 정의 방법을 잘 기억하실 수 있을 겁니다.
[그림] 함수의 정의 - 3
Chapter6-2. 함수 호출
- 개념학습: 함수 호출이 필요한 이유와 함수를 호출하는 방법을 학습합니다.
- 퀴즈: 퀴즈를 통해 함수 호출에 대한 이해도를 점검합니다.
개념학습
함수 호출
지난 챕터에서 함수를 정의하는 방법을 학습하고 실습까지 진행해 보았습니다. 그런데 지금까지 해왔던 실습과 한 가지 다른 점이 있습니다. 이전까지의 실습은 console.log()로 콘솔에 우리가 입력한 내용이 출력되는지 확인하는 방식이었습니다. 그러나 이번에는 함수를 정의하는 코드를 작성했음에도 콘솔에 아무것도 출력되지 않습니다. 함수 내부에 있는 console.log()가 실행되지 않고 있는 건데요. 왜 그런 걸까요?
그 이유는 바로, 함수 내부에 있는 코드는 함수를 호출했을 때만 실행되기 때문입니다. 다시 말해, 함수 호출이란 함수를 실행시키는 명령을 전달하는 것과 같습니다. 함수선언문으로 정의한 함수를 호출해 보겠습니다.
function greeting () {
console.log('hello world')
};
greeting() // 'hello world'
이처럼 함수를 정의할 때 지정한 함수명 뒤에 소괄호(())를 붙이면 함수를 호출할 수 있습니다.
함수선언문이 아닌 함수표현식으로 정의한 함수는 어떻게 호출할까요? 함수표현식으로 정의한 함수는 선언한 변수명에 소괄호를 붙여주면 됩니다.
let greeting = function () {
console.log('hello world')
};
greeting() // 'hello world'
💻 실습1)
아래 함수들을 각각 호출하고 결과를 확인하세요.
// 실습) 아래 함수들을 각각 호출하고 결과를 확인하세요.
function declared() {
console.log('함수선언문');
}
let expression = function () {
console.log('함수표현식');
};
// 여기에 코드를 작성하세요.
[실습] 6-2. 함수 호출 - 1
💡 실습1 - 정답)
declared() // '함수선언문'
expression() // '함수표현식'Chapter6-3. 매개변수와 전달인자
- 개념학습: 매개변수와 전달인자를 사용하여 함수 외부에서 함수 내부로 값을 전달하는 방법을 학습합니다.
- 퀴즈: 매개변수와 전달인자에 대한 이해도를 점검합니다.
개념학습
매개변수와 전달인자
이번 시간에는 매개변수와 전달인자에 대해서 학습하겠습니다. 매개변수는 함수를 정의할 때 선언하고, 함수 코드 블록 안에서 변수처럼 취급됩니다. 앞서 설명한 것처럼 함수를 정의할 때 소괄호(())에 매개변수를 추가할 수 있습니다. 이렇게 추가된 매개변수는 함수 내부에서 마치 변수와 같은 역할을 하게 됩니다.
function greeting (name) {
console.log('hello ' + name);
}
greeting이라는 이름의 함수가 name이라는 매개변수를 가지고 있습니다. 현재는 아무것도 할당되어 있지 않으므로, 매개변수 name은 undefined로 초기화되어 있습니다. 그렇다면 이 매개변수 name에 값을 할당하기 위해서는 어떻게 하면 될까요?
바로 전달인자를 사용하면 됩니다.
function greeting (name) {
console.log('hello ' + name);
}
greeting('kimcoding'); // 'hello kimcoding'
함수를 호출할 때 소괄호 안에 값을 넣음으로써 매개변수에 값을 할당할 수 있습니다. 이것을 바로 전달인자라고 합니다. 호출할 때 전달한 'kimcoding'이라는 문자열이 함수 내부에서 매개변수 name에 할당된 것을 확인할 수 있습니다. 이처럼 매개변수와 전달인자를 활용하면 함수 외부에서 함수 내부로 값을 전달할 수 있습니다. 지금까지 배운 내용을 활용해서 구구단 n단을 출력하는 함수를 정의하고 호출해 볼까요?
💻 실습1
구구단 n단을 출력하는 함수를 정의하고 호출하세요.
// 실습) 구구단 n단을 출력하는 함수를 정의하고 호출하세요.
function multiplication(n) {
//여기에 코드를 입력하세요.
}
multiplication(2);
// 전달인자를 바꾸면 구구단 n단이 출력되어야 합니다.
// console.log()를 9번 입력해도 되지만, 더 간결한 코드를 작성할 수 있는지 고민해 보세요.
[실습] 6-3. 매개변수와 전달인자 - 1
💡 실습1 - 정답)
function multiplication (n) {
for(let i = 1; i <= 9; i++) {
console.log(n * i);
}
}
multiplication(3);
매개변수를 여러 개 사용하는 것도 가능할까요? 물론 가능합니다. 매개변수의 개수에 맞게 전달인자를 전달하면 매개변수에 차례대로 전달됩니다.
function greeting (user1, user2) {
console.log('hello ' + user1);
console.log('hello ' + user2);
};
greeting('kimcoding', 'parkhacker');
그렇다면 만약 매개변수의 수보다 적은 전달인자가 전달되면 어떻게 될까요? 또는 매개변수보다 많은 전달인자가 전달된다면 어떻게 될까요?
function getUserName (user1, user2) {
console.log(user1);
console.log(user2);
};
getUserName('kimcoding'); // 'kimcoding' undefined
아무것도 전달되지 않은 매개변수는 undefined로 초기화되어 있습니다. 아무것도 할당하지 않은 변수가 undefined로 초기화되어 있는 것과 같습니다.
한 가지 더 배워볼까요? 매개변수는 함수 내부에서만 사용이 가능합니다. 함수 내부에서 선언한 변수도 마찬가지로 함수 내부에서만 사용이 가능합니다.
function getUser (number) {
let userName = 'kimcoding';
};
console.log(number); // Uncaught ReferenceError: number is not defined
console.log(userName); // Uncaught ReferenceError: userName is not defined
이처럼 매개변수와 함수 내부에서 선언한 변수는 자신이 선언된 위치에 따라 유효범위가 결정됩니다. 변수가 유효한 범위를 스코프라고 부릅니다. 스코프는 굉장히 중요한 개념이기 때문에 추후에 더 자세하게 다루도록 하겠습니다. 지금은 함수 안에서 선언된 변수는 함수 내부에서만 사용 가능하다는 정도로 알고 계시면 충분합니다.
지금까지 매개변수와 전달인자에 대해 학습했습니다. 매개변수와 전달인자를 활용하면, 함수 외부에서 함수 내부로 값을 전달할 수 있습니다. 그러면 함수 내부의 코드 실행 결과를 함수 외부로 반환(return)하려면 어떻게 해야 할까요?
Chapter6-4. return문
- 개념학습: return문이 함수의 실행결과를 외부로 반환하기 위해 사용된다는 것을 학습합니다.
- 퀴즈: 퀴즈를 통해 return문에 대한 이해도를 점검합니다.
개념학습
return문
지금까지 함수를 정의하는 방법, 호출하는 방법, 외부에서 값을 전달하는 방법 등을 학습했습니다. 그 과정에서 주로 함수 내부에서 console.log()를 사용하여 값을 콘솔창에 출력하는 방식으로 확인을 했습니다. 그런데 외부에서 값을 전달받았듯 함수의 실행결과를 외부로 반환할 수는 없을까요? 여기서 반환한다는 것은 함수 외부에서 함수의 결과값을 사용할 수 있다는 의미입니다.
function add (x, y) {
return x + y; // 반환문
}
이 함수는 두 수를 입력받아 합을 리턴하는 함수입니다. 여기서 주목해야 할 것은 return이라는 키워드입니다. 지금까지 사용했던 ‘반환한다’라는 표현도 return을 번역한 표현이라고 보시면 됩니다. 지금부터는 ‘리턴한다’라는 표현을 주로 사용하도록 하겠습니다.
return문은 아래와 같은 중요한 역할을 합니다.
- 함수 내부의 코드가 차례대로 실행되다가 return문을 만나면 값을 반환한 후 함수는 종료됩니다. 다시 말해 return문 뒤에 나오는 코드는 실행되지 않습니다.
- function add (x, y) { return x + y; // 반환문 console.log('실행되지 않습니다'); }
- return문에 작성된 코드를 실행한 후 결과를 함수 외부로 리턴합니다. 함수 외부에서 함수를 호출하면 함수의 실행결과를 확인할 수 있습니다.
- function add (x, y) { return x + y; // 반환문 } console.log(add(3, 2)); // 5
- 또는 함수 호출의 결과를 변수에 할당하는 것도 가능합니다.
- function add (x, y) { return x + y; // 반환문 } let result = add(3, 2); console.log(result); // 5
- 조금만 더 응용해 본다면, 함수의 호출 결과끼리의 연산도 가능합니다.
- function add (x, y) { return x + y; // 반환문 } let result = add(3, 2) + add(5, 7); console.log(result); // 17
💻 실습1)
두 수를 입력받아 두 수의 곱을 리턴하는 함수를 정의하세요.
//실습1) 두 수를 입력 받아 두 수의 곱을 리턴하는 함수를 정의하세요.
[실습] 6-2. 함수 호출 - 1
💡 실습1 - 정답)
function multiply(num1, num2) {
return num1 * num2;
}
console.log(multiply(30, 20));
console.log(multiply(50, 10));
함수의 활용 목적에 대해서 다시 한번 생각해 보겠습니다. 앞서 함수는 입력을 받아서 코드블록 내부의 코드를 실행한 후 반환하는 일련의 과정의 묶음이라고 설명했습니다. 함수는 반복해서 사용되는 동작을 하나로 묶어두었다가 필요할 때마다 호출하여 사용할 수 있습니다.
함수는 JavaScript에서 사용 가능한 모든 값을 반환할 수 있기 때문에 굉장히 다양한 방법으로 활용이 가능합니다. 함수를 응용하는 다양한 방법에 대해 계속해서 학습하겠습니다.
[JavaScript] 배열
여러분이 이전에 학습했던 변수와 타입을 기억해 보겠습니다. 변수에는 JavaScript에서 사용할 수 있는 다양한 타입의 값을 할당할 수 있었습니다. 단, 하나의 변수에 하나의 값만 넣을 수 있었습니다. 그러나 만약 인스타그램이나 카카오톡 같은 대규모 서비스에서 여러 개의 데이터를 한 번에 처리할 수 없다면, 매번 새로운 변수를 선언하는 일을 반복해야 할 것입니다.
그럼 여러 개의 데이터를 한 번에 처리하는 방법은 없을까요? JavaScript에는 이렇게 대량의 데이터를 쉽게 다룰 수 있게 해주는 데이터 타입이 존재합니다. 바로 배열과 객체입니다. 배열이나 객체를 사용하면 여러 번의 선언과 할당을 해야만 했던 작업을 단 한 번의 선언으로 해결할 수 있습니다.
Before You Learn
- 변수: 변수를 선언하고 값을 할당할 수 있어야 합니다.
- 타입: 배열과 객체도 JavaScript의 타입 중 하나입니다. 지금까지 학습했던 타입과 이번에 학습할 배열과 객체에는 근본적인 차이점이 존재합니다. 그 차이점에 대해 파악하기 위해서는 지금까지 학습했던 타입에 대한 이해가 필요합니다.
- 반복문: 배열과 객체는 대량의 데이터를 가지고 있습니다. 그 안에 있는 각각의 데이터를 활용하기 위해서는 배열과 객체를 반복문으로 순회할 수 있어야 합니다.
앞에서 학습한 자바스크립트의 기본 문법과 제어문에 대한 기초지식을 가지고 있어야 합니다. 기억이 잘 나지 않는다면, 이전에 학습한 콘텐츠를 다시 확인해 보시는 걸 권장합니다. 사전에 작성한 블로그를 확인해 보는 것도 학습에 큰 도움이 될 수 있습니다.
Chapter1. 배열
이번 챕터에서는 다량의 데이터를 다룰 수 있는 데이터 타입인 배열(Array)에 대한 기본 개념과 사용법을 학습합니다. 배열을 잘 다루기 위해서는 배열의 요소를 추가하거나 변경, 삭제하는 방법을 확실하게 학습해야 합니다. 또 배열에 사용할 수 있는 다양한 메서드를 알고 활용할 수 있어야 합니다.
학습 목표
- 배열에서 특정 인덱스(index)의 요소(element)를 조회하거나, 변경할 수 있다.
- length 속성을 이용하여 배열의 길이를 조회할 수 있다.
- 배열의 요소가 배열인 이중 배열을 이해하고, 이중 배열의 요소를 조회하거나 변경할 수 있다.
- 배열의 각 요소에 대하여, 반복하는 코드를 실행시킬 수 있다.
- 배열에서 사용되는 다양한 메서드를 알고 사용할 수 있다.
- split(), join(), slice(), splice(), Array.isArray(), push(), unshift(), pop(), shift(), indexOf(), includes()
Chapter1-1. 배열 기초
- 개념학습: 동영상강의를 통해 배열의 기초 개념을 학습합니다.
- 퀴즈: 배열의 기초 개념을 이해했는지 점검합니다.
Chapter1-2. 배열의 반복
- 개념학습: 동영상강의를 통해 배열에 반복문을 사용하는 방법을 학습합니다.
- 퀴즈: 배열에 반복문을 사용하는 방법을 이해했는지 점검합니다.
Chapter1-3. 배열 메서드
- 개념학습: 동영상강의를 통해 배열에 사용할 수 있는 다양한 메서드를 학습합니다.
- 실습: 학습한 배열 메서드를 직접 적용하여 실습합니다.
개념학습1
자바스크립트에서 배열 판별하기: Array.isArray 메서드
Array.isArray 메서드는 주어진 값이 배열인지 아닌지 판별합니다. 이 메서드는 매우 유용하며, 자바스크립트 개발에서 자주 사용됩니다. 배열을 확인하는 것은 동적 타입 언어인 자바스크립트에서 중요한 작업 중 하나입니다. 이 강의 자료에서는 **Array.isArray**의 사용법과 다양한 예제를 통해 이 메서드를 어떻게 활용할 수 있는지 알아보겠습니다.
Array.isArray 메서드 기본 사용법
Array.isArray(value) 함수는 value가 배열이면 true, 아니면 false를 반환합니다.
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray({foo: 123})); // false
console.log(Array.isArray('Hello')); // false
console.log(Array.isArray(undefined)); // false
예제를 통한 Array.isArray 활용
예제 1: 배열과 비배열 타입 구분하기
const arr = [1, 2, 3];
const obj = {key: 'value'};
const string = "I'm a string";
const number = 42;
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false
console.log(Array.isArray(string)); // false
console.log(Array.isArray(number)); // false
예제 2: 함수 인자가 배열인지 확인하기
함수에서 인자가 배열인 경우에만 특정 로직을 실행하도록 할 수 있습니다.
function processArray(input) {
if (Array.isArray(input)) {
console.log('Array Found:', input);
// 배열을 처리하는 로직
} else {
console.log('Input is not an array:', input);
}
}
processArray([5, 10, 15]);
processArray('Not an array');
예제 3: 중첩 배열 확인하기
Array.isArray를 사용하여 중첩 배열 여부도 확인할 수 있습니다.
const nestedArray = [1, [2, 3], [4, 5]];
for (let i = 0; i < nestedArray.length; i++) {
const item = nestedArray[i];
console.log(Array.isArray(item) ? 'Found an array!' : 'Not an array!');
}
// 다차원 배열을 일차원 배열로 변환하는 함수
function flattenArray(arr) {
// 결과를 저장할 빈 배열을 생성합니다.
let flatArr = [];
// 주어진 배열을 순회합니다.
for(let i = 0; i < arr.length; i++) {
// 현재 요소가 배열이 아닌 경우, 그대로 결과 배열에 추가합니다.
if(!Array.isArray(arr[i])) {
flatArr.push(arr[i]);
} else {
// 현재 요소가 배열인 경우, 내부 요소를 반복하여 결과 배열에 추가합니다.
for(let j = 0; j < arr[i].length; j++) {
flatArr.push(arr[i][j]);
}
}
}
// 일차원 배열을 반환합니다.
return flatArr;
}
예제 4: Array.isArray와 다른 타입 검사 메서드 결합하기
배열 뿐만 아니라 다른 타입을 확인할 때 typeof 연산자나 다른 타입 검사 메서드와 Array.isArray를 결합하여 사용할 수 있습니다.
const items = [true, 10, 'string', [1, 2, 3], {key: 'value'}];
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (Array.isArray(item)) {
console.log('Item is an array:', item);
} else if (typeof item === 'string') {
console.log('Item is a string:', item);
} else {
console.log('Item is of a different type:', item);
}
}개념학습2
자바스크립트 배열 요소 추가 및 삭제: push와 pop 메서드
자바스크립트에서 배열의 요소를 관리하는 것은 기본적이면서도 중요한 작업입니다. 이번 강의에서는 배열의 끝에 요소를 추가하거나 삭제하는 push와 pop 메서드에 대해 알아보겠습니다. 이 두 메서드를 통해 배열을 동적으로 조작하는 방법을 배우게 됩니다.
push 메서드
push 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환합니다.
기본 사용법
let fruits = ['apple', 'banana'];
let newLength = fruits.push('orange');
console.log(fruits); // ['apple', 'banana', 'orange']
console.log(newLength); // 3
여러 요소 추가하기
let numbers = [1, 2];
numbers.push(3, 4, 5);
console.log(numbers); // [1, 2, 3, 4, 5]
pop 메서드
pop 메서드는 배열의 마지막 요소를 제거하고, 그 요소를 반환합니다. 배열이 비어있을 경우 undefined를 반환합니다.
기본 사용법
let fruits = ['apple', 'banana', 'orange'];
let removedFruit = fruits.pop();
console.log(fruits); // ['apple', 'banana']
console.log(removedFruit); // 'orange'
비어 있는 배열에서 pop 사용하기
let emptyArray = [];
let removedElement = emptyArray.pop();
console.log(emptyArray); // []
console.log(removedElement); // undefined
예제를 통한 활용
예제 1: 스택 구현하기
스택(Stack)은 후입선출(LIFO, Last In First Out) 구조를 가지는 자료 구조입니다. **push**와 pop 메서드를 사용하여 스택을 구현할 수 있습니다.
let stack = [];
stack.push(1); // 스택에 1 추가
stack.push(2); // 스택에 2 추가
console.log(stack); // [1, 2]
let lastIn = stack.pop(); // 마지막에 추가된 요소(2) 제거
console.log(lastIn); // 2
console.log(stack); // [1]
예제 2: 여러 데이터 타입을 가진 배열 조작하기
let collection = [true, 'hello', 42];
collection.push([1, 2, 3]); // 배열 추가
console.log(collection); // [true, 'hello', 42, [1, 2, 3]]
let lastItem = collection.pop(); // 마지막 요소([1, 2, 3]) 제거
console.log(lastItem); // [1, 2, 3]
console.log(collection); // [true, 'hello', 42]개념학습3
자바스크립트에서 배열 요소 포함 여부 확인: indexOf와 includes
자바스크립트에서 배열에 특정 값이 포함되어 있는지 확인하는 방법으로는 주로 **indexOf**와 includes 메서드를 사용합니다. 이 두 메서드를 이해하고 올바르게 사용하는 것은 배열을 다룰 때 매우 중요합니다. 본 강의에서는 이 메서드들의 사용법과 차이점을 다양한 예제와 함께 알아보겠습니다.
indexOf 메서드
indexOf 메서드는 배열에서 특정 요소를 찾고, 그 위치(인덱스)를 반환합니다. 요소가 배열에 없을 경우 -1을 반환합니다.
기본 사용법
let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.indexOf('banana')); // 1
console.log(fruits.indexOf('grape')); // -1
조건을 사용하여 요소 검사하기
let numbers = [1, 2, 3, 4, 5];
let index = numbers.indexOf(4);
if (index !== -1) {
console.log('Number found at index:', index);
} else {
console.log('Number not found');
}
includes 메서드
includes 메서드는 배열에 특정 요소가 포함되어 있는지 여부를 확인하여 true 또는 false를 반환합니다.
기본 사용법
let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.includes('banana')); // true
console.log(fruits.includes('grape')); // false
조건부 로직에서의 활용
let numbers = [1, 2, 3, 4, 5];
if (numbers.includes(3)) {
console.log('Array includes the number 3');
} else {
console.log('Array does not include the number 3');
}
indexOf와 includes의 차이점
- 반환 값: indexOf는 요소의 인덱스를 반환하거나, 요소가 없을 경우 1을 반환합니다. 반면, includes는 요소의 포함 여부에 따라 true 또는 false를 반환합니다.
- 읽기 쉬움: includes 메서드는 indexOf보다 의도를 더 명확하게 표현할 수 있습니다. 조건문에서는 includes가 더 직관적일 수 있습니다.
예제를 통한 활용
예제 1: 여러 데이터 타입 검사하기
let mixedArray = [1, 'hello', true, { key: 'value' }];
console.log(mixedArray.indexOf(true)); // 2
console.log(mixedArray.includes('hello')); // true
console.log(mixedArray.indexOf({ key: 'value' })); // -1
console.log(mixedArray.includes({ key: 'value' })); // false
예제 2: 조건부 로직에서의 활용
let tasks = ['wash car', 'write code', 'read book'];
if (tasks.indexOf('write code') !== -1) {
console.log('Time to code!');
} else {
console.log('No coding today.');
}
if (tasks.includes('read book')) {
console.log('Remember to read.');
} else {
console.log('No reading today.');
}
