Javascript 파헤치기 3번째

🔗 배열(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버전부터 지원

🧩 클래스 왜 사용해?

1. 변수와 함수를 모듈화
2. 상속, 생성자 함수, 가상 함수(오버라이드)클래스 선언

---

🧩 클래스 선언

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

1. 객체의 정보 은닉을 가능하게 해주어 보안을 강화할 수 있음
2. 코드의 안전성과 유지보수성을 높일 수 있음
3. 잘못된 값을 사전에 방지할 수 있음

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 토스뱅크 풀스택 훈련