본 강의는 Programmers의 Hello, JavaScript: 자바스크립트 입문 강의를 기반으로 작성되었으나, 작성자에 의견에 따라 일부 내용이 추가되거나 수정되어 작성된 포스트입니다

01. 비교 연산자와 논리 연산자

이전 시간에 산술 연산자를 학습했다. 오늘은 매우 자주 사용되는 비교 연산자와 논리 연산자에 대해서 살펴보도록 하겠다.

01.01. 비교 연산자(관계 연산자)

JS에는 여러 비교 연산자가 존재한다.

우선 가장 기본적으로 두 값을 비교하는 == 과 === 이 있다. 둘 다 비슷해 보이지만 약간의 역할이 다르다.

== 는 양 쪽의 타입이 달라도 값만 똑같다면 true 를 반환한다. 반면, === 는 양쪽 값이 같아도, 타입이 다르면 false 를 반환한다.

즉, == 보다 === 이 더 엄격하게 비교를 한다.

만약 두 값이 '같지 않다'로 비교하려면 ! 를 앞에 대체해 사용한다. (!= / !== )

이외에도 A 가 B 보다 초과(>) , 이상(>=) , 미만(<) , 이하(<=) 가 있다. 숫자 또는 문자열을 비교할 때 사용되며, 이 때 = 기호는 항상 우측에 사용한다. 위와 마찬가지로 값 상태에 따라 불리언(Boolean) 값을 반환한다.

let x = 10;
let y = "10";
let z = 5;

console.log(x == y); // [output] true
console.log(x === y); // [output] false
console.log(x > z); // [output] true
console.log(y < z); // [output] false

01.02. 논리 연산자

가장 일반적으로 && 과 || 가 있다.

&& 은 A 와 B가 모두 참일경우 true 를 반환하며,
|| 은 둘 중 하나라도 참이면 true 를 반환한다.

! 를 사용하면 불리언 값을 다른 값으로 변환한다.

let x = 10;
let y = -5;
let z = 0;

console.log(x > 0 && y < 0); // [output] true
console.log(x > 0 || y > 0); // [output] true
console.log(!(x > 0)); // [output] false
console.log(!(y < 0)); // [output] true
console.log(!(z == false)); // [output] true

01.03. 연산자의 우선순위

우리가 일반적으로 수학을 배울 때 곱셈, 나눗셈 먼저 계산하고 덧셈과 뺄셈을 나중에 계산하는 것 처럼 연산자도 일반적인 수학 진행 순서를 따른다.

마찬가지로 괄호를 사용하면 우선순위로 계산된다.

우선순위는 다음과 같다.
1. ++ --
2. !
3. * / %
4. < <= > >=
5. == != === !==
6. &&
7. ||

02. 문자열 다루기

아래에서는 let str = "Hello"; 라는 변수가 정의되어 있다고 가정하고 진행한다.

02.01. 문자열의 길이

length 를 사용한다.

객체를 다루는 것 처럼 str.length; 또는 str["length"]; 라고 입력해주면 str 문자열의 길이 5 가 반환된다.

02.02. 문자열 이어 붙이기

.concat() 을 사용한다.

아래 예제를 살펴보자.

let str2 = " World";
let str3 = str.concat(str2).concat("!");

console.log(str3); // [outpu] Hello World!

이어 붙일 str2 를 만들어 문자열을 담아줬고, str3 에 str 과 str2, 그리고 문자열 ! 를 이어 붙였다.

또는 + 를 활용해 이어 붙일수도 있다.

let str2 = " World";

console.log(str + str2); // [output] Hello World

02.03. 특정 위치의 문자열 확인

만약 문자열에서 몇번째 자리에 어떤 문자열이 있는지는 어떻게 알아낼까?

이때는 .charAt(num) 또는 [num] 을 통해 확인 할 수 있다.
당연하지만, 0 부터 시작한다.

아래 예제를 살펴보자.

console.log(str.charAt(4)); // [output] o
console.log(str[3]) // [output] 4

문자열의 길이를 초과하는 값을 입력하면, charAt은 '' 값이, [num] 은 undefined 가 반환된다.

만약 가장 마지막 문자를 얻고 싶으면 str.length-1 을 사용하면 된다.

02.04. 문자열의 일부분 구하기

문자열의 일부분을 구하고 싶을 경우 두가지를 사용할 수 있다.

.substring(pos1, pos2)

pos1 부터 pos2 까지의 문자열을 반환한다.

console.log(str.substring(1, 3)); // [output] 'el'

.substr(pos, len)

pos 부터 len 길이 만큼의 문자열을 반환한다.

console.log(str.substr(2, 2)); // [output] ll

02.05. 최초 문자열의 위치 찾기

특정 문자열의 최초 위치를 찾고 싶으면 아래 두가지 중 하나를 사용하면 된다.

.indexOf(searchKeyword)

맨 처음 나오는 문자열의 위치를 반환한다.

console.log(str.indexOf('l')); // [output] 2

.lastIndexOf(searchKeyword)

가장 마지막에 나오는 문자열의 위치를 반환한다.

console.log(str.lastIndexOf('l')); // [output] 3

03. 배열(Array)

배열은 JS에서 매우 자주 사용되는 구조 중 하나다.

03.01. 배열 선언 및 초기화

배열은 대괄호( [] )를 사용해 선언이나 초기화가 가능하다.
아래 예제를 살펴보자.

let fruits = ["apple", "banana", "orange"];
let numbers = [1, 2, 3, 4, 5];
let emptyArray = [];

배열 안에는 배열이나, 객체, 숫자 등 여러 타입을 넣을 수 있다.

03.02. 배열의 길이

문자열과 마찬가지로, 배열의 길이는 .length 로 확인할 수 있다.

let fruits = ["apple", "banana", "orange"];
console.log(fruits.length); // [output] 3

03.03. 배열 요소의 접근

배열의 요소로 접근 하는 방법은 문자열과 마찬가지로, 대괄호 ( [index] )를 사용하면 된다.
아래 예제를 살펴보자.

let fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // [output] "apple"
console.log(fruits[1]); // [output] "banana"
console.log(fruits[2]); // [output] "orange"

배열의 길이보다 긴 index 를 이용하는 경우 undefined 가 반환된다.

---

문자열과 비슷한 부분이 여럿 보이는데,
이는 실제로 문자열이 배열의 형태를 갖기 때문이다

---

03.04. 배열 메소드

배열을 다루기 위해 몇가지의 메소드들이 기본적으로 존재한다.

배열의 뒤에 요소 추가/삭제

.push(element)

배열의 뒤에 element 를 추가하고, 배열의 크기를 반환한다.

let arr = ["a", "b", "c"];

let push_arr = arr.push("d");

console.log("배열:", arr);
// [output] ['a', 'b', 'c', 'd']

console.log(".push 반환 값:", push_arr);
// [output] 4

.pop()

배열의 마지막 요소를 제거하고, 제거한 그 요소를 반환한다.

let arr = ["a", "b", "c"];

let pop_arr = arr.pop();

console.log("배열:", arr);
// [output] ['a', 'b']

console.log(".pop 반환 값:", pop_arr);
// [output] c

배열의 앞에 요소 추가/삭제

.unshift(element)

배열의 앞에 element 를 추가하고, 배열의 크기를 반환한다.

let arr = ["a", "b", "c"];

let unshift_arr = arr.unshift("d");

console.log("배열:", arr);
// [output] ['d', 'a', 'b', 'c']

console.log(".unshift 반환 값:", unshift_arr);
// [output] 4

.shift()

배열의 첫 요소를 제거하고, 제거한 그 요소를 반환한다.

let arr = ["a", "b", "c"];

let shift_arr = arr.shift();

console.log("배열:", arr);
// [output] ['b', 'c']

console.log(".shift 반환 값:", shift_arr);
// [output] a

배열 뒤집기

배열의 순서를 뒤집는다.

let arr = ["a", "b", "c"];

let reverse_arr = arr.reverse();

console.log(reverse_arr);
// [output] ['c', 'b', 'a']

배열 정렬하기

배열을 사전 순서대로 정렬한다.

let arr = ["c", "a", "b"];

let sort_arr = arr.sort();

console.log(sort_arr);
// [output] ['a', 'b', 'c']

배열 이어 붙이기

문자열과 마찬가지로 .concat(array) 를 사용한다.

배열에서 최초 요소의 위치 찾기

문자열과 마찬가지로 .indexOf(element) , .lastIndexOf(element) 를 사용한다.

let arr = ["a", "b", "c", "d", "a", "b"];

let indexOf_arr = arr.indexOf("b");
console.log(indexOf_arr); // [output] 1

let lastIndexOf_arr = arr.lastIndexOf("a");
console.log(lastIndexOf_arr); // [output] 4

문자열을 split 해 배열로

문자열 1, 2, 3, 4, 5 가 있을때, 이 중 , 를 제외하고 숫자의 문자만 배열로 바꿔줄 수 있다.
아래 예제를 살펴보자.

let str = "1, 2, 3, 4, 5"
let arr = str.split(", ");

console.log(arr);
// [output] ["1", "2", "3", "4", "5"]

04. 주석(Comment)

주석은 프로그램 실행시 동작되지는 않지만, 개발자의 유지보수나 가독성을 위해 작성하는 메모와 같은 존재다.

주석은 한 줄 주석, 여러 줄 주석이 있다.

한 줄 주석

// 이것은 한 줄 주석 입니다.

위 예제처럼 // 를 이용해 그 줄을 주석 처리 할 수 있다.

여러 줄 주석

/*
이것은 여러줄을 주석 처리 합니다.
주석을 닫기 전 까지 모두 주석으로 간주합니다.
*/

위 예제처럼 /* 로 시작해 */ 로 닫으면, 그 범위 안의 모든 내용이 주석 처리된다.

보기 좋게 처리하기 위해 아래와 같이 사용하기도 한다.

/*
* 주석 첫번째 줄
* 주석 두번째 줄
* 주석 세번째 줄
*/

---

이 외에도 요즘에는 Java 언어에서 유래된 JavaDoc 의 스타일을 인용해 API 문서 등을 설명하기 위해 사용하기도 한다. 이를 JSDoc 이라고 명명하기도 한다.

이 스타일은 /** 로 시작해 */ 로 끝난다.
자세한 사항은 아래 예제를 살펴보자.

/**
 * Represents a book.
 * @constructor
 * @param {string} title - The title of the book.
 * @param {string} author - The author of the book.
 */
function Book(title, author) {
    this.title = title;
    this.author = author;
}

이 JSDoc 은 일종의 트렌드 이므로, 상황에 따라 유연하게 사용하는 것을 결정하면 된다.

---

우선, 오늘은 여기까지다.
다음 시간에는 if , switch , while , for 에 대해 살펴보겠다.