[JavaScript] 자바스크립트 기본 문법 총정리

📌 계속 업데이트 예정
- 객체 선언하는 여러가지 방법

 

 

 

 

숫자로 변환

함수	특징	예: "42.5px"	예: "10abc"	예: "hello"
Number()	문자열을 숫자로 변환 (실수, 정수 모두 가능)	NaN	NaN	NaN
parseInt()	문자열을 **정수(int)**로 변환	42	10	NaN
parseFloat()	문자열을 **실수(float)**로 변환	42.5	10	NaN

 

 

문자열로 변환

함수	설명	예: 42	예: true	예: null
String()	모든 값을 문자열로 변환	"42"	"true"	"null"
.toString()	숫자, 불리언을 문자열로 변환 (객체, null, undefined에서는 사용 불가)	"42"	"true"	에러발생

 

 

불리언으로 변환

값	Boolean() 변환 결과
0, "", null, undefined, NaN	false
1, "hello", [], {}, true	true

 

함수	설명	예: 0	예: 1	예: " "	예: hello
Boolean()	값의 참/거짓 여부 반환	false	true	false	true

 

isNaN

주어진 값이 NaN인지 확인하는 메서드 

• true 반환 → 숫자가 아닌 경우
• false 반환 → 숫자인 경우 
• 문자열, null, undefined 등 다양한 값도 검사 가능 

console.log(isNaN(123));  // false (숫자)
console.log(isNaN("123")); // false (숫자로 변환 가능)
console.log(!isNaN("123")); // true ***
console.log(isNaN("hello")); // true (숫자가 아님)
console.log(isNaN(NaN)); // true (NaN 자체)
console.log(isNaN(undefined)); // true (NaN으로 변환됨)

* isnan은 하나라도 숫자가 아닌 경우 true를 반환하고, some은 true를 만나는 경우 즉시 함수 실행 중단 

 

 

 

! (부정 연산자, NOT 연산자)

true를 false로, false를 true로 반전시키는 연산자 

• 숫자, 문자열, 객체 등을 불리언 (true or false)으로 변환 가능 

console.log(!true);  // false
console.log(!false); // true
console.log(!0);     // true
console.log(!1);     // false
console.log(!"");    // true
console.log(!"abc"); // false

 

 

 

 

switch

여러 조건을 처리할 때 사용하는 제어문으로, if-else문의 대안으로 사용할 수 있음 

• 주요 특징
  • `break` 문
    • case 실행 후 switch문을 빠져나가게 함
    • break가 없으면 다음 case도 계속 실행됨 (fall-through)
  • `default`
    • 어떤 case와도 일치하지 않을 때 실행
    • 선택사항이며, 필수는 아님
  • 엄걱한 비교 
    • case값과 비효할 때 === (엄격한 동등 비교)를 사용함
    • 이것은 타입까지 일치하는 것을 찾고자할 때 사용 

let day3 = "monday";
switch (day3) {
    case "monday":
        console.log('월요일')
        break
    case "tuesday":
        console.log('화요일')
        break
    default:
        console.log('기타')
}
// 결과: 월요일

 

• break를 사용하지 않는 경우?
  • 쓰임에 따라 의도적으로 break를 쓰지 않는 경우도 있다!

 // ** case 1
let day4 = "tuesday";

switch (day4) {
    case "monday":
    case "tuesday":
    case "wednesday":
    case "thursday":
    case "friday":
        console.log("평일입니다.");
        break;
    case "saturday":
    case "sunday":
        console.log("주말입니다!");
        break;
    default:
        console.log("올바른 요일을 입력하세요.");
}
// 결과: 평일입니다.

// ** case 2
let day5 = "saturday";

switch (day5) {
    case "monday":
    case "tuesday":
    case "wednesday":
    case "thursday":
    case "friday":
        console.log("평일입니다.");
        break;
    case "saturday":
    case "sunday":
        console.log("주말입니다!");
        break;
    default:
        console.log("올바른 요일을 입력하세요.");
}
// 결과: 평일입니다.

• tuseday와 일치하는 case 발견!
  • 일치한 부분부터 실행
  • friday의 break를 만나 아래부터는 실행 안됨

 

 

📍 배열 (Array)

1️⃣ 배열 생성 및 변형 관련 메서드

메서드	설명	예제
push()	배열 끝에 요소 추가	arr.push(4);
pop()	배열 끝 요소 제거 및 반환	arr.pop();
unshift()	배열 앞에 요소 추가	arr.unshift(0);
shift()	배열 앞 요소 제거 및 반환	arr.shift();
splice(start, deleteCount, item1, item2, ...)	배열 중간에서 요소 추가/삭제	arr.splice(1, 2, "새값");
slice(start, end)	배열 일부 복사 (원본 유지)	arr.slice(1, 3);
concat()	배열 병합	arr1.concat(arr2);

 

2️⃣ 배열 검색 및 요소 확인

메서드	설명	예제
indexOf(value)	특정 값의 인덱스 반환 (없으면 -1)	arr.indexOf(3);
lastIndexOf(value)	마지막으로 등장하는 값의 인덱스 반환	arr.lastIndexOf(3);
includes(value)	배열에 특정 값이 있는지 확인 (true/false)	arr.includes(5);
find(callback)	조건을 만족하는 첫 번째 요소 반환	arr.find(x => x > 10);
findIndex(callback)	조건을 만족하는 첫 번째 요소의 인덱스 반환	arr.findIndex(x => x > 10);
some(callback)	하나라도 조건 만족하면 true 반환	arr.some(x => x > 10);
every(callback)	모든 요소가 조건 만족하면 true 반환	arr.every(x => x > 10);

 

some

배열에서 특정 조건을 만족하는 요소가 하나라도 존재하면 true를 반환하는 메서드
❗️깔끔한 코드를 작성하고자 할 때 유용

• 모든 요소가 조건을 만족하지 않으면 false 반환
• 반복문 (for, forEach) 없이 간결한 코드 작성 가능
• 조건을 만족하는 요소를 찾으면 즉시 종료 > 성능 최적화 

const array = [1, 2, 3, 4, 5];

// Checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// Expected output: true

* isnan은 하나라도 숫자가 아닌 경우 true를 반환하고, some은 true를 만나는 경우 즉시 함수 실행 중단 

 

 

3️⃣ 배열 정렬 및 변환

reverse()	배열 순서 반전 (원본 변경)	arr.reverse();
sort([compareFunction])	배열 정렬 (기본: 문자열 정렬)	arr.sort();
join(separator)	배열을 문자열로 변환	arr.join("-");
toString()	배열을 쉼표 ,로 구분된 문자열로 변환	arr.toString();

 

 

4️⃣ 배열 반복 및 변환 (고차 함수)

forEach(callback)	배열 요소를 순차적으로 반복 실행	arr.forEach(x => console.log(x));
map(callback)	각 요소를 변환하여 새 배열 반환	arr.map(x => x * 2);
filter(callback)	조건을 만족하는 요소들로 새 배열 반환	arr.filter(x => x > 10);
reduce(callback, initialValue)	배열을 누적 계산하여 단일 값 반환	arr.reduce((acc, x) => acc + x, 0);

 

map 

배열의 각 요소를 순회하면서 주어진 함수를 실행하고, 그 결과로 새로운 배열을 생성하는 메서드 
❗️깔끔한 코드를 작성하고자 할 때 유용

• 기존 배열을 변경하지 않고 새로운 배열을 반환
• 배열 요소를 일괄저긍로 변환하거나 조작할 때 유용
• 반복문 (for, forEach)보다 간결한 코드 작성 가능 

const array1 = [1, 4, 9, 16];

// Pass a function to map
const map1 = array1.map((x) => x * 2);

console.log(map1);
// Expected output: Array [2, 8, 18, 32]

 

filter

배열의 각 요소를 순회하면서 주어진 조건 (함수)를 만족하는 요소만을 모아 새로운 배열을 생성하는 메서드
❗️깔끔한 코드를 작성하고자 할 때 유용

• 기존 배열을 변경하지 않고 새로운 배열을 반환
• 조건을 만족하는 요소만 유지하고 나머지는 제거
• 반복문 (for, forEach)보다 더 간결하게 필터링 가능 

const words = ["spray", "elite", "exuberant", "destruction", "present"];

const result = words.filter((word) => word.length > 6);

console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]

 

reduce

배열의 모든 요소를 하나의 값으로 줄이는 (누적하는) 메서드 
❗️깔끔한 코드를 작성하고자 할 때 유용

• 배열의 요소들을 누적(accumulate) 하여 단 하나의 값(숫자, 문자열, 객체 등)을 생성
• 배열의 합, 평균, 최대값/최소값 찾기, 객체 변환 등 다양한 연산 가능
• map(), filter()와 달리 새로운 배열을 반환하지 않고 단일 값 반환
• `arr.reduce((누적값, 현재값) => 계산식, 초기값);`

// 숫자 
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15

// 문자열 
const words = ["Hello", "world", "JavaScript"];
const sentence = words.reduce((acc, word) => acc + " " + word, "");
console.log(sentence); // "Hello world JavaScript"

 

5️⃣ 배열 구조 관련 메서드

메서드	설명	예제
fill(value, start, end)	특정 값으로 배열 채우기	arr.fill(0, 1, 3);
copyWithin(target, start, end)	배열 일부를 복사하여 덮어쓰기	arr.copyWithin(0, 2, 4);
flat(depth)	다차원 배열을 평탄화	[1, [2, [3]]].flat(2);