반응형
snowman95
코딩수련장
snowman95
전체 방문자
오늘
어제
  • 분류 전체보기 (230)
    • 앱테크 (3)
    • 옵시디언 (5)
    • 드라마, 영화 (1)
    • 개발자 이야기 (24)
    • 프로젝트 (10)
      • 프로젝트 방법론 (7)
      • 프로젝트 기록 (2)
      • Github (1)
    • 개발 지식 (0)
      • 디자인 패턴 (0)
    • 프론트엔드 개발 (5)
      • 테크트리 (2)
      • React.js (19)
      • ReactNative (2)
      • Next.js (6)
      • GraphQL (6)
      • 패키지 매니저 (2)
      • 라이브러리 (3)
      • 상태관리 라이브러리 (4)
      • Web 지식 (3)
      • HTML CSS (26)
      • Javascript (16)
      • 도구 (Tool) (3)
      • 성능 최적화 (1)
      • 디자인시스템 (0)
    • Python (53)
      • 모음집 (1)
      • 문법 (12)
      • 라이브러리 (15)
      • 알고리즘 (10)
      • 백준 문제풀이 (9)
      • 코딩테스트 (2)
      • 도구 (Tool) (3)
    • C++ (20)
      • 알고리즘 (6)
      • 삼성SW기출 (6)
      • 삼성 A형 (6)
    • 데이터사이언스 (1)
    • 인프라 (9)
      • 하드웨어 지식 (4)
      • Ansible (2)
      • Database (2)
      • 쉘스크립트 (1)
    • 주식 (0)
    • 취업 준비 (4)
      • 취업 이야기 (0)

블로그 메뉴

  • 홈
  • 태그

공지사항

인기 글

태그

  • 티스토리챌린지
  • 삼성SDS
  • Next.js #graphql #tailwind.css
  • 기계식키보드 #nuphy
  • 나의 해방일지
  • 알고리즘
  • 언어
  • A형
  • C++
  • 전공 요약 #데이터베이스
  • 오블완
  • 백준
  • 삼성SW역량테스트
  • 전공 요약 #네트워크
  • 개발자취업시장
  • 25년도채용시장
  • 전공요약
  • 개발자이직
  • 개발자이직회고
  • 면접

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
snowman95

코딩수련장

자바스크립트 - 함수
프론트엔드 개발/Javascript

자바스크립트 - 함수

2021. 8. 18. 22:16
728x90
반응형

함수


함수 선언문

자바스크립트는 코드 실행 전 초기화 단계에서 미리 함수 선언문을 모두 찾아서 선언+초기화한다.

그래서 함수 호출이 선언보다 앞에 와도 미리 찾아둔 함수 선언문을 보고 호출 가능하다. (호이스팅)

function show(val){
  console.log(val);
}
show('hi');
'hi'
show('bye');
'bye'


# return 명시하지 않아도 자동으로 return 들어감
# return 값이 없으면 undefined 반환
function show(){
  console.log('hihi');
}
a = showSomething();
console.log(a);
'undefined'


# 매개변수 디폴트 값 (매개변수 없을때 기본값으로 들어감)
function show(val="goodbye"){
  console.log(val);
}
show();
'goodbye'


# 전역변수/지역변수
let global_val = 'hihi'      (전역 변수 - 코드 전체에서 사용가능)

function showSomething(){
  const local_val = 'byebye' (지역 변수 - 함수 내에서만 사용가능)
  conoosle.log(global_val)
  console.log(local_val);
}

showSomething();
'hihi'
'byebye'

 

함수 표현식

익명함수, 즉시 실행 함수, 화살표 함수처럼 함수 자체가 식(Expression)이라서 변수에 할당가능한 함수를 뜻한다.

실제로 코드가 실행되어 내려오다가 함수 표현식에 도착하면 초기화 되어 그 이후 부터 호출이 가능함.

let val = function(){
  console.log('hi');
}

※ 비교

  • 함수 선언문 : 호이스팅에 의해 선언+초기화 되어 어디서나 호출가능
  • 함수 표현식 : 선언만 되고 실제로 코드에 도달해야 초기화 되어 호출가능

 

익명 함수

let add = function(a,b){ // 익명함수 (함수 이름이 없음)
  return a+b;
}

즉시 실행 함수

정의와 동시에 실행을 하는 함수. 일회성으로 호출하는 경우 사용.

(function(a,b){ // 즉시 실행 함수
  return a+b;
}(1,2));        // 마지막에 세미콜론

화살표 함수

ES6 버전부터 추가되었다. 익명 함수에서만 사용 가능하다.

  1. 매개 변수 없는경우
    const hello = function(){  # 익명함수
      return "안녕"
    }
    
    # function 키워드 제거하고 => 추가
    const hello = () => { return "안녕" };
    
    # return + 중괄호를 제거 (내용이 1줄이라서 가능)
    const hello = () => "안녕";
    
    # 혹은 return + 중괄호를 괄호로 변경가능
    const hello = () => ("안녕");
  2. 매개 변수 있는경우
    let sum = function(a,b){  # 익명함수
      return a+b;
    }
    
    # function 키워드 제거하고 => 추가
    let sum = (a,b) => { return a+b; }
    
    # return + 중괄호를 제거 (내용이 1줄이라서 가능)
    let add = (a,b) => a+b;
    
    # 혹은 return + 중괄호를 괄호로 변경가능
    let add = (a,b) => (a+b);
# 안되는 경우
let show = ()=>(         # return문이 한줄이지만 인수가 없어서 괄호 생략불가
  console.log('hi';
)
let add = (a,b)=>{       # return문이 여러줄이므로 괄호 사용불가
  const c = a+b;
  return c
}

 

생성자 함수

new 연산자로 함수를 호출하면 객체를 생성하여 반환해줌

new 를 안붙이면 그냥 함수를 호출.

function User(name, age){
  this.name=name;
  this.age=age;
  this.showInfo = function(){
    console.log(this.name);
}
let u1 = new User("bob",10);
let u2 = new User("jane",20);

new를 통해 함수를 호출하면 실제로는 아래와 같이 작동함.

function User(name, age){
  this = {}
  this.name=name;
  this.age=age;
  this.showInfo = function(){
    console.log(this.name);
  return this
}
let u1 = new User("bob",10);
let u2 = new User("jane",20);

 

함수 인수 전달


자바스크립트의 함수의 인수는 개수 제한이 없다.

function func(arg){
  ...
}
a()       이 경우에는 undefined 값이 들어간다.
a(1)
a(1,2,3)

 

arguments

함수에 주어진 인수들은 arguments라는 배열객체로 접근이 가능하다.

length, index접근은 가능하지만, 배열 내장 메서드(forEach, map)는 쓸 수 없다.

function func(arg){
  a = arguments.length();
  b = arguments[0];
  c = arguments[1];
}
func("1","2");

 

나머지 매개변수

arguments와 유사하게 배열객체로 접근이 가능하다.

배열 내장 메서드(forEach, map, reduce 등) 모두 사용가능하므로 나머지 매개변수를 사용하도록 하자.

function func(...args){
  args.forEach((num, index) => {
    ...
  });
}
func(1,2,3,4,5);

 

전개 구문

배열을 풀어서 나열한다.

# 배열
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let newArr1 = [...arr1, ...arr2];         a,b 합치기
let newArr2 = [0,...arr1, ...arr2,7,8,9]; 중간에 끼워넣기
let newArr3 = [...arr1]                   복제하기


# 객체
let user = {name:'bob', age:20};
let newUser = {...user};
let userList = {
  ...user,
  ...newUser,
}
반응형
저작자표시 동일조건 (새창열림)

'프론트엔드 개발 > Javascript' 카테고리의 다른 글

자바스크립트 - 진수 변환, Math 라이브러리  (0) 2021.08.21
자바스크립트 - 심볼  (0) 2021.08.21
자바스크립트 - 배열  (0) 2021.08.18
자바스크립트 - 객체  (0) 2021.08.18
자바스크립트 - 기본문법  (0) 2021.08.18
    '프론트엔드 개발/Javascript' 카테고리의 다른 글
    • 자바스크립트 - 심볼
    • 자바스크립트 - 배열
    • 자바스크립트 - 객체
    • 자바스크립트 - 기본문법
    snowman95
    snowman95
    (17~19) Unity/Unreal Engine 게임 프로그래머 (20~21) System Administrator ___________ (22~) React 웹 프론트앤드 개발자 __________ 깃헙 : https://github.com/snowman95

    티스토리툴바