[코드스테이츠 FE 45기] _2023.05.01 _ Day 15

---

힘내라~힘내라~ 

오늘은 자바스크립트 핵심 개념 마지막 날 

JavaScript Koans

를 마무리하고 과제 제출까지!!

---

01_Introduction.js 

02_Types-part1.js 

03_LetConst.js 

04_Scope.js 

05_ArrowFunction.js 

06_Types-part2.js 

07_Array.js 

08_Object.js

09_SpreadSyntax.js

10_Destructuring.js

 

---

04_Scope.js

 

05_ArrowFunction.js 

 

06_Types-part2.js 

 

07_Array.js 

 

08_Object.js

 

09_SpreadSyntax.js

 

10_Destructuring.js

---

04_Scope.js

 

scope 대해서 학습합니다.

• 함수 선언식(declaration)과 함수 표현식(expression)의 차이를 확인합니다.
• lexical scope에 대해서 확인합니다.
• default parameter에 대해 확인합니다.
• 클로저(closure)에 대해 확인합니다.
• lexical scope와 closure에 대해 다시 확인합니다.

 

 "scope" = "범위"

 

자바스크립트에서 "scope"란 변수, 함수 및 객체에 대한 접근 가능한 영역을 말합니다. 즉, 변수 또는 함수가 어느 영역에서 접근 가능한지를 결정합니다.

 

자바스크립트에서는 전역 범위(Global Scope)와 지역 범위(Local Scope)가 있습니다.

 

전역 범위는 어떤 함수나 블록 안에 속하지 않은 모든 변수, 함수, 객체 등을 포함합니다. 전역 범위의 변수와 함수는 프로그램의 어디서나 접근 가능합니다.

 

지역 범위는 함수나 블록 안에서 정의된 변수, 함수, 객체 등을 포함합니다. 지역 범위의 변수와 함수는 해당 함수나 블록 내에서만 접근 가능합니다.

 

var globalVar = "I am a global variable.";

function myFunction() {
  var localVar = "I am a local variable.";
  console.log(globalVar); // 전역 변수에 접근 가능
  console.log(localVar); // 지역 변수에 접근 가능
}

myFunction();

console.log(globalVar); // 전역 변수에 접근 가능
console.log(localVar); // ReferenceError: localVar is not defined

위 코드에서 globalVar 변수는 전역 범위에서 정의되었으므로 myFunction() 함수 내에서도 접근 가능합니다. 그러나 localVar 변수는 myFunction() 함수 내에서만 정의되었으므로 함수 외부에서는 접근할 수 없습니다.

 

또한, 함수 안에서 변수를 선언할 때 var 대신 let이나 const를 사용하면 블록 범위(Block Scope) 변수를 정의할 수도 있습니다. 이 경우 해당 변수는 해당 블록 안에서만 접근 가능합니다.

---

함수 선언식(declaration)과 함수 표현식(expression)의 차이

 

함수 선언식과 함수 표현식은 함수를 정의하는 방식에 차이가 있습니다.

 

함수 선언식(declaration)은 함수를 정의하는 가장 일반적인 방식입니다.

함수 이름과 함수의 코드 블록이 함께 존재하며, 함수가 선언되는 시점에서 스코프에 존재하게 됩니다.

함수 선언식의 예시는 다음과 같습니다.

 

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

 

위의 함수 선언식은 add 함수를 정의하고 있습니다.

함수 이름과 함수의 코드 블록이 함께 존재하며, add 함수는 선언되는 시점에서 스코프에 존재하게 됩니다.

이러한 함수 선언식은 코드 블록 내에서 어디서든 호출할 수 있습니다.

 

함수 표현식(expression)은 함수를 변수에 할당하는 방식입니다.

함수 표현식은 함수가 변수에 할당된 이후에 호출할 수 있습니다.

함수 표현식의 예시는 다음과 같습니다.

 

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

 

위의 함수 표현식은 add 변수에 함수를 할당하고 있습니다. 이 함수는 변수 add에 할당되는 시점에서 스코프에 존재하게 됩니다. 함수 표현식은 변수에 할당된 이후에만 호출할 수 있습니다.

 

따라서 함수 선언식과 함수 표현식은 함수가 정의되는 시점과 스코프의 존재 여부에 차이가 있습니다. 함수 선언식은 선언되는 시점에서 스코프에 존재하고, 함수 표현식은 변수에 할당된 이후에 스코프에 존재하게 됩니다.

---

lexical scope에 대해서 확인합니다.

 

자바스크립트에서 Lexical Scope(어휘적 범위)는 함수가 작성될 때 함수 내부에서 참조 가능한 변수들의 범위를 결정합니다. 함수가 선언된 위치에서부터 해당 함수 내에서 사용되는 변수들의 유효 범위를 결정하게 됩니다.

var x = 10;

function outerFunction() {
  var y = 20;

  function innerFunction() {
    var z = 30;
    console.log(x + y + z);
  }

  innerFunction();
}

outerFunction();

 

위 코드에서 innerFunction 함수는 outerFunction 함수 내부에 정의되어 있습니다. innerFunction 함수 내부에서 변수 z를 참조하고 있습니다. 하지만 z가 정의된 위치에서 가장 가까운 변수들은 z 변수를 포함하는 innerFunction 함수의 상위 스코프와 outerFunction 함수의 스코프입니다.

 

따라서 innerFunction 함수에서 변수 z를 참조할 때, z 변수가 정의된 위치에서 상위 스코프인 innerFunction 함수의 변수 y와 outerFunction 함수의 변수 x를 참조합니다. 이러한 동작 방식으로 인해 innerFunction 함수는 Lexical Scope를 따르게 됩니다.

 

즉, Lexical Scope는 함수가 선언된 위치에 따라 결정되는 스코프의 범위를 의미합니다. 함수가 선언된 위치에 따라 결정되는 스코프의 범위를 의미합니다.

 

---

default parameter에 대해 확인합니다.

default parameter(기본 매개변수) 기능을 제공합니다. Default parameter는 함수 호출 시 매개변수 값이 전달되지 않았을 때, 기본값을 설정하는 것을 말합니다.

 

기본값을 설정할 매개변수는 함수 정의에서 정의할 수 있으며, = 연산자를 사용하여 기본값을 할당합니다. 이때, 기본값이 필요한 매개변수는 함수 매개변수 리스트의 맨 마지막에 위치해야 합니다.

function greet(name = 'World') {
  console.log(`Hello, ${name}!`);
}

greet(); // 출력값: Hello, World!
greet('John'); // 출력값: Hello, John!

위의 greet 함수에서 name 매개변수에 기본값 'World'를 설정하였습니다. 따라서 greet() 함수를 호출할 때 name 매개변수에 아무 값도 전달되지 않았으므로, 'World'라는 기본값이 출력됩니다. 반면에 greet('John') 함수를 호출할 때는 name 매개변수에 'John'이라는 값이 전달되어 'Hello, John!'이라는 출력이 생성됩니다.

 

Default parameter를 사용함으로써, 함수 호출 시 일일이 매개변수를 전달해야 하는 번거로움을 줄일 수 있습니다. 기본값으로 지정한 값이 적절하지 않다면 함수 호출 시에 원하는 값을 전달해 줄 수 있습니다.

 

---

양이 너무 많아서 나머지는 저녁에 다시 복습으로 정리해봐야지