JavaScript 배열 & 함수 정리
📌 배열 (Array)
✅ 배열은 여러 개의 데이터를 순차적으로 나열한 자료 구조
✅ 다양한 타입을 하나의 배열에 함께 저장 가능
✅ 크기가 고정되지 않음 (동적)
✅ 인덱스는 0부터 시작
🔹 1. 배열 생성 방식
✅ 리터럴 방식
let fruits = ['사과', '오렌지', '망고'];
let mixed = [1, '문자', true, null, [1, 2]];
✅ 생성자 방식
let arr1 = new Array(3); // 길이만 설정 (빈 값)
let arr2 = new Array('사과', '오렌지'); // 초기값 설정
🔹 2. 배열 요소 접근 & 수정
let sports = ['축구', '야구', '농구'];
console.log(sports[1]); // 야구
sports[2] = 'basketball'; // 값 수정
🔹 3. 배열 메서드
✅ 추가/삭제 메서드
| 메서드 |
설명 |
push() |
마지막 요소 추가 |
pop() |
마지막 요소 제거 후 반환 |
shift() |
첫 요소 제거 후 반환 |
unshift() |
첫 요소 앞에 추가 |
splice() |
요소 추가 또는 삭제 |
let arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]
arr.pop(); // [1, 2, 3]
arr.shift(); // [2, 3]
arr.unshift(0); // [0, 2, 3]
arr.splice(1, 0, 'a'); // [0, 'a', 2, 3]
🔹 4. 배열 정렬
let items = ['banana', 'apple', 'mango'];
items.sort(); // 오름차순 정렬
items.reverse(); // 내림차순 정렬
🔹 5. 배열 변환
let fruits = ['사과', '바나나', '망고'];
fruits.join(); // "사과,바나나,망고"
fruits.join(' - '); // "사과 - 바나나 - 망고"
let str = "사과,바나나,망고";
let arr = str.split(','); // ["사과", "바나나", "망고"]
🔹 6. 배열 복사 (참조형 VS 복사본)
✅ 일반 자료형은 값 복사
let a = 10;
let b = a;
b = 20;
console.log(a); // 10
✅ 배열은 참조(주소) 복사
let arr1 = [1, 2, 3];
let arr2 = arr1;
arr2[0] = 100;
console.log(arr1); // [100, 2, 3]
✅ 독립적인 복사: 스프레드 연산자 (...)
let original = ['축구', '야구'];
let copy = [...original];
copy[0] = '배구';
console.log(original); // 원본 유지
📌 함수 (Function)
✅ 특정 작업을 수행하거나 값을 계산하는 코드의 묶음
🔹 1. 함수의 정의
function 함수명(매개변수) {
return 반환값;
}
🔹 2. 함수 선언 방식
✅ 함수 선언식 (호이스팅 O)
function greet() {
console.log('안녕하세요!');
}
greet(); // 호출 가능
✅ 함수 표현식 (호이스팅 X)
const greet = function() {
console.log('안녕하세요!');
};
greet();
✅ 화살표 함수 (호이스팅 X)
const greet = () => {
console.log('안녕하세요!');
};
greet();
💡 매개변수 1개, 본문 1줄이면 축약 가능
const greet = name => console.log(`${name}님 반갑습니다`);
greet('전창현');
🔹 3. 함수의 구성 요소
| 구성 |
설명 |
parameter |
함수 정의 시 받는 변수명 |
argument |
함수 호출 시 전달하는 실제 값 |
return |
함수 실행 결과를 반환하는 키워드 |
function sum(a, b) {
return a + b;
}
let result = sum(5, 3); // 8
🔹 4. 스코프 (Scope)
| 구분 |
설명 |
| 지역 변수 |
함수 내부에서 선언된 변수 (밖에서는 사용 불가) |
| 전역 변수 |
함수 외부에서 선언된 변수 (어디서든 사용 가능) |
let username = "전창현";
function intro() {
let job = "개발자";
console.log(`${username}의 직업은 ${job}`);
}
intro();
// console.log(job); ❌ 오류: 지역변수
📌 요약
| 주제 |
핵심 요약 |
| 배열 |
다양한 데이터 저장, push/pop 등 사용 |
| 배열 복사 |
참조형 복사 주의! 스프레드로 독립 복사 |
| 함수 정의 |
선언식 / 표현식 / 화살표 함수 |
| 함수 사용 |
매개변수로 값 전달, return으로 반환 |
| 스코프 |
지역변수/전역변수 구분 중요 |
🚀 다음 포스팅은 함수의 심화!