[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 3~4일차 후기

1. return 키워드

Javascript에서 return 키워드로 함수를 호출한 곳에 값을 넘길 수 있다.

원래 return은 함수가 실행되는 도중에 함수를 호출한 곳으로 돌아가라는 의미다.

따라서 return 키워드를 사용하면 값을 지정하지 않아도 함수를 호출한 곳으로 돌아간다.

 

<script>
  //함수 생성    
 function returnFunction() {        
   alert('문장 A');        
   return;        
   alert('문장 B');    
  }    
   //함수 호출    
 returnFunction();
</script>

  return 키워드를 '문장 B' 이전에 사용했으니 해당 위치에서 함수가 종료되어 '문장 A'만 출력된다.

 

2.  단축 속성명/메서드명

객체를 정의할 때 Key와 Value가 같을 시, 각 값을 반복표기하는 것이 아니라 한번만 표현한다.

const obj1 = {
 a: "apple",
 b: "21:,
 c: {}
}

console.log(obj1.a) // apple

const a = "apple";
const b = 21;
const c = {};

const obj2 = {
 a: a,
 b: b,
 c: c
};

console.log(obj2.b) // 21

const obj3 = {a, b, c};

console.log(obj3, a)  // apple ( 단축속성명 적용한 예시 )

function appleItems (name, model, color) {
 return {
  name,
  model,
  color,
  messege: function() {
  // contents
  }
 }
 
 
 // 단축하면
   messege () {
  // contents
  }

 

this -> 자신을 호출한 객체를 가르키는 특수한 키워드
메서드 -> 객체 안에 프로퍼티에 정의된 함수
호이스팅 -> 함수 선언부가 최상단으로 끌어올려지는 현상
클로저 -> 실행 컨텍스트가 정상적으로 삭제되지 못하는 현상.
생성자함수 -> 객체의 프로퍼티가 같고, 값이 다른경우에 객체를 생성할 수 있는 문법

 

3. ES6 강화된 함수

1) 매개변수

• 매개변수 기본값

funtion foo(a=1) {
 console.log({a});
 }
 
 foo() // {a: 1}

 

• 명명된 매개변수

function info1(name, addr, phone) {
  console.log({ name, addr, phone });
}

function info2(name, addr, phone) {
  console.log({ name, addr, phone });
}

const name = [10, 20, 30, 40]

info1(name, 5, 25) // { name, addr: 5, phone:25 }
info2(name, addr: 5, phone:25) // { name, addr: 5, phone:25 }

 

• 나머지 매개변수

funtion foo(a, rest) {
  console.log({ a, rest});
}

foo(1,2,3); // {a:1, rest: [2,3]}

 

 

2) 화살표함수

함수의 내용이 한줄인 경우 중괄호 블록을 사용하지 않고 바로 오른쪽에 정의하며 return 키워드를 명시적으로 정의하지 않아도 오른쪽에 있는 값이 리던된다.

매개변수가 하나라면 소괄호도 생략가능하고 반환값이 객체라면 반드시 소괄호로 감싸야한다.

const add = (a, b) => a + b;
const add5 = a => a + 5;                                  // 매개변수가 하나면 소괄호를 생략 가능하다.
const addAndReturnObject = (a, b) => ({ result: a+b });   // 반환값이 Object 라면 소괄호로 감싸준다.
const print = () => console.log("print");

 

 

가장 큰 특징은 this와 arguments가 바인딩되지 않는다는 것이다. 이때 사용하는것이 나머지 매개변수이다.

일반 함수는 호출되었을 때, 호출한 대상에 바인딩되지만, 화살표함수는 호출하면 전역객체를 참조한다.(브라우저에서는 window)

 

 

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 과정(B-log) 리뷰로 작성 되었습니다.