Skip to content

0529.md

Latest commit

 

History

History
283 lines (225 loc) · 9.72 KB

0529.md

File metadata and controls

283 lines (225 loc) · 9.72 KB

JavaScript 문법과 데이터 유형

변수

JavaScript 변수(Variable) 선언, 값을 할당
무엇을 변수에 설정하고자 하는가?
오늘 점심은 뭘 먹지?

  • 변수 선언

변수(Variable) = 식별자(identifier)

초기 값은 할당되지 않았다

var runch; // undefined

선언된 변수에 값을 할당
할당하는 역할을 수행하는 연산자 -> 할당(대입) 연산자

runch = 김밥;   // 김밥 이라는 이름의 변수를 찾아요

var를 꼭 작성해야 한다. 안쓰면 문제를 야기시킨다.
선언된 변수가 없으면 참조 오류(Reference Error) 발생!
Uncaught ReferenceError: 김밥 is not defined

runch = "김밥"; // 김밥 이라는 문자열 데이터를 찾아요
runch = '김밥'; // 상동

// 아래 영문의 경우도 마찬가지!
runch = kimbab;
runch = 'kimbab';

변수를 선언함과 동시에 값을 할당하는 구문

var 변수_이름 = 값;
var 변수_이름 = 다른_변수_이름; // 다른 변수에 할당된 값을 선언하는 변수에도 할당

var dinner = '치맥'; // 점심에 먹은 것을 저녁에도 먹고 싶지 않아!
var dinner = runch; // 점심에 먹은 것을 저녁에도 먹자!
  • 변수 이름 작성 규칙

웹표준의 스위치 역활이 doctype이다.
3가지 형태가 있다. ( Strict : 엄격 모드, Transitional : 호환 모드/권장, Frameset : 프레임 셋을 구현하는 모드)
이름은 알아보기 쉽게, 이해하기 쉽게 명시적으로 지어야 한다.
이름은 직관적으로 그것이 무엇을 말하며, 무엇을 행할 수 있는지 알게 지어야 한다.

<이름 지을 때 하지 말아야 할 것>

  1. 공백으로 이름이 구분되게 지어서는 안된다.
var my name = 'yamoo9'; [X]
  1. 이름을 지을 때 첫 글자가 숫자여서는 안된다.
var 101Team = 'IoI'; [X]
var 10px = 'Tem Pixel'; [X]
  1. 이름 지을 때 사용할 수 있는 특수문자는 정해져 있다. _, $ 을 제외한 다른 특수문자는 사용할 수 없다.
var Team-101 = 'IoI'; [X]
var @design-people = '디자인 피플'; [X]
  1. 대소문자를 구분하는 JavaScript에서는 이름을 지을 때 관례가 있다. 어긴다고 해서 문법에 오류가 발생하지는 않지만, 오래 전부터 내려오는 관습이 있다.

변수 이름은 _을 사용하여 이름을 구분한다.
패턴(Pattern): 사용 빈도가 높다.

Single var pattern : var 변수 선언 키워드를 한 번만 사용하여 변수를 정의하는 패턴

var my_name, is_visible, has_children, remote_control;

함수 이름은 카멜 케이스(camelCase) 표기법을 사용한다.
getName(), setAge(), showMeTheMoney(), blackSheepWall()

함수 이름의 첫글자가 대문자인 경우는 특별한 함수일 가능성이 높다.
Navigation(), Tabs(), Carousel(), Component(), ..
Vue() 도 마찬가지!

  • 변수 범위
  • JavaScript의 변수 범위(Scope)

전역 변수(Global Variable)
어떤 함수의 바깥에 변수를 선언하면, 현재 문서의 다른 코드에 해당 변수를 사용할 수 있다.
전역 변수란? 전역 객체의 속성이다.
모든 구역(Block)에서 접근(Access)이 가능한 변수

클라이언트 환경(Front-End)

  • 전역 객체(Global Object): Window 객체

서버 환경(Back-End)

  • 전역 객체(Global object) : Global 객체
var type_of_my_phone = 'iPhone';
console.log('전역 변수:', type_of_my_phone); // 'iphone'

지역 변수(Local Variable)

  • 특정한 구역(Block)에서만 접근이 가능한 변수
  • 함수 내에 변수를 선언하면 지역 변수가 된다.
  • Block 문
{
  var type_of_my_phone = 'Apple Device';
  console.log('블록 내부 변수:', type_of_my_phone); // 'Apple Device'
}

console.log('전역 변수는 블록 내부의 변수에 영향을 받았나?:', type_of_my_phone); // 'Apple Device' ?

호이스팅(Hoisting)
변수가 끌어올려지는 현상

// var somthing; -- undefined


console.log('is exist variable `somthing`?:', somthing);

var somthing = '썸씽~';

상수(Constant)
상수는 변수와 유사하나, 읽기 전용(Read Only)이다.
한 번 선언된 상수는 재 선언될 수 없다.
뿐만 아니라 다른 값을 할당하는 것도 불가능하다.
관례적으로 대문자로만 구성된 이름을 사용하여
변수와 구분 짓는다. (강제성 없음)

const IS_ROTATION_EARTH = true; // 대문자로 구성된 상수
const is_rotation_earth = true; // 소문자로 구성된 상수

console.log('IS_ROTATION_EARTH:', IS_ROTATION_EARTH);
console.log('is_rotation_earth:', is_rotation_earth);

데이터 유형 (Data Types) ES5 기준
-- 원시 데이터 유형(Primitive Data Types)

  • undefined - nothing
    형변환을 자동으로 변경 : 불리언 값으로 바뀌어 false값으로 됨.
  • null - nothing
    형변환을 자동으로 변경 : 불리언 값으로 바뀌어 false값으로 됨.
  • Number (정수, 실수, 소수) 0
    0 제외 모든 값을 true 이다. 0은 flase 이다.
  • String 홑따옴표, 쌍따옴표로 묶인 텍스트
    ''(false): 값이 안들어 있기 때문에 부정으로 형변환이 된다.
    ' '(true): 공백 문자를 값으로 인식한다.
  • Boolean true, false, !!false

-- 참조 데이터 유형(Reference Data Types)

  • Function 수행을 위한 절차
  • Array 값의 집합
  • Object 속성의 집합

-- String 문자 유형의 데이터)

  • 따옴표(큰, 작은)로 묶인 텍스트
    "나의 하프 마라톤 달리기 기록은 50분이다." -> string
    "나의 하프 마라톤 달리기 기록은 50분이다.' -> SyntaxError
    "나의 하프 마라톤 달리기 기록은 50" 23'이다." -> SyntaxError
    "나의 하프 마라톤 달리기 기록은 50" 23'이다." -> string / 이스케이트 처리

사용할 때 유의점

  • 따옴표의 시작과 끝이 같은 유형이어야 한다.
  • 문자 데이터 유형을 구분짓기 위한 따옴표가 아닌, 문자로서의 따옴표의 경우는 이스케이프(Escape) 처리해야 한다.

다음과 같은 HTML 코드를 문자 데이터 유형으로 처리하려면?

<p class="message" title="달리기 기록">나의 하프마라톤 기록은 50" 23'이다.</p>

// 큰 따옴표 사용 시
var message_html = "<p class=\"message\" title=\"달리기 기록\">나의 하프마라톤 기록은 50\" 23'이다.</p>";

// 작은 따옴표 사용 시
var message_html = '<p class="message" title="달리기 기록">나의 하프마라톤 기록은 50" 23\'이다.</p>';

데이터 유형 변경(자동) / (유)형 변환
JavaScript는 동적 데이터 유형 처리 언어이기 때문
변수를 사용하여 런타임(실시간, 웹 브라우저에서 실행 중인 상황) 중에 값의 유형을 변경할 수 있다.
문자열 + 숫자 -> 문자열이 높기 때문에 문자열이 된다.

// 변수 선언 시에 문자 유형의 데이터 값을 변수에 할당했지만,
var process_my_work = '논리에 기반한 선별적 디자인 프로세스';

// 웹 브라우저에서 실행 중인 상황에 사용자의 코드에 따라 값의 유형이 바뀔 수 있다. (너무나 쉽게)
process_my_work = false;        // 문자 -> 불리언으로 변경
process_my_work = function(){}; // 불리언 -> 함수로 변경

동적 할당 언어인 Javascript에서 유의할 점!

var a, b, c;

a = 10;
b = 7;
c = a + b; // 17

a = 10;
b = '칠'; // 사용자가 잘못된 유형을 입력한 경우!!
c = a + b; // '10칠' 의도치 않는 결과를 가져온다.

Single var pattern

// var x, y, z;

// x = 'X';
// y = 'Y';
// z = 'Z';

var x = 'X', 
    y = 'Y', 
    z = 'Z';

미리 살펴보는 DOM Script!

// DOM Script 에서 Single var pattern을 사용한 예시
var html = window.document.documentElement,
    head = window.document.head,
    body = window.document.body;

console.log('html:', html);
console.log('head:', head);
console.log('body:', body);

Dot Syntax
패스트캠퍼스 본관 4c 룸에서 수업을 받다.
패스트캠퍼스.본관.4c_room.lecturing();

자바스크립트 form 영역 엘리먼트 접근 방법

  • 일반적으로 자바스크립트에서 HTML 엘리먼트에 접근시 getElement(s)By* 와 같은 메소드를 통해 가능하다.
  • form 영역 엘리먼트의 경우 전역객체(window)에서 엘리먼트의 name 값으로 직접 접근할 수 있다.
  • 단, name의 값이 자바스크립트 문법 규칙에 어긋나지 않아야 한다.
  • 예시
<form name="user_info">
    <div>
        <label for="user-name">이름</label>
        <input id="user-name" name="user_name" type="text">
    </div>
    <div>
        <label for="user-email">이메일</label>
        <input id="user-email" name="user_email" type="email">
    </div>
    <div>
        <label for="user-gender">성별</label>
        
        <input id="user-gender" name="user_gender" type="radio" value="male" checked> 남성
        <input name="user_gender" type="radio" value="female"> 여성
    </div>
    <div>
        <label for="user-age">나이</label>
        <input id="user-age" name="user-age" type="number">
    </div>
    <button type="submit">확인</button>
</form>
// name="user_name" 인 input 엘리먼트 접근
var user_name = document.user_info.user_name;
console.log(user_name.value);

// name="user-age" 인 input 엘리먼트는 접근 할 수 없다. ('-' 문자 javascript 문법에 어긋남)