자바스크립트 기초

Chapter 1. 변수

 

변수

1. 변수 의의

데이터를 저장하는 장소. 메모리 공간에 데이터를 저장하기 위한 영역

- 전역변수 : 코드 전역에서 사용하는 데이터를 담는 변수로, 어디서든 접근이 가능.

- 지역변수 : 특정 영역에서만 사용 가능. 주로 함수 내부에 만들어짐.

- 매개변수(파라미터) : 함수 외수에서 함수 내부로 데이터를 전달하기 위한 용도.

- 멤버변수(프로퍼티) : 클래스 내부에 만들어지며 주로 객체에서 사용하는 정보를 담는다.

 

2. 변수 선언

가장 일반적인 변수 선언 방법 var 변수명 ; / var 변수명 = 값;

- var : 변수 선언을 의미하는 키워드 (키워드: 이미 특정 목적으로 만들어져있는 js 요소)

- ; : 세미콜론은 문장의 끝을 의미

- = : 대입을 뜻하는 연산자. ‘=’을 기준으로 좌측은 변수, 우측은 대입(저장)될 값.

 

여러개의 변수를 만들기

‘;’ 이나 ‘,’를 이용.

var 변수1 = 1; var 변수2 = 2; ...

var 변수1 = 1, 변수2 = 2...;

 

변수명 선언 시 주의사항

- 숫자로 시작하지 않는다. - 영문자, ‘_’, ‘$’ 중 하나로 시작한다.

- 대소문자를 구분한다.

- 이미 정의된 키워드(예약어)는 사용 금지. (break, case, catch, continue, default...)

 

--- 하단은 암묵적 규칙 ---

- 소문자로 시작한다.

- 상수(변하지 않는 값)는 대문자로만 만든다. (자바 등과 다르게 상수 선언이 문법적으로 지원되지는 않는다.)

- 여러 단어의 조합시 낙타표기법(camelCase)으로 작성한다.

 

3. 데이터형 8가지

- 숫자형 (Number) : 범위 - 최솟값 ±5e-324 / 최댓값 1.7976931348623157e+308

- 문자형 (String) - 글자 정보. 문자열.

- 논리형 (Boolean) : 참(true, 1) 거짓(false, 0)

- undefined : 값이 할당되지 않은 변수는 기본적으로 undefined가 저장된다.

매개변수가 있는 함수를 매개변수값 없이 호출할 때도 해당 매개변수에 undefined가 저장됨.

객체의 존재하지 않는 프로퍼티에 접근하는 경우에도 해당.

- null : 아무것도 참조하고 있지 않다‘라는 의미로, 주로 객체를 담으려는 변수를 초기화할 때 사용.

- 함수형 (Function)

- 클래스 (Class)

- 클래스 인스턴스 (Class Instance)

 

4. 변수값 저장 및 변경

- 변수에는 다른 변수 자체를 저장할 수 있음. 단, 변수가 저장되는 것이 아니고 변수의 값이 복사되어 저장되는 것.

- 변수값을 변경할 때는 var를 붙이지 않은 상태에서 변수에 값을 대입한다.

var a = 1; var b = a;

a = 21;

console.log(b); => 1 출력.

 

5. 변수값이 자동으로 읽혀지는 경우

- 우측에 변수를 두는 경우 : 변수A = 변수B

변수 자체가 넘어가는 것이 아니라 변수 안의 데이터가 복사되어 좌측 변수에 저장됨.

* 숫자, 문자, 논리형 데이터만이 복사되고, 배열, 함수, 객체 등은 실제 데이터가 저장되어 있는 주소가 복사됨.

 

- 함수 호출 시 변수를 매개변수 값으로 사용하는 경우 : 함수(변수A);

힘수 호출과 함께 변수를 사용하는 경우에도 값이 복사되어 매개변수(파라미터)로 넘어감.

 

- 연산자와 함께 사용하는 경우 : 변수A = 변수B 연산자 변수C

연산자와 함께 변수를 사용하는 경우에도 변수에 저장된 값이 자동으로 읽혀져서 사용됨.

 

6. 변수를 활용하여 데이터 중복 제거 및 재사용이 가능

 

document.write(“딴동네님 안녕하세요. 환영합니다.”);

에서 딴동네를 짱아로 바꾸려면

document.write(“짱아님 안녕하세요. 환영합니다.”);

출력을 100번 해야한다면 이름 바꾸는 작업을 100번 해야 하지만

 

var name = “짱아”;

document.write(name+“님 안녕하세요. 환영합니다.”);

 

위와 같이 이름을 변수에 저장하여 재사용한다면 쉽게 처리 가능.

 

7. 변수에 저장되어 있는 값 확인하기

변수에 저장되어 있는 값을 직접 확인하기 위한 여러 방법 중 가장 일반적인 방법 세 가지

1) alert()

특정 정보를 메시지 창으로 알려주기 위해 주로 사용하는 기능. 확인하고 싶은 데이터를 괄호 안에 넣는다.

2) document.write()

Document 객체에서 제공하는 write() 기능. HTML 문서의 body 영역에 태그로 내용을 출력해 줌.

 

3) console.log()

전문 디버깅 도구로 크롬과 사파리에서만 사용 가능. 출력값은 콘솔영역에 출력된다.

 

주석

1. 주석

- 주로 코드에 설명을 달아놓기 위해 사용하며 실행되지 않는 소스.

- 협업이나 유지보수를 위해 달아놓는다.

 

2. 주석 만들기

- 한 줄 주석 : // 뒤에 내용을 작성한다.

- 여러 줄 주석 : /* 이 안에 내용을 작성한다. */

 

배열

1. 배열

- 일반 변수가 하나의 데이터만 저장할 수 있는 반면, 배열은 하나의 배열변수에 여러개의 데이터를 담을 수 있음.

 

2. 배열 생성하기

- 대괄호[] 안에 데이터를 넣고 콤마, 로 구분해서 표현함.

- var 변수명 = new Array(); 로도 생성 가능.

 

3. 배열 요소 접근

- 만들어진 배열의 요소에 접근할 때는 : 배열이름[index]

- index의 값은 0부터 시작해서 배열 크기 –1 까지의 값을 가짐.

 

4. 배열 사용 이유

- 변수를 여러개 생성하지 않아도 됨.

- 반복문과 함께 사용시 긴 코드를 간결하게 처리할 수 있음.

 

Chapter 2. 기본 연산자

 

1. 숫자 기본 연산자 : +, -, *, /, %

수학에서 사용하는 사칙연산과 동일. %는 나머지 연산.

 

2. 문자 기본 연산자 : +

문자열을 합치는 데 사용한다. 오직 +연산자만 존재한다.

 

3. 복합 연산자 : += , -= , *= , /= , %=

대입 연산자(=)와 다른 연산자를 묶어 간단하게 표현.

a = a + 1 처럼 대입연산자를 기준으로 좌측과 우측 변수가 같은 경우에만 사용 가능.

 

4. 증감 연산자 : ++ , --

하나의 변수에 1을 더하거나 빼는 구문을 간단하게 표현할 때 사용.

 

- 전위 연산자와 후위 연산자

전위 연산자 : 증감 연산자가 변수 앞에 오는 경우.

후위 연산자 : 증감 연산자가 변수 뒤에 오는 경우.

 

증감 연산자를 사용한 결과값을 다른 변수에 대입하는 경우 전위 연산자는 자기 자신을 먼저 증감시킨 후 대입, 후위 연산자는 대입 후 증감시키므로 주의해서 사용할 것.

 

5. 연산자 우선순위

여러 개의 연산자를 동시에 사용하는 경우 실행되는 연산의 순서.

복잡한 연산의 경우 괄호를 이용하여 연산 순위를 분명하게 설정한다.

 

Appendix 1. 초보자를 위한 함수와 클래스

1. 함수

- 특정 기능을 하는 구문(알고리즘, 로직)을 묶어 재사용하는 문법. 일종의 포장.

- 반복적인 코드 작성을 줄이기 위해 사용. 더 깔끔하고 간결한 코드를 작성할 수 있음.

 

2. 함수 선언

- function 이라는 키워드를 이용해서 함수를 생성한다.

- 함수명은 보통 영단어 조합으로 이뤄지며 주로 동사로 시작한다.

 ex)

  function 함수명(매개변수){

    여러 개의 변수, 연산자, 형변환, 조건문, 반복문 등을 활용하여

    만들어진 특정 기능을 하는 구문(알고리즘)

 

    return 값;

  }

 

3. 함수 호출

- 함수를 동작시키기 위해서는 함수를 호출해야 한다.

- 함수명(); 으로 호출이 가능하며 함수를 호출하면 함수 내부의 로직이 동작하기 시작한다.

 

4. 매개변수

- 함수 내부는 함수 외부에서 접근할 수 없다.

- 외부에서 내부로 값을 전달하는 한 가지 방법은 매개변수를 이용하는 것이다.

- 매개변수는 함수에 따라 없을 수도 있고 1개 이상 있을 수도 있음.

 

5. 리턴값

- 리턴값은 함수 내부에서 외부로 데이터를 보내기 위한 통로.

- 매개변수의 반대 개념으로 볼 수 있음.

- 리턴값을 외부에서 받고 싶다면 var 변수명 = 함수명([매개변수]); 처럼 할 수 있다.

- 리턴값은 없을 수도 있고, 두 개 이상의 리턴값을 내보내고 싶다면 배열이나 객체를 활용하여 리턴할 수 있다.

 

6. 함수 종류

- 자바스크립트 코어 함수(라이브러리)

자바스크립트에서 가장 기본이 되는 기능을 미리 구현해 제공하는 함수.

alert()이나 document.write() 등...

 

- 사용자 정의 함수

사용자의 필요에 따라 만들어지는 함수.

 

초보자를 위한 클래스

1. 클래스

- 연관이 있는 변수와 함수를 하나로 묶을 때 사용하는 문법.

- 클래스명은 주로 파스칼 기법으로 명명한다. (‘ClassName’ 처럼 단어의 첫 문자를 대문자로 표기)

 

2. 클래스의 사용 의의

- 함수 기반 코딩의 단점을 극복

1) 함수 기반 코딩은 코드가 구분 없이 작성되어 있기 때문에 문제 발생시 문제가 발생한 코드를 쉽게 찾기가 힘듦.

2) 여러 사람의 협업시 똑같은 이름의 변수와 함수를 만들게 되면 충돌하는 문제가 발생.

 

연관있는 함수와 변수를 하나의 클래스로 묶음으로서 필요한 코드를 찾기가 쉬워지고 코드를 작성하지 않은 사람도 유지보수가 비교적 편해지는 등의 장점이 있음.

3. 인스턴스와 객체

클래스를 사용하기 위해서는 일반적으로 인스턴스를 생성해야 한다. new 라는 키워드를 사용. 인스턴스는 객체라고도 함.

var 인스턴스명 = new 클래스명();

 

4. 메서드와 프로퍼티

일반 변수나 함수와 구분하기 위하여 클래스 내부의 변수는 프로퍼티, 함수를 메서드라고 부른다.

 

변수 : 프로퍼티 또는 멤버변수

함수 : 메서드 또는 멤버함수

 

5. 클래스의 메서드 호줄하기

함수와 마찬가지로 클래스 외부에서는 클래스 내부(객체)의 변수와 함수를 마음대로 접근할 수 없음.

한 가지 접근할 수 있는 방법은 접근 연산자인 ‘.’을 활용하는 것.

다음과 같은 Calculator 클래스가 있을 때

 function Calculator(a, b){

    this.add = function(a, b){

    alert(‘두 수의 합 = ’ + a+b);

    }

 }

1) 우선 new 연산자를 이용하여 클래스의 인스턴스를 생성한다.

var cal = new Calculator();

2) 접근 연산자를 이용하여 함수에 접근, 호출한다.

cal.add(10, 20);

 

위와 같이 클래스 내부의 함수를 이용하기 위해서는 인스턴스 생성 후 접근 연산자를 이용한다.