[JavaScript] 함수 | 배열 | 객체

목차!

😊 함수

• 참고 자료: 함수 - JavaScript | MDN

1. 함수 선언 방식

function 키워드 사용

function square(number) {
  return number * number;
}

• 매개변수 값 변경은 전역적으로 적용되지 않음.
• 매개변수가 배열인 경우에는 전역적으로 적용

2. 함수 표현식

변수를 통해 함수를 할당

const square = function (number) {
  return number * number;
};
const x = square(4); // `x` 의 값은 16 입니다.

함수 표현식에서도 함수 이름을 지정할 수 있다.

const factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
};

console.log(factorial(3));

3. 화살표 함수

(ES6에서 추가)

간결한 함수 문법으로, function 키워드를 사용하지 않고, => (화살표)를 사용해 함수를 선언한다.

const 함수명 = (매개변수) => {
  // 함수 본문
};

예시:

const add = (a, b) => {
  return a + b;
};

console.log(add(2, 3)); // 출력: 5

매개변수가 하나일 때 괄호를 생략할 수 있다.

const square = x => x * x;
console.log(square(4)); // 출력: 16

반환값이 한 줄일 때 중괄호와 return 키워드를 생략할 수 있다.

const multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // 출력: 6

화살표 함수는 this가 정적으로 바인딩된다. 즉, 화살표 함수는 자신을 감싸고 있는 외부 스코프의 this 값을 그대로 사용한다. 일반 함수에서는 호출 시점에 따라 this가 달라지지만, 화살표 함수는 선언될 때의 this를 고정해서 사용한다.

// this 동작 차이

const person = {
  name: "Alice",
  sayName: function() {
    console.log(this.name); // 'this'는 person 객체를 가리킴
  }
};

person.sayName(); // 출력: "Alice"

// 화살표 함수 사용 시:
const person2 = {
  name: "Bob",
  sayName: () => {
    console.log(this.name); // 'this'는 외부 스코프를 가리킴
  }
};

person2.sayName(); // 출력: undefined (글로벌 객체의 'this' 사용)

화살표 함수는 이벤트 핸들러에서 특히 유용하며, 콜백 함수로 사용할 때 this를 따로 바인딩하지 않아도 된다.

예시:

// 배열 메서드와 함께 사용
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => num * num);
console.log(squared); // 출력: [1, 4, 9, 16, 25]

// 간단한 콜백 함수
setTimeout(() => {
  console.log("1초 후에 실행");
}, 1000);

 

📩 배열(Array)

여러 개의 값을 하나의 변수에 저장할 수 있는 데이터 구조

1. 배열 선언

1.1 대괄호 사용(가장 많이 사용되는 방법)

let arr = [1, 2, 3, 4, 5];

1.2 Array 객체 사용

let arr = new Array(1, 2, 3, 4, 5);

 

2. 배열의 특징

인덱스를 통해 접근한다.

let arr = ["Apple", "Banana", "Orange"];
console.log(arr[0]); // 출력: "Apple"
console.log(arr[1]); // 출력: "Banana"

배열의 크기는 동적이다.

arr[3] = "Grape"; // 새로운 요소 추가
console.log(arr); // 출력: ["Apple", "Banana", "Orange", "Grape"]

다양한 데이터 타입을 저장할 수 있다.

let mixedArray = [1, "Hello", true, null];

 

3. 배열의 주요 메소드

3.1 배열 추가/삭제

push: 배열의 끝에 요소 추가.

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // 출력: [1, 2, 3, 4]

pop: 배열의 끝에서 요소 제거.

arr.pop();
console.log(arr); // 출력: [1, 2, 3]

shift: 배열의 첫 번째 요소를 제거

arr.shift();
console.log(arr); // 출력: [2, 3]

unshift: 배열의 앞에 새로운 요소를 추가

arr.unshift(0);
console.log(arr); // 출력: [0, 2, 3]

3.2 배열 순회

forEach: 배열 각 요소에 대해 함수 실행

let arr = [1, 2, 3];
arr.forEach(element => console.log(element));

3.3 배열 변형

map: 배열의 각 요소를 새로운 배열로 반환.

let arr = [1, 2, 3];
let squaredArr = arr.map(x => x * x);
console.log(squaredArr); // 출력: [1, 4, 9]

filter: 조건에 맞는 요소들로만 새 배열 생성.

let arr = [1, 2, 3, 4, 5];
let evenArr = arr.filter(x => x % 2 === 0);
console.log(evenArr); // 출력: [2, 4]

reduce: 배열의 요소들을 하나의 값으로 축약.

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 출력: 10

3.4 배열 검색

indexOf(): 특정 값이 배열의 몇 번째 인덱스에 있는지 반환 (없으면 -1 반환)

let arr = ["Apple", "Banana", "Orange"];
console.log(arr.indexOf("Banana")); // 출력: 1

find(): 조건을 만족하는 첫 번째 요소를 반환

let arr = [1, 2, 3, 4, 5];
let firstEven = arr.find(x => x % 2 === 0);
console.log(firstEven); // 출력: 2

includes(): 배열에 특정 값이 있는지 여부를 반환

let arr = [1, 2, 3];
console.log(arr.includes(2)); // 출력: true

3.5 정렬

sort(): 배열을 정렬 (기본적으로 요소들을 문자열로 변환하여 사전순으로 정렬)

let arr = [3, 1, 4, 1, 5, 9];
arr.sort();
console.log(arr); // 출력: [1, 1, 3, 4, 5, 9]

// 숫자를 제대로 정렬하려면 비교함수를 전달
arr.sort((a, b) => a - b);
console.log(arr); // 출력: [1, 1, 3, 4, 5, 9]

 

4. 다차원 배열

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
console.log(matrix[1][1]); // 출력: 5

5. 배열의 길이

length

let arr = [1, 2, 3, 4, 5];
console.log(arr.length); // 출력: 5

 

🎊 객체(Object)

키-값 쌍의 집합으로, 다양한 속성(property)과 메서드(method)를 가질 수 있는 복합 데이터 구조

 

1. 객체 생성

1. 객체 리터럴

중괄호 {} 안에 속성을 정의

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

 

2. new Object() 사용

new Object()를 사용해 객체를 생성

let person = new Object();
person.name = "Alice";
person.age = 25;
person.isStudent = true;

2. 객체의 속성

객체는 속성(property)이라고 불리는 키(key)와 값(value)의 쌍으로 구성

속성 접근 방법:

• 점 표기법 (dot notation):
• console.log(person.name); // "Alice" console.log(person.age); // 25
• 대괄호 표기법 (bracket notation): 동적으로 속성명을 정의할 때 유용 

• let key = "name";
  console.log(person[key]); // "Alice"
  

• console.log(person["name"]); // "Alice" console.log(person["age"]); // 25

속성 추가/수정/삭제:

• 속성 추가/수정:
• person.gender = "female"; // 새로운 속성 추가 person.age = 26; // 기존 속성 수정
• 속성 삭제:
• delete person.isStudent; console.log(person); // { name: "Alice", age: 26, gender: "female" }

 

3. 객체의 메서드

객체는 메서드(method)라고 불리는 함수 포함 → 객체의 동작(기능)을 정의

let person = {
  name: "Alice",
  age: 25,
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // 출력: Hello, my name is Alice.

• this 키워드: 객체 내부의 메서드에서 this는 해당 객체 → this.name은 person.name을 참조

 

4. 객체 반복

객체의 속성을 반복(iterate)하려면 for...in 문 사용

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

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}
// 출력:
// name: Alice
// age: 25
// isStudent: true

 

5. 객체 관련 메서드

1. Object.keys()

객체의 모든 키를 배열로 반환

let person = { name: "Alice", age: 25, gender: "female" };
console.log(Object.keys(person)); // 출력: ["name", "age", "gender"]

 

2. Object.values()

객체의 모든 값을 배열로 반환

console.log(Object.values(person)); // 출력: ["Alice", 25, "female"]

 

3. Object.entries()

객체의 키-값 쌍을 배열의 형태로 반환

console.log(Object.entries(person));
// 출력: [["name", "Alice"], ["age", 25], ["gender", "female"]]

 

4. Object.assign()

하나의 객체에서 다른 객체로 속성을 복사

let additionalInfo = { city: "Seoul", country: "South Korea" };
Object.assign(person, additionalInfo);
console.log(person);
// 출력: { name: "Alice", age: 25, gender: "female", city: "Seoul", country: "South Korea" }

 

7. 객체 복사

객체는 참조 타입 → 객체를 다른 변수에 할당하면 원본 객체에 대한 참조가 복사

• 얕은 복사 (shallow copy):
  • *Object.assign()*을 사용하거나, 스프레드 문법을 사용하여 얕은 복사

  let obj1 = { a: 1, b: 2 };
  let obj2 = Object.assign({}, obj1);  // 또는 let obj2 = { ...obj1 };
  obj2.a = 3;
  console.log(obj1.a); // 출력: 1 (원본은 변하지 않음)
  
  

• 깊은 복사 (deep copy):
  • 깊은 복사는 객체의 중첩된 값들까지 모두 복사하는 방법. 이를 위해서는 재귀 함수나 JSON 메서드를 사용

  let obj1 = { a: 1, b: { c: 2 } };
  let obj2 = JSON.parse(JSON.stringify(obj1));
  obj2.b.c = 3;
  console.log(obj1.b.c); // 출력: 2 (깊은 복사로 원본은 변하지 않음)