기초문법 (1)

1.Arrow Function
일반적인 자바스크립트에서 함수를 사용할 때는 아래의 이미지처럼 쓴다

여기서 Arrow는 함수의 이름, 괄호안의 name은 매개변수(parameter)라고 하는데 매개변수란 함수를 호출할 때 인수(argument)로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수다.

return, 자바스크립트에서 함수는 반환문을 포함할 수 있는데,

이러한 반환문을 통해 호출자는 함수에서 실행된 결과를 전달받을 수 있다.

보통의 방법으로 호출할 때는 이런식으로 한다.

function Arrow(name){
 	return "hi" + name;
    }

const callArrow = Arrow("sanai");
console.log(callArrow);
 //결과 : hi sanai

그렇다면 arrow function을 어떤방법으로 쓰느냐?

const callArrow = name => "hi" + name;
console.log(callArrow("sanai"));
//결과 hi sanai

let func = (arg1, arg2, ...argN) => expression

인자 arg1,...argN (name)을 받는 함수 func(callArrow)이 만들어지고 func은 화살표 (=>) 우측의 표현식("hi " + name)을 평가하고 평가한 결과를 반환한다.

인수가 하나밖에 없다면 위에 사진처럼 그냥 name 이렇게 쓸 수 있지만 2개부터는 괄호를 써야한다.

2.Tempelate Literals
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다.

const callArrow = name => `hi $(name)`;
console.log(callArrow("sanai"));
//결과 hi sanai

위에 이미지와 다른점이 보이나? 위에 이미지는 (") 쌍따옴표를 사용했고, 템플릿 리터럴은 백틱을 사용했다.

백내의 표현식은 문자열로 강제 타입 변환되고 인수를 표현하고 싶을 때는 꼭 ${} 안에 써줘야 한다.

3.Object Destructing
구조분해할당은 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법이고 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해(destructuring)는 그 진가를 발휘한다.

// 이름과 성을 요소로 가진 배열
let arr = ["In tae", "Kim"]

// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당하였습니다.
let [firstName, surname] = arr;

alert(firstName); // Intae
alert(surname); // Kim
인덱스를 이용해 배열에 접근하지 않고도 변수로 이름과 성을 사용 할 수 있게 되었다.

// 두 번째 요소는 필요하지 않음
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul
쉼표를 사용해서 필요하지 않은 배열 요소를 버릴 수 있다!