[JavaScript] JavaScript 기초 문서 정리 part1 - 기초 기능

1. 콘솔 출력 및 사용자 상호작용 함수

1-1. console.log() – 콘솔 출력 함수

기본 사용법

console.log("Hello World");
console.log(123, "문자열", true);

여러 인자를 콤마로 구분하여 출력할 수 있으며, 개발 시 디버깅 용도로 많이 활용됩니다.

객체 출력

const user = { name: "John", age: 25 };
console.log(user);

객체 전체를 출력하여 구조와 값을 한눈에 확인할 수 있습니다.

 

1-2. alert(), prompt(), confirm() – 사용자 상호작용 함수

알림창 표시

alert("안녕하세요!");

간단한 알림창을 띄워 사용자에게 정보를 전달합니다.

사용자 입력 받기

const name = prompt("이름을 입력하세요");

입력창을 통해 사용자에게 값을 입력받고, 입력된 값을 변수에 저장할 수 있습니다.

확인/취소 선택

const result = confirm("계속하시겠습니까?");

확인 또는 취소 버튼을 통해 사용자의 선택을 받고, boolean 값(true/false)으로 결과를 반환합니다.

---

2.문자열 처리 함수

2-1. 문자열 대소문자 변환

const text = "Hello World";
console.log(text.toUpperCase()); // HELLO WORLD
console.log(text.toLowerCase()); // hello world

문자열을 모두 대문자 또는 소문자로 변환하여 출력합니다.

 

2-2. 문자열 자르기

console.log(text.substring(0, 5)); // Hello
console.log(text.slice(6));         // World

substring(), slice() 메서드를 통해 문자열의 일부를 추출할 수 있습니다.

 

2-3. 문자열 검색

console.log(text.indexOf("World"));  // 6
console.log(text.includes("Hello")); // true

특정 문자열의 위치를 찾거나 포함 여부를 체크할 때 사용합니다.

---

3. 배열 처리 함수

3-1. 배열 조작

const fruits = ["사과", "바나나"];
fruits.push("오렌지");   // 배열 끝에 요소 추가
fruits.unshift("딸기");   // 배열 시작에 요소 추가
const last = fruits.pop();   // 배열 끝에서 요소 제거
const first = fruits.shift(); // 배열 시작에서 요소 제거

배열의 시작 혹은 끝에서 요소를 추가하거나 제거하는 기본 메서드들을 활용합니다.

 

3-2. 배열 반복 처리

forEach – 각 요소 순회

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => {
    console.log(num * 2);
});

 

map – 새로운 배열 생성

const doubled = numbers.map(num => num * 2);

 

filter – 조건에 맞는 요소만 선택

const evenNumbers = numbers.filter(num => num % 2 === 0);

각 메서드의 특징에 따라 배열 요소의 순회, 가공, 필터링을 할 수 있습니다.

---

4.숫자 처리 함수

4-1. 숫자 변환

console.log(parseInt("123"));   // 123
console.log(parseFloat("123.45")); // 123.45

문자열을 정수나 실수로 변환할 때 사용합니다.

 

4-2. 소수점 처리

const num = 123.456;
console.log(num.toFixed(2));  // "123.46"

toFixed() 메서드를 통해 소수점 자릿수를 지정할 수 있으며, 결과는 문자열 형태로 반환됩니다.

---

5.시간 처리 함수

5-1. 타이머 함수

일정 시간 후 실행

setTimeout(() => {
    console.log("3초 후 실행");
}, 3000);

지정한 시간(밀리초) 후 함수를 한번 실행합니다.

 

주기적으로 실행

const timer = setInterval(() => {
    console.log("1초마다 실행");
}, 1000);

주기적으로 함수를 실행시키며, clearInterval()을 사용해 중지할 수 있습니다.

 

타이머 중지

clearInterval(timer);

실행 중인 타이머를 중지할 때 사용합니다.

---

6. JSON 처리 함수

6-1. JSON 변환

const obj = { name: "Alice", age: 30 };
const jsonString = JSON.stringify(obj); // 객체를 JSON 문자열로 변환
console.log(jsonString);  

const parsedObj = JSON.parse(jsonString); // JSON 문자열을 객체로 변환
console.log(parsedObj);

JSON.stringify()를 사용하여 객체를 JSON 문자열로, JSON.parse()를 사용하여 JSON 문자열을 다시 객체로 변환할 수 있습니다.

 

이와 같이 각 항목별로 코드 예제와 설명을 구분하여 작성하면, 티스토리 포스팅 시 가독성을 높이고 전문적인 내용을 전달할 수 있습니다.

const user = { name: "John", age: 25};

// 객체를 JSON 문자열로 변환
const jsonString = JSON.stringify(user);

//JSON 문자열을 객체로 변환
const parsedUser = JSON.parse(jsonString);