JS 2회차 | 함수: 일급함수, 즉시실행함수, 화살표함수, 클래스, 메소드, scope, var/let/const, 복사와 참조

일급함수

함수를 값으로 취급하는 것 --> 일급함수

변수에 할당 가능, 인자로 전달 가능, return 가능

const obj = {
  id: 1,
  title: 'my obj'
};

function myFunction () {
  return a;
}
obj.title = 'change';
obj.fn = myFunction();
const result = myFunction(myFunction)

 

 

함수

코드 묶음을 값으로 취급할 수 있는 수단

반드시 값(value)을 리턴한다 --> 리턴한 값을 호출한 곳에서 반환한다 !

함수 호출 ==> const result = myFeat(); --> myFeat()으로 이동

제어문 적인 성격 (코드의 흐름을 바꿈)

 

1. 이름없는 함수

그 자체로는 의미 있지만 호출할 수 없기 때문에 변수에 저장

const myFeat = function () {
	return 0
};

 

2. 즉시 실행 함수

이름 없는 함수를 (감싸주면) 값으로 바뀌어서 문법적으로 문제 없음

값으로 만든 다음에 호출해주기 위해서 !

단 한번만 실행되어야 하는, 다시 실행하면 안되는 코드의 경우 이렇게 사용함

 

(function () {

}) ();

 

3. 화살표 함수 (람다함수, 한줄 함수)

문법 자체에 이름이 없는 함수임

일반 함수의 변수로 사용

const yourFeet = () => {
  return 0
}

 

// 인자 없을 경우 괄호 생략 불가
const yourFeet1 = () => {
  return 0
}

// 인자가 하나일 경우에만 괄호 생략 가능
const yourFeet2 = a => {
  return a * 2;
}

// 함수 안에 실행 코드가 하나 뿐일 경우에는 {return} 생략 가능 
const yourFeet2 = a => a * 2;

// 인자 두 개인 경우 괄호 생략 불가
const yourFeet1 = (a, b) => {
  return 0
}

 

4. 내장 클래스 사용하여 함수 만들기

// 클래스, 함수를 반환함
Function ()

 

5. 함수 호출하는 세 가지 방법

myFeat()

myFeat.apply()

myFeat.call()

 

6. 메소드

const thisObject = {
  id: 1,
  getValue: function() {
  return 1;
  },
};

thisObject.id; // 속성을 읽어
thosObject.getValue(); // 메소드(객체 안에 속성인데 함수인 경우)

thisObject.toString(); // [object Object]

 

7. 상속

Object.create()

모든 object의 조상

thisObject.__proto__() --> object들를 가지고 있음(Object 클래스가 제공해주는 기능)

obj.toString() --> obj 함수 안에 존재하는 경우 그 값 출력 obj.__proto__.toString() --> Object 클래스가 제공해준 것 (상속) obj.xyz --> 없는 값이어서 undefined

 

 

어떤 object든 최상의 object가 제공해주는 기능을 사용할 수 있음

중복되는 코드를 쓰는게 아니라 상속의 방법을 씀

 

8. scope

같은 scope 내에서 같은 이름을 가질 수 없다

1) 전역스코프(global): 어떤 것에도 감싸져 있지 않는 스코프

2) 지역스코프(local)

- 함수 안쪽

- 블럭스코프

if (a===1) {
  const b = 10;
}

b; // error, if안에서만 동작

 

scope는 중첩됨 ! (작은 scope에서 못 찾으면 그 밖으로 --> 전역에서도 없으면 undefined)

 

 

var, let, const

var

전역공간에 무엇인가를 만드는 것은 좋지 않음(여러 문제 발생 가능)

블록 스코프 지원하지 않음

var xyz = 100;
xyz // 100
window.xyz // 100
// var는 window(전역공간)에 만들어짐

cf. 호이스팅(hoisting)

함수가 호출되고 함수의 변수들을 끌어올려서 먼저 만듦

 

let

let abc = 100;
abc // 100
window.abc // undefined

// 템퍼럴 데드존이라는 스코프가 따로 생긴거고 윈도우 객체의 속성으로 붙이지 않음

 

 

 

복사와 참조

참조: 객체

복사: 그 외의 모든 값

let a = 10;
let b = a;

console.log(b) // 10

b = 100;

console.log(a) // 10

// 값이 옮겨질 때 무슨일이 벌어지는가 ?

 

 

let x = {id:1}
let y = x;

console.log(y.id); // 1

y.titile = 'Y';

console.log(x.title) // Y
// x와 y는 같은 객체를 참조하고 있어서 y의 변경은 x에도 적용됨

x = {id: 2}

console.log(y.id) // 1
// 모든 값은 바꿀 수 없다 (불변)
// x가 바라보는 객체가 1 --> 2로 바뀐 것임.
// 즉 누굴바라보는가에 대한 정보를 가지고 있는거지 그 객체 자체를 가지고 있는게 아님(복사가 아님)

 

 

function feat(a) {
  console.log(a.id) // 1
  
  a = { id: 1, title: 'feat' };
}
// return이 명시되지 않으면 자동으로 undefined를 return함 (자동 return 메카니즘)

let a = { id: 1 };

feat(a);

console.log(a.title) // undefined

let b = [객체1]{id:1, title:'feat'};
let c = 10;
let x = b;

  b = 객체1
  c = 10;
  x = 객체1 // 값 자체가 들어가는 것이 아님 (참조)