[Learn.JS] JavaScript-3 (Loops, 객체, 함수)

Loops

The for statement

---

자바 스크립트는 같은 코드를 여러번 반복하는 메서드가 존재한다. 주로 배열이나 객체에서 반복하는 데 사용됩니다. 예를 들어 보겠습니다.

var i;
for (i = 0;, i < 3; i = i + 1)
{
		console.log(i);
}

다음을 출력할 것 입니다.

0
1
2

for 문은 자바스크립트에서 자바와 C의 for 문과 같은 역할을 한다. 이것은 세가지 파트를 가진다.

1. Initialization - 반복변수 i 를 초기화 합니다 . 이 예제에선 i 를 0 으로 초기화 합니다.
2. Condition - 조건이 맞는 다면 실행을 계속 이어갑니다. 이 예제에선 i 가 3보다 작을 때까지 실행하게 됩니다.
3. Increment - 반복자를 증가시키는 지시어입니다. 우리의 경우, 우리는 모든 루프에서 그것을 1씩 증가시킨다.

변수 정의를 for루프 안에 삽입하고 ++ 연산자를 사용하여 증가시킴으로써 문에 대한 더 짧은 표기법을 쓸 수 있다.

for (var i = 0; i < 3; i++)
{
		console.log(i);
}

배열에 대해 반복하고 모든 멤버를 인쇄하기 위해 일반적으로 for 문을 사용합니다. 예는 다음과 같습니다.

var myArray = ["A", "B", "C"];
for (var i = 0; i < myArray.length; i++)
{
		console.log("The member of myArray in index" + i + " is " + myArray[i]);
}

그러면 배열의 내용이 출력됩니다.

The member of myArray in index 0 is A
The member of myArray in index 1 is B
The member of myArray in index 2 is C

Array의 length속성을 사용하여 Array의 멤버 수를 반환하므로 반복을 중지할 시기를 알 수 있습니다.

The while statement

---

while문은 for문보다 간단한 형식이다. 이것은 표현식이 true면 계속 true일 때까지 반복한다.

예를 들면,

var i = 99;
while (i > 0)
{
		console.log(i + " bottles of beer on the wall");
		i -= 1;
}

break and continue statements

---

break 문은 루프 실행을 멈춥니다. 예를 들어 우리는  while(true) 를 통해 계속 실행 시킬 수 있고 break 문을 넣어 특정조건에 맞으면 멈추는 거 대신 실행을 중단합니다.

var i = 99;
while (true)
{
		console.log(i + " bottles of beer on the wall");
		i = -=1;
		if ( i == 0 )
		{
				break;
		}
}

continue 문은 남은 루프를 멈추고 루프의 처음으로 이동시킵니다. 예를 들어, 우리가 for 문을 통해 홀수만 출력시키고 싶다면 다음을 하면 됩니다.

for ( var i = 0; i < 100; i++)
{
		// check that the number is even
		if (i % 2 == 0)
		{
				continue;
		}
		// if we got here, the i is odd,
		console.log( i + " is an odd number.");
}

Exercise

이번 연습에선 myArray의 모든 원소를 루프를 통해 출력해 낼 것이다.

var myArray = ["What is the meaning of life?", "The meaning of life is", 42];

// TODO: modify this code
for (var i = 0; i < myArray.length; i++)
{
		console.log(myArray[i]);
}

---

Objects

자바스크립트(JavaScript)는 함수형 언어이며 객체 지향 프로그래밍을 위해 객체와 함수를 모두 사용하지만, 객체는 데이터 구조로 사용되며 파이썬의 사전이나 자바 맵과 비슷하다. 이 튜토리얼에서는 객체를 데이터 구조로 사용하는 방법에 대해 알아보겠습니다. 고급 튜토리얼에서는 개체 지향 JavaScript에 대해 자세히 설명합니다.

객체를 시작할 땐 대괄호를 사용합니다.

var emptyObject = {};
var personObject = {
		firstName : "John",
		lastName : "Smith"
}

Member addressing

---

객체의 멤버는 배열과 마찬가지로 대괄호 연산자 [] 를 사용하여 주소를 지정할 수 있지만 다른 객체 지향 언어들처럼 마침표 연산자도 사용할 수 있다. 괄호가 문자열을 사용하여 멤버를 반환한다는 점을 제외하면 멤버는 단순 단어(단어에 공백을 포함하거나 숫자로 시작하거나 잘못된 문자를 사용하면 안 됨)여야 하는 마침표 연산자와는 매우 유사합니다.

예를 들어, 사람 객체에 더 자세한 사항을 채우기 위해선

var personObject = {
		firstName : "John",
		lastName : "Smith"
}
personObject.age = 23;
personObject["salary"] = 14000;

Iteration

딕셔너리 안에 모든 멤버를 반복하는 일은 사소한 일이 아닙니다. 왜냐면 객체에 대해 반복하면 객체에 실제로 속하지 않는 멤버도 생성될 수 있습니다. 그러므로, 우리는 회원이 사실의 개체에 속해 있나 확인하기 위해 hasOwnProperty 메서드를 사용해야 한다.

for (var member in personObject)
{
		if ( personObject.hasOwnProperty(member))
		{
				console.log("the member " + member + " of personObject is " + personObject[member])
		}
}
		

이것은 이렇게 출력될 것이다.

the member firstName of personObject is John
the member lastName of personObject is Smith
the member age of personObject is 23
the member salary of personObject is 14000

JavaScript에서 객체의 메소드는 배열과 같은 순서가 정해져 있습니다.

Exercise

person 객체를 다음 과 같은 원소들로 채우세요.

1. person의 firstName은 “Jack” 이다.
2. person의 lastName은 “Smith” 이다.
3. person의 age는 19 이다.
4. person의 employed는 true이다.

// TODO: change this code
var person = {
		firstName : "Jack",
		lastName : "Smith",
		age : 19,
		employed : true
}

console.log(person.firstName);
console.log(person.lastName);
console.log(person.age);
console.log(person.employed);

---

Functions

함수는 인수를 가질 수 있는 코드 블록이며 함수는 자체 범위를 가집니다. 자바스크립트에서 함수는 프로그램의 매우 중요한 기능이며, 특히 상위 함수의 로컬 변수에 접근할 수 있습니다.

JavaScript에서 함수를 정의하는 방법에는 명명된 함수와 익명 함수의 두 가지가 있습니다.

명명된 함수를 정의하기 위해 다음과 같이 function 문을 사용합니다.

function greet(name)
{
	return "Hello " + name + "!";
}

console.log(greet("Eric"));            // prints out Hello Eric !

이 함수에서 greet에 대한 name 인수는 함수 안에서 새로운 문자열을 생성하고 반환문을 사용하여 return 하는 데 사용됩니다.

익명함수를 정의하기 위해서는 다음과 같은 구문을 사용할 수 있다.

var greet = function(name)
{
		return "Hello " + name + "!";
}

console.log(greet("Eric"));            // prints out Hello Eric!

Exercise

multiplyFive 함수를 정의하라. 숫자가 주어지면 그 숫자에 5가 곱해진 값을 반환한다.

// TODO: define the function multiplyFive here
function multiplyFive(number)
{
	return number*5;
}

console.log(multiplyFive(3));
console.log(multiplyFive(4));
console.log(multiplyFive(5));
console.log(multiplyFive(6));