[자바스크립트] 변수 / 함수 / 매개변수 / return

2023.02.15 학습 내용

 

< 참고자료 >

함수

변수(Variables)

- 변수란, 어떤 값(데이터)을 저장하기 위해 쓰이는 이름이 붙은 상자(저장소)

- 대다수의 자바스크립트 애플리케이션은 사용자나 서버로부터 입력받은 정보를 처리하는 방식으로 동작

- 예 : 온라인 쇼핑몰 → 판매 중인 상품이나 장바구니 등의 정보, 채팅 애플리케이션 → 사용자의 정보, 메시지 등

- 변수는 이러한 정보를 저장하는 용도로 사용

변수 선언하기 let

let  변수이름 ;

 

변수이름에 데이터(값)를 저장하려면 할당 연산자 ' = ' 사용 (초기화)

let  변수이름 ;
변수이름  =  값 ;

 

변수는 선언과 동시에 값을 넣어줄 수 있음

let  변수이름  =  값;

 

변수 선언

 

한 줄에 여러 개의 변수를 선언할 수 있음

// 비권장

let  user  =  'John',  age  =  25,  message  =  'Hello' ;

 

이러한 작성은 코드가 짧아 보이긴 하지만 권장하지 않음. 가독성을 위해 한 줄에 하나의 변수를 작성할 것

// 권장

let  user  =  'John' ;
let  age  =  25 ;
let  message  =  'Hello' ;

 

※ let 대신 var

var 또한 let가 거의 동일하게 작동하여 변수를 선언하는데 쓰임. 다만, var은 오래된 방식으로 최근에는 let을 주로 사용. 그러나 과거 코드를 해석하기 위해서는 알아둘 필요는 있음

오래된 var

변수 수정하기

변수에는 어떤 값이든 넣을 수 있고, 원하는 만큼 값을 변경할 수도 있음

아래와 같이 값이 변경되면, 이전 데이터는 변수에서 제거됨

let message ;  // 변수 선언
message  =  'Hello!' ;  // 초기화 
message  =  'World!' ;  // 값이 변경되었습니다. 

 

※ 변수는 한 번만 선언해야 함. 두 번 선언하면 에러 발생

변수 이름짓기

꼭 지켜야 하는 규칙

- JavaScript 식별자는 '문자(a-z, A-Z)', 밑줄(_) 혹은 달러 기호($)로 시작해야 함

- 첫 글자는 숫자가 될 수 없음. 두 번째 글자부터는 숫자(0-9)도 가능

- 특수문자, 키릴 문자, 한자, 한글 등도 변수명에 사용할 수 있으나 영어를 사용하는 것이 국제적 관습이므로 영어를 사용해서

  만드는 것을 권장

- 대문자와 소문자 구별 

- 예약어는 변수로 사용할 수 없음 (if, for, let, class, return, function 등)

지키면 좋은 규칙

- 의미 없는 이름은 사용하지 않는 게 좋음. 나중에 어떤 값을 저장해 뒀는지 찾기도 어렵고 활용하기도 어려움

- 너무 추상적인 이름은 사용하지 않는 게 좋음 (ex. name)

- 모든 변수의 이름은 'camelCase'로 쓰는 것이 좋음. 변수명에는 띄어쓰기가 불가능하기 때문에 첫 번째 글자는 소문자로 하고,

  띄어쓰기가 있는 각 단어의 첫 문자를 대문자로 표기하는 방식

참고자료

Airbnb의 자바스크립트 스타일 가이드

Google의 자바스크립트 스타일 가이드

w3schools.com의 자바스크립트 스타일 가이드

StandardJS 코드 스타일

Idiomatic.JS

변수 Scope 

지역변수

블록문 내에서 선언한 변수인 지역 변수(local variable)는 블록문 안에서만 접근할 수 있음

function  showMessage() { // 블록문 (Block Statement)
  let  message  =  '안녕하세요!' ;  // 지역 변수
  alert(message) ;
}

showMessage() ;  // 안녕하세요!

alert(message) ; // ReferenceError: message (함수 밖에서는 지역변수 사용 불가능)

외부변수 (전역 변수 (global variable))

함수 외부에서 선언된 변수로 함수 내부에서 외부 변수(outer variable)에 접근할 수 있으며 수정도 가능

코드를 작성하는 파일 전체에서 사용할 수 있음

let  userName  =  'John' ;  // 외부 변수

function showMessage() {
  userName  =  'Bob' ;  // 외부 변수 수정
  let  message  =  'Hello, '  +  userName ;
  alert(message) ;
}

alert(userName) ;  // 함수 호출 전이므로 John
showMessage() ; 
alert(userName) ;  // 함수에 의해 Bob으로 값 변경

 

- 외부 변수는 지역 변수가 없는 경우에만 사용할 수 있음.

- 함수 내부에 외부 변수와 동일한 이름을 가진 변수가 선언되었다면, 내부 변수는 외부 변수를 가린다.

- 변수는 연관되는 함수 내에 선언하고, 전역 변수는 되도록 사용하지 않는 것이 좋음. 비교적 근래에 작성된 코드들은 대부분

  전역변수를 사용하지 않거나 최소한으로만 사용. 다만 프로젝트 전반에서 사용되는 데이터는 전역 변수에 저장하는 것이 유용한

  경우도 있음

 

지역변수, 전역변수 문제

 

위의 그림의 코드를 실행한 결과는? 오류가 발생한다. 

WHY? 4번째 줄까지는 myFunction()에 대한 함수를 정의한 것으로 문제 없음. 6번째 줄인 myFunction()을 실행하면 로컬변수 x 에 문자열 코드잇이 할당되고, 그 아랫줄로 넘어가 로컬변수 x에 문자열 을지로가 할당됨.(할당만 될 뿐 출력은 하지 않음) 그리고나서 7번째 줄인 console.log(x) 실행. 그러나 x는 myFunction() 내에서 정의된 로컬변수이므로 함수 밖에서는 사용 불가능. 따라서 오류 발생

 

함수 (function)

재사용하기를 원하는 기능을 담는 방법

- 스크립트를 작성하다 보면 유사한 동작을 하는 코드가 여러 곳에서 필요할 때가 많음

- 사용자가 로그인이나 로그아웃을 했을 때 안내 메시지를 보여주는 동작 같은 경우가 이에 해당함

- 함수는 프로그램을 구성하는 주요 '구성 요소(building block)'으로 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를

  여러 번 호출할 수 있음

함수 선언 function 

함수 선언은 function이라는 키워드로 시작해서 함수 이름을 작성하고, 소괄호를 열어 파라미터를 작성

여러 개의 파라미터는 쉼표로 구분해서 작성

function  함수명(매개변수,  매개변수) {
  명령 ;
}

 

함수 선언

함수 이름 짓기

- 함수는 어떤 동작을 수행하기 위한 코드를 모아놓은 것이므로 함수의 이름은 대개 동사

- 함수 이름은 가능한 한 간결하고 명확해야 하며 함수가 어떤 동작을 하는지 설명할 수 있어야 함

- 함수 하나는 동작 하나만 담당해야 함

매개변수(parameter)

매개변수를 사용하면 임의의 데이터를 함수 안에 전달할 수 있음

 

매개변수 사용한 함수

 

매개변수를 사용한 함수

 

여러개의 매개변수를 사용한 함수

 

여러개의 매개변수를 사용한 함수

기본값(undefined) 

함수 호출 시 매개변수에 인수를 전달하지 않으면 그 값은 undefined가 됨

function  showMessage(from,  text) {
  alert(from  +  " :  "  +  text) ;
}

showMessage("Ann") ;  // Ann : undefined

 

매개변수에 값을 전달하지 않아도 그 값이 undefined가 되지 않게 하려면 함수를 선언할 때 =를 사용해 '기본값(default value)'을 설정하면 됨 ==> 옵셔널 파라미터(optional parameter)

매개변수가 밀리지 않도록 가장 뒤쪽에 생성할 것

function  showMessage(from,  text  =  'no text given') {
  alert(from  +  " :  "  +  text) ;
}

showMessage("Ann") ;  // Ann : no text given

반환 값(return value)

return은 함수가 명령들을 실행시키는 것뿐만 아니라 값이 될 수도 있음

함수를 호출했을 때 함수를 호출한 그곳에 특정 값을 반환하게 할 수 있음. 이때 이 특정 값을 반환 값이라고 함

return은 함수 내 어디서든 사용할 수 있으며 실행 흐름이 return을 만나면 함수 실행은 즉시 중단되고 함수를 호출한 곳에 값을 반환함. return만 명시하면 함수가 즉시 종료

 

return 사용

 

return 사용

 

리턴 함수 중단 예

 

※ return과 값 사이에 절대 줄을 삽입하지 말 것

반환하려는 값이 긴 표현식인 경우 아래의 줄에 작성하고 싶을 수 있으나 자바스크립트는 return문 끝에 세미콜론을 자동으로 넣기 때문에 괄호를 이용해 작성해야 함

1.
return
  (some  +  long  +  expression  +  or  +  whatever)

2.
return ;
  (some  +  long  +  expression  +  or  +  whatever)

1과 2는 같은 표현

3. 
return (
  some  +  long  +  expression  +  or  +  whatever
)

3번과 같이 작성해야 함

 

참고로 특정한 언어에서는 변수를 선언하고 사용하지 않으면 오류를 발생시킴. JavaScript는 변수를 선언하고 사용하지 않았다고 해서 오류를 발생시키지 않음. 그러나 변수든 함수든 선언을 하고 사용하지 않는 코드를 작성하는 것은 코드의 성능을 떨어뜨리고, 예상치 못한 오류나 불편한 가독성의 원인이 될 수 있음. 불필요한 코드는 가급적 작성하지 말 것 권장!

 

return 과 console.log의 차이

return문이 없는 함수를 실행하면 undefined가 출력됨

return - 함수를 실행하고 어떤 값을 돌려주는 것 (콘솔에 출력 X)

console.log는 콘솔에 어떤 값을 출력해 주는 것