* python, C/C++과 비교하는 부분이 많습니다


기본적인 문법(틀)은 세미콜론(;)과 중괄호({})를 사용한다는 점에서 C/C++과 유사하다.

• C/C++과 유사한 점: 조건문(if/switch)이나 반복문(for/while), 함수, 변수 선언법 등
• python과 유사한 점: 출력과 형변환, 변수(자료형 미정), 객체 등
  
  
  
  
  

터미널에 출력

console.log(내용);

<내용>을 출력한다.

• python과 비슷하게 한 번 실행될 때마다 자동으로 줄바꿈이 되고, 한 문장에서 여러 변수를 출력하는 경우 알아서 띄어쓰기가 된다.

문장의 끝

C/C++과 동일하게 Javascript는 문장의 끝마다 세미콜론(;)을 필요로 한다.

• 다만 매 코드의 줄 끝에는 세미콜론(;)이 없어도 일반적으로 알아서 세미콜론(;)이 있다고 생각하고 처리한다. 그래서 python과 비슷하게 한 문장마다 줄바꿈을 하는 방식으로 작성한다면 오류가 발생하지 않는다.

오류가 발생하지 않는 경우

console.log(0)
console.log(1); console.log(2)
console.log(3); console.log(4);

오류가 발생하는 경우

console.log(1) console.log(2)

주석(Comment)

C/C++과 동일하게 //와 /* */을 사용한다.

• 한 줄인 경우 : //내용
• 여러 줄인 경우 : /*내용*/
Ctrl+/ 단축기 통해 선택한 영역을 전부 주석 처리하거나 주석 처리를 해제할 수 있다.

window 객체

브라우저의 창을 대변하는 객체이면서, javascript에서 최상단에 존재하는 객체. 그리고 어디서나 접근할 수 있기 때문에 전역 객체(Global Object)라고도 부른다. 흔히 말하는 내장 객체/함수는 이 window 객체의 property이다.

• window 객체의 내장 객체/함수는 앞에 window.을 생략해도 작동한다.

내장 객체/함수

객체 생성자

일반적으로 변수에 할당할 때 생성자 앞에 new 키워드를 붙여서 생성한다.

변수 = new 객체명();

종류

일부만 작성하였다.

• alert()

• console
• Date
• document
• Error
• Math
• Object

자료형(type)

자료형을 확인하는 방법 (typeof)

typeof는 연산자이다. typeof 뒤에 띄어쓰고 원하는 내용을 넣으면 자료형을 문자열 형태로 알려준다.

• 주의할 점은 일반적인 산술 연산자보다 우선순위가 높다. 괄호를 씌우는 걸 습관화 하자.
• null은 object로 반환된다. 자세한 내용은 이곳 참고.
• 함수는 function을 반환한다.

console.log(typeof "s"+'tring');	//stringtring
console.log(typeof ("s"+'tring'));	//string
console.log(typeof typeof 1);		//string
console.log(typeof null);		//object

기본(원시)형 (Primitive)

Number(숫자)

• Javascript는 일반적으로 정수와 실수(부동 소수점)를 모두 이르는 숫자(number)라는 하나의 자료형을 이용한다.
• 특정한 상황에서 NaN(Not a Number)가 이용되는데, NaN도 숫자(number)형이니 주의하도록 하자.
• 과학적 표기법(지수 표기법)을 지원한다.
• 정수일 경우 범위는 2^53 - 1 ~ -(2^53 - 1)이다.

let a = 3.2e+4;			console.log(a); //32000
let b = -6.4e5;			console.log(b); //-640000
let c = 9.6e-6;			console.log(c); //0.0000096

진법 표기 대입

• 2진법 : 0b<2진법 표기 숫자>
• 8진법 : 0o<8진법 표기 숫자>
• 16진법 : 0x<16진법 표기 숫자>

let bi = 0b11111111;	console.log(bi); //255
let oct = 0o377;		console.log(oct); //255
let hex = 0xfF;			console.log(hex); //255

진법 표기 : Number.toString(num)

num진법으로 표기를 변환하여 문자열을 반환한다.

자릿수 맞추기 : Number.toFixed(num)

소수점 num자리로 반올림하여 자릿수를 맞춘 형태의 문자열을 반환한다.

• 반올림이지만 부동 소수점 문제로 완벽하게 안 될 수도 있으니 유의하자.

숫자 형태로 메소드 사용하기

변수 형태로 메소드를 사용하면 별 문제가 없으나 변수가 아닌 일반적인 10진수 숫자 형태로 사용하면 오류가 발생한다.

• 점을 두 번 찍는다. 정수일 경우에만 가능하다.

console.log(255..toString(16));		//ff
console.log(255.356..toFixed(1));	//Error!

• 괄호를 씌운다.

console.log((255).toString(16));	//ff
console.log((255.356).toFixed(1));	//255.4

String(문자열)

python과 유사하게 작용한다. 다만 다른 점은 백틱(`)을 사용할 수 있다는 점이다.

• immutable(수정할 수 없는) 자료형이다.
• 작은 따옴표(')와 큰 따옴표("), 백틱backtick(`) 모두 문자열을 나타낸다.
  다만 백틱은 따옴표들과는 조금 다르다. 내부에 줄바꿈을 해도 정상적으로 인식이 되고, 템플릿 문자열(template literal)이라는 기능을 이용할 수 있다. (하단에 추가 설명)
• 문자열 기호(',",`) 안에 다른 문자열 기호를 넣으면 정상적으로 출력된다.

console.log("`마치 '이것'처럼 말이다.`"); //`마치 '이것'처럼 말이다.`
console.log('"아주 `자유자재`로 쓸 수 있지만"'); //"아주 `자유자재`로 쓸 수 있지만"
console.log(`헷갈리지 않도록 '주의'하자. "명심!"`); //헷갈리지 않도록 '주의'하자. "명심!"

• 덧셈 기호(+)를 통하여 문자열을 연결할 수 있다.

console.log("Hello"+`World`); //HelloWorld
console.log('2'+1); //21

• python과 똑같은 문법으로 slicing을 할 수는 없으나, String.slice(num1,num2) 메소드를 활용하면 slicing을 할 수 있다.

템플릿 문자열 (Template Literal)

python의 f-string과 비슷한 기능으로, 백틱(backtick)으로 감싼 문자열에만 사용 가능하다.

• 문자열 내부에 ${ }을 넣어 사용하며, 중괄호 안에는 변수, 함수, 연산식 등 다양하게 넣을 수 있다.

let a = 1, b = 2;
console.log(`${a}와 ${b}을 더하면 ${a+b}이다.`);
//1와 2을 더하면 3이다.

Boolean

소문자로 true, false라고 나타낸다.

truthy와 falsy

boolean으로 형변환을 했을 때 true가 되는 값을 truthy하다고 하고, false가 되는 값을 falsy하다고 한다.

자료형	falsy	truthy
Number	0, NaN	그 외
String	빈 문자열	그 외
Boolean	false	true
Object	-	모두
기타	null, undefined

null과 undefined

• null과 undefined는 다른 자료형이다.
• null은 일반적으로 의도적으로 값이 없음을 나타내기 위해 사용한다.
• 따라서 보통 undefined는 별도로 건드리거나 설정하지 않았을 경우에, null은 그렇지 않은 경우에 나타난다.

• 값이 주어지지 않은 변수는 undefined를 갖는다.
• 반환(return)값이 없는 함수도 undefined를 반환한다.
• parameter에 아무것도 전달하지 않으면 undefined로 들어간다.
• 객체에서 존재하지 않는 property를 찾으려고 하면 undefined를 반환한다.
• 배열에서 가장 뒤가 아니라 건너뛰어서 값을 추가할 경우 사이값에 undefined가 들어간다.

Symbol

유일한 값을 만들 때 사용하는 자료형. ES2015(ES6)에서 추가되었다. 내장 객체 Symbol을 통하여 활용한다. Symbol 값은 어떤 값과 비교해도 다르다고 나온다.

const sym1 = Symbol(undefined);
let sym2 = Symbol(undefined);

console.log(sym1 == null);				//false
console.log(sym1 == undefined);			//false
console.log(sym1 == Symbol(undefined));	//false
console.log(sym1 == sym2);				//false

BigInt

매우 큰 정수를 다룰 때 사용하는 자료형. ES2020에서 추가되었다. 내장 객체 BigInt을 통하여 활용하거나 정수 뒤에 n을 붙여서 쓸 수 있다.

참조형 (Reference)

참조 자료형은 변수에 원시 자료형이 아닌 메모리 주소값이 들어간다.
즉 객체(혹은 배열)을 가리키는 주소 값이 그 변수에 들어간다.
자세한 내용은 이쪽 참고.

Object(객체)

python의 dictionary에 대응되는 자료형. 값의 수정/추가 모두 dictionary와 거의 동일한 문법을 활용한다.

• key / property name : 문자열 형태로 식별자 규칙을 지키면 따옴표 없이도 작성할 수 있으나 식별자 규칙에 어긋나는 경우(띄어쓰기, 특수문자, 숫자로 시작 등)에는 따옴표로 감싸줘야 한다.
• value / property value : 어떤 자료형이든 상관없다. (함수도 ok)
• property : key와 value를 한 쌍으로 묶어 property라고 부른다.
• method : value가 함수인 property를 method라고 부른다.

let obj = {
  name: "홍길동",
//└key┘└──value──┘ 
//└───property───┘
  age: 20,
  "introduce-words": "안녕하세요."
}

주의사항으로는 만일 key 값이 음이 아닌 정수(0 또는 자연수)라면 자동으로 key 값이 음이 아닌 정수인 property들을 맨 앞으로 보내 오름차순으로 나열한 뒤 그 뒤에 추가한 순서대로 property들이 나열된다. for문 사용 시 유의하도록 하자.

다양한 property 작성법

obj = {
  키: 값,
  [표현식]: 값,
  변수/함수명,
  함수명 (인자) {
  	명령문;
  }
}

• 기본적으로 property는 key: value 식으로 콜론으로 구분하여 작성한다.
• key 자리에 표현식을 대괄호로 씌워 작성하면 표현식의 결과값이 key가 된다.
• 이미 존재하는 변수나 함수를 property로 쓰는 경우에는 key가 이미 존재하는 변수나 함수의 이름과 같다면 value를 생략해도 된다.
• method의 경우엔 콜론과 function 키워드를 생략해도 정상적으로 method 선언이 된다.

객체의 property (value) 접근하기

점 표기법

• property name(key)가 식별자 규칙을 지켰을 경우에만 사용할 수 있다.

console.log(obj.name); //홍길동
console.log(obj.introduce-words); //Error

대괄호 표기법

• 항상 사용할 수 있으나 대괄호 안에 무조건 문자열이 들어가야 한다는 걸 명심하자.

let n = 'name';
console.log(obj[n]); //홍길동
console.log(obj["introduce-words"]); //안녕하세요.

property 삭제

delete 키워드를 이용하면 객체의 property를 삭제할 수 있다. delete 키워드 뒤에 해당하는 객체의 property를 적으면 된다.

• 쉼표로 여러 property를 연결하여 삭제하려고 해도 가장 앞의 property만 삭제되니 주의하자.

delete obj.name, obj.age, obj["introduce-words"];
console.log(obj);
// { age: 20, 'introduce-words': '안녕하세요.' }

property 존재 여부 확인

undefined를 이용할 수도 있지만 일반적으로는 in 키워드를 사용하는 것이 권장된다.

//<property name> in <object name>
console.log("introduce-words" in obj); //true
delete obj["introduce-words"];
console.log("introduce-words" in obj); //false

array(배열)

python의 list에 대응되는 자료형. object(객체)의 한 종류이다. 일반적인 객체와는 달리 대괄호를 이용하여 선언한다.

• mutable(수정할 수 있는) 자료형이다.
• 배열 역시 객체인 만큼 객체와 같은 방법으로 추가/수정한다.
• 배열의 요소 삭제는 delete를 사용할 경우 값이 삭제되지 않고 empty가 남아 있어 완벽히 삭제되었다고 보기 어렵다. 이때는 delete가 아니라 메소드를 보통 사용한다.
• 메소드는 여기에 따로 정리하였다.

형변환

python과 비슷한 형태를 띈다.

• String > Number : 문자열에 숫자만 있거나 실수로 인식될 수 있는 경우엔 변환하지만, 그렇지 않은 경우엔 NaN으로 변환한다. 빈 문자열의 경우엔 0을 반환한다.
• Boolean > Number : true는 1로, false는 0으로 변환한다.
• null > Number : 0으로 변환한다.
• undefined > Number : NaN으로 변환한다.

console.log(Number("3.14")); //3.14
console.log(Number('ab')); //NaN
console.log(Number('1.2.3')); //NaN
console.log(Number('')); //0
console.log(Number(true)); //1
console.log(Number(false)); //0

• Number/Boolean > String : 그대로 문자열로 변환한다.

console.log(String(12)); //12
console.log(String(false)); //false

• Number > Boolean : 0과 NaN이 아닌 경우 모두 true로 변환한다.
• String > Boolean : 빈 문자열이 아닌 경우 모두 true로 변환한다.
• null/undefined > Boolean : false로 변환한다.

console.log(Boolean(12)); //true
console.log(Boolean(0)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean('hi')); //true
console.log(Boolean("0")); //true
console.log(Boolean(``)); //false

자동 형변환

일반적인 프로그래밍 언어들과는 다르게 javascript는 서로 다른 자료형의 연산을 지원한다. 이런 경우엔 알아서 자동 형변환을 한다. 어떻게 자동 형변환을 하는지는 아래 연산자 문단에서 더 서술하겠다.

식별자 규칙

식별자는 변수, 함수, 클래스 등의 이름을 말한다.

• 문자(한글도 가능하다), 숫자, 밑줄(_), 달러 기호($) 를 사용할 수 있다.
• 숫자로 시작할 수 없다.
• 예약어는 사용할 수 없다.

기본 연산자 (일부)

산술 연산자

• 기본 사칙 연산 : +,-,*,/
  js는 보통 정수와 실수를 구분하지 않는 자료형 숫자를 사용하기 때문에 정수/정수여도 실수가 반환된다.
• 나머지 연산 : %
실수%실수 등도 가능하기는 하다.
• 거듭제곱 연산 : **
a**b일 경우 a의 b제곱을 계산해 반환한다.

  • + 을 제외하고는 모두 숫자(Number)로 자동 형변환을 한다.
  • + 는 한쪽이 문자열이라면 문자열 연산, 문자열이 없다면 숫자 자동 형변환을 한다.
  • 양쪽이 숫자(Number)로 형변환이 됐고, 한쪽이 NaN일 시 연산의 결과는 무조건 NaN으로 나온다.

우선순위는 ** > * / % > + -

증감 연산자

• 증가 연산자 : ++
• 감소 연산자 : --
  전위, 후위 모두 C/C++과 동일하게 동작한다.

  산술 연산자와 같이 숫자로 자동 형변환을 하며, NaN가 들어갈 경우 NaN을 반환한다.

할당 연산자

• 할당 연산자 : =
• 복합 할당 연산자 :+=, -=, *=. /=, %=, **=

구조 분해 할당

배열이나 객체의 값을 나눠서 각 변수에 하나씩 할당하는 방식. 변수들을 ,(comma)로 구분하여 늘어놓고 [ ](대괄호)를 씌워준 뒤 배열이나 객체를 할당하면 된다.

• 함수의 rest parameter처럼 마지막 변수 앞에 ...을 붙이면 남는 요소를 배열/객체로 묶어서 받는다.
• 변수 선언부에 활용 가능하다.

배열

• 변수에 순서대로 값을 할당한다.
• 변수의 수가 배열의 길이보다 많거나 적어도 오류가 일어나지는 않는다.

[변수1, 변수2, ~] = 배열;
[변수1, 변수2, ~ , ...변수n] = 배열;

응용하여 값을 swap하는 것도 가능하다. ([변수1, 변수2] = [변수2, 변수1])

객체

변수명이 객체의 property name(key)와 같다면 배열처럼 작성해도 되지만, 그렇지 않다면 key: variable 식으로 작성해야 한다.

• key 혹은 변수명에 맞춰 할당된다.
• parameter처럼 기본값을 설정할 수도 있다.
• property name(key) 부분은 문자열, [표현식]과 같은 형식으로도 쓸 수 있다.

// 변수와 key 이름이 같은 경우
{변수1, 변수2, ~} = 객체;
{변수1, 변수2, ~ , ...변수n} = 객체;
 
// 변수와 key 이름이 같은 경우 : 기본값
{변수1 = 기본값, 변수2 = 기본값, ~} = 객체;
{변수1 = 기본값, 변수2 = 기본값, ~ , ...변수n} = 객체;
 
// 같지 않은 경우
{키1: 변수1, 키2: 변수2, ~} = 객체;
{키1: 변수1, 키2: 변수2, ~ , ...변수n} = 객체;

응용하여 함수의 parameter로 활용하여 객체의 특정 property만 가져올 수 있다.

비교 연산자

관계 비교 연산자

• >, <, >=, <=
• 문자열끼리 비교할 때는 사전 순으로 뒤에 오는 것이 더 크다고 판단한다.

  • 양 변이 같은 자료형이 아닐 경우 양 변을 숫자로 자동 형변환 하여 연산한다.
  • 한 쪽에 NaN이 들어가 연산이 불가능할 경우 무조건적으로 false를 반환한다.

동등/부등 연산자

• 동등 연산자 ==과 부등 연산자 !=
• 느슨한 비교라고도 불리며, 자료형을 고려하지 않고 비교한다. 정확히는 양 변의 자료형을 같게 만들어 비교한다.

  • 양 변이 같은 자료형이 아닐 경우 양 변을 숫자로 자동 형변환 하여 연산한다.
  • 한 쪽에 NaN이 들어가 연산이 불가능할 경우 무조건적으로 false를 반환한다.

console.log('1' == true); //true
console.log("1" != 1); //false

일치/불일치 연산자

• 일치 연산자 ===과 불일치 연산자 !=
• 엄격한 비교라고도 불리며 자료형까지 일치해야 같다고 판단한다.

console.log('1' == true); //false
console.log("1" !== 1); //true

논리 연산자

• AND &&, OR ||, NOT !, null 병합 연산자 ??
  우선순위는 ! >> && >> ||

AND / OR

중요한 점은 두 연산자는 반환값이 항상 boolean인 것이 아니다.

AND &&

• 첫번째 값이 truthy한 값이라면 두번째 값을 반환한다.
• 첫번째 값이 falsy한 값이라면 첫번째 값을 반환한다.

console.log(true && {}); //{}	(not true)
console.log('1' && NaN); //NaN	(not false)
console.log(null && 31); //null	(not false)
console.log(false && 0); //false

OR ||

• 첫번째 값이 truthy한 값이라면 첫번째 값을 반환한다.
• 첫번째 값이 falsy한 값이라면 두번째 값을 반환한다.

console.log(true || {}); //true
console.log('1' || NaN); //1	(not true)
console.log(null || 31); //31	(not true)
console.log(false || 0); //0	(not false)

NOT

NOT 연산자 !는 항상 boolean값을 반환한다.

• 그래서 !!으로 특정 변수/값이 truthy한지 falsy한지 판독할 수 있다.

console.log(!![]); //true
console.log(!!undefined); //false

null 병합 연산자

OR 연산자 ||과 유사하나 truthy falsy가 아니라 null이나 undefined인지 아닌지를 판단한다.

• 첫번째 값이 null이나 undefined가 아니면 첫번째 값을 반환한다.
• 첫번째 값이 null이나 undefined이면 두번째 값을 반환한다.

console.log('null' ?? true);	//null
console.log(NaN ?? ['a']);		//NaN
console.log(null ?? 10); 		//10
console.log(undefined ?? {});	//{}

기타

spread 연산자

...배열 (또는 객체)
스프레드 연산자는 iterable 자료형(객체, 배열, 문자열)을 풀어서 전개해준다.
ES2015(ES6)에서 추가되었다.

/* 예시 */
let obj1 = { first: 1, second: 2 };
let obj2 = { ...obj1, third: 3 };
console.log(obj2);
//{ first: 1, second: 2, third: 3 }

• 만일 배열을 spread하여 객체에 넣을 경우 배열의 index가 객체에서의 key가 된다.
• 객체의 spread는 argument로 쓸 수 없다. (객체로 옮기는 데만 써라)

조건 (삼항) 연산자

조건 ? 값1 : 값2
C/C++과 동일하다.
조건 연산자는 조건이 truthy하면 앞쪽 값을, falsy하다면 뒤쪽 값을 반환하는 연산자이다.
ES2015(ES6)에서 추가되었다.

Optional chaining 연산자

객체?.프로퍼티
객체의 점(.) chaining 연산자와 같이 쓰이나, ?. 앞의 객체가 null 혹은 undefined면 (없다면) property를 찾지 않고 undefined를 반환한다.

/* 주로 사용하는 방식 : 중첩 객체를 찾을 때 보통 사용 */
const obj = {
  name: "홍길동",
  birthday: {
    year: 1000,
    month: 1
  }
}
console.log(obj.birthday?.month);	//1
console.log(obj.birthday?.date);	//undefined
console.log(obj.name?.lastName);	//undefined

스코프(scope)

변수나 함수가 어디까지 유효한지 범위를 일컫는다.

전역 스코프(global scope)

블록이나 함수 안에 선언하지 않고 기본 영역에 선언하는 경우의 범위. 유의할 점은 파일 내에서의 전역이 아니라, 파일을 넘어서 전역 범위라는 것이다. script 태그로 html 파일에 여러 js 파일을 불러올 경우, js 파일들은 전역 범위의 변수와 함수를 공유하게 된다.

블록 스코프(block scope)

블록, 즉 제어문이나 반복문 같이 중괄호({ })로 감싸진 영역을 말한다.

함수 스코프(function scope)

함수 내부 영역을 말한다.

모듈 스코프(module scope)

전역 스코프와 달리 파일 간에 구분되지 않는 것이 아닌 하나의 파일 안의 영역이 되는 것을 말한다. 모듈 스코프 안의 요소는 export와 import 없이는 다른 파일에서 접근할 수 없다.
C/C++나 python에서의 기본적인 전역 스코프와 유사하다.

Lexical scope

위에서 말하는 scope의 개념과는 조금 다르다.
Javascript의 변수와 함수는 기본적으로 선언된 위치를 기준으로 변수와 함수를 찾는다. 이것을 Lexical scope라고 한다.
반대의 개념은 호출된 위치를 기준으로 하는 Dynamic scope다.

let year = 2000;

function print() {
    console.log(year);
}

function yearPrint() {
    let year = (new Date()).getFullYear();
    print();
}

yearPrint();
//2000

여기서 yearPrint 함수는 print 함수가 호출될 때의 함수 내부의 year 변수를 출력하는 것이 아닌, print 함수가 선언될 때의 year 변수인 전역 year 변수를 가지고 와서 2020을 출력한다.

변수 선언

let, var, const 뒤에 변수명을 붙여 선언한다. 다만 빼먹고 python처럼 선언해도 돌아가기는 한다.

• var : 재할당 가능, 재선언 가능. hoisting이 일어나며 전역/함수 영역.
• let : 재할당 가능, 재선언 불가.
• const : 재할당 불가, 재선언 불가.

변수 (재할당/변경 가능)

let과 var는 선언한 뒤에도 값을 변경할 수 있는 변수를 선언하는 키워드다.

var a = 0;
let b = 1;

• let는 같은 범위(scope) 내에서 같은 이름의 변수 선언(재선언)이 불가하나, var는 가능하다. (덮어쓰기처럼 된다고 생각하라)
• var는 scope(범위)의 구분이 function(함수)만 되고, 다른 중괄호 안에서는 불분명하다. (기본적으로 global scope(전역 영역)을 가진다.)
• var는 선언에 있어 hoisting(호이스팅)이 일어나지만, let과 후술할 const는 그렇지 않다.

일반적으로 현재는 위의 차이점으로 인해 var보다 let을 쓰는 것이 권장된다.

상수 (재할당/변경 불가능)

const는 한 번 선언한 뒤 값을 변경할 수 없는 변수를 선언하는 키워드다.

const c = 2;

• 선언하면서 초기화(할당)하지 않으면 오류(SyntaxError)가 발생한다.
• block scope(영역)을 가진다.

함수

js에서 값으로서의 함수는 엄밀히 따지면 객체 형태이다.
기본적으로 function, 함수명(선택), (매개변수) (선택), { } 형태로 이루어져 있다.

함수 선언

function 함수명(매개변수, ...) { 
  명령; 
  ...
}

• 함수 선언식(위)의 경우 호이스팅(hoisting)이 일어난다.
• 중괄호 뒤에 세미콜론(;)을 붙여도 정상 작동한다.
• python과 유사한 점은 반환 자료형(return type)과 매개 변수(parameter)의 자료형을 명시할 필요가 없다.
• C/C++과 유사한 점은 중괄호를 사용한다.
• 함수명이 없는 함수를 익명 함수(Anonymous function)이라고 한다. 특수한 경우에 활용된다.

함수 표현식

/*예시*/
var/let/const 변수명 = function (매개변수, ...) {
  명령;
  ...
};

함수 표현식은 함수를 값처럼 사용하는 것을 말한다. 변수에 함수를 할당하는 식으로 사용된다.

• 선언식과는 달리 호이스팅(hoisting)이 일어나지 않는다.
• 할당되는 함수는 주로 익명 함수를 많이 사용한다. 꼭 익명 함수일 필요는 없다.

기명 함수 표현식

var/let/const 변수명 = function 함수명 (매개변수, ...) {
  명령;
  ...
};

여기서 변수명은 외부에서 함수처럼 쓰이지만, 함수명은 외부에서 쓸 수 없고 주로 함수 내부에서 자기 자신(재귀함수)를 지칭할 때 사용한다.

화살표 함수 표현식

var/let/const 변수명 = (매개변수, ...) => 반환값;
  
var/let/const 변수명 = (매개변수, ...) => {
  명령;
  ...
};

더욱 간략화된 함수 표현식. 명령이 없고 반환값만 있다면 더욱 단순하게 표현할 수 있다.

• 익명 함수이다.
• 반환값이 객체인 경우에는 간략하게 줄일 수 없다. (함수 명령문으로 인식) 소괄호를 씌워주면 가능하다.
• arguments 객체가 없다.

다양한 함수의 종류

즉시 실행 함수 (IIFE)

(function (매개변수, ...) { 
  명령; 
  ...
})();

함수 선언문을 소괄호로 감싸고 뒤에 소괄호를 붙이면 선언과 동시에 실행되고 다시 사용할 수 없는 즉시 실행 함수(Immediately Invoked Function Expression)가 된다. 함수명이 있더라도 재귀 함수로만 사용이 가능하다.

Callback 함수

함수의 인자(매개변수/파라미터)로 전달되는 함수, 즉 argument가 되는 함수를 콜백 함수(Callback function)이라고 한다.

고차 함수

함수를 반환하는 함수를 고차 함수(High order function)이라고 한다.
고차 함수 뒤에 소괄호를 두 번 붙여 바로 반환된 함수를 사용할 수 있다.

고차함수(~)(~);

parameter/argument

• parameter(매개변수) : 함수 선언에서 소괄호 안에 작성되는 부분. 함수 내부에서 사용되는 변수. 변수이기 때문에 아무 값도 들어가지 않으면 undefined가 들어간다.
  parameter가 더 들어오거나 덜 들어온다고 해도 오류는 발생하지 않는다.
• argument(아규먼트) : 함수 호출에서 소괄호 안에 작성되는 부분. 함수에 넘겨주는 값.

Optional parameter (기본값)

parameter의 초기값/기본값을 설정하는 방법. ES2015(ES6)에서 등장한 문법이다.

function 함수명(..., 매개변수=초기값) { 
  명령; 
  ...
}

• undefined 값을 전달받았을 때도 기본값으로 설정된다.
• optional parameter를 후방으로 빼지 않아도 오류가 발생하지는 않으나 일반적으로는 가장 뒤에 두는 걸 권장한다.

Rest parameter

여러 개의 parameter를 배열로 받는 방법. (가변항 함수) ES2015(ES6)에서 등장한 문법이다.
함수의 마지막 parameter 앞에 ...을 붙이면 앞선 parameter를 채우고 남은 argument를 배열로 묶는다.

function 함수명(~, ...매개변수) { 
  명령; 
  ~
}

arguments 객체

함수 내부에서 arguments 객체는 들어온 argument 값들을 유사 배열의 형태로 가지고 있다.

if, switch, for, while 주의사항

위 구문 모두 C/C++과 동일하게 사용하면 되지만 주의할 점이 있다.

• switch문은 자동 형변환을 적용하지 않는다. 즉 암시적 형변환을 허용하지 않는다. (===과 동일)
• for문은 C++과 더 유사하다. (초기식에서 변수를 선언해도 된다.)
• for문은 python처럼 for ~ in 형태를 사용할 수 있으나 for 뒤를 소괄호로 감싸주고 변수를 선언해야 한다는 것을 잊지 말자.
  for ~ in 으로 객체를 받을 경우 기본적으로 key(property name) 값이 변수에 들어온다.
  for ~ in 으로 배열를 받을 경우 배열도 객체이기 때문에 기본적으로 key에 해당하는 index 값이 변수에 들어온다. 그래서 배열에는 for ~ in을 사용하는 것이 권장되지 않는다.
• for ~ of 은 객체는 사용할 수 없고 배열, 문자열 등 iterable 자료형이 사용할 수 있다. 요소(element, value)값이 변수에 들어간다.

this 키워드

상위(자신이 속한) 객체를 참조하는 키워드. 기본값은 전역 객체인 window이며, 객체의 메소드일 경우 호출 됐을 때의 (상위) 객체를 가리킨다.

• 화살표 함수에서는 일반적인 함수와 다르게 호출되었을 때의 this가 아니라 선언되었을 때의 this를 가리킨다.