rssilva/gist:4630926

## gistfile1.html
<!DOCTYPE html>
<html lang="pt" dir="ltr" class="client-nojs">
  	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script type="text/javascript" src="arguments.js"></script>
	</head>
	<body>
		<div id="wrapper"></div>
	</body>
</html>

## gistfile2.js
//vamos criar uma função genérica para ver a aplicação do objeto "arguments"

var minhaFuncao = function () {
  //aqui vemos que embora ele não tenha sido declarado
	//é um objeto "array-like" que tem todas as
	//variáveis passadas como argumento para a função
	console.log(arguments)

	var wrapper = document.getElementById('wrapper') //div principal do documento HTML

	//esse for itera pelo objeto arguments
	for (var i = 0, len = arguments.length; i < len; i++) {
		//se o tipo do argumento no índice i for string...
		//você pode estranhar esse "igual a" dessa forma === em vez dessa ==
		//faremos um estudo mais detalhado sobre isso
		if (typeof(arguments[i]) === 'string') {
			//o html da div principal é concatenado com um elemento h2 contendo
			//o conteúdo do objeto argumentos no índice i
			wrapper.innerHTML += '<h2>' + arguments[i] + '</h2>';
		}

		//se o tipo do objeto arguments no índice i for um objeto
		//e se esse objeto tiver a propriedade length
		if (typeof(arguments[i]) === 'object' && arguments[i].length) {
			//o html da div principal é concatenado com uma lista
			wrapper.innerHTML += '<ul>';
			//essse for itera por todos os filhos dessa lista (os elementos li, no caso)
			//esses elementos vão ser concatenados ao html da div principal
			for (var j = 0, len2 = arguments[i].length; j < len2; j++) {
				wrapper.innerHTML += '<li>' + arguments[i][j] + '</li>';
			}
			wrapper.innerHTML += '</ul>';
		}
	}
}


//aqui temos as variáveis que serão passadas como parâmetro para a nossa função

var subtitulo1 = 'Se é uma string, vira um h2',
	subtitulo2 = 'se é um array, vira uma lista (ul), veja abaixo, a lista do supermercado',
	lista1 = ['pão', 'leite', 'queijo', 'presunto'],
	subtitulo3 = 'esse é um terceiro subtitulo',
	lista2 = ['1958', '1962', '1970', '1994', '2002'],
	subtitulo4 = 'Você consegue identificar o que significa a lista acima?';

window.onload = function () {
	//quando os elementos forem renderizados na tela, a função será chamada
	//todas as strings declaradas acima serão passadas como argumento
	minhaFuncao(subtitulo1, subtitulo2, lista1, subtitulo3, lista2, subtitulo4);
}

## gistfile3.js
//Aqui estamos redefinindo a função, com uma única diferença
//declaramos a função com uma variável local arguments
//veja o que acontece quando você faz isso...
//arguments não é uma palavra reservada, então pode ser sobrescrita
//feito isso, não teremos o mesmo efeito desejado. Tome cuidado!
var minhaFuncao = function () {
  	var arguments = '';
	console.log(arguments)

	var wrapper = document.getElementById('wrapper')

	for (var i = 0, len = arguments.length; i < len; i++) {
		if (typeof(arguments[i]) == 'string') {
			wrapper.innerHTML += '<h2>' + arguments[i] + '</h2>';
		}

		if (typeof(arguments[i]) == 'object' && arguments[i].length) {
			wrapper.innerHTML += '<ul>';
			for (var j = 0, len2 = arguments[i].length; j < len2; j++) {
				wrapper.innerHTML += '<li>' + arguments[i][j] + '</li>';
			}
			wrapper.innerHTML += '</ul>';
		}
	}
}

## gistfile4.js
//Nesse caso, estamos reescrevendo a função, e adicionando arguments
//como a variável passada como argumento, substitua-a e veja os efeitos

var minhaFuncao = function (arguments) {

	console.log(arguments)

	var wrapper = document.getElementById('wrapper')

	for (var i = 0, len = arguments.length; i < len; i++) {
		if (typeof(arguments[i]) == 'string') {
			wrapper.innerHTML += '<h2>' + arguments[i] + '</h2>';
		}

		if (typeof(arguments[i]) == 'object' && arguments[i].length) {
			wrapper.innerHTML += '<ul>';
			for (var j = 0, len2 = arguments[i].length; j < len2; j++) {
				wrapper.innerHTML += '<li>' + arguments[i][j] + '</li>';
			}
			wrapper.innerHTML += '</ul>';
		}
	}
}
	<!DOCTYPE html>
	<html lang="pt" dir="ltr" class="client-nojs">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script type="text/javascript" src="arguments.js"></script>
	</head>
	<body>
	<div id="wrapper"></div>
	</body>
	</html>
	//vamos criar uma função genérica para ver a aplicação do objeto "arguments"

	var minhaFuncao = function () {
	//aqui vemos que embora ele não tenha sido declarado
	//é um objeto "array-like" que tem todas as
	//variáveis passadas como argumento para a função
	console.log(arguments)

	var wrapper = document.getElementById('wrapper') //div principal do documento HTML

	//esse for itera pelo objeto arguments
	for (var i = 0, len = arguments.length; i < len; i++) {
	//se o tipo do argumento no índice i for string...
	//você pode estranhar esse "igual a" dessa forma === em vez dessa ==
	//faremos um estudo mais detalhado sobre isso
	if (typeof(arguments[i]) === 'string') {
	//o html da div principal é concatenado com um elemento h2 contendo
	//o conteúdo do objeto argumentos no índice i
	wrapper.innerHTML += '<h2>' + arguments[i] + '</h2>';
	}

	//se o tipo do objeto arguments no índice i for um objeto
	//e se esse objeto tiver a propriedade length
	if (typeof(arguments[i]) === 'object' && arguments[i].length) {
	//o html da div principal é concatenado com uma lista
	wrapper.innerHTML += '<ul>';
	//essse for itera por todos os filhos dessa lista (os elementos li, no caso)
	//esses elementos vão ser concatenados ao html da div principal
	for (var j = 0, len2 = arguments[i].length; j < len2; j++) {
	wrapper.innerHTML += '<li>' + arguments[i][j] + '</li>';
	}
	wrapper.innerHTML += '</ul>';
	}
	}
	}


	//aqui temos as variáveis que serão passadas como parâmetro para a nossa função

	var subtitulo1 = 'Se é uma string, vira um h2',
	subtitulo2 = 'se é um array, vira uma lista (ul), veja abaixo, a lista do supermercado',
	lista1 = ['pão', 'leite', 'queijo', 'presunto'],
	subtitulo3 = 'esse é um terceiro subtitulo',
	lista2 = ['1958', '1962', '1970', '1994', '2002'],
	subtitulo4 = 'Você consegue identificar o que significa a lista acima?';

	window.onload = function () {
	//quando os elementos forem renderizados na tela, a função será chamada
	//todas as strings declaradas acima serão passadas como argumento
	minhaFuncao(subtitulo1, subtitulo2, lista1, subtitulo3, lista2, subtitulo4);
	}
	//Aqui estamos redefinindo a função, com uma única diferença
	//declaramos a função com uma variável local arguments
	//veja o que acontece quando você faz isso...
	//arguments não é uma palavra reservada, então pode ser sobrescrita
	//feito isso, não teremos o mesmo efeito desejado. Tome cuidado!
	var minhaFuncao = function () {
	var arguments = '';
	console.log(arguments)

	var wrapper = document.getElementById('wrapper')

	for (var i = 0, len = arguments.length; i < len; i++) {
	if (typeof(arguments[i]) == 'string') {
	wrapper.innerHTML += '<h2>' + arguments[i] + '</h2>';
	}

	if (typeof(arguments[i]) == 'object' && arguments[i].length) {
	wrapper.innerHTML += '<ul>';
	for (var j = 0, len2 = arguments[i].length; j < len2; j++) {
	wrapper.innerHTML += '<li>' + arguments[i][j] + '</li>';
	}
	wrapper.innerHTML += '</ul>';
	}
	}
	}
	//Nesse caso, estamos reescrevendo a função, e adicionando arguments
	//como a variável passada como argumento, substitua-a e veja os efeitos

	var minhaFuncao = function (arguments) {

	console.log(arguments)

	var wrapper = document.getElementById('wrapper')

	for (var i = 0, len = arguments.length; i < len; i++) {
	if (typeof(arguments[i]) == 'string') {
	wrapper.innerHTML += '<h2>' + arguments[i] + '</h2>';
	}

	if (typeof(arguments[i]) == 'object' && arguments[i].length) {
	wrapper.innerHTML += '<ul>';
	for (var j = 0, len2 = arguments[i].length; j < len2; j++) {
	wrapper.innerHTML += '<li>' + arguments[i][j] + '</li>';
	}
	wrapper.innerHTML += '</ul>';
	}
	}
	}