웹프로그래밍 - 자바스크립트 javascript 함수

 

함수

React는 DOM요소를 컴포넌트라는 단위로 쪼개어 프로그래밍 가능하다.
컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트가 있으며
최근에는 함수형 컴포넌트를 사용하는 추세이다.

 

-범위

Local variables : 함수 안에 선언된 지역 변수는 function scope를 가짐.

Outer variables: 함수 안에서는 함수 밖에 선언된 변수에 접근 가능

 

// var func = function (a, b){

//   return a + b

// }

var func = (a,b) => a + b //Arrow function

console.log(func(1, 2)) // 3

 

 

var func = (a, b, ...c) =>

{

  let sum = a + b

  for(let i of c)

  {

    sum += i

  }

  return sum

}

console.log(func(1,2))

console.log(func(1,2,3,4))

console.log(func(1,2,3,4,5))

 

클로저(closure)

- 생성될 당시의 환경(변수)을 기억하는 함수

- 스코프가 해제되어야 할 시점에도 사라지지 않는 특징

function outFunc(name)

{

  var outVar = 'my name is '

  function innerFunc()

  {

    return outVar + name

  }

  return innerFunc

}

var result = outFunc('bono')

// 원래는 이 시점에서 outVar, name 이런 것들이 메모리에서 사라져야 함.

console.log('result: ' + result())

 

- 은닉화: 외부 함수의 매개변수를 마치 private 변수처럼 관리 할 수 있음.

 

 

호이스팅(Hoisting)

- 자바스크립트는 함수나 전역 스코프 전체를 살펴보고(코드를 다 뒤져보고) var로 선언한 변수(let은 해당 안됨)를 맨 위(유효범위의 최상단)로 끌어 올림

 

-함수 범위

console.log(x); //undefined

var x = 3;

console.log(x); //3

var를 사용하면 선언하기 전에도 사용 가능.

위 코드 결과

 

 

function ho1(){

  var name // 선언만 들고감. 할당까지 들고가진 X

  if(true){

    name = 'yuddomack';

  }

  console.log(name);

}

function ho2(){

  var i

  for(i=0; i<5; i++){

  // do something

  }

  console.log(i);

}

if(true){ //함수가 아님.

  score = 100; // 전역변수를 끌어올림.

}

console.log(score);

 

 

호이스팅이 일어난다는 뜻이지, 선언되지 않은 변수를 사용하는 것을 추천하는 것은 아님.(굳이 쓰지 X)

-> 이 문제를 차단하기 위해 let이 소개.

 

고계함수(higher-order function)

- 인자나 반환값으로 함수를 사용하는 함수

- 함수형 프로그래밍에서 나오는 개념(코틀린, 스칼라,,)

 

function twice(f,x){ 
	return f(f(x)); 
} 
function f(x){ 
	return x*3; 
} 
twice(f,7);