JavaScript - ES5: 초보자를 위한 종합 가이드

안녕하세요, JavaScript 개발자 지망생 여러분! 이 흥미로운 여정에서 여러분의 가이드로서 함께할 수 있어 기쁩니다. 컴퓨터 과학 교사로서 오랜 경험을 가진 저는 수많은 학생들이 전혀 모르는 상태에서 자신감 있는 프로그래머로 변모하는 것을 목격했습니다. 걱정하지 마세요, 처음부터 시작하는 것이라면 우리는 단계별로 진행할 테니까요. 얼마 지나지 않아 프로처럼 JavaScript를 작성하게 될 거예요!

JavaScript ES5에서 추가된 새로운 기능

JavaScript ES5는 2009년에 출시되었을 때, 언어에 많은 새로운 기능을 추가했습니다. 마치 좋아하는 비디오 게임이 멋진 업데이트를 받은 것처럼, 갑자기 새로운 도구와 능력을 얻게 되어 모든 것이 더 재미있고 효율적으로 변합니다! 이 기능들에 대해 알아보고, 우리의 코딩 생활을 더 쉽게 만드는 방법을 알아보겠습니다.

JavaScript 배열 메서드

배열은 JavaScript의 스위스 아ー�미 knife와 같습니다. 매우 다재다능하며, 다양한 데이터를 처리할 수 있습니다. ES5는 배열을 다루는 여러 가지 새로운 메서드를 도입했습니다. 하나씩 살펴보겠습니다:

JavaScript Array every()

every() 메서드는 모든 학생들이 숙제를 했는지 확인하는 엄격한 교사처럼 행동합니다. 배열의 모든 요소가 특정 조건을 통과하는지 테스트합니다.

let numbers = [2, 4, 6, 8, 10];
let allEven = numbers.every(function(num) {
return num % 2 === 0;
});
console.log(allEven); // 출력: true

이 예제에서 every()는 배열의 모든 숫자가 짝수인지 확인합니다. 그래서 true를 반환합니다.

JavaScript Array filter()

filter() 메서드는 클럽의 보디가드처럼 특정 기준을 충족하는 요소만 허용합니다. 새로운 배열을 만들어, 테스트에 통과한 모든 요소를 포함합니다.

let fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
let longFruits = fruits.filter(function(fruit) {
return fruit.length > 5;
});
console.log(longFruits); // 출력: ['banana', 'cherry', 'elderberry']

이 예제에서 filter()는 이름이 5자 이상인 과일만 포함하는 새로운 배열을 만듭니다.

JavaScript Array forEach()

forEach() 메서드는 투어 가이드처럼 배열의 각 요소를 하나씩 안내합니다. 배열의 각 요소에 대해 제공된 함수를 한 번 실행합니다.

let colors = ['red', 'green', 'blue'];
colors.forEach(function(color, index) {
console.log(`Color at position ${index} is ${color}`);
});
// 출력:
// Color at position 0 is red
// Color at position 1 is green
// Color at position 2 is blue

이 메서드는 배열의 각 요소에 대해 작업을 수행할 때 새로운 배열을 만들지 않고 싶을 때 유용합니다.

JavaScript Array isArray()

isArray() 메서드는 객체가 배열인지 아닌지 판단하는 탐정입니다. 객체가 배열이라면 true, 그렇지 않으면 false를 반환합니다.

console.log(Array.isArray([1, 2, 3])); // 출력: true
console.log(Array.isArray('Hello')); // 출력: false

이 메서드는 변수가 배열인지 확인하고 배열 특정 연산을 수행하기 전에 유용합니다.

JavaScript Array indexOf()

indexOf() 메서드는 특정 요소를 배열에서 찾아 위치를 알려줍니다. 주어진 요소가 배열에 나타나는 첫 번째 인덱스를 반환하거나, 요소가 없다면 -1을 반환합니다.

let fruits = ['apple', 'banana', 'cherry', 'date'];
console.log(fruits.indexOf('cherry')); // 출력: 2
console.log(fruits.indexOf('grape')); // 출력: -1

이 메서드는 배열에서 요소의 위치를 찾을 때 유용합니다.

JavaScript Array lastIndexOf()

lastIndexOf() 메서드는 indexOf()와 유사하지만, 배열의 끝에서부터 검색합니다. 주어진 요소가 배열에 나타나는 마지막 인덱스를 반환하거나, 요소가 없다면 -1을 반환합니다.

let numbers = [1, 2, 3, 2, 1];
console.log(numbers.lastIndexOf(2)); // 출력: 3
console.log(numbers.lastIndexOf(4)); // 출력: -1

이 메서드는 배열에서 요소의 마지막 출현을 찾을 때 유용합니다.

JavaScript Array map()

map() 메서드는 배열의 각 요소를 변환하는 마법의 지팡이입니다. 각 요소에 대해 제공된 함수를 호출하여 새로운 배열을 만듭니다.

let numbers = [1, 2, 3, 4, 5];
let squared = numbers.map(function(num) {
return num * num;
});
console.log(squared); // 출력: [1, 4, 9, 16, 25]

이 예제에서 map()는 각 숫자를 제곱한 새로운 배열을 만듭니다.

JavaScript Array reduce()

reduce() 메서드는 눈사람이 언덕을 내려가면서 값을 누적하는 것처럼 행동합니다. 배열의 각 요소에 대해 리듀서 함수를 실행하여 단일 출력 값을 반환합니다.

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum); // 출력: 15

이 예제에서 reduce()는 배열의 모든 숫자를 더한 합을 계산합니다.

JavaScript Array reduceRight()

reduceRight() 메서드는 reduce()와 유사하지만, 배열의 오른쪽에서부터 처리합니다.

let numbers = [1, 2, 3, 4, 5];
let result = numbers.reduceRight(function(accumulator, currentValue) {
return accumulator - currentValue;
});
console.log(result); // 출력: -5 (5 - 4 - 3 - 2 - 1)

이 메서드는 처리 순서가 중요하고 배열의 끝에서 시작하고 싶을 때 유용합니다.

JavaScript Array some()

some() 메서드는 적어도 한 명의 학생이 숙제를 했는지 확인하는 관대한 교사처럼 행동합니다. 배열의 적어도 하나의 요소가 제공된 함수의 테스트를 통과하는지 확인합니다.

let numbers = [1, 3, 5, 7, 8, 9];
let hasEven = numbers.some(function(num) {
return num % 2 === 0;
});
console.log(hasEven); // 출력: true

이 예제에서 some()는 배열에 적어도 하나의 짝수가 있는지 확인합니다.

JavaScript 날짜 메서드

ES5는 날짜를 다루는 몇 가지 유용한 메서드도 도입했습니다:

JavaScript Date now()

Date.now()는 1970년 1월 1일 00:00:00 UTC부터 경과된 밀리초 수를 반환합니다.

console.log(Date.now()); // 출력: 현재 시간의 타임스탬프

이 메서드는 시간 간격을 측정하거나 고유한 식별자를 생성하는 데 유용합니다.

JavaScript Date toJSON()

toJSON()는 날짜 객체를 JSON 형식의 문자열로 반환합니다.

let date = new Date();
console.log(date.toJSON()); // 출력: "2023-06-08T12:34:56.789Z"

이 메서드는 날짜 객체를 JSON으로 시리얼라이즈할 때 유용합니다.

JavaScript Date toISOString()

toISOString()는 날짜 객체를 ISO 8601 형식의 문자열로 변환합니다.

let date = new Date();
console.log(date.toISOString()); // 출력: "2023-06-08T12:34:56.789Z"

이 메서드는 국제적인 맥락에서 표준화된 날짜 포맷ting을 위해 유용합니다.

JavaScript Function bind()

bind()는 새로운 함수를 만들어, 호출될 때 제공된 값으로 this 키워드를 설정합니다. 함수가 특정 문맥에서 실행되도록 합니다.

let person = {
name: 'John',
greet: function() {
console.log(`Hello, my name is ${this.name}`);
}
};

let greetFunction = person.greet.bind(person);
greetFunction(); // 출력: "Hello, my name is John"

이 메서드는 이벤트 처리와 객체 지향 JavaScript에서 특히 유용합니다.

JavaScript JSON 메서드

ES5는 JSON을 지원하는 내장 메서드를 도입했습니다:

JavaScript JSON parse()

JSON.parse()는 JSON 문자열을 파싱하여 JavaScript 값이나 객체를 생성합니다.

let jsonString = '{"name":"John", "age":30, "city":"New York"}';
let obj = JSON.parse(jsonString);
console.log(obj.name); // 출력: "John"

이 메서드는 API에서 데이터를 받거나 복잡한 데이터 구조를 문자열로 저장할 때 필수적입니다.

JavaScript JSON stringify()

JSON.stringify()는 JavaScript 객체나 값을 JSON 문자열로 변환합니다.

let obj = {name: "John", age: 30, city: "New York"};
let jsonString = JSON.stringify(obj);
console.log(jsonString); // 출력: '{"name":"John","age":30,"city":"New York"}'

이 메서드는 서버로 데이터를 보내거나 복잡한 객체를 문자열로 저장할 때 유용합니다.

JavaScript 다중行情字串

ES5는 백슬래시 문자를 사용하여 다중行情字串을 만들 수 있는 방법을 도입했습니다:

let multiline = "This is a \
multiline string \
in JavaScript.";
console.log(multiline);
// 출력:
// This is a multiline string in JavaScript.

이 기능은 긴 텍스트를 코드에 쉽게 작성할 수 있게 합니다.

JavaScript 객체 메서드

ES5는 객체를 다루는 여러 가지 새로운 메서드를 도입했습니다:

JavaScript Object defineProperty()

Object.defineProperty()는 객체에 직접 새로운 속성을 정의하거나 기존 속성을 수정할 수 있도록 합니다.

let obj = {};
Object.defineProperty(obj, 'name', {
value: 'John',
writable: false,
enumerable: true,
configurable: true
});
console.log(obj.name); // 출력: "John"
obj.name = 'Jane'; // 이는 writable이 false이므로 값이 변경되지 않습니다.
console.log(obj.name); // 출력: "John"

이 메서드는 특정 행동과 특성을 가진 객체를 만드는 데 강력합니다.

JavaScript 속성 getter와 setter

ES5는 getter와 setter 메서드를 도입하여 속성에 대한 접근과 수정을 정의할 수 있습니다:

let person = {
firstName: 'John',
lastName: 'Doe',
get fullName() {
return `${this.firstName} ${this.lastName}`;
},
set fullName(name) {
let parts = name.split(' ');
this.firstName = parts[0];
this.lastName = parts[1];
}
};

console.log(person.fullName); // 출력: "John Doe"
person.fullName = 'Jane Smith';
console.log(person.firstName); // 출력: "Jane"
console.log(person.lastName); // 출력: "Smith"

Getter와 setter는 계산된 속성과 값에 대한 논리를 추가할 수 있습니다.

JavaScript 예약어로 사용된 속성 이름

ES5는 예약어를 속성 이름으로 사용할 수 있도록 허용했습니다:

let obj = {
class: 'JavaScript',
for: 'beginners',
if: true
};
console.log(obj.class); // 출력: "JavaScript"

이 기능은 객체 속성의 이름을 더 유연하게 지정할 수 있게 합니다.

JavaScript "use strict"

ES5는 "use strict" 지시어를 도입하여 JavaScript의 엄격 모드를 활성화합니다. 엄격 모드는 일반적인 코딩 실수를 찍고, 상대적으로 "안전하지 않은" 작업을 수행할 때 예외를 발생시키거나 방지합니다.

"use strict";
x = 3.14; // 이는 x가 선언되지 않았기 때문에 오류를 발생시킵니다.

엄격 모드는 오류를 빨리 찾고 좋은 코딩 관행을 촉진합니다.

JavaScript 문자열[number] 접근

ES5는 문자열의 각 문자를 브러켓 표기법을 사용하여 접근할 수 있도록 허용했습니다:

let str = "Hello";
console.log(str[0]); // 출력: "H"
console.log(str[1]); // 출력: "e"

이 기능은 문자열의 각 문자를 쉽게 작업할 수 있게 합니다.

JavaScript String trim()

trim() 메서드는 문자열의 양쪽 공백을 제거합니다:

let str = "   Hello, World!   ";
console.log(str.trim()); // 출력: "Hello, World!"

이 메서드는 사용자 입력을 정리하거나 문자열을 포맷ting할 때 유용합니다.

JavaScript 꼬리 쉼표

ES5는 객체와 배열 리터럴에서 꼬리 쉼표를 허용합니다:

let obj = {
name: "John",
age: 30,
}; // 꼬리 쉼표가 허용됩니다.

let arr = [1, 2, 3,]; // 꼬리 쉼표가 허용됩니다.

이 기능은 항목을 추가하거나 제거할 때 쉼표의 배치를 걱정할 필요 없이 할 수 있게 합니다.

결론

와우! 이 튜토리얼에서 많은 내용을 다루었습니다. ES5는 JavaScript에 여전히 널리 사용되는 강력한 기능을 추가했습니다. 코딩을 배우는 것은 새로운 언어를 배우는 것과 같습니다. 연습과 인내가 필요합니다. 이해하지 못하는 것에 대해 걱정하지 마세요. 계속 코딩하고, 실험하고, 가장 중요한 것은 즐겁게 만들어 보세요!

이 표는 우리가 논의한 모든 메서드를 요약한 것입니다:

메서드	설명
Array.every()	모든 배열 요소가 특정 조건을 통과하는지 테스트합니다
Array.filter()	특정 조건을 통과한 배열 요소로 새로운 배열을 만듭니다
Array.forEach()	배열의 각 요소에 대해 제공된 함수를 한 번 실행합니다
Array.isArray()	주어진 값이 배열인지 확인합니다
Array.indexOf()	주어진 요소가 배열에 나타나는 첫 번째 인덱스를 반환합니다
Array.lastIndexOf()	주어진 요소가 배열에 나타나는 마지막 인덱스를 반환합니다
Array.map()	각 요소에 대해 제공된 함수를 호출하여 새로운 배열을 만듭니다
Array.reduce()	배열의 각 요소에 대해 리듀서 함수를 실행하여 단일 출력 값을 반환합니다
Array.reduceRight()	배열의 오른쪽에서부터 리듀서 함수를 실행합니다
Array.some()	적어도 하나의 요소가 특정 조건을 통과하는지 테스트합니다
Date.now()	1970년 1월 1일 00:00:00 UTC부터 경과된 밀리초 수를 반환합니다
Date.toJSON()	날짜 객체를 JSON 형식의 문자열로 반환합니다
Date.toISOString()	날짜 객체를 ISO 8601 형식의 문자열로 변환합니다
Function.bind()	새로운 함수를 만들어, 호출될

Credits: Image by storyset