[번역] 자바스크립트를 처음배우면서 알게된 10가지

본 문서는 Md Rana Mahmud의  10 Things I Learned as a JavaScript Noob. [https://ranamahmud.medium.com/10-things-i-learned-as-a-javascript-noob-e6dfd19c80e1] 글을 번역한 내용입니다.

 

 

---

자바스크립트를 처음배우면서 알게된 10가지

 

1. 자바스크립트는 숫자형 자료에 대해 다른 데이터 타입을 갖지 않습니다.

기본적으로 자바스크립트에서 모든 숫자는 double형으로 간주됩니다. int타입이 없기 때문이죠. 

예를 들어보겠습니다. a = 7, b = 2 다음과 같이 두 개의 변수를 선언하면, 기본적으로 float형으로 정의됩니다.

C, C++ 에서는 a / b = 3 이란 결과를 줄 것입니다. 하지만 JavaScript에서는 a / b = 3.5 라는 결과를 보여줍니다.

이처럼 JavaScript는 모든 숫자에 대해 floating-point division을 기본적으로 적용하게 됩니다.

let a = 7;
let b = 2;
let result = a / b;
console.log(result);
// 3.5

 

2. ===연산자와 == 연산자는 다른 역할을 합니다.

만약 여러분이 다른 프로그래밍 언어에 익숙하고 JavaScript를 처음 사용하는 경우라면, === 연산자를 보고 눈쌀을 찌푸릴 수 있습니다. 

연산자 ==의 경우, 좌우의 변수의 데이터 타입이 같지 않으면, 타입을 알아서 변환하려고 합니다. 아래의 코드를 보시죠

let num1 = 5;
let num2 = "5";
console.log(num1 == num2)
// true

다른 언어에서는 num1와 num2의 타입이 같지 않기 때문에, false를 리턴하게 되지만 JavaScript에서는 string "5"를 number 5로 변환하여 비교하게 됩니다.

반면에 연산자 ===의 경우에는 다른 프로그래밍언어에서의 ==연산자와 같이 데이터 타입이 같지 않기 때문에 false를 리턴하게 됩니다.,

let num1 = 5;
let num2 = "5";
console.log(num1 === num2);
// false

let num1 = 5;
let num2 = "5";
console.log(num1 === num2);
// false

이렇게 == 연산자와 === 연산자는 != 와 !==에서도 비슷하게 적용됩니다.

정리하면 ==연산자는 데이터 타입이 다르면 알아서 데이터 타입을 변환하여 비교하고, ===연산자는 데이터타입과 값이 정확히 일치할 때만 true를 리턴하게 됩니다.

 

3. 대소문자가 섞인 문자열 비교하기

'Bangladesh'와 'bandladesh' 두 개의 문자열이 있다고 가정할 때, 두 문자열을 비교할 때는 >,<,== 이렇게 세가지 연산자를 사용할 수 있습니다. 우리는 == 연산자에 대해 알아보겠습니다.

== 연산자는 두 문자열의 대소문자 정확히 일치하는지를 확인합니다(case-sensitive). 즉, 각 자리의 문자들이 모두 정확히 일치해야 한다는 뜻입니다.

let country1 = "Bangladesh";
let country2 = "bangladesh";

console.log(country1 == country2)
// false

이렇게 두 문자열을 첫번째 글자가 'B'이지만 대소문자가 다르기 때문에 결과적으로 두 문자열은 같지 않게 됩니다.

그렇다면 대소문자 상관없이 문자열을 비교하려면 어떻게 해야할까요??

그것은 바로 toLowerCase() 혹은 toUpperCase()를 사용하는 것입니다. 각각의 함수는 문자열을 모두 소문자 혹은 대문자로 변환해주는 역할을 합니다. 따라서 아래 코드와 같이 활용할 수 있습니다.

let country1 = "Bangladesh";
let country2 = "bangladesh";
console.log(country1.toLowerCase() == country2)
// true

이렇게 한 문자열, 혹은 두 문자열에 함수를 적용하여 대소문자와 상관없이 비교할 수 있도록 사용할 수 있습니다.

 

4. JavaScript에서 배열을 만드는 두 가지 방법

JavaScript에서 배열을 만드는 두 가지 방법 중 하나는 다른 프로그래밍 언어에서도 많이 사용하는 []를 사용한 방법입니다.

[]를 사용하여 배열은 선언할 때는 , 를 이용하여 값들을 구분하게 됩니다,

그리고 두번째 방법인 array class를 이용할 떄는, 빈 배열을 만들고 인덱스를 이용하여 값을 할당하는 방법입니다.

// []를 사용하여 배열 선언
let numbers = [1,3,4,5];
console.log(number)
// [1,3,4,5]

// array class를 사용하는 방법
let fruits = new Array();
fruits[0] = "apple";
fruits[1] = "banana";
fruits.push("orange");
console.log(fruits)
// ["apple","banana","orange"]

 

5. 배열을 스택과 큐로 사용하기

우리는 JavaScript arrays를 스택(stack)과 큐(queue)처럼 사용할 수 있습니다.

스택이란 First in Last Out 데이터 구조를 말합니다. 즉, 데이터를 벽돌처럼 순서대로 쌓는 자료 구조이기 때문에 처음에 쌓은 벽돌은 가장 나중에 나오게 되는 자료 구조입니다. 그래서 배열에 적용을 해보면, push를 할 때마다 데이터가 쌓이게 되고, pop을 하면 가장 마지막에 들어간 데이터가 나오게 됩니다.

 // stack
 let stack = [];
 stack.push("A");
 stack.push("B");
 stack.push("C");
 console.log(stack) // ["A","B","C"]
 
 stack.pop(); // "C"
 console.log(stack) // ["A","B"]
 
 stack.pop(); // "B"
 console.log(stack) // ["A"]

 stack.pop(); // "A"
 console.log(stack) // []

 

원문에는 stack을 First in First Out이라고 표시했는데, 임의로 수정했습니다.

 // queue
 let queue = [];

 queue.push("A");
 queue.push("B");
 queue.push("C");
 console.log(queue) // ["A","B","C"]
 
 queue.splice(0,1); // "A"
 console.log(queue) // ["B","C"]
 
 queue.splice(0,1); // "B"
 console.log(queue) // ["C"]
 
 queue.splice(0,1); // "C"
 console.log(queue) // []

 

6. JavaScript에서 변수를 선언할 때는 var, let, const를 사용

JavaScript에서 const를 사용하게 되면 변경되지 않는 변수를 선언할 수 있습니다. 상수변수(const)를 선언하는 일반적인 규칙은 이름을 모두 대문자로 사용하는 것입니다.

var는 다시 초기화 할 수 있는 변수를 선언하는데 사용되며, 컨텍스트 범위와 클로저를 포함합니다.

let은 선언 된 코드 블록 내에서 범위가 있는 변수를 선언하는데 사용됩니다.

const PI = 3.141592;

var num1 = 5;

var num1 = "Hello";

let text = "Hello World!";

console.log(PI, num1, text)
// 3.141592 Hello Hello World!

 

7. forEach()를 이용해 배열 반복문을 사용할 수 있습니다.

과일들이 들어있는 배열을 선언했다고 가정해보겠습니다. 

과일 배열의 요소들을 반복해 사용하기 위해 우리는 fruits.forEach() 이런 식으로 사용할 수 있고 forEach안에는 함수를 넣어 각각의 요소마다 실행할 수 있습니다.

forEach()함수안에 들어가는 함수는 3가지 파라미터를 받게 됩니다. element, index, array

element => array안의 요소의 값을 나타냄.

index => arr에서의 element의 index를 나타냄.

array => forEach()의 arr를 나타냄.

그렇게 forEach()를 사용한 예시를 보겠습니다.

// declare an array
let fruits = ["apple","orange","banana","pineapple"]

fruits.forEach( function (fruit) {
	console.log(fruit)
}

// apple orange banana pineapple

fruits.forEach( function (fruit, index) {
	console.log("index : " + index + " " + fruit);
}

// index: 0 apple
// index: 1 orange
// index: 2 banana
// index: 3 pineapple
    

MDN
arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

 

8. 문자열에서 공백(whitespace) 지우기

웹 개발을 할 때, 사용자들의 입력에 불필요한 공백이 문자열에 포함될 때가 있습니다.

JavaScript에서 trim(), trimStart(), trimEnt()를 사용하여 공백을 지울 수 있습니다.

let name = " JavaScript";
let language = "  JavaScript  ";

let languageBoth = language.trim();
// JavaScript

let languageStart = language.trimStart();
// JavaScript

let languageEnd = language.trimEnd();
//  JavaScript

 

9. 간단한 if-else 구문에 삼항연산자를 사용

다른 프로그래밍 언어를 사용할 때, if-else구문을 많이 사용해보았다면, JavaScript에서는 짧고 간결하고 읽기 편한 삼항연산자를 사용하는 걸 추천드립니다.

특정 조건을 만족할 때는 A를 실행하고, 만족하지 않는다면 B를 실행해야하는 간단한 로직을 만들 때는 if-else를 사용하지 않고 삼항연산자를 이용해 한 줄로 간단하게 표현할 수 있습니다. 

const year = 2020
var result;

if (year > 2019) {
	result = "Yes";
} else {
	result = "No";
}
// result === yes


var result = year > 2019 ? "Yes" : "No";
// result === yes

이렇게 if else문을 사용할 때는 여러 줄로 각 조건에 따라 {}안에 실행할 내용이 들어가야 합니다.

삼항연산자는 (condition) ? (true) : (false) 이렇게 ?와 :를 사용하여 나타내며 가장 앞에는 조건이 들어가서 해당 조건을 만족할 때는 ? 뒤의 내용을 실행하게 되고, 조건에 맞지 않으면 : 뒤에 있는 내용을 실행하게 됩니다.

단, 다중 조건으로 복잡해질 때는 삼항연산자를 중첩하기 보단 if-else를 사용하여 readable한 코드를 작성하는 게 좋습니다.(삼항연산자 중첩으로 표현은 할 수 있지만, 닌자코드를 만들고 싶지 않으면 지양하는 것이 좋습니다)

 

10. Math function을 사용하여 수학적 계산을 할 수 있습니다.

JavaScript에서는 math 클래스를 사용하여 간단하게 수학적 계산을 할 수 있습니다.

Math.PI는 pie 값을 제공하고, Math.LN2는 자연로그2 값을 지원합니다.

루트값을 계산하기 위해선 Math.sqrt(value),
제곱 값을 구할 때는 Math.pow(value, exponent),
절대값은 Math.abs(),
올림 내림은 Math.ceil(value), Math.floor(value)을
사용할 수 있습니다.

// constants
console.log(Math.PI)
// 3.14159265358979
console.log(Math.LN2)
// 0.69314718055994

Math.sqrt(9)
// 3
Math.pow(3,2)
// 9
Math.abs(-9)
// 9
Math.ceil(9.22)
// 10
Math.floor(9.22)
// 9

 

---