기초 문법

1. 조건문

if문

지정한 조건이 참인 경우 명령문을 실행한다. 조건이 거짓인 경우 또 다른 명령문(else if, else)이 실행 된다.
순서 : if > else if > else

if (조건1) {
   명령문1
} else if (조건2) {
   명령문2
} else if (조건3) {
   명령문3
...
} else
   명령문N

switch문

switch는 표현식을 평가하여, 그 값이 일치하는 case문을 실행한다.
switch, case, break, default 의 키워드로 구성되어 있으며, 일반적으로 하나의 case만 실행되고 break로 끝맺는다.

 switch (표현식) {
  case value1:
    명령문1
    break;
  case value2:
    명령문2
    break;
  ...
  case valueN:
    명령문N
    break;
   default: 
    명령문(보통은 아무것도 아닌 값에서 나오는 것을 출력)
   break;
}

중간의 break가 없어지면 output은 그 다음 case문의 결과를 출력한다. 이미 그 전 case에서 조건을 true라고 판단하고 넘어갔기 때문에 그 다음 case의 조건은 안 보고 바로 결과를 수행하기 때문이다. (한마디로 break를 만나기 전에는 결과를 출력하지 않는 셈.)

2. 반복문

for문

for문은 선언문, 조건문, 증감문으로 이루어져있다.(공백가능함) 중첩도 가능하다.

for...in

객체의 key, value 형태를 반복하여 수행할 때 좋다. 첫번째 부터 마지막까지 객체의 key개수만큼 반복한다.

for (variable in object) { ... }

for...of

collection 객체 자체가 반복 가능한 객체(symbol.iterator 속성을 가지고 있음)여야 동작이 가능하다.
ex) Array, Map, Set, String, TypedArray, arguments

for (variable of iterable) {
  statement }

while문

while문은 조건문만 있으며 무한 loop 등에 활용된다.

while (조건문) {
  statement
  (무한 loop용이 아니라면 코드 중간에 조건 판단을 업데이트 해주는 문장을 넣기) }

do...while

do...while은 무조건 한 번은 수행을 한다.

do구문
while (조건문);

반복문 제어

break

코드블록 탈출시 사용, 다중 반복문일 때는 가장 안쪽의 반복문을 종료시킨다.

function testBreak(x) {
  var i = 0;

  while (i < 6) {
    if (i == 3) {
      break;
    }
    i += 1;
  }

  return i * x;
}

label(반복문 앞에 콜론과 함께 쓰이는 식별자)을 통해 다중 반복문을 한번에 종료도 가능하지만, 권장하지는 않는다.

continue

코드블록 실행을 해당라인에서 중지하고 블록 코드를 종료시킨 후 반복문 내 명시된 조건판단으로 간다. (특정 조건일 때 뒷코드를 실행시키지 않고 싶을 때 사용한다.)

3. 함수

함수는 가급적 한 가지 일만 하고, 매개변수는 최대 3개 이내를 권장한다.

함수 정의

1. 함수 선언식

function add (x, y) {
return x + y;
}

2. 함수 표현식

const add = function (x, y) {
return x + y;
}

3. 화살표 함수

const add = (x, y) => x + y;

재귀함수

함수 스스로가 자신을 참조해 호출하면서 동일한 코드가 계속적으로 수행되는 함수 호출 방법
특정 조건시 그만 호출되는 exit code가 필요하다.
재귀함수는 console.log로 찍힐 때 가장 안쪽의 값부터 출력한다.

1. basic recursive function

function recursive(num) {
 if (num == 0) return 0;
 retrun num + recursive(num - 1);
 }
console.log(recursive(3)); //output : 6	

2. factorial function

function factorial(x) {
 if (x === 0) return 1;
 return x * factorial(x - 1);
 }
const num = 3;
let result = factorial(num); //output : 6

콜백함수

다른 함수의 매개변수로 전달되어 수행되어지는 함수
고차함수(매개변수를 통해 함수를 받아 호출하는 함수)와 같이 많이 쓰인다.

//콜백함수
function add(x, y) {
 return x + y;
}
function sub(x, y) {
 return x - y;
}
function mul(x, y) {
 return x * y;
}
function div(x, y) {
 return x / y;
}
//고차함수
function calculator (callback, x, y) {
 return callback(x, y);
}

console.log(calculator(add,7,3));//output : 10

call by value

값에 의한 복사로 함수 내에서 매개변수 값을 변경시켜도 원본에는 영향이 없다. (원시타입을 매개 변수로 넘겼을 때 발생)

call by reference

주소에 의한 복사로 함수 내에서 매개변수 내 값을 변경시키면 원본데이터에도 영향이 있다. (객체 타입을 매개변수로 넘겼을 때 발생)

고차함수

하나 이상의 함수를 매개변수로 취하거나 함수를 결과로 반환하는 함수

sort()

배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 정렬은 stable sort가 아닐 수 있다. (Number의 경우: 10보다 2가 더 크다고 판단됨. String의 경우: 대소문자를 구별하여 정렬함.)

따라서 숫자를 비교하고, 대소문자를 하나의 문자로 통일하는 등의 함수가 필요할 수도 있다.

let ascending_order = function (x, y) {
 if (typeof x === "string") x = x.toUpperCase();
 if (typeof y === "string") y = y.toUpperCase();//string일때, 다 대문자로 바꾸기
 return x > y ? 1 : -1; //반환값이 1이면 y가 앞으로, 반환값이 -1이면 x가 앞으로, 0이면 그대로 있는다
 };

let nums = [1, -1, 4, 0, 10, 20];
let str = ["orange", "Orange", "banana", "apple"];
console.log(nums.sort(ascending_order)); //[ -1, 0, 1, 4, 10, 20 ]
console.log(str.sort(ascending_order));//[ 'apple', 'banana', 'Orange', 'orange' ]
 

ascending_order라는 함수를 통해 nums와 str을 모두 사용가능 하게 만들었다. 이게 함수의 고용화이며, 깔끔한 코드를 위해 지향되어야한다.

생성자 함수

붕어빵틀이라고 생각하면 된다. 유사한 객체를 다중으로 만들 때 사용되는 함수이다. 다른 언어에서는 class와 비슷하다고 한다. 일반적으로 첫글자를 대문자로 쓰며, 이걸로 객체를 생성할 때는 new연산자로 객체를 생성해야한다.

배열

여러 객체(entity)값을 순차적으로 나열한 자료구조이다. (알고리즘 내에서 사용 빈도가 높음) 배열 내 값을 요소(element)라고 하며, 배열 요소는 index로 접근 가능하다.

선언은 "new array()" or "[]"를 통해 선언하며, 사이즈나 값을 입력하여 초기화도 가능하다.
접근방법은 "array[index]"를 통해 index로 접근하며 1번째가 [0]이다.
배열속성은 "array.length"를 통해 배열 요소의 개수 확인이 가능하다.

내장 메서드

배열 추가/삭제

• 배열 타입 확인 : array.isArray(value)
• 배열 추가/삭제(LIFO-Back: 맨뒤에 추가, 맨뒤 요소 삭제)
  추가: array.push(element) 삭제: array.pop()
• 배열 추가/삭제(LIFO-Front: 맨앞에 추가, 맨앞 요소 삭제)
  추가: array.unshift(element) 삭제: array.shift()
• 배열 삭제/변경(index)
  array.splice(index[,deleteCount, element1, ... , elementN])
• 배열 삭제(index)
  array.slice([start],[end])
• 다중배열병합
  array.concat(arg1, arg ...)

array.splice의 사용법을 좀 더 자세히 설명하면

array.splice(1); //[1]을 포함한 그 뒤의 index를 삭제
array.splice(1,1);//[1]만 삭제
array.splice(1,1,"45","123"); //[1]을 삭제하고 "45"와 "123"을 추가

배열 반복문

• for...length(index 접근)
• for...of(element 접근)
• for...in(key 접근)

배열 탐색

• index탐색(앞에서부터): array.indexOf(item, from)
• index탐색(뒤에서부터): array.lastIndexOf(item, from)
• 값 포함 여부: array.includes(item, from)

배열 정렬 및 변환

• 오름차순(작>큰): array.sort()
• 내림차순(큰>작): array.reverse()
• 배열변환(배열값을 문자열로 변환): array.join(separator)

내장함수

forEach()

배열요소별 콜백함수 각각에 실행한다.

array.forEach(item(배열요소), index(배열위치), array(배열)){})

map()

배열요소별 함수 호출 및 결과를 배열로 반환한다.

array.map(function(item, idex, array){})

find()

콜백함수의 조건을 만족하는 "하나"의 값만 반환한다.

array.find(function(item, idex, array){})

filter()

콜백함수의 조건을 만족하는 값을 배열로 반환한다.

array.filter(function(item, idex, array){})

reduce()

요소별 함수 수행 누적 결과값을 반환한다.

array.reduce(function(accumulator,item, idex, array){})

accumulator: 이전함수의 결과. initial로 초기값 설정 가능하며 여기에 결과가 누적된다. 초기값이 없다면 index[0]의 값을 가져온다. default가 0이기도 하며, 연산을 줄일려고 바로 가져오는 것이다.

let nums = [1, 2, 3, 4, 5];
let call_count = 0;
console.log("result\tvalue\tindex");
let sum = nums.reduce(
  function (accumulator, item, index, array) {
    console.log(accumulator, "\t", item, "\t", index);
    call_count++;
    return accumulator + item;
  } /*여기가 initial 자리! 이곳이 비어있으면 index 1부터 시작한다.*/
);
console.log(call_count);
console.log(sum);

output
result	value	index
1 	 2 	 1
3 	 3 	 2
6 	 4 	 3
10 	 5 	 4
4
15