JavaScript - ES6: 현대적인 JavaScript를 위한 초보자 가이드

안녕하세요, 미래의 JavaScript 마법사 여러분! ES6로의 흥미로운 여정에 여러분을 안내하게 되어 기쁩니다. JavaScript의 혁명적인 업데이트인 ES6는 우리가 코드를 작성하는 방식을 완전히 바꿔 놓았습니다. 10년 이상 프로그래밍을 가르쳐온 저는 ES6의 마법을 여러분과 공유하고 싶어 마음이 뛰어います. 그럼, 마법의 지팡이(또는 키보드)를 잡고, 함께 들어보겠습니다!

ES6에서 추가된 새로운 기능

ES6, 또는 ECMAScript 2015는 JavaScript에 보물 같은 새로운 기능들을 가져왔습니다. JavaScript가 슈퍼 헴 스쿨에 다녀와서 전혀 새로운 힘을 얻어온 것 같은 느낌이 듭니다! 이 슈퍼 힘들을 하나씩 탐구해보겠습니다.

JavaScript 화살표 함수

화살표 함수는 일반 함수의 cool하고, hip한 사촌들입니다. 더 짧고, 더 세련되고, 때로는 더 강력합니다. 예를 보겠습니다:

// 옛날 방식
function sayHello(name) {
return "Hello, " + name + "!";
}

// 화살표 함수 방식
const sayHello = (name) => `Hello, ${name}!`;

console.log(sayHello("Alice")); // 출력: Hello, Alice!

이 예제에서 우리는 일반 함수를 화살표 함수로 변환했습니다. function 키워드를 제거하고 => (지그재그 화살표)를 추가한 것을 주목하세요! 마치 우리의 함수가 다이어트를 한 것처럼 멋지게 보입니다!

JavaScript Array find() 메서드

find() 메서드는 배열의 탐정입니다. 배열을 검색하여 첫 번째로 조건을 만족하는 요소를 반환합니다. 다음은 그 작동 방식입니다:

const numbers = [1, 2, 3, 4, 5];
const firstEvenNumber = numbers.find(num => num % 2 === 0);

console.log(firstEvenNumber); // 출력: 2

이 경우, 우리의 find() 메서드는 첫 번째 짝수를 찾고 있습니다. 2가 짝수이므로, 그 요소를 반환합니다.

JavaScript Array findIndex()

findIndex()는 find()의 사촌입니다. 대신 요소 대신 인덱스를 반환합니다. 다음은 그 작동 방식입니다:

const fruits = ["apple", "banana", "cherry", "date"];
const indexOfLongFruit = fruits.findIndex(fruit => fruit.length > 5);

console.log(indexOfLongFruit); // 출력: 1

여기서 우리는 5자 이상인 첫 번째 과일을 찾고 있습니다. "Banana"가 이 조건을 만족하므로, 그 인덱스(1)가 반환됩니다.

JavaScript Array from()

Array.from()는 array-like 객체나 이터러블을 진정한 배열로 변환할 수 있는 마법사입니다. DOM 요소들과 함께 작업할 때 특히 유용합니다. 예를 들어:

const name = "Alice";
const nameArray = Array.from(name);

console.log(nameArray); // 출력: ["A", "l", "i", "c", "e"]

이 경우, 우리는 문자열을 개별 문자로 구성된 배열로 변환했습니다. 정말 멋지죠?

JavaScript Array keys()

keys() 메서드는 배열의 키를 반환하는 Array Iterator 객체를 반환합니다. 마치 배열의 인덱스에 대한 VIP 패스를 얻는 것입니다. 다음은 그 작동 방식입니다:

const fruits = ["apple", "banana", "cherry"];
const keys = fruits.keys();

for (let key of keys) {
console.log(key);
}
// 출력:
// 0
// 1
// 2

이 메서드는 우리에게 배열의 인덱스에 접근할 수 있는 기회를 제공합니다.

JavaScript 클래스

ES6의 클래스는 객체 지향 프로그래밍을 더 직관적으로 가져오는 것입니다. 그들은 객체를 만드는 블루프린트입니다. 간단한 클래스를 만들어보겠습니다:

class Dog {
constructor(name) {
this.name = name;
}

bark() {
return `${this.name} says woof!`;
}
}

const myDog = new Dog("Buddy");
console.log(myDog.bark()); // 출력: Buddy says woof!

이 예제에서 우리는 Dog 클래스와 생성자, 그리고 메서드를 만들었습니다. 이 클래스를 사용하여 새로운 Dog 객체를 만들 수 있습니다.

JavaScript const 키워드

const 키워드는 변수의 안전한 금고입니다. 값이 들어간 후에는 더 이상 바뀌지 않습니다. 값을 다시 할당하지 않아야 하는 경우에 완벽합니다. 다음은 그 작동 방식입니다:

const PI = 3.14159;
// PI = 3; // 이는 오류를 발생시킵니다

console.log(PI); // 출력: 3.14159

이 예제에서 우리는 PI를 상수로 선언했습니다. 이제 다시 할당하려고 하면 JavaScript는 오류를 발생시킵니다.

JavaScript let 키워드

let는 var의 더 책임감 있는 형제입니다. 블록 스코프를 제공하여 많은 공통된 프로그래밍 실수를 방지할 수 있습니다. 다음은 그 작동 방식입니다:

let x = 1;

if (true) {
let x = 2; // 이는 다른 'x'입니다
console.log(x); // 출력: 2
}

console.log(x); // 출력: 1

이 경우, if 블록 내의 x는 외부의 x와 다른 변수입니다. let의 블록 스코프 덕분입니다.

JavaScript 기본 매개변수

기본 매개변수는 함수의 안전망입니다. 매개변수에 값이 전달되지 않으면 기본 값이 사용됩니다. 다음은 그 작동 방식입니다:

function greet(name = "Guest") {
return `Hello, ${name}!`;
}

console.log(greet()); // 출력: Hello, Guest!
console.log(greet("Alice")); // 출력: Hello, Alice!

이 예제에서, 매개변수 name에 값이 전달되지 않으면 "Guest"가 기본 값으로 사용됩니다.

JavaScript for...of 루프

for...of 루프는 배열과 같은 이터러블 객체를 순회하는 새로운, 더 간결한 방법입니다. 데이터의 가이드 투어와 같습니다. 다음은 그 작동 방식입니다:

const fruits = ["apple", "banana", "cherry"];

for (let fruit of fruits) {
console.log(fruit);
}
// 출력:
// apple
// banana
// cherry

이 루프는 배열의 각 요소를 자동으로 순회합니다.

JavaScript 함수의 REST 매개변수

REST 매개변수는 함수에 전달된 추가 인자를 모두 잡아들이는"net"입니다. 세 점(...) 뒤에 이름이 오는 것을 볼 수 있습니다. 다음은 그 작동 방식입니다:

function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 출력: 10

이 경우, ...numbers는 모든 추가 인자를 배열로 잡아들이고, 이를 합산합니다.

JavaScript 모듈

모듈은 코드를 별도의 파일로 나누고 필요한 기능을 가져올 수 있게 해주는 레고 블록과 같습니다. 다음은 간단한 예제입니다:

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './math.js';

console.log(add(5, 3)); // 출력: 8
console.log(subtract(5, 3)); // 출력: 2

이 모듈 접근 방식은 코드를 조직화하고 재사용성을 높이는 데 도움이 됩니다.

JavaScript Map 객체

Map 객체는 super-powered objects입니다. 모든 타입의 키를 허용하고 항목의 순서를 유지합니다. 다음은 그 작동 방식입니다:

const myMap = new Map();

myMap.set('name', 'Alice');
myMap.set(1, 'number one');

console.log(myMap.get('name')); // 출력: Alice
console.log(myMap.get(1)); // 출력: number one

Map은 추가 데이터를 객체와 연결할 필요가 있는 경우에 특히 유용합니다.

새로운 전역 메서드

ES6는 몇 가지 새로운 전역 메서드를 소개했습니다. 그 중 하나를 보겠습니다: isFinite().

console.log(Number.isFinite(10)); // 출력: true
console.log(Number.isFinite(Infinity)); // 출력: false
console.log(Number.isFinite("10")); // 출력: false

이 메서드는 값이 유한한 수인지 확인합니다.

새로운 JavaScript Math 메서드

ES6는 새로운 Math 메서드를 추가했습니다. 그 중 하나는 Math.trunc()입니다. 이 메서드는 숫자의 소수점 부분을 제거합니다:

console.log(Math.trunc(4.9)); // 출력: 4
console.log(Math.trunc(-4.2)); // 출력: -4

이 메서드는 정수로 작업할 필요가 있는 경우에 유용합니다.

새로운 Number 메서드

새로운 Number 메서드도 소개되었습니다. 그 중 하나는 Number.isInteger()입니다:

console.log(Number.isInteger(10)); // 출력: true
console.log(Number.isInteger(10.5)); // 출력: false

이 메서드는 값이 정수인지 확인합니다.

새로운 Number 속성

ES6는 새로운 Number 속성도 추가했습니다. 그 중 하나는 Number.EPSILON입니다:

console.log(Number.EPSILON); // 출력: 2.220446049250313e-16

EPSILON는 가장 작은 구분할 수 있는 수입니다.

JavaScript Promise

Promise는 JavaScript의 IOU입니다. 미래에 사용할 수 있는 값을 나타냅니다. 간단한 예제를 보겠습니다:

const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Success!");
}, 1000);
});

myPromise.then(result => console.log(result)); // 1초 후 출력: Success!

Promise는 비동기 연산을 처리하는 데 필수적입니다.

JavaScript Set 객체

Set 객체는 중복 없는 값을 가진 배열과 같습니다. 다음은 그 작동 방식입니다:

const mySet = new Set([1, 2, 3, 3, 4]);

console.log(mySet); // 출력: Set(4) {1, 2, 3, 4}

Set은 중복 값을 자동으로 제거합니다.

새로운 JavaScript String 메서드

ES6는 몇 가지 새로운 String 메서드를 소개했습니다. 그 중 하나는 startsWith()입니다:

const str = "Hello, world!";

console.log(str.startsWith("Hello")); // 출력: true
console.log(str.startsWith("world")); // 출력: false

이 메서드는 문자열이 지정된 문자열로 시작하는지 확인합니다.

JavaScript Symbol

Symbols은 새로운 원시 타입으로, 고유하고 불변합니다. 주로 객체의 키로 사용됩니다. 다음은 그 예제입니다:

const mySymbol = Symbol("mySymbol");
const obj = {
[mySymbol]: "Hello, Symbol!"
};

console.log(obj[mySymbol]); // 출력: Hello, Symbol!

Symbols은 객체에 중복되지 않는 키를 만드는 데 유용합니다.

JavaScript 확장 연산자

확장 연산자는 array-like 객체나 이터러블을 개별 요소로 퍼트릴 수 있는 마법의 지팡이입니다. 매우 다재다능합니다. 다음은 그 예제입니다:

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

console.log(arr2); // 출력: [1, 2, 3, 4, 5]

확장 연산자는 arr1의 요소를 개별적으로 arr2에 추가합니다.

결론

와우! 우리는 많은 내용을 다루었습니다, 아닙니까? ES6는 JavaScript에 많은 흥미로운 기능을 가져왔고, 우리는 겨우 표면을 긁어봤습니다. 이 개념을 습득하는 열쇠는 연습입니다. 그러므로, 이 새로운 기능들을 실험하고, 깨끗이 고치고, 그 과정에서乐趣을 느껴보세요. 얼마 지나지 않아, 여러분은 프로-like JavaScript를 작성하는 마스터가 될 것입니다!

여기서 우리가 논의한 모든 메서드를 요약한 표입니다:

메서드	설명
화살표 함수	일반 함수 표현식의 더 짧고 세련된 형태
Array.find()	배열에서 첫 번째로 조건을 만족하는 요소를 반환
Array.findIndex()	배열에서 첫 번째로 조건을 만족하는 요소의 인덱스를 반환
Array.from()	array-like 객체나 이터러블을 진정한 배열로 변환
Array.keys()	배열의 키를 반환하는 Array Iterator 객체
Class	객체를 만드는 블루프린트, 객체 지향 프로그래밍을 쉽게 만들어줌
const	블록 스코프 내에서 불변한 상수를 선언
let	블록 스코프 내에서 지역 변수를 선언
기본 매개변수	매개변수에 값이 전달되지 않으면 기본 값을 사용
for...of	이터러블 객체를 순회하는 간결한 루프
REST 매개변수	함수에 전달된 추가 인자를 배열로 잡아듬
Modules	코드를 별도의 파일로 나누고 필요한 기능을 가져옴
Map	모든 타입의 키를 허용하고 항목의 순서를 유지하는 컬렉션
Number.isFinite()	값이 유한한 수인지 확인
Math.trunc()	숫자의 소수점 부분을 제거
Number.isInteger()	값이 정수인지 확인
Promise	비동기 연산의 완료 또는 실패를 나타냄
Set	중복 없는 값을 가진 컬렉션
String.startsWith()	문자열이 지정된 문자열로 시작하는지 확인
Symbol	고유하고 불변한 원시 타입, 주로 객체의 키로 사용
Spread Operator	array-like 객체나 이터러블을 개별 요소로 퍼트림

happy coding, and may the ES6 be with you!

Credits: Image by storyset