[DAY12] JavaScript 기초

목차

🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일

⭐요약

---

JavaScript의 기본 실행 방법, 주요 데이터 타입(Number, String, Boolean), 변수 선언과 할당, 조건문(if/else), 반복문(for/while), 그리고 함수의 정의와 호출 방법에 대해 정리한다.

 

JavaScript 기초	브라우저 또는 Node.js 환경에서 실행되며, console.log()로 값을 출력함. 주석(//, /* */)으로 코드에 설명을 추가할 수 있음. 값(value), 표현식(expression), 연산자(operator)의 개념을 이해해야 함.
데이터 타입	Number: 정수·실수 표현, 산술 연산자와 Math 객체 사용 가능. String: 따옴표·백틱으로 감싸며, length·indexOf·slice 등 메서드를 제공함. Boolean: true/false 값으로 비교·논리 연산에 활용됨.
변수 선언과 할당	let은 재할당 가능, const는 재할당 불가, var는 지양. 카멜 케이스(camelCase) 네이밍 컨벤션을 따름. 백틱을 사용한 템플릿 리터럴로 변수를 문자열에 삽입할 수 있음.
조건문	if / else if / else로 조건 분기를 구현함. 삼항 조건 연산자(?:)로 간결하게 표현할 수 있음.
반복문	for문은 반복 횟수가 명확할 때, while문은 반복 횟수가 불명확할 때 사용함. do...while문은 코드블록을 최소 한 번은 실행함.
함수	함수선언문(function 키워드)과 함수표현식(변수에 할당) 두 가지 방법으로 정의함. 매개변수로 외부 값을 입력받고, return문으로 결과를 반환함.

 

⭐1. JavaScript 기초

---

1) JavaScript 코드 실행하기

• JavaScript는 브라우저에서 실행하기 위해 만들어진 프로그래밍 언어이다.
• HTML 파일과 JavaScript 파일을 함께 브라우저에서 실행해야 작동한다. 또는 따로 Node.js라는 JavaScript 런타임을 컴퓨터에 설치해야 한다.

🚀 Glossary

• REPL(Read-Evaluate-Print loop): 읽고(read), 평가(evaluate)하고, 출력(print)을 반복(loop)하는 가장 간단한 개발 환경. 내가 작성한 코드가 문법에 맞는지 틀린지 간단하게 실행해 볼 수 있다.
• 프로그램(program): 작업(task) 수행을 위한 코드 모음
• 프로세스(process): 프로그램 실행의 결과물

2) console.log()

'hello world'라고 입력하고 엔터를 치는 순간 JavaScript 엔진은 이 코드를 읽고, 평가하고, 출력한다. REPL이 아니고 코드를 직접 실행하는 경우에는 console.log() 메서드로 출력할 수 있다. 괄호 안에 'hello world'를 입력하고 엔터를 눌러 출력한다.

console.log('hello world'); // hello world

🚀 Glossary

• console.log(): 개발자 도구 콘솔이나 터미널에 원하는 값을 출력할 수 있게 돕는 메서드

3) JavaScript 엔진이 코드 읽는 법

🚀 Glossary

• 기계어: 컴퓨터가 이해할 수 있는 숫자로만 구성된 언어. 사람이 쉽게 이해할 수 없다.
• 프로그래밍 언어: 개발자가 프로그램을 작성하기 위한 언어. 기계어와 다르게 사람이 다룰 수 있는 수준의 문법과 의미를 지닌다.
• 자바스크립트(JavaScript): 브라우저, 서버, 모바일 개발이 가능한 멀티 패러다임 프로그래밍 언어이다.
• JavaScript 엔진: JavaScript 코드를 실행할 수 있는 프로그램. 크롬에 내장된 v8이 대표적이다.

4) 주석

내가 작성한 코드를 다른 개발자에게 쉽게 설명하기 어렵다. 과거에 열심히 작성했던 코드를 왜 그렇게 작성했는지도 기억하기 쉽지 않다.

그래서 코드에 간단히 메모를 하기 위해 주석(comment)을 추가한다. JavaScript에서 주석은 // 다음에 작성하거나, /*, */ 사이에 작성한다. 주석 처리된 코드는 JavaScript 엔진이 인식하지 않기 때문에 자유롭게 자연어를 작성할 수 있다.

// 문자열 'hello world'를 설명하는 주석입니다. 주석은 가능하면 코드 위에 작성합니다.
'hello world';

/* 
여러 줄의 코드를 주석 처리할 수 있습니다.
console.log('Hello');
*/

🚀 Glossary

• 주석: JavaScript 엔진이 따로 해석하지 않는 코드. 개발자가 쓰고 싶은 자연어를 자유롭게 작성할 수 있다.
• 자연어: 인간이 쓰는 언어. 컴퓨터공학에서 프로그래밍 언어와 구분하기 위해 사람의 언어를 자연어로 따로 구분한다.

5) 값과 표현식

REPL에 a b c d를 입력하면 Uncaught SyntaxError: Unexpected identifier가 발생한다. 문법 에러가 발생한 것이다.

a b c d // Uncaught SyntaxError: Unexpected identifier

123을 입력하면 에러가 발생하지 않는다.

123; // 123

이렇게 읽고 평가가 완료되어 하나의 의미를 가지는 코드가 값(value)이다. 값을 표현하기 위해서는 다양한 방식이 있다. 예를 들어, 숫자값 1995를 표현하기 위해 아래와 같은 다양한 코드로 쓸 수 있다. 이렇게 하나의 값으로 평가될 수 있는 코드를 표현식(expression)이라고 한다. + 기호와 같이 값에 변화를 줄 수 있는 산술 연산, 논리 연산 등을 할 수 있는 기호를 연산자(operator)라고 한다.

1995;
1000 + 900 + 90 + 5;
1900 + 95;

🚀 Glossary

• 값(value): 하나의 고유한 의미를 가지는 코드. JavaScript 엔진이 하나의 값으로 읽고 평가할 수 있어야 한다.
• 표현식(expression): 값으로 평가될 수 있는 코드.
• 연산자(operator): 특정 연산을 수행할 수 있는 코드.

6) 구구단 출력

지금까지 배운 내용을 기반으로 구구단을 출력한다. 예를 들어, 2단의 결과를 출력하기 위해서는 값을 직접 입력할 수도 있지만

console.log(2);
console.log(4);
console.log(6);
console.log(8);
console.log(10);
console.log(12);
console.log(14);
console.log(16);
console.log(18);

* 연산자로 좀 더 직관적으로 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. 데이터 타입

---

1) Number 타입

JavaScript의 여러 데이터 타입 중 Number는 일상생활에서 흔히 접할 수 있는 숫자를 JavaScript에서 표현하기 위한 데이터 타입이다. 정수(integer)와 실수(float)를 모두 표현할 수 있다.

100; // 정수를 표현할 수 있습니다.
-100; // 음수를 표현할 수 있습니다.
100.123; // 실수를 표현할 수 있습니다.

typeof 연산자로 해당 값이 숫자 타입인지 확인할 수 있다.

typeof 100; // 'number'
typeof -100; // 'number'
typeof 100.123; // 'number'

같은 숫자 값 간에는 간단한 사칙연산을 할 수 있다. 아래 예시에서 사용한 수학 기호(+ - * /)를 JavaScript에서는 산술 연산자(arithmetic operator)라고 부른다.

console.log(1 + 2); // 3
console.log(1 - 2); // -1
console.log(1 * 2); // 2
console.log(1 / 2); // 0.5
console.log(9 % 2); // 1 (9를 2로 나눈 나머지 구하기)

a. Math 내장 객체

좀 더 복잡한 계산을 위해서는 Math 내장 객체를 사용한다. Math 내장 객체의 대표적인 메서드는 다음과 같다.

• Math.floor(): 괄호 안의 숫자를 내림하여 반환함.
• Math.ceil(): 괄호 안의 숫자를 올림하여 반환함.
• Math.round(): 괄호 안의 숫자를 반올림하여 반환함.
• Math.abs(): 괄호 안의 숫자의 절대값을 반환함.
• Math.sqrt(): 괄호 안의 숫자의 루트값을 반환함.
• Math.pow(): 괄호 안의 첫 번째 숫자를 밑, 두 번째 숫자를 지수로 하는 숫자를 반환함.

Math.floor(100.621); // 100
Math.ceil(100.621);  // 101
Math.round(100.621); // 101
Math.round(100.421); // 100
Math.abs(-100); // 100
Math.abs(100); // 100
Math.sqrt(4); // 2
Math.sqrt(2); // 1.4142135623730951
Math.pow(2, 5); // 32

2) String 타입

String(문자열)은 인간의 언어, 자연어를 JavaScript에서 표현하기 위한 데이터 타입이다. 따옴표('), 큰따옴표("), 백틱(`)으로 감싸면 된다.

한자나 이모지와 같은 특수문자도 문자열로 만들 수 있고, 숫자와 문자를 조합해서 문자열로 만들 수도 있다. 특히 백틱으로 만든 문자열은 줄 바꿈도 가능하다.

'사과'
"JavaScript"
"欢迎你"
"😇"
"최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다."
`JavaScript (줄여서 JS)는 일급 함수를 사용하는 가벼운 객체 지향 인터프리터 언어이며 
웹페이지의 스크립트 언어로 잘 알려져 있지만, 브라우저가 아닌 환경에서도 많이 사용된다.
프로토타입 기반, 다중 패러다임 스크립트 언어이며, 동적이고 명령어, 객체 지향, 함수 프로그래밍
스타일을 지원한다.`

+로 문자열을 이어 붙일 수 있다. 문자열과 문자열을 이어 붙일 때의 +는 문자열 연결 연산자로 쓰인다.

다른 타입과 이어 붙이려고 하면 모두 문자열로 변한다. 특히, 숫자와 이어 붙이기를 시도하다가 예상치 못한 결과를 얻지 않도록 조심해야 한다. 가능하면 다른 타입 간의 연산을 하지 않도록 주의해야 한다.

"안녕하세요" + "!!"; // 안녕하세요!!
"감사합니다." + " " + "🙏" // 감사합니다. 🙏
1 + "1" // 11

a. 문자열의 length 속성

문자열의 length 속성을 이용하여 문자열의 길이를 확인할 수 있다. 문자열 값에 .length를 붙이면 된다.

console.log('欢迎你'.length); // 3
console.log('최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.length); // 48

b. 인덱스(Index)

문자열의 각 문자는 순서를 가지고 있다. 각 문자가 몇 번째에 위치하는지 인덱스(Index)로 확인할 수 있다.

첫 번째 문자의 인덱스는 0이다. JavaScript는 일상생활에서 순서를 1부터 세는 것이 아니고, 0부터 세는 방식을 따른다. 이를 Zero-based numbering이라고 한다.

let str = 'codestates';
console.log(str[0]); // 'c'
console.log(str[4]); // 's'

c. 문자열 주요 메서드

문자열의 유용한 메서드를 소개한다.

• toLowerCase(): 문자열을 소문자로 변경함.
• toUpperCase(): 문자열을 대문자로 변경함.
• concat(): 문자열 연결 연산자 +처럼 문자열을 이어 붙일 수 있음.
• slice(): 문자열의 일부를 자를 수 있음.

'HELLO WORLD'.toLowerCase(); // 'hello world'
'hello world'.toUpperCase(); // 'HELLO WORLD'
'hello '.concat('world'); // 'hello world'
'hello world'.slice(0, 5); // 'hello'

• indexOf(): 문자열 내에 특정 문자나 문자열이 몇 번째 위치하는지 확인함.
  • 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회함.
  • 포함되어 있지 않으면 -1을 반환함.

'🍎🍓🍉🍇'.indexOf('🍎'); // 0
'🍎🍓🍉🍇'.indexOf('🖥'); // -1
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Eich'); // 34
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.indexOf('Dahl'); // -1

• includes(): 문자열 내에 특정 문자나 문자열이 포함되어 있는지 확인함.

'🍎🍓🍉🍇'.includes('🍎'); // true
'🍎🍓🍉🍇'.includes('🖥'); // false
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.includes('Eich'); // true
'최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.includes('Dahl'); // false

3) Boolean 타입

---

Boolean(불리언)은 사실 관계를 구분하기 위한 타입이다. 불리언 타입의 값은 true 혹은 false 둘 중 하나이다.

true;
false;

a. falsy

불리언 타입은 아니지만 JavaScript에서 false로 "여겨지는" 값을 falsy 값이라고 한다. 반대로 true로 "여겨지는" 값은 truthy 값이라고 한다. truthy 값은 매우 많으므로, falsy 값을 암기하면 구분하기 쉽다.

// 대표적인 falsy 값
false
0
-0
0n
""
''
``
null
undefined
NaN

b. 비교 연산자(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)

• ==, !=: 느슨한 동치 연산자

느슨한 동치 연산자는 "대체로" 타입이 달라도 값이 같으면 true, 다르면 false를 반환한다. 예외가 많아 현대 웹 개발에서는 사용을 권장하지 않는다. 다른 프로그래밍 언어에서는 ==, !=를 주로 사용하는데, JavaScript에서는 ===, !==로 비교해야 한다.

12 == '12' // true

• >, <, >=, <=: 대소 관계 비교 연산자

두 피연산자의 값의 크기를 비교한다. 수학에서의 부등호 기호의 사용법과 유사하다.

100 > 200; // false ("100은 200보다 크다."는 거짓)
200 > 100; // true ("200은 100보다 크다."는 참) 
100 >= 100; // true ("100은 100보다 크거나 같다."는 참)
200 <= 100; // false ("200은 100보다 작거나 같다."는 거짓)

c. 논리 연산자(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

⭐3. 변수의 선언과 할당

---

데이터를 다루기 위해서는 이름이 필요하다. 문제를 해결하기 위해 컴퓨터와 소통하려면 특정 데이터에 대해 같은 이름을 공유하고 있어야 한다. JavaScript에서도 특정 데이터에 이름을 붙일 수 있는데, 이를 변수라고 한다.

변수를 선언할 때는 let 키워드를 사용한다. let 키워드 뒤에 선언하고자 하는 변수명을 입력한다.

let name;

선언된 변수에 값을 할당할 때는 할당 연산자(=)를 사용한다.

name = 'kimcoding';

변수 선언과 값 할당을 동시에 할 수 있다.

let name = 'kimcoding';

변수에는 JavaScript에서 사용이 가능한 모든 타입의 값을 할당할 수 있다.

let string = '원주율';
let number = 3.141592;
let boolean = true;
let array = [1, 'two', false];
let object = {name: 'kimcoding', age: 25, course: 'SEB FE'};
let empty = null;
let notDefined = undefined;

1) 아무것도 할당하지 않은 변수

아무것도 할당되지 않은 변수는 undefined가 자동으로 할당된다. 이는 초기화라는 JavaScript의 독특한 특징이다.

let variable;
console.log(variable) // undefined

2) 값의 재할당

let 키워드로 선언한 변수에 새로운 값을 할당할 수 있다. 이를 재할당이라고 한다. 재할당에도 할당 연산자(=)를 사용한다.

let name = 'kimcoding';
console.log(name) // 'kimcoding'
name = 'parkhacker';
console.log(name) // 'parkhacker'

3) 재할당이 불가능한 변수(상수)

let 키워드가 아닌 const 키워드를 사용하면 재할당이 금지된다.

const name = 'kimcoding';
console.log(name) // 'kimcoding'
name = 'parkhacker'; // Uncaught TypeError: Assignment to constant variable.

4) var 키워드

var 키워드는 let 키워드와 const 키워드가 등장하기 이전에 사용되던 변수 선언 키워드이다.

var 키워드에는 여러 단점이 존재하고, 이를 보완하기 위해 let과 const가 등장했다. 따라서 var 키워드는 사용을 되도록 지양하고, let과 const를 사용할 것을 권장한다.

재할당이 필요한 변수에는 let을, 재할당이 불필요하거나 변경되는 것을 방지해야 하는 변수는 const를 사용해야 한다.

var name = 'kimcoding'; // var키워드가 가지고 있는 단점으로 인해 사용을 지양하는 것이 좋음.

5) 네이밍 규칙

변수명은 다음과 같은 네이밍 규칙을 준수해야 한다.

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
• 단, 식별자는 숫자로 시작하는 것을 허용하지 않는다.

  let 1st; // 사용할 수 없는 변수명

• 예약어는 식별자로 사용할 수 없다.
  • 예약어: 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어 — 예) let, const, true, false, typeof 등

let true; // 사용할 수 없는 변수명

• 변수명은 변수의 존재 목적을 이해할 수 있도록 의미를 명확히 표현해야 한다.

// 변수의 존재 목적을 이해할 수 없는 변수명
let x = 100;
let y = 5;

// 변수의 존재 목적을 명확히 알 수 있는 변수명
let name = 'kimcoding';
let age = 25;

6) 네이밍 컨벤션

하나 이상의 영어단어를 사용하여 식별자를 만들 경우 네이밍 컨벤션을 잘 지키면 가독성을 높일 수 있다.

JavaScript에서는 일반적으로 카멜 케이스(camelCase)를 사용한다. 카멜 케이스는 낙타의 등모양에서 유래된 이름으로, 첫 단어의 첫 문자는 소문자로, 그 이후에 연결되는 단어의 첫 문자는 대문자로 작성하는 방법이다.

// 🐪카멜 케이스(camelCase)
let firstName = 'coding'; 
let lastName = 'kim';

// 그밖에 네이밍 컨벤션
let first_name; // 🐍스네이크 케이스(snake_case) : 단어와 단어 사이에 언더스코어(_)를 사용
let FirstName; // 📐파스칼 케이스(PascalCase) : 단어의 시작을 대문자로 작성

7) 변수를 활용한 연산

변수에 숫자 타입의 값이 할당되어 있는 경우 숫자 타입에 사용 가능한 모든 연산이 가능하다.

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

변수끼리의 연산도 가능하다.

8) 템플릿 리터럴(template literal)

큰따옴표("), 작은따옴표('), 백틱(`)으로 값을 감싸면 문자열(string) 타입이 된다. 이 중에서 백틱을 사용하는 방법을 템플릿 리터럴이라고 한다. 특히, 문자열 내부에 변수를 삽입할 수 있는 기능은 매우 유용하게 사용되므로 반드시 알아두어야 한다.

템플릿 리터럴 내부에 ${}를 사용하여 변수를 삽입할 수 있다. 이때, 문자열이 할당되지 않은 변수도 문자열로 취급된다.

let course = 'SEB FE';
let cohort = 99;
let name = 'kimcoding';
console.log(`${course} ${cohort} ${name}`); // 'SEB FE 99 kimcoding'

단어와 단어 사이에 공백을 삽입하기 위해 ' '를 사용하는 것보다 템플릿 리터럴을 사용하는 것이 가독성 측면에서 훨씬 우수하다.

let course = 'SEB FE';
let cohort = 99;
let name = 'kimcoding';
console.log(course + ' ' + cohort + ' ' + name); // 'SEB FE 99 kimcoding'

⭐4. if문

---

가장 대표적인 조건문인 if문에 대해 학습한다. if문은 주어진 조건식의 참(true)/거짓(false) 여부에 따라 실행이 결정된다. 조건식은 결과가 불린 타입이 되도록 작성해야 한다.

조건식의 평가 결과가 참일 때 문자열 'hello world'를 출력하기 위한 코드는 아래와 같다.

if (true) {
	console.log('hello world');
}

if 뒤에 있는 소괄호에 조건식을 넣으면, 조건식이 참으로 평가된 경우 코드블록 내부의 코드가 실행된다. 지금은 true를 넣었기 때문에 console.log('hello world')가 실행된다.

1) 동치 연산자(===)

동치 연산자는 두 피연산자가 동일하면 true, 그렇지 않으면 false를 반환한다. !==는 반대로 두 피연산자가 동일하지 않으면 true, 동일하면 false를 반환한다.

let name = 'kimcoding';
if (name === 'kimcoding') {
	console.log('중복된 이름입니다.'); // '중복된 이름입니다.'
}

let name = 'parkhacker';
if (name !== 'kimcoding') {
	console.log('가입할 수 있는 이름입니다.'); // '가입할 수 있는 이름입니다.'
}

2) 비교 연산자(>, <, >=, <=)

비교 연산자는 두 피연산자의 값의 크기를 비교한다. 수학에서의 부등호 기호의 사용법과 유사하다.

let num = 5;
if (num < 10) {
	num = num + 1;
}
console.log(num); // 6

if (num > 5) {
	num = num - 1;
}
console.log(num); // 5

3) 논리 연산자(&&, ||)

논리합(||)과 논리곱(&&)을 사용하면 복수의 조건을 작성할 수 있다. ||은 여러 조건 중 하나만 true여도 true로 판단된다. &&은 여러 조건 중 하나라도 false이면 false로 판단된다.

let age = 15;
if (age > 13 && age <= 19) {
	console.log('청소년입니다.'); // '청소년입니다.'
}

4) 부정 연산자(!)

부정 연산자는 조건을 부정한다. 조건이 true이면 false, 조건이 false이면 true를 리턴한다.

let num = 11;
if (!(num === 10)) {
	console.log('변수 num은 10이 아닙니다.'); // '변수 num은 10이 아닙니다.'
}

⭐5. 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 === 'seb fe') {
	console.log('정보가 일치합니다.')
} else if (name === 'kimcoding' && course !== 'seb 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('성인입니다.');
}

⭐삼항 조건 연산자

---

if문과 else문을 삼항 조건 연산자로 바꿔 쓸 수 있다.

let num = 5;
num % 2 === 0 ? console.log('짝수') : console.log('홀수'); // '홀수'

삼항 조건 연산자는 조건식을 먼저 작성한 후 ?를 입력하고, ? 뒤로 참/거짓일 때 실행할 코드를 각각 입력한다. 참/거짓일 때 실행할 코드는 :로 구분한다. 위 코드는 아래 코드와 동일하게 동작한다.

let num = 5;
if (num % 2 === 0) {
	console.log('짝수입니다.');
} else {
	console.log('홀수입니다.'); // '홀수입니다.'
}

조건에 따라 실행할 코드가 간단하다면 삼항 조건 연산자를 활용하는 것이 편리하고 가독성도 좋다. 그러나 조건에 따라 실행해야 할 내용이 복잡하다면 if문과 else문을 사용하는 것이 좋다.

⭐for문

---

JavaScript의 대표적인 반복문인 for문에 대해 학습한다.

1부터 5까지의 수를 차례대로 더한 값을 구하는 코드를 직접 입력하는 방식으로 작성하면 다음과 같다.

let result = 0;
result = result + 1;
result = result + 2;
result = result + 3;
result = result + 4;
result = result + 5;
console.log(result); // 15

이런 식으로 작성해도 원하는 결과를 얻을 수 있다. 하지만 1부터 100,000까지의 합이라면 같은 코드를 100,000줄을 반복해서 작성해야 한다. 코드를 작성하는 것도 힘들지만 가독성도 매우 떨어진다.

이때 반복문을 사용하면 불필요한 코드를 반복적으로 사용하지 않고 간결하게 코드를 작성할 수 있다. 1부터 5까지의 수를 모두 더하는 코드를 for문으로 구현하면 다음과 같다.

let result = 0;

for (let num = 1; num <= 5; num++) {
  result = result + num;
}

console.log(result); // 15

이 코드는 아래와 같은 순서로 진행된다.

1. for문 내부에 num이라는 변수를 선언하고 1이라는 초기값을 할당한다.
2. 변수 num이 5보다 작거나 같은지 확인한다.
3. 2의 결과가 true면, 코드블록 내부의 코드를 실행한다.
4. 변수 num을 1 증가시킨다.
5. 2부터 4까지 반복한다.
6. 2의 결과가 false면, 반복문이 종료된다.

for문은 다음과 같은 형식으로 이루어져 있다.

for (초기값; 조건식; 증감식) {
	// 실행할 코드
}

for 뒤에 오는 소괄호에는 각각 초기값, 조건식, 증감식이 들어간다. 코드블록에는 반복해서 실행할 코드가 들어간다.

• 초기값: 증감식 반복 횟수를 카운트하는 역할을 하는 변수이다. (이때 변수는 정수를 의미하는 'integer'의 약자인 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
  }

⭐문자열과 반복문

---

이번에는 문자열에 반복문을 사용한다.

인덱스(index)

문자열의 각 문자는 순서를 가지고 있다. 첫 번째 문자의 인덱스는 0이다.

let str = 'codestates';
console.log(str[0]); // 'c'
console.log(str[4]); // 's'

특정 문자의 인덱스를 확인하는 메서드는 indexOf()이다.

let str = 'codestates';
console.log(str.indexOf('c')); // 0
console.log(str.indexOf('e')); // 3

찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회한다.

길이(length)

문자열의 길이는 문자열 뒤에 .length를 붙임으로써 조회할 수 있다.

let str = 'codestates';
console.log(str.length); // 10

문자열의 첫 번째 문자부터 마지막 문자까지 모두 출력하는 코드를 구현하면 다음과 같다.

let str = 'codestates';
for (let i = 0; i <= 9; i++) {
	console.log(str[i]);
}

위의 코드를 살펴보면, 변수 i가 0부터 9까지 1씩 증가하며 반복문이 실행된다. 문자열 길이가 알 수 없는 상태일 때는 아래와 같이 str.length를 활용한다.

let str = 'codestates';
for (let i = 0; i <= str.length - 1; i++) {
	console.log(str[i]);
}

0부터 시작하는 인덱스와 달리, 길이는 문자열에 속한 문자의 개수를 나타낸다. 따라서 문자열의 마지막 문자의 인덱스는 문자열의 길이보다 1만큼 작다. i <= str.length - 1(또는 i < str.length)로 조건식을 작성하면, 문자열의 끝까지 순회하는 반복문을 구현할 수 있다.

⭐반복문의 중첩

---

반복문은 중첩이 가능하다. 다시 말해 반복문 내부에 또 다른 반복문을 사용할 수 있다.

다음 예시는 정육면체 주사위 두 개를 굴려서 나올 수 있는 모든 경우의 수를 구하기 위한 코드이다.

for (let i = 1; i <= 6; i++) {
	for (let j = 1; j <= 6; j++) {
		console.log(`첫번째 주사위는 ${i}, 두번째 주사위는 ${j}입니다.`);
	}
}

⭐While문

---

초기화, 조건식, 증감식이 모두 필요한 for문과 달리 while문은 조건식만 입력한 후, 조건식의 평가 결과가 true인 경우 코드블록 내부의 코드를 반복하여 실행한다.

let num = 0;

while (num < 3) {
	console.log(num); // 0 1 2
	num++
}

위 코드를 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)

⭐for문과 while문

---

for문과 while문의 용도는 명확하게 구분되지 않는다. while문으로 할 수 있는 것을 for문으로도 구현이 가능하고, 반대도 마찬가지이다. 그러나 주로 사용하는 상황은 있으므로, 아래 내용을 참고하여 상황에 맞는 반복문을 사용해야 한다.

for문을 사용하는 경우

• 반복 횟수가 비교적 명확할 때
• 배열, 문자열 내부를 순회할 때
• 반복문의 중첩이 필요할 때

while문을 사용하는 경우

• 반복 횟수가 명확하지 않을 때

⭐함수(function)

---

현실에서 발생하는 대부분의 복잡한 문제는 더 작고 간단한 문제로 나눌 수 있다. 복잡한 문제를 해결하기 위해서는 작고 간단한 문제를 하나씩 해결하고, 마지막에 크고 복잡한 문제를 해결한다. 이러한 과정을 컴퓨터는 함수라는 것을 사용해 해결한다.

함수는 입력에 따라 그에 걸맞은 작업을 하는 하나의 작업 단위이다. 계산기를 만든다면 몇 가지의 기능이 필요할까?

• 연산 기능(+, -, *, /)
• 숫자를 입력하는 기능
• 결과를 화면에 표시하는 기능
• 브라우저에 계산기를 어떻게 보여줄지 결정하는 기능

함수는 입력(input)을 받아 출력(output)을 하는 하나의 작은 기능 단위이다. 즉, 입력을 받아서 코드블록 내부의 코드를 실행한 후 함수의 실행 결과를 반환하는 일련의 과정의 묶음이다.

[ 그림 ] 함수 정의 - 1

함수 외부에서 특정한 입력값을 전달하여 호출할 수 있다. 함수가 호출되면 함수 내부의 코드가 실행된다. 그리고 함수의 실행 결과는 다시 함수 외부로 반환(return)할 수 있다. 특정한 코드 실행 과정을 묶어서 함수를 생성하는 것을 '함수를 정의한다.'고 한다.

⭐함수선언문과 함수표현식

---

JavaScript에서 함수를 정의하는 방법은 여러 가지가 있다. 그중에서 가장 대표적인 방법인 함수선언문과 함수표현식을 배운다.

먼저 문자열 'hello world'를 출력하는 함수를 함수선언문으로 정의한다.

// 함수선언문으로 정의한 함수
function greeting () { 
	console.log('hello world') 
};

변수를 선언할 때 let 키워드를 사용하듯, 함수를 정의할 때는 function 키워드를 사용한다. function 키워드 다음에는 함수명을 지정한다. 그 뒤에는 소괄호(())를 입력해야 하며, 소괄호 안에는 함수 내부에서 사용할 수 있는 매개변수를 선언할 수 있다. 실행할 코드는 코드블록({}) 내부에 넣는다.

• 함수선언문: 변수를 선언하듯 function 키워드를 사용하여 함수를 선언하는 방식
• 함수표현식: 함수 선언 키워드가 아닌 변수 선언 키워드를 사용하여 함수를 '표현'한 방식

[ 그림 ] 함수의 정의 - 2

⭐함수 호출

---

함수 내부에 있는 코드는 함수를 호출했을 때만 실행된다. 함수 호출이란 함수를 실행시키는 명령을 전달하는 것과 같다. 함수선언문으로 정의한 함수를 호출하면 다음과 같다.

function greeting () { 
  console.log('hello world')
};

greeting() // 'hello world'

이처럼 함수를 정의할 때 지정한 함수명 뒤에 소괄호(())를 붙이면 함수를 호출할 수 있다.

함수표현식으로 정의한 함수는 선언한 변수명에 소괄호를 붙여 호출한다.

let greeting = function () {
  console.log('hello world')
};

greeting() // 'hello world'

⭐매개변수와 전달인자

---

매개변수는 함수를 정의할 때 선언하고, 함수 코드 블록 안에서 변수처럼 취급된다. 함수를 정의할 때 소괄호에 매개변수를 추가할 수 있으며, 추가된 매개변수는 함수 내부에서 변수와 같은 역할을 한다.

function greeting (name) {
	console.log('hello ' + name);
}

greeting이라는 이름의 함수가 name이라는 매개변수를 가지고 있다. 현재는 아무것도 할당되어 있지 않으므로, 매개변수 name은 undefined로 초기화되어 있다. 이 매개변수에 값을 할당하기 위해서는 전달인자를 사용한다.

function greeting (name) {
	console.log('hello ' + name);
}

greeting('kimcoding'); // 'hello kimcoding'

함수를 호출할 때 소괄호 안에 값을 넣음으로써 매개변수에 값을 할당할 수 있다. 이것을 바로 전달인자라고 한다. 이처럼 매개변수와 전달인자를 활용하면 함수 외부에서 함수 내부로 값을 전달할 수 있다.

매개변수를 여러 개 사용하는 것도 가능하다. 매개변수의 개수에 맞게 전달인자를 전달하면 매개변수에 차례대로 전달된다.

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문

---

함수의 실행 결과를 외부로 반환할 수 있다. 반환한다는 것은 함수 외부에서 함수의 결과값을 사용할 수 있다는 의미이다.

function add (x, y) {
	return x + y; // 반환문
}

이 함수는 두 수를 입력받아 합을 리턴하는 함수이다. 여기서 주목해야 할 것은 return이라는 키워드이다.

return문은 아래와 같은 중요한 역할을 한다.

    1. 함수 내부의 코드가 차례대로 실행되다가 return문을 만나면 값을 반환한 후 함수가 종료된다. 다시 말해 return문 뒤에 나오는 코드는 실행되지 않는다.

function add (x, y) {
	return x + y; // 반환문
	console.log('실행되지 않습니다');
}

    2. return문에 작성된 코드를 실행한 후 결과를 함수 외부로 반환한다. 함수 외부에서 함수를 호출하면 함수의 실행 결과를 확인할 수 있다.

function add (x, y) {
    return x + y; // 반환문
 }

 console.log(add(3, 2)); // 5

    3. 함수 호출의 결과를 변수에 할당하는 것도 가능하다.

function add (x, y) {
	return x + y; // 반환문
}

let result = add(3, 2);
console.log(result); // 5

    4. 조금 더 응용하면, 함수의 호출 결과끼리의 연산도 가능하다.

function add (x, y) {
	return x + y; // 반환문
}

let result = add(3, 2) + add(5, 7);
console.log(result); // 17

 

⭐후기

---

• 내용이 너무 많아 정리하기가 어려웠다. 하지만 기본적으로 아는 내용이라서 비교적 쉽게 공부할 수 있었다.

 

이 글은 코드스테이츠 x KNU가 주최한 직무역량캠프에서 공부한 내용을 작성한 것입니다.