🔗 배열(Array)
연속된 공간에 동일한 타입의 데이터를 순차적으로 나열한 자료구조
- 인덱스(순번)는 0부터 시작
- Java & C#과 같은 언어와는 다르게 배열과 리스트가 구분되어있지 않음
리스트(List) : 배열에 기능이 추가된 버전으로 대량의 데이터를 처리할 때 반복문과 함께 사용배열의 선언객체를 이용한 방법
🧩 배열의 선언
대괄호를 이용한 방법
let ArrayName = []; // 빈배열
let ArrayName = [Val1, Val2, Val3, ...]; // 이때, 모든 값들은 동일한 Type임객체를 이용한 방법
// 객체 앞에 new(객체 생성 예약어)를 붙여줘야함
let arr1 = new Array(10, 20, 30); // [10, 20, 30]
// 길이가 3인 빈배열 생성
let arr2 = new Array(3); // [undefiend, undefiend, undefiend]
// 데이터 5가 들어가있는 길이 1의 배열 생성
let arr3 = Array.of(5); // [5]
let arr4 = Array.of(10, 20, 30); // [10, 20, 30]
let arr5 = Array.from("hello"); // ['h', 'e', 'l', 'l', 'o']
// Set는 순서(인덱스)가 없고, 중복이 없는 데이터 구조
let arr6 = Array.from(new Set([1, 1, 2, 3, 2])); // [1, 2, 3]
// Mapping 함수 활용
let arr7 = Array.from([1, 2, 3], (v)=>v*2); // [2, 4, 6]🧩 배열의 인덱스
let nums = [10, 20, 30];
console.log(nums[0]); // 10
console.log(nums[1]); // 20
console.log(nums[2]); // 30
console.log(nums[3]); // undefined - 배열의 범위를 벗어난 경우 undefined를 반환함🧩 배열에 새로운 값을 넣는법
let nums = [10, 20, 30];
nums.push(40);
console.log(nums[3]); // 40🧩 반복문에 배열 활용법
for-in문
let nums = [10, 20, 30];
for(let i in nums) { // i에 nums의 인덱스 값이 순서대로 하나씩 부여됨
console.log(nums[i]); // 10 20 30이 순서대로 출력됨
}
for-of문
let nums = [10, 20, 30];
for(let i of nums) { // i에 nums의 값들이 순서대로 부여됨
console.log(i); // 10 20 30이 순서대로 출력됨
}
for-each 함수
let nums = [10, 20, 30];
nums.forEach((v) => {
console.log(v); // v에는 nums의 값들이 순서대로 부여되어 10 20 30이 순서대로 출력됨
});🧩 배열의 함수
push() : 맨 뒤에 요소 추가
let nums = [1, 2, 3];
nums.push(4) // [1, 2, 3, 4]
unshift() : 맨 앞에 요소 추가
let nums = [1, 2, 3];
nums.unshift(0) // [0, 1, 2, 3]
splice() : 요소 교체(치환)
let nums = [1, 2, 3];
// 인덱스 1번부터 2개의 요소를 지운 후 100으로 대체
nums.splice(1, 2, 100); // [1, 100]
delete : 요소 삭제
let nums = [1, 2, 3];
delete nums[1]; // [1, undefined, 3]
pop() : 맨 마지막 요소 삭제 및 반환
let nums = [1, 2, 3];
nums.pop(); // [1, 2]
shift() : 맨 처음 지우기
let nums = [1, 2, 3];
nums.shift(); // [2, 3]
concat() : 배열을 결합
let nums = [1, 2, 3];
nums.concat([4, 5, 6]) // [1, 2, 3, 4, 5, 6]
sort() : 정렬
let nums = [1, 3, 2];
nums.sort() // [1, 2, 3]
reverse() : 배열의 순서를 반대로
let nums = [1, 3, 4, 2];
nums.reverse() // [2, 4, 3, 1]
// 만약 역정렬을 하고 싶다면?
nums.sort().reverse() // [4, 3, 2, 1]
🔗 함수(Function)
코드 뭉치에 이름을 붙인 것
🧩 용도
1. 코드 중복 제거 - 재사용성
2. 코드 이름을 붙여서 - 가독성
3. 기능적 분리/결합 - 모듈화
🧩 형식
매개변수 X, 반환값 X
function myFunc1(){};매개변수 O, 반환값 X
function myFunc2(v1, v2){};매개변수 X, 반환값 O
function myFunc3(){
return "myFunc3";
}매개변수 O, 반환값 O
function myFunc4(v1, v2){
let sum = v1 + v2;
return sum;
}🧩 함수형 변수(익명 함수)
- 함수를 변수처럼 선언해서 사용하는 것
- 변수에 매개변수 전달 가능함
- 함수형 변수도 전달이 가능하게 한 것
// 일반 함수 활용
let varFunc = function (n) {
console.log("varFunc()", n);
};
varFunc(1); // varFunc() 1
// 화살표 함수 활용
let varFunc2 = (n)=>{
console.log("varFunc2()", n);
}
varFunc2(2); // varFunc2() 2🧩 콜백 함수(비동기 처리)
어떤 함수에 인자로 전달되어, 특정 작업이 끝난 후 호출되는 함수
let sum = (n1, n2) => {
console.log(n1 + n2);
};
let calc = (n1, n2, method) => {
return method(n1, n2);
};🧩 타이머 관련 함수
setTimeout() : 해당 시간 이후 콜백 함수 실행
setTimeout(() => {
console.log("2초 지남");
}, 3000);
setInterval() : 해당 시간마다 주기적으로 콜백 함수 실행
setInterval(() => {
console.log("1초마다 수행");
}, 1000);
🔗 JS 객체 (Key-Value)
Key : 반드시 문자열(쌍따옴표는 사용안함)
value : 다양한 타입(number, string, function, object, etc...)
🧩 객체 선언
let object = {
apple: 1000,
banana: 2000,
};
console.log(object["apple"]) // 1000
console.log(object.apple) // 1000
// 다양한 타입이 value가 될 수 있음
let person = {
name : "홍길동",
age : 30,
action : () => console.log("이름:",person.name,"나이:",person.age),
obj: { job: "actor", gender: "male" }
}
🔗 클래스(Class)
클래스는 ES6버전부터 지원
🧩 클래스 왜 사용해?
- 변수와 함수를 모듈화
- 상속, 생성자 함수, 가상 함수(오버라이드)클래스 선언
🧩 클래스 선언
class Person {
name = "홍길동";
walk() {
console.log(this.name, "- 산책중");
}
}
const p1 = new Person(); // 객체 생성
console.log(p1.name); // 홍길동
p1.walk(); // 홍길동 - 산책중
🧩 생성자
class Person2 {
constructor(name = "홍길동", age = "none") { // name, age에 값이 안들어올경우 기본값 설정
console.log("생성자 호출됨.");
this.name = name;
this.age = age;
}
}
const p2 = new Person2(); // 생성자 호출됨.
console.log(p2.name, p2.age); // 홍길동 none
const p3 = new Person2("김철수", 13); // 생성자 호출됨.
console.log(p3.name, p3.age); // 김철수 13
🧩 getter, setter
- 객체의 정보 은닉을 가능하게 해주어 보안을 강화할 수 있음
- 코드의 안전성과 유지보수성을 높일 수 있음
- 잘못된 값을 사전에 방지할 수 있음
class Person {
constructor(name, age) {
this._name = name; // setter 호출됨
this.age = age;
}
get _name() {
return this.name + "님 어서오세요";
}
set _name(newValue) {
if (newValue) this.name = newValue;
}
}
const p = new Person("guest", 37); // setter 호출
console.log(p._name); // guest님 어서오세요
🔗 문자열 제어 함수
🧩 문자열 길이 - length()
let s = "Abcedf";
console.log(s.length); // 6
🧩 대문자/소문자 변경 - toUpperCase(), toLowerCase()
let s = "Abcedf";
//대문자변경
console.log(s.toUpperCase()); // ABCEDF
//소문자변경
console.log(s.toLowerCase()); // abcedf
🧩 문자 하나만 가져오기 - charAt()
let s = "Abcedf";
let char = s.charAt(0);
console.log(char); // A
🧩 문자의 인덱스 찾기 - indexOf()
let s = "java_script_programming";
//"script"문자열의 위치(인덱스)?
console.log(s.indexOf("script")); // 5
//"i"문자(열)의 위치는?
console.log(string4.lastIndexOf("i")); // 못 찾았으므로, -1
🧩 문자열 치환 - replace()
let s = "java_script_programming";
let replaced = s.replace("java", "ECMA");
console.log(string4); // 원본은 그대로 유지
console.log(replaced); // ECMA_script_programming
🧩 특정 구간 문자열 가져오기 - substring()
let s = "java_script_programming";
let substr1 = s.substring(5, 11);
console.log(substr1); // script
🧩 문자열 분리 - split()
let s = "딸기,배,포도,사과,바나나";
let array = s.split(",");
console.log(array); // (5) ['딸기', '배', '포도', '사과', '바나나']
🧩 문자열 연결 - concat()
let s1 = "ECMA";
let s2 = "Script";
let concated = s1.concat(s2);
console.log(string6); //원본 그대로
console.log(concated); // ECMAScript
🧩 좌우 공백 제거 - trim()
let s = " This is java script ";
console.log(s.trim()); // "This is java script"
🧩 모든 공백 제거 - replace()와 정규식 활용
let s = " This is java script ";
let fullTrimStr = s.replace(/(\s*)/g, "");
console.log(fullTrimStr); // Thisisjavascript
✈️ 출처
한국경제신문 x 토스뱅크 풀스택 훈련
'언어 > Javascript' 카테고리의 다른 글
| Javascript 파헤치기 5번째 (0) | 2025.01.22 |
|---|---|
| Javascript 파헤치기 4번째 - ES6 문법 (2) | 2025.01.21 |
| Javascript 파헤치기 2번째 (4) | 2025.01.17 |
| Javascript 파헤치기 1번째 (1) | 2025.01.16 |