arguments & etc

2019-01-31

Array as an Object

// Dynamic typing 때문에 서로 다른 타입 요소로 가질 수 있음
var arr = [
	1, 
	false, 
		
	{
       name: 'Tony',
       address: '111 Main St.'
	},
		
	function(name) {
       var greeting = 'Hello ';
       console.log(greeting + name);
	},
		
	"hello";
	];

//객체, 함수도 요소로 받을 수 있어 바로 호출도 가능

console.log(arr);
arr[3](arr[2].name); // Hello Tony

arguments

Execution context 가 생성될 때 variable environmnet, this, outer environment 외에 또 하나의 특별한 키워드가 생성 되는데 바로 arguments ,함수들에 넘긴 모든 인자들을 다 담은 객체이다.

function greet (firstname, lastname, language) {
	// default 값 설정
	language = language || 'en';
	
	if (arguments.lenght === 0) {
        console.log('Missing parameters!');
        console.log('--------------');
        return;
	}
	
    console.log(firstname);
    cosole.log(lastname);
    console.log(language);
    console.log(arguments) //유사배열,따로 선언안해도 사용가능
    console.log('arg 0: ' + arguments[0]) //
}

greet(); // 3개 다 undefined 
// 함수 선언 시 설정한 인자들을 다 넘길수 / 일부만 넘길수도 / 안넘길수도 있다
greet('John'); // John / undefined / undefined
greet('John', 'Doe'); // John, Doe, undefined
greet('John', 'Doe', 'es'); // John, Doe, es

여기서 argumnets 는 유사배열 이다. 유사배열은 [] 숫자 key를 가지고, length 속성을 가지지만 실제배열의 메소드들은 사용할 수 없다.


//Array.isArray() 로 유사배열여부 판단 가능
var arr = [1,2,3];
Array.isArray(arr); // true

// 배열처럼 index 접근,length 속성 가짐
function checkArg() {
    console.log(arguments);
    console.log(arguments.length);
    console.log(arguments[1]);
}
checkArg(a,b,c); 

// Arguments [a,b,c ..]
// 3
// b

// call, apply 를 사용 유사배열에 배열의 메소드를 차용할 수 있다. 
Array.prototype.slice.call(arguments,1,2);

Function overloading

다른 프로그래밍 언어들은 오버로딩 (같은 이름, 다른타입or 숫자의 인자를 가진 여러개의 함수 생성 가능) 을 지원한다. 자바스크립트는 오버로딩을 지원하진 않지만 1급함수 특성을 활용, 더 유연하게 구현이 가능하다.

function greet(firstname, lastname, language) {
    language = language || 'en';
    
    if (language === 'en') {
        console.log('Hello ' + firstname + ' ' + lastname);
    }
    
    if (language === 'es') {
        console.log('Hola ' + firstname + ' ' + lastname);
    }
}

// 만약 다른 인자를 받는 함수를 만들고 싶다면
// 이런식으로 기존 함수를 활용, 오버로딩처럼 구현 가능
function greetEnglish(firstname, lastname) {
    greet(firstname, lastname, 'en');
}

function greetEnglish(firstname, lastname) {
    greet(firstname, lastname, 'en');
}

greet('John', 'Doe', 'en'); // Hello John Doe
greet('John', 'Doe', 'es'); // Hola John Doe

세미콜론( ; ) 꼭 입력해야될까?

자바스크립트 엔진은 작성한 코드를 한자 한자 syntax parser 를 통해 읽어 코드의 의도를 읽고 문법을 판단해서 코드를 실행시킨다. 이때 자바스크립트 엔진은 세미콜론이 필요하다고 판단되는 위치에 자동으로 추가해준다.

function getPerson() {
    return //자바스크립트 엔진에 의해 자동으로 ; 추가 됨
    {
    	firstname: 'Tony'
    }
}

console.log(getPerson()); // undefined

위의 코드 실행 결과를 객체 {firstname: ‘Tony’} 라고 의도했겠지만 실제 결과는 return 뒤에 ; 콜론이 필요하다는 자바스크립트 엔진의 판단으로 인해 빈값이 리턴되어 undefined 이다.

이런 의도치 않은 오류를 방지하기 위해 세미콜론은 명시적으로 입력하는 습관을 가지자.

IIFE

this

FrontJavascript

Array as an Object

arguments

Function overloading

세미콜론( ; ) 꼭 입력해야될까?

Related Posts