[Javascript] Part 2: 함수, 객체, 배열, 문자열

cowmin·2025년 6월 28일

1. 함수

  • 자바스크립트에서 함수(function)는 특정 작업을 수행하는 코드 블록이다.
  • 함수는 재사용 가능한 코드를 작성할 수 있게 해준다.
  • 함수는 입력값을 받아 처리하고 결과를 반환한다.

1.1 함수 선언

  • function 키워드로 함수를 선언
  • 호이스팅(선언 끌어올림)의 영향을 받음 → 함수 선언 이전에도 호출 가능
function add(x, y) {
    return x + y;
}
console.log(add(5, 10)); // 15

1.2 함수 표현식

  • 익명 함수를 변수에 할당하여 사용
  • 호이스팅의 영향을 받지 않음 → 선언 이전에는 호출 불가
  • 함수 자체를 값처럼 다룰 수 있어서 콜백 함수로도 자주 사용
const add = function(x, y) {
    return x + y;
}
console.log(add(5, 10)); // 15

1.3 화살표 함수

// 함수 선언
function add(a, b) {
	return a + b;
}

// 함수 표현식
const add2 = function (a, b) {
	return a + b;
}

// 화살표 함수
const add3 = (a, b) => {
	return a + b;
}

// 화살표 함수, 실행할 코드가 한 줄일 때는 중괄호 생략 가능
const add4 = (a, b) => a + b;

호이스팅(hoisting)이란?
코드 실행 전에 자바스크립트 엔진이 변수와 함수의 선언을 메모리로 끌어올리는 과정

함수 선언식

sayHi(); // 호이스팅 가능

function sayHi() {
  console.log("안녕!");
}

함수 표현식

sayBye(); // 에러 발생, 호이스팅 불가능

var sayBye = function() {
  console.log("잘 가~");
};


2. 객체

2.1 객체의 개념

  • 객체는 여러 개의 관련된 데이터를 하나의 단위로 묶어 표현하는 자료형이다.
  • 객체는 프로퍼티(속성)와 메서드(동작)를 가진다.

2.2 객체 생성 방법

가장 기본적인 객체 생성 방법은 객체 리터럴을 사용하는 것이다.

let person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello, " + this.name);
  } 
}; 

2.3 객체 프로퍼티와 메서드

프로퍼티 : 객체에 대한 정보
메서드 : 객체가 할 수 있는 동작 정의

프로퍼티 접근

let person = {
  name: "Alice",
  age: 25
};

console.log(person.name);  // Alice
console.log(person.age);   // 25

메서드 정의 및 호출

// 메서드 정의
let person = {
  name: "Alice",
  age: 25,
  greet: function() {
    console.log("Hello, " + this.name);
  } 
};

// 메서드 호출
person.greet();  // Hello, Alice


3. 배열

3.1 배열의 개념

  • 배열은 여러 개의 값을 하나의 변수에 저장할 수 있는 자료형이다.
  • 배열의 요소는 순서가 있으며, 인덱스를 통해 접근할 수 있다.

3.2 배열 메서드

// 배열 생성
let numbers = [1, 2, 3, 4, 5];

// push: 배열의 끝에 요소 추가
numbers.push(6);
console.log(numbers);  // [1, 2, 3, 4, 5, 6]

// pop: 배열의 마지막 요소 제거
numbers.pop();
console.log(numbers);  // [1, 2, 3, 4, 5]

// shift: 배열의 첫 번째 요소 제거
numbers.shift();
console.log(numbers);  // [2, 3, 4, 5]

// unshift: 배열의 첫 번째 위치에 요소 추가
numbers.unshift(1);
console.log(numbers);  // [1, 2, 3, 4, 5]

// forEach: 배열의 각 요소에 대해 함수를 실행
numbers.forEach(function(number) {
  console.log(number);  // 1, 2, 3, 4, 5
});

3.3 객체와 배열의 활용

배열 안에 객체 저장

let students = [
  { name: "John", age: 22 },
  { name: "Jane", age: 24 },
  { name: "Mike", age: 23 }
];

객체 안에 배열 저장

let person = {
  name: "John",
  hobbies: ["Reading", "Traveling", "Swimming"]
};


4. 문자열

  • 자바스크립트에서 문자열은 문자들의 순서 있는 집합으로, 불변(immutable) 자료형이다.
  • 문자열 조작은 대부분 새로운 문자열을 반환한다.

4.1 문자열 검색

4.1.1 indexOf()

문자열 내에서 특정 문자나 문자열의 첫 등장 위치 인덱스를 반환 (없으면 -1 반환)

"hello world".indexOf("o"); // 4
"hello world".indexOf("z"); // -1

4.1.2 lastIndexOf()

가장 마지막에 등장하는 위치 인덱스 반환

"hello world".lastIndexOf("o"); // 7

4.1.3 includes()

포함 여부를 boolean(true/false) 값으로 반환

"hello world".includes("world"); // true

4.1.4 startsWith() / endsWith()

특정 문자열로 시작/끝나는지 확인

"hello".startsWith("he"); // true
"hello".endsWith("lo");   // true

4.2 문자열 추출

4.2.1 slice(start, end)

  • start부터 end-1까지 문자열을 추출
  • 음수 인덱스 사용 가능 (뒤에서부터)
"abcdef".slice(1, 4);   // "bcd"
"abcdef".slice(-3);     // "def"

4.2.2 substring(start, end)

slice()와 유사하나, 음수 인덱스를 0으로 처리

"abcdef".substring(1, 4);  // "bcd"
"abcdef".substring(-2, 4); // "abcd"

4.2.3 substr(start, length)

시작 위치부터 지정한 길이만큼 추출 (ES6 이후 비추천)

"abcdef".substr(2, 3); // "cde"

4.3 문자열 변경

4.3.1 replace() / replaceAll()

  • 문자열의 일치하는 부분을 새 문자열로 치환
  • replace()는 첫 번째 일치만 변경
"banana".replace("a", "o");       // "bonana"
"banana".replaceAll("a", "o");    // "bonono"

4.3.2 toUpperCase() / toLowerCase()

대소문자 변환

"Hello".toUpperCase(); // "HELLO"
"Hello".toLowerCase(); // "hello"

4.3.3 trim() / trimStart() / trimEnd()

문자열 양쪽 또는 한쪽 끝의 공백 문자 제거

"  hello  ".trim();        // "hello"
"  hello  ".trimStart();   // "hello  "
"  hello  ".trimEnd();     // "  hello"

4.4 문자열 분할과 결합

4.4.1 split(delimiter)

문자열을 구분자 기준으로 나눠 배열로 반환

"apple,banana,kiwi".split(","); // ["apple", "banana", "kiwi"]

4.4.2 concat()

문자열을 이어붙임. + 연산자를 더 많이 사용

"hello".concat(" ", "world"); // "hello world"
"hello" + " world";           // "hello world"

4.5 기타

4.5.1 charAt(index) / charCodeAt(index)

해당 위치의 문자 또는 유니코드 값 반환

"abc".charAt(1);       // "b"
"abc".charCodeAt(1);   // 98 (유니코드)

4.5.2 repeat(count)

문자열을 여러 번 반복

"ha".repeat(3); // "hahaha"

4.6 템플릿 리터럴 (Template Literal)

  • 백틱(``) 사용하여 문자열을 만들며, ${변수} 문법으로 문자열 삽입 가능
  • 줄바꿈 포함, 표현식 삽입에 매우 유리
let name = "Alice";
let greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, Alice!"

0개의 댓글