[Day 18] null과 undefined + 함수 + 제어구문

null과 undefined

• undefined

  • 값이 대입되지 않은 변수 혹은 속성을 사용하려고 하면 undefined를 반환한다.
  • 변수를 선언한 적이 있는지 확인하고 싶을 때에는 typeof 연산자를 사용한다. 이 때, 변수를 선언한 적이 없다면 undefined가 반환된다.

• null

  • ‘객체가 없음’ 을 나타낸다.

    typeof null	// 'object'
    typeof undefined // 'undefined'
    

  • 명시적인 부재의 의미로 ‘없음’을 저장하기 위해서는 undefined가 아닌 null을 사용해야 한다. (관례)

    • undefined는 대입한 적 없는 변수와 명시적 부재를 구분하지 못한다.
    • 객체를 사용할 때에는 어떤 속성의 부재를 나타낼 때 null을 사용하기 보다는, 차라리 그 속성을 정의하지 않는 방식을 더 널리 사용한다.

• Null Check

  • 값이 있는 경우와 없는 경우를 고려해서 코드를 짤 필요가 있기 때문에 어떤 값이 null 혹은 undefined 인지 확인하는 작업을 null check 라고 한다.

  • null check를 할 때에는 동등 연산자인 == 를 사용하는 것이 편리하다.

  • == 연산자는 한 쪽 피연산자에 null 혹은 undefined가 오면, 다른 쪽 피연산자에 null 혹은 undefined가 왔을 때만 true를 반환하고, 다른 모든 경우에는 false를 반환한다.

    null === undefined; // false
    null == undefined;  // true
        
    null == 1       // false
    null == 'hello' // false
    null == false   // false
        
    undefined == 1       // false
    undefined == 'hello' // false
    undefined == false   // false
        
    // 이러한 특성 때문에 null check에서 == 를 사용한다.
    

함수

• 큰 프로그램을 잘게 쪼개어 특정 코드 뭉치를 반복해서 사용할 수 있도록 묶어놓은 코드 뭉치의 단위

• 실행 순서

  • 함수 호출 코드를 만나면 코드의 실행 흐름이 호출된 함수의 내부로 옮겨 간다. 함수가 값을 반환하면 다시 이전 위치부터 코드의 실행이 재개된다.

• 매개변수(parameter)와 인수(argument)

  • 매개변수는 변수의 일종으로, 함수 호출 시마다 인수가 매개변수에 대입 된다.

  • 매개변수는 바깥에서 선언된 변수와는 관계없이 독립적인 변수이다.

  • 인수(argument) 자리에 변수를 쓰더라도 변수 자체가 넘어가는 것이 아니라 변수의 ‘값’ 이 넘어가기 때문에 변수에 새로운 값이 대입될 일은 없다.

    function reassign(x) {
      x = 2;	// parameter 'x'는 재대입 가능
      return x;
    }
        
    const y = 1;
    const result = reassign(y);
        
    console.log(y); // 1
    console.log(result); // 2
    

• 반환값

  • return 구문은 함수의 반환값을 결정한다. 반환되는 즉시 함수 실행은 끝난다.
  • return 뒤에 아무 값도 쓰지 않거나, return 구문을 쓰지 않으면 함수는 undefined를 반환한다.

• 스코프 (Scope)

  • 변수는 코드의 일정 범위 안에서만 유효하다.
  • 특정 변수가 유효한 코드 상의 유효 범위를 ‘스코프(scope)’ 라고 한다.
  • 매개변수는 함수 스코프를 갖는다.
  • 스코프 연쇄 (Scope Chain)
    • 코드의 실행 흐름이 변수이름에 도달하면, 먼저 그 변수이름과 같은 이름을 갖는 변수를 현재 스코프에서 찾아보고, 변수가 존재하면 그것을 사용한다. 만약 현재 스코프에서 변수를 찾지 못하면 바로 바깥쪽 스코프에서 변수를 찾아본다. (이러한 과정을 계속해서 반복하는 것을 스코프 연쇄라고 한다.) 가장 바깥쪽에 있는 스코프까지 찾아도 변수를 찾지 못하면, 에러를 발생시킨다.
    • 안쪽 스코프에서는 바깥쪽 스코프의 변수를 사용할 수 있다. (반대는 X)
    • 가장 바깥에 있는 스코프를 최상위 스코프(top-level scope), 혹은 전역 스코프(global scope)라고 부른다.
  • 변수 가리기 (Variable Shadowing)
    • 바깥쪽 스코프에서 존재하는 변수와 같은 이름을 갖는 변수를 안쪽 스코프에서 재정의할 수 있다. 이 때 안쪽 스코프에서는 바깥쪽 스코프에 있는 이름이 무시된다.
    • 바깥 스코프와 상관없이 매개변수의 이름을 활용할 수 있게끔 하는 성질이다.
  • 어휘적 스코핑 (Lexical Scoping)
    • 스코프는 코드가 작성된 구조에 의해서 결정되는 것이다.
    • 함수 호출의 형태에 의해 결정되는 것 (X)

• 값으로서의 함수

  • JS 에서는 함수도 값이다. 따라서, 함수를 변수에 대입해서 호출할 수도 있고, 배열이나 객체에 넣을 수도 있고, 함수를 인수로 넘기거나 함수에서 함수를 반환할 수도 있다.
  • JS에서의 함수는 1급 함수(1급 객체)이다.
    • 1급 객체

• 익명 함수 (Anonymous Function)

  • 이름을 붙이지 않은 함수를 익명 함수, 혹은 함수 리터럴 이라고 한다.
  • 익명함수는 함수를 만든 쪽이 아니라 다른 쪽에서 그 함수를 호출할 때 많이 사용된다. 대표적으로 함수를 인수로 넘겨줄 때 자주 사용된다.

• 화살표 함수 (Arrow Function) - ES2015

  // 여기에서 x + y 는 **바로 반환된다.**
  const add = (x, y) => x + y;
  

  // 바로 반환시키지 않고 function 키워드를 통한 함수 정의처럼 여러 구문을 사용하려면 curly braces({...}) 로 둘러싸주어야 한다.
  // `=>` 다음 부분을 중괄호로 둘러싸면, 명시적으로 `return` 하지 않는 한 아무것도 반환되지 않는다.
  const add = (x, y) => {
    const result = x + y;
    return result;
  }
  

  // 매개변수가 하나밖에 없다면, 매개변수 부분의 괄호를 쓰지 않아도 무방하다.
  const negate = x => !x;
  

  • 화살표 함수는 익명 함수로만 사용된다.

    [1, 2, 3, 4, 5].filter(x => x % 2 === 0);
    

제어 구문

• 조건문

  • if...else 구문
  • switch...case 구문

• 반복문

  • while 구문

  • do...while 구문

  • for 구문

    • 배열의 순회

      • for 구문

      • forEach 구문 - ES5

        const arr = [1, 2, 3, 4, 5];
                
        arr.forEach((item, index) => {
          console.log(`배열의 ${index + 1} 번째 요소는 ${item} 입니다.`);
        })
        

      • for...of 구문

        const arr = [1, 2, 3, 4, 5];
                
        for (let item of arr) {
          console.log(`현재 요소는 ${item} 입니다.`);
        }
        

  • break, continue

    • break
      • 제어구조의 바깥으로 넘어가고 싶을 때 사용한다.
      • 루프를 종료하고 다음 코드로 넘어간다.
      • 중첩된 루프일 경우 break가 들어 있는 가장 가까운 루프만 종료시킨다.
    • continue
      • 루프의 나머지 코드를 건너 뛰고 다음 루프로 넘어간다.

• 함수를 즉시 종료하기

  • return
  • throw
    • 에러발생 : throw new Error('error message');