[JavaScript] JaveScript 기초 3 (함수, 스코프, 배열)

JavaScript에서 함수의 기본 형태

function 함수명(매개변수1, 매개변수2, ...){
    실행할 코드
    return 반환값
}

👉 return을 생략하면 함수는 자동으로 undefined를 반환한다.

함수의 작성 방식

1. 함수 선언식

• 가장 기본적인 함수 방식
• 코드 어디서든 호출할 수 있다는 특징 (호이스팅 적용)

function add(a, b){
    return a + b
}

 

💡 호이스팅

호이스팅은 자바스크립트가 코드를 실행하기 전에 변수와 함수 선언을 해당 스코프의 최상단으로 끌어올려 처리하는 동작방식이다. 이로 인해 함수 선언문은 코드의 위치와 상관없이 호출할 수 있으며, var로 선언된 변수 또한 선언 자체는 끌어 올려지지만 값은 초기화되지 않아 undefined 상태가 된다.

2. 함수 표현식

• 함수를 변수에 할당하는 방식
• 함수가 변수에 저장되기 때문에 선언 이전에는 사용할 수 없음

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

3. 화살표 함수

• 간결한 함수 표현 방식으로, 기존 함수보다 코드가 짧고 직관적이다.
• this를 자체적으로 가지지 않고 상위 스코프인 this를 그대로 사용하기 때문에 콜백 함수나 간단한 연산 로직에 자주 사용된다.

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

4. 익명 함수

• 이름이 없는 함수로, 주로 함수 표현식이나 콜백 함수 형태로 사용된다.
• 한 번만 사용되거나 특정 상황에서 즉시 전달해야 하는 로직에 적합하다.

const print = function() { console.log("익명 함수 실행") }

5. 즉시 실행 함수

(function() { console.log("즉시 실행") })()

6. 콜백 함수

• 함수의 인자로 전달된다.

function greet(callback) { callback() }
greet(function() { console.log("안녕하세요!") })
greet(() => { console.log("안녕하세요!") })

7. 가변 매개변수를 가진 함수

• 함수의 전달되는 인자의 개수가 정해져 있지 않을 때 여러 개의 값을 하나로 묶어 받아 처리할 수 있도록 해주는 기능을 한다.

function 함수명(...매개변수명) {
    매개변수명은 배열을 나타냄
}

8. 중첩 함수

• 함수 안에 또 다른 함수를 정의하는 방식
• 내부 함수는 외부 함수의 영역 안에서만 사용할 수 있다는 특징이 있다.
• 외부 함수의 변수에 접근할 수 있어 관련된 로직을 하나의 기능 단위로 묶을 수 있으며, 불필요한 전역 변수 사용을 줄이고 코드의 안정성과 가독성을 높일 수 있다.

function 외부함수명(매개변수) {
    외부 함수 코드
    function 내부함수명(매개변수) {
        내부 함수 코드
    }
    내부함수명()
}

9. 고차 함수

• 함수를 인자로 전달받거나, 함수를 반환하는 함수를 말한다.

function 함수명(매개변수) {
    return function(매개변수) {
        return 반환값
    }
}

스코프의 종류

전역 스코프

• 어느 곳에서는 접근 가능한 최상위 범위
• 브라우저 환경에서는 전역에서 var로 선언한 변수는 보통 window의 프로퍼티가 되지만 let/const는 전역에 선언해도 전역 객체 프로퍼티로 붙지 않는 차이가 있다.

var a = 1 // window.a = 1
let b = 2 // window.b (x)

함수 스코프

• 함수 내부에서 선언된 변수
• var는 블록의 중괄호를 무시하고 함수 단위로만 스코프가 결정되는 함수 스코프를 가진다.
• var를 블록 안에서 선언해도 함수 밖에서 접근 가능한 경우가 많아 버그의 원인이 될 수 있다.

function test() {
    if(true) {
        var x = 10
        console.log(x)
    }
    console.log(x) // 블록 밖에서도 접근됨
}

블록 스코프

• {}(블록) 단위로 범위가 결정되는 스코프
• let과 const는 블록 스코프를 가지므로 if, for, while, try/catch 등의 블록 안에서 선언하면 그 블록 밖에서는 접근할 수 없다.

if(true) {
    let y = 20
    const z = 30
}
console.log(y) // error
console.log(z) // error

지역 스코프

• 보통 전역이 아닌 모든 스코프(함수, 블록 등)를 통칭하는 말

function outer() {
    const local = "지역 변수"
    console.log(local) // ok
}
console.log(local) // error

렉시컬 스코프

• 함수가 어디에서 호출되었는지가 아니라 어디에 선언되었는지에 따라 상위 스코프가 결정된다.
• 내부 함수는 자신이 선언된 위치 기준으로 바깥 변수에 접근할 수 있다.

const x = "전역"
function outer() {
    const x "outer"
    function inner() {
        console.log(x) // "outer" 선언 위치 기준으로 상위
    }
    inner()
}
outer()

스코프 체인

• 변수를 찾을 때 자바스크립트는 현재 스코프 -> 상위 스코프 -> ... -> 전역 스코프 순서로 올라가며 검색한다.
• 이 연결 구조를 스코프 체인이라 한다.

배열

• 배열이란 여러개의 값을 하나의 변수에 순서대로 저장할 수 있는 자료구조이다.
• index라는 번호로 구분되며, 대부분 0으로 시작한다.
• 여러 가지 자료형을 함께 저장 할 수 있다.
• 인덱스를 기준으로 값을 저장하고 접근한다.

배열 메서드

• push() : 배열의 끝에 요소를 추가
• pop() : 배열의 마지막 요소를 제거
• unshift() : 배열의 앞에 요소를 추가
• shift() : 배열의 첫 번째 요소를 제거
• forEach() : 배열의 각 요소를 순서대로 하나씩 처리
• map() : 각 요소를 가공하여 새로운 배열을 반환
• filter() : 조건을 만족하는 요소만 골라 새 배열 반환
• reduce() : 배열을 하나의 값으로 누적 계산 (합계, 객체 생성)
• find() : 조건을 반족하는 첫 번째 요소 반환
• findIndex() : 조건을 만족하는 첫 번째 요소의 인덱스를 반환
• includes() : 특정 값이 포함되어 있는지 여부 반환
• indexOf(): 특정 값의 첫 인덱스 반환 (없으면 -1)
• sort() : 배열 요소를 정렬 (원본 배열 변경)
• reverse() : 배열 순서 반전
• slice() : 배열의 일부를 잘라 새 배열 반환 (원본 유지)
• splice() : 요소 추가 / 삭제 / 교체 (원본 배열 변경)
• join() : 배열을 문자열로 변환
• concat() : 배열을 합쳐서 새 배열 반환
• flat() : 중첩 배열을 평탄화