JavaScript 기본(1) 변수 & 함수

본내용은 Doit! HTML+CSS+자바스크립트 웹표준의 정석 책을 참고하여 작성하였습니다.
http://www.yes24.com/Product/Goods/96674934

• HTML은 웹문서의 내용을 구성하고, CSS는 웹문서의 레이아웃이나 색상, 스타일 등을 지정한다.
• 자바스크립트는 웹 문서의 각 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있다. (동적인 효과)
• 다른 언어에 비해 데이터 유형이 유연해서 사용자가 주의를 기울이지 않으면 오류가 발생할 수 있다.
• 태그 사이에 실행할 자바 스크립트 소스를 작성할 수있다.
  • 하나의 문서에서 여러개 사용 가능하며 주로 태그 직전에 자바스크립트 코드를 삽입한다.
  • HTML, CSS와 달리 영어 대소문자를 구별한다.
  • 외부 스크립트 파일로 연결
    • <script src = “외부 스크립트 파일 경로”> </script>
    • 따로 파일로 저장한후 웹 문서에서 연결해서 사용
    • .js 확장자로 파일 저장
• 알림창
  • alert(메시지)
• 확인창
  • confirm(메시지)
• 프롬프트 창에서 입력 받기
  • 텍스트필드가 있는 창
  • prompt(메시지) / prompt(메시지, 기본값)
• 웹 브라우저 화면에 출력
  • document.write()
  • 브라우저 화면에서 결괏값을 확인하는 용도로 많이사용
• 콘솔창 출력
  • 소스코드의 오류를 발견하거나 변수값을 확인할 수도 있다.
  • HTML 태그는 사용 불가
  • console.log()
  • ctrl + shift + J 콘솔창 불러오기

변수

• 변수 선언 var 변수명
  • 변수 한꺼번에 선언
    • var a, b, c ;
• 문자열 안에 또 다른 문자열을 넣으려면, 큰 따옴표가 중복되지 않게 안에는 작은 따옴표로 묶어서 표현
• undefined
  • 자바스크립트에서는 변수를 선언할 때 자료형을 미리 지정하지 않고 값을 할당할 때 결정한다.(동적 할당)
  • undefined는 변수를 선언한 상태에서 값이 할당되지 않은 것을 뜻한다.
• null
  • 변수에 할당된 값이 유효하지 않다는 것을 의미
• 배열
  • 쉼표로 구분해서 대괄호[ ]로 묶어서 선언
  • 배열명[”값1”, “값2”]
• == 연산자와 !=연산자는 피연사자의 자료형을 자동으로 변환해서 비교한다.
• 자료형을 자동으로 변환하지 않기 위해 === / !== 연산자를 자주 사용한다.

스코프

• 변수가 적용되는 범위

지역변수

• 함수 안에서 선언하고 함수 안에서만 사용가능
• 예약어 var와 함께 선언

전역변수

• 스크립트 소스 전체에서 사용가능
• 함수 밖에서 선언하거나 함수 안에서는 var 예약어를 빼고 선언

호이스팅

• 상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올린다.
• 실제로 소스코드를 끌어올리는게 아니라 소스를 그런식으로 해석한다는 의미
• 자바 스크립트 해석기는 함수 소스를 훑어 보면서 var를 사용한 변수는 따로 기억한다.
• 즉, 변수를 실행하기 전이지만 ‘이런 변수가 있구나’하고 기억해 두기 때문에 마치 선언한것과 같은 효과가 있다.
• 이를통해, var 예약어를 사용한 변수는 선언하기 전에 실행 하더라도 아직 할당되지 않은 자료형인 undefined값을 가질 수 있다
• 호이스팅처럼 var예약어를 사용한 변수는 선언하기전에 사용하면 프로그램 오류를 발생시킬 수 있다.

let과 const

• ES6에서는 변수를 선언하기 위한 예약어로 let과 const가 추가 되었고, var 예약어는 사용하지 않을 것을 권장한다.
• var는 함수 영역의 스코프를 가지지만, let과 const는 블록 영역의 스코프를 가진다.

let

• let 예약어로 선언한 변수는 변수를 선언한 블록{ }에서만 유효하다.
• 재할당은 가능하지만 재선언은 할 수없다.
• 호이스팅 불가
  • 선언하기 전에 사용할 경우 오류메시지를 나타낸다.

const

• 상수 변수를 선언할때 사용하는 예약어
• 상수 = 변하지 않는 값
• const로 할당한 변수는 재선언하거나 재할당 할 수 없다.

💡 자바 스크립트 변수 꿀팁! 1. **전역 변수**는 최소한으로 사용한다. 2. **var 변수**는 **함수의 시작** 부분에서 선언한다. 3. for문에서 카운터 변수를 사용할때는 for문 밖에서 선언하거나 let을 사용해서 블록변수로 선언 하는 것이 좋다. 4. ES6를 사용한다면 예약어 var 보다 let을 사용하는것을 권장

switch문

switch(조건)
{
case 값1:  명령1 //case문에서는 값만 사용하고 식을 사용할수 없다.
break
case 값2: 명령2
break
….
default: 명령n //조건과 일치하는 case문이 없다면 default문을 실행
}

💡 prompt() 문으로 입력받은 값은 기본적으로 **문자열**로 저장된다. 숫자로 변환시 parseInt() 함수 사용

함수

• 함수선언

  • 함수 선언 위치는 프로그램 흐름에 영향을 주지 않는다.

    function 함수명(){
    	명령
    }

• 함수 호출 함수명() or 함수명(변수)
  

매개변수 기본값 지정

• ES6부터 함수에서 매개변수를 선언할 때 기본값을 지정하는 기능이 생겼다.

function multiple(a, b = 5, c = 10){  // b= 5, c = 10으로 기본값 지정
return a * b + c;
}

익명 함수

• 익명함수는 함수 자체가 식이므로, 함수를 변수에 할당 할수있고, 다른 함수의 매개변수로 사용 할 수도 있다.

function(a,b) { //익명 함수 선언
	return a + b;
}

//변수에 저장
var sum = function(a,b) { // 익명 함수를 선언한 변수 sum에 할당
return a+b;
}
document.write("함수 실행 결과" + sum(10,20) ); // 함수이름 대신변수를 이용해 익명함수 실행

즉시 실행 함수

• 한 번만 실행하는 함수라면 함수를 정의하면서 동시에 실행할 수 있다.
• 함수를 실행하는 순간에 자바스크립트 해석기에서 함수를 해석한다.

함수를 선언하고 호출하는 방식에서는 스크립트의 함수 선언 소스부터 해석해서 준비해 두었다가 호출하면 그제서야 실행한다.

(function() {
	명령
}());

또는

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

화살표 함수

• 익명 함수에서만 사용가능

(매개변수) ⇒ { 함수 내용 }

//매개변수가 없는 화살표 함수
const hi = () => { return "안녕하세요?" };
//한줄이라면 중괄호 생략가능
const hi = () => "안녕하세요?";

//매개변수가 있을경우
let sum = function(a,b) {
	return a + b;
}
let sum = (a,b) => a + b;