[ 자바스크립트+jQuery 완전정복 스터디 1 ]

(http://book.naver.com/bookdb/book_detail.nhn?bid=9650891)

CHAPTER 01 - 변수

Lesson 01 - 변수 소개

01_변수란?

변수는 물건을 보관했다가 필요할 때 다시 꺼내 사용하는 일종의 창고 입니다. 창고와 변수의 차이점이라면 보관하는 내용이 물건 대신 데이터라는 점만 다른거죠.

변수는 데이터를 저장하는 장소
변수는 데이터를 읽고 쓰고 할 수 있는 장소

02_변수는 이럴 때 사용해요.

P11 참고

Lesson 02 - 변수 만들기

01_변수 하나 만들기

var 변수이름 = 값;

1	var name = '신성민';

var의 정체
var는 변수 선언을 의미하는 키워드로 자바스크립트엔진은 소스를 해석하는 도중 var라는 키워드를 만나면 ‘여기는 변수를 만들라는 말이군!’으로 해석해 변수를 만들게 됩니다.
여기서 키워드(keyword)라는 단어가 등장하는데요 키워드는 이미 특정한 목적으로 만들어져 있는 자바스크립트의 요소라고 보면 됩니다. 잠시 후에 배울 if, for와 같은 조건문과 반복문 역시 키워드이며 이외에 수 많은 키워드가 있습니다

세미콜론(;)의 의미
문장 맨 뒤에 붙이는 세미콜론은 문장의 끝을 의미합니다.

ASI(automatic semicolon insertion)
자바스크립트에는 ASI라는 기능(?)이 존재합니다 줄바꿈이 일어나는 등의 특정한 규칙을 가지고 실행됩니다. 이 기능으로 실수로 세미콜론을 생략하더라도 정상적으로 동작하게 됩니다.
하지만 프로그램의 오작동을 막기 위해서 세미콜론의 입력을 빼먹지 않는 습관을 가져야 합니다.
(참고 - http://code.i-harness.com/ko/docs/javascript/110b)

var name1 = '신성민';      // ok
var name2 = '신성민2'      // ok

console.log(name1, name2);      // ok
console.log(name1, name2)       // ok

[ 예제 1 - 여러분의 나이가 담긴 변수 age를 만들어주세요 ]

1	var age = 37;

02_변수 여러개 만들기

방법01_ var를 이용해서 여러 줄로 변수 구분을 하는 경우

1 2	var name1 = 'data1'; var name2 = 'data2';

방법02_ 콤마(,)를 이용해서 변수 구분을 하는 경우

var name2 = 'data1', name2 = 'data2';

// 줄을 바꿔도 무방
var name3 = 'data3',
name4 = 'data4';

03_변수이름 만들 때 주의사항

숫자로 시작하면 안됨

대, 소문자의 구분

변수는 대문자가 아닌 소문자로 시작하세요
(첫글자가 대문자인 경우는 통상적으로 생성자 함수(클래스)를 뜻하기 때문)

변하지 않는 환경 변수의 값을 담는 상수 변수는 모두 대문자로 만들어 주세요
(JS에서는 es6전까지 상수가 존재하지 않으므로 네이밍 규칙으로 구분)

여러 단어가 조합되는 경우 다음과 같이 낙타 표기법(camelCase)으로 작성해주세요

자바스크립트에서 이미 정의된 예약어(키워드)를 사용하면 안되요(P17참고)

// 변수명이 숫자로 시작되면 에러 발생
var 1stName = '신';        // error

// 아래 두 변수는 다른 변수
var name = '이름1';
var Name = '이름2';
console.log(name, Name);

// 상수는 구분할 수 있도록 대문자로 표기
var ADMIN_ID = 'guest';

// 통상적인 변수는 camelCase로 작성
var listCount = $('li').length;

// 예약어를 사용하면 에러 발생
var class = 'CLASS';

Lesson 03 - 변수에 저장할 수 있는 데이터 종류

01_데이터 위치

데이터 위치는 일반적으로 ‘=’를 기준으로 우측에 변수(저장소)는 좌측에 옵니다.

02_데이터 종류

변수를 저장할 수 있는 데이터 종류는 다음과 같이 총 8개 정도 됩니다.(책 20P~)

// number
var num = 10000;

// string
var str = '안녕하세요';

// boolean
var boo = (2 > 3);

// undefined(변수의 기본 값(할당 전의 값)
var und;

// null
var nul = null;

// function
function test() { }

// class(function)
function MyClass() {}
var myClass = MyClass();

// object
function MyClass() {}
var myClass = new MyClass();


// array
var arr = [1, 2, 3, 4];

// Object
var obj = {
  key1: 'value1',
  key2: 'value2'
};

Lesson 04 - 변수 값 저장 및 변경

01_변숫값 저장

// 데이터가 변수A에 저장 
var 변수A = 데이터;

// 변수A의 값이 변수B로 복사
var 변수B = 변수A;

// 변수A의 값 데이터의 값 변수B의 값이 더해져서 변수C복사
var 변수C = 변수A + 데이터 + 변수B;

원시형, 참조형
JS에서의 값은 원시형(primitive type)과 참조형(reference type) 두가지 자료형을 제공합니다.
원시형은 변수에 할당될 때 값 그 자체(원시 데이터 값)를 보관하고 참조형은 참조 타입의 데이터의 주소를 저장합니다.

기본 데이터 타입(원시형)

숫자(Number)

문자열(String)

불린값(Boolean)

undefined

null

참조형

Object(객체)

배열(Array)

함수(function)

정규표현식(RegExp)

02_변숫값 변경

1
2
3

var 변수이름 = 데이터;
변수이름 = 신규데이터1;
변수이름 = 신규데이터2;

변수에 저장돼 있는 값을 다른 값으로 변경하는 방법은 var를 붙이지 않은 상태에서 변수에 값을 대입해주면 됩니다.

Lesson 05 - 변수 값이 자동으로 읽혀지는 경우

우측에 변수를 두는 경우

함수 호출 시 변수를 매개변수(파라미터) 값으로 사용하는 경우

연산자와 함께 사용하는 경우

01_우측에 변수를 두는 경우(변수에 들어있는 값이 읽혀 다른 변수에 대입하는 경우)

변수A = 변수B(우측에 있을 때)

위에서 다뤘던 것처럼 우측에 변수를 두면 변수 자체가 넘어가는 것이 아니라 변수 안에 들어 있는 데이터가 복사되어 좌측 변수에 저장 됩니다.

좀 더 정확히 설명하자면 변수 안에 들어있는 데이터 중 숫자, 문자, 논리 데이터(이하 원시형)는 복사되며 아직 배우지 않은 배열 함수, 객체 데이터등(이하 참조형)은 실제 데이터가 들어있는 주소가 복사 됩니다.

02_함수 호출 시 변수를 매개변수 값으로 사용하는 경우

03_연산자와 함께 사용하는 경우

Lesson 06 - 변수를 활용한 데이터 중복 제거 및 재사용(책 34P참고)

변수를 활용한 데이터 중복 제거의 예

Lesson 07 - 변수에 어떤 값이 들어 있는지 확인하기

여러가지 저장된 값을 확인하는 방법이 있지만 가장 일반적인 3가지를 살펴보겠습니다.

alert()

document.write()

console.log()

01_alert()

alert()함수는 특정 정보를 사용자에게 메시지 창으로 알려주기 위해 주로 사용됩니다.
(alert를 통한 확인은 값이 많은 경우 엄청나게 성가시기 때문에 비추천)

1
2
3

var data = 10;

alert(data);

02_docunent.write()

document라는 객체에서 제공하는 write()기능은 html문서의 body영역에 지정한 내용을 출력해줍니다.
(즉 html내에 body를 다 지우고 내가 입력한 값이 들어가는 메서드이므로 비추천)

1
2
3

var hello = '안녕';

documnet.write(hello);

03_console.log()

console.log()는 브라우저의 콘솔 창에 로그를 남기는 메서드로 남긴 내용은 브라우저의 개발자 도구 내 콘솔 창에 출력됩니다.
(변수 값의 확인은 사용하는 것을 추천하며 브라우저에서 개발자 도구의 단축키는 IE, 크롬에서 F12입니다)

var hello1 = '안녕';
var hello2 = 'hello';

// 컴마로 구분하여 복수의 값을 출력할 수도 있습니다
console.log(hello1, hello2);

Lesson 08 - 주석

주석이란 실행되지 않는 코드로 주로 작성한 코드에 대한 설명을 달아놓기 위해 사용 됩니다.

// 한줄 주석

/*
* 여러
* 줄
* 주석
*/

/*
  여러
  줄
  주석
*/

/**************************
눈에 띄게 하기 위해 이런 식으로도 씁니다~
**************************/

Lesson 09 - 배열(Array)

배열은 변수 하나에 여러 개의 데이터를 담을 수 있는 특별한 데이터형 입니다.

// 배열의 생성
var arr = [1, 2, '삼', 4];

// 배열 요소에 접근 (변수명[배열의위치]로 접근하며 0부터 시작합니다)
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);

배열의 사용 예

Lesson 10 - 변수 종류

전역, 지역 변수

var  global1 = '전역변수';

// 지역, 전역변수를 나누는 기준은 함수(~ES5 한정)
function func1() {
  var local1 = '지역변수'
}

// 함수에 있지만 var키워드를 사용하지 않았으므로 전역변수
window.onload = function() {
  global2 = '전역변수';
}

매개 변수


function func1(name, age) {
  // 함수에서 전달받아 사용하는 값을 매개변수라고 합니다.
  alert('제 이름은' + name + '이며 나이는 '+ age + '살 입니다.');
}

func1('홍길동', 99);

맴버 변수

[ 정리 ]

// 변수는 var키워드로 선언
var var1 = '변수선언';

// 숫자(number)는 숫자로 표기
var num = 1;

// 문자열(string)은 따옴표(쌍, 홑따옴표 모두 가능)로 감싸서 표기
var str1 = "문자열";
var str2 = '문자열';

// 논리형(boolean)
var boo1 = true;
var boo2 = false;
var boo3 = 3 > 2; // 바로 비교식을 사용할 수도 있습니다

// undefined - 변수에 값을 할당하지 않으면 undefined
var und;

// null - 아무 것도 담겨있지 않다는 표기로 undefined와 다름
var nul = null;

// 배열(array)의 선언
var arr = [1, 2, 3, 4, 5];

// 배열의 접근
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);

// 변수의 종류(위치, 사용형태에 따른 구분)
// 전역, 지역 변수는 함수를 기준으로 구분하며 var키워드를 생략하면 전역변수로 선언됩니다.

// 전역변수
var global = '전역변수';

// 지역변수
function test() {
  var local = '지역변수';
}

// 전역변수(var키워드 생략)
function test2() {
  global = '전역변수';
}

// 매개변수
function test3(name, age) {
  // name과 age는 매개변수
  console.log(name, age);
}

// 맴버변수
function Test4() {
  this.member = '맴버변수';
  this.getMember = function() {
    alert(this.member);
  }
}

var testFunc = new Test4();
Test4.getMember();

자바스크립트 jquery 완전정복 스터디 1 - CHAPTER 01 - 변수