이 영역을 누르면 첫 페이지로 이동
Nuhends 의 Tech Life 블로그의 첫 페이지로 이동

Nuhends 의 Tech Life

페이지 맨 위로 올라가기

Nuhends 의 Tech Life

IT / Tech / 재테크 관련 뉴스를 최대한 알기 쉽게 전달하는 Tech 블로그 입니다.

[JS] arguments 객체 그리고 유사배열 객체

  • 2021.05.05 04:59
  • 프로그래밍/JAVASCRIPT 사전
반응형

[JS] arguments 객체 그리고 유사배열 객체

arguments 객체 와 유사배열객체 설명


arguments 객체란?

자바스크립트에서 함수를 호출 할 때,

함수에서 인자를 받기로 정해둔 형태로 인자를 넘기지 않아도 에러를 발생시키지 않는다.

function sum(x, y) {
    console.log(x, y);
    return x + y;
}

sum();            // undefined undefined
sum(1);           // 1 undefined
sum(1, 2);        // 1 2
sum(1, 2, 3);     // 1 2
sum(1, 2, 3, 4);  // 1 2

1. 필요 인자 보다 적은 수의 인자가 전달되었을 때 : sum(), sum(1)

    ⇒ 값이 주어지지 않은 인자에는 undefined 가 할당된다.

 

2. 필요 인자 보다 많은 인자가 전달되었을 때 : sum(1, 2, 3) / sum(1, 2, 3, 4)

    ⇒ 초과된 인자는 무시된다

 

arguments 객체가 필요한 경우

C, Java 와 같은 strict 한 언어와 달리 에러를 발생시키지 않기 때문에

함수 내부에서 주어진 인자의 개수를 체크하고 처리가 필요한 경우가 있다.

이럴 때 사용되는 게 arguments 객체 이다.

 

 

arguments 객체는 유사 배열 객체 이다

함수를 호출할 때, 인수들과 함께 암묵적으로 arguments 객체가 함수 내부로 전달된다.

arguments 객체는 인자들이 배열 형태로 저장된 형태를 띄고 있다.

 

즉, arguments 객체는 실제 배열이 아니라 유사 배열 객체 이다.

 

function sum(x, y) {
    console.dir(arguments);
    return x + y;
}

sum();            
sum(1);           
sum(1, 2);        
sum(1, 2, 3);     
sum(1, 2, 3, 4);

위 코드에서 arguments 객체를 cosnole에 찍어보면

 

콘솔 결과

- arguments : 배열의 형태를 띈 객체 > 유사배열 객체이다.
- arguments.callee : 현재 실행 중인 함수 를 가리킨다.
- arguments.length : 함수에 전달된 인수의 개수를 가리킨다.

 

arguments 활용법

// 인덱스로 접근 가능
arguments[0] 
arguments[2]

// 각 인수를 설정 혹은 재할당 가능
arguments[1] = 'changed value';

// 유사 배열 객체인 arguemnts 를 Array 로 변환 가능
var args = Array.prototype.slice.call(arguments);

// 혹은 프로토타입 체이닝을 이용
var args = [].slice.call(arguments)

// 혹은 ES2015 방법들
var args = Array.from(arguments);
var args = [...arguments];

 

유사 배열 객체란?

Array 객체의 length 프로퍼티처럼, 객체에도 length 프로퍼티가 있다면?

 

js에서는 length 프로퍼티를 가진 객체를 유사 배열 객체(array-like objects) 라고 부른다.

 

유사배열 객체의 가장 큰 특징은 객체 임에도 표준 배열 메서드를 사용 가능하다

 

예제로 살펴보자.

var obj = {
    id: 'banana',
    length: 1
};

obj.push('peach');  // error

// apply 메서드를 이용하여 push 사용
Array.prototype.push.apply(obj, ['apple']);
console.log(obj);   // { 1: 'apple', id: 'banana', length: 2 }

- arr는 표준 배열 메서드인 push() 를 호출했을 때, 요소를 추가하는 것이 가능

- obj는 당연히 배열이 아니므로 push() 호출할 수 없으므로 에러 발생

 

하지만 obj는 length 프로퍼티를 가진 유사 배열 객체 이다.

 

유사 배열 객체의 경우 apply 메서드 를 이용하여 표준 배열 메서드를 사용하는 것이 가능하다.

반응형
저작자표시 비영리 변경금지 (새창열림)

'프로그래밍 > JAVASCRIPT 사전' 카테고리의 다른 글

[JS] 화살표 함수, 쉽고 빠르게 정리하기  (8) 2021.05.11
[YOU DON'T KNOW JS 정리] THIS (1)  (4) 2021.05.08
[JS] 문법정리 > 확실한 프로토타입 체이닝 정리  (0) 2020.12.29
[JS] 문법 정리 > 함수: 선언, 호이스팅, 일급 객체  (0) 2020.12.20
[JS] 문법정리 > 타입과 변수  (0) 2020.12.09

댓글

이 글 공유하기

  • 구독하기

    구독하기

  • 카카오톡

    카카오톡

  • 라인

    라인

  • 트위터

    트위터

  • Facebook

    Facebook

  • 카카오스토리

    카카오스토리

  • 밴드

    밴드

  • 네이버 블로그

    네이버 블로그

  • Pocket

    Pocket

  • Evernote

    Evernote

다른 글

  • [JS] 화살표 함수, 쉽고 빠르게 정리하기

    [JS] 화살표 함수, 쉽고 빠르게 정리하기

    2021.05.11
  • [YOU DON'T KNOW JS 정리] THIS (1)

    [YOU DON'T KNOW JS 정리] THIS (1)

    2021.05.08
  • [JS] 문법정리 > 확실한 프로토타입 체이닝 정리

    [JS] 문법정리 > 확실한 프로토타입 체이닝 정리

    2020.12.29
  • [JS] 문법 정리 > 함수: 선언, 호이스팅, 일급 객체

    [JS] 문법 정리 > 함수: 선언, 호이스팅, 일급 객체

    2020.12.20
다른 글 더 둘러보기

정보

Nuhends 의 Tech Life 블로그의 첫 페이지로 이동

Nuhends 의 Tech Life

  • Nuhends 의 Tech Life의 첫 페이지로 이동
반응형

검색

메뉴

  • 홈
  • 웹 개발
  • 경제 데이터
  • 경제 공부
  • 방명록

카테고리

  • 분류 전체보기 (127)
    • 프로그래밍 (69)
      • React (3)
      • HTML&CSS 사전 (13)
      • JAVASCRIPT 사전 (11)
      • Algorithm (23)
      • 이슈 정리 (2)
      • 개발 환경 (4)
      • NodeJS (1)
      • Typescript (4)
      • NextJS (5)
      • React-Query (2)
      • ai (1)
    • 경제 데이터 (22)
      • 주식 순위 (20)
      • 경제지표 (2)
    • 경제 공부 (25)
      • 경제 신문 읽기 (3)
      • 세금 재테크 (7)
      • 인사이트 (4)
      • 경제용어정리 (9)
      • 정부 지원 제도 관련 (2)
    • 팁 모음 (11)
      • 인터넷 (5)
      • 생활 (3)
      • SNS 맛집 (3)

최근 글

인기 글

댓글

공지사항

아카이브

태그

  • javascript
  • 알고리즘
  • 자바스크립트
  • 코딩테스트
  • 프로그래머스
  • 코테
  • softeer
  • 코테 풀이

나의 외부 링크

정보

nuhends의 Nuhends 의 Tech Life

Nuhends 의 Tech Life

nuhends

블로그 구독하기

  • 구독하기
  • RSS 피드

방문자

  • 전체 방문자
  • 오늘
  • 어제

티스토리

  • 티스토리 홈
  • 이 블로그 관리하기
  • 글쓰기
Powered by Tistory / Kakao. © nuhends. Designed by Fraccino.

티스토리툴바