🦁_21.12.01(1) TIL

21년 12월 01(1)일

📝 Javascript

📎 연습문제 풀기

📎 배열(array)

• 순서가 있는 자료를 저장하고 관리하는 용도에 최적화된 자료구조
• 0개 이상의 값을 쉼표로 구분, 대괄호로 묶는다.
• 첫 번째 인덱스는 '0'부터 시작
• 존재하지 않은 요소에 접근 시 undefined 반환

// 배열 만들기
let fruits = ["apple", "banana", "pear"];

console.log(fruits.length); // 배열의 길이 3

📎 함수(function)

• 함수 : 입력, 출력, 기능을 하나로 묶어 재사용할 수 있도록 만드는 것
  => 어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록
• 함수는 이름과 매개변수를 가짐
• 필요한 때에 호출하여 코드 블록에 담긴 문들을 일괄적으로 실행 가능

// 함수 정의 - 함수 선언문
function square(number) {
  return number * number; 
}

// 함수 호출
square(2); // 4
square(4); // 16 여러번 호출 가능

• 함수의 특성은 코드의 재사용의 측면에서 매우 유용
  => 일반적 기능 이외에 객체 생성, 객체의 행위 정의(메소드), 정보 은닉, 클로저, 모듈화 등의 기능 수행 가능

함수 정의

• 함수 선언문(Function declaration)
  • 함수명 : 함수 선언문은 함수명을 생략할 수 없다.
    => 함수명은 함수 몸체에서 자신을 재귀적 호출하거나 자바스크립트 디버거가 해당 함수룰 구분할 수 있는 식별자
  • 매개변수 목록 : 0개 이상의 목록으로 괄호()로 감싸고 콤마,로 분리
  • 함수 몸체 : 함수가 호출되었을 때 실행되는 문들의 집합. 중괄호{}로 문들을 감싸고 return문으로 결과값(= 반환값, return value)을 반환

// 함수 선언문
function 함수명(매개변수) {
  함수 몸체
  return 반환값; 
}

• 함수 표현식(Function expression) : 함수 리터럴 방식으로 함수를 정의하고 (이 함수를) 변수에 할당할 수 있는데 이러한 방식을 함수 표현식이라고 한다.
  • 함수명 생략 가능
    => 익명 함수(anonymous function)
    => 함수 표현식에서는 함수명을 생략하는 것이 일반적

// 익명 함수 표현식(anonymous function expression)
var 변수명1 = function (매개변수) {
  함수 몸체
  return 반환값; 
}

console.log(변수명1(인수)); // 반환값

// 기명 함수 표현식(named function expression)
var 변수명2 = function 기명함수명(매개변수) {
  함수 몸체
  return 반환값; 
}

console.log(기명함수명(인수)); // ReferenceError: 기명함수명 is not defined
console.log(변수명2(인수)); // 반환값
// 함수 호출시 함수명이 아니라 함수를 가리키는 변수명을 사용해야한다.

📎 함수 호이스팅(Function Hoisting)

함수 정의 방식에 따라 동작 방식에 약간의 차이가 있다.

// 함수 선언문으로 함수가 정의되기 이전에 함수 호출 가능
// 함수 선언의 위치와 상과넚이 코드 내 어디든지 호출이 가능
// 함수 호이스팅
var 변수명 = 함수명(인수); // 반환값

// 함수 선언문
function 함수명(매개변수) {
  함수 몸체
  return 반환값; 
}

자바스크립트는 ES6의 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅 한다.

호이스팅

• 모든 선언문이 해당 스코프(scope)의 선두(최상단)로 옮겨진 것처럼 동작하는 특성
  => 따라서, 자바스크립트는 모든 선언문이 선언되기 이전에 참조 가능
• 함수 선언문으로 정의된 함수는 자바스크립트 엔진이 스크립트가 로딩되는 시점에 함수 선언, 초기화, 할당이 한 번에 이루어진다.
  => 함수 선언의 위치와 상관없이 소스 내 어느 곳에서는지 호출 가능
• 함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생
  => 함수 표현식으로 정의된 함수는 함수가 할당되기 전까지 함수를 호출할 수 없다.

변수 호이스팅 : 변수 생성 및 초기화와 할당이 분리되어 진쟁. 호이스팅 된 변수는 undefined로 초기화 되고 실제값의 할당은 할당문에서 이루어짐

📎 매개변수(Parameter, 인자) vs 인수(argument)

매개변수

• 함수의 정의 부분에 나열되어 있는 변수
• 함수 내에서 변수와 동일하게 메모리 공간을 확보

인수

• 함수를 호출할 때 전달되는 실제 값
• 함수에 전달한 인수는 매개변수에 할당됨
• 인수를 전달하지 않으면 매개변수는 undefined로 초기화

// 함수 선언문
function 함수명(매개변수1, 매개변수2) {
  console.log(매개변수1, 매개변수2);
}

함수명(인수a, 인수b); 
// 인수a는 매개변수1에 전달
// 인수b는 매개변수2에 전달
// (인수a, 인수b)이 반환되어 출력됨
// 출력 결과 : 인수a 인수b

함수명(인수c); 
// 두 번째 인수가 전달되지 않은 경우,
// 출력 결과 : 인수c undefined 

📎 반환값

함수는 자신을 호출한 코드에게 수행한 결과를 반환(return)할 수 있다.

• return 키워드는 함수를 호출한 코드에게 값을 반환할 때 사용
• 함수는 배열 등을 이용하여 한 번에 여러 개의 값을 리턴할 수 있다.
• 함수는 반환을 생략할 수 있다
  => 이때 함수는 암묵적으로 undefined를 반환
• 자바스크립트 해석기는 return 키워드를 만나면 함수의 실행을 중단
  => 함수를 호출한 코드로 되돌아간다.
  만일 return 키워드 이후에 다른 구문이 존재한다면 그 구문은 실행되지 않는다.

참고링크

• 웹 프로그래밍 튜토리얼 - poiemaweb
• 모던 자바스크립트 튜토리얼
• 매개변수와 전달인자 - 초보몽키의 개발공부로그