변수와 값
변수란?
값을 담기 위해 이름을 붙이는 상자
프로그램은 변수값을 알고리즘에 따라 변화시켜 목적을 달성합니다.
그러기 위해서는 우선 변수를 선언해야 합니다.
자바스크립트는 변수 선언자가 var, let, const
var wonju;
console.log(wonju);
변수를 선언하기만 하면 변수 안은 정의되지않았다는 undefined가 표시됩니다.
wonju = 2; 와 같이 대입(=)연산자를 사용하면 값을 대입할 수 있습니다.
변수는 쉼표(,)를 통해 여러개를 한문장으로 표현할 수 있습니다.
var a = 1, b = 2, c = 3
변수선언생략+끌어올림+중복선언
변수를 선언하지않은 상태에서 console.log(), 즉 변수값을 읽으려하면
오류가 발생합니다. 하지만 var 변수선언을 하지 않은 변수에 값을 대입하면 오류발생x
자바스크립트는 자동으로 변수로 선언하기 때문. 하지만 버그가 발생할수있기에 ㄴㄴ
변수선언은 프로그램은 윗줄부터 차례대로 실행한다는 원칙을 따르지 않음
console.log(x); // -> undefined
var x;
변수x가 선언되지 않았지만 오류가 나지 않고 undefined가 출력됩니다.
변수를 프로그램 중간에 선언해도 변수선언이 첫줄로 끌어올려지는, 변수 선언의 끌어올림(hosting) 이라고 합니다.
var 문을 이용하여 같은 이름을 가진 변수를 여러개 선언해도 문제발생X
같은 이름으로 선언된 변수는 모두 끌어올린 후 단 하나의 영역에만 할당됨
자바스크립트만의 고유한 특징입니다.
변수의 명명 규칙
변수,함수,라벨 등 사용자가 정의하는 이름을 식별자라고 합니다. 식별자의 규칙은
- 알파벳(a~z, A~Z), 숫자(0~9), 밑줄(_), 달러기호($) 사용 가능
- 첫 글자로 숫자는 사용 불가능.
- 예약어(break,case,catch,class 등)은 사용 불가능
변수의 의미를 알수 있도록 3가지의 표기법을 많이 사용한다
- 캐멀 표기법(goodMorning, hojaeIsAngry): 두번째 이후 단어의 첫글자를 대문자로 표기하고 나머지를 소문자로 표기합니다. 낙타등같다고 해서 붙은 이름
- 파스칼 표기법(GoodMorning, HojaeIsAngry): 각 단어의 첫글자를 대문자로 표기하고 나머지는 소문자로 표기. 파스칼언어에서 사용된 표기법이라 이름이 이럼.
- 밑줄 표기법(goodmorning, hojae_is_angry): 모든 단어를 소문자로 표기하고 단어사이를 밑줄()로 구분
예약어
| break | case | catch | class | const | continue |
| debugger | default | delete | do | else | export |
| extends | false | finally | for | function | if |
| import | in | instanceof | new | null | return |
| super | switch | this | throw | true | try |
| typeof | var | void | while | with | yield |
| await | enum | implements | package | protected | interface |
*색칠된 단어들은 향후 ECMAScript 확장을 위해 예약된 키워드
자바스크립트에서 미리 정의된 전역변수&전역함수가 존재. 오류가 발생하진않지만 자바스크립트가 가진 본래의 기능을 사용할 수 없기 때문에 사용하지않는 편이 good
| arguments | Array | Boolean | Date |
| decodeURI | decodeURIComponent | encodeURI | encodeURIComponent |
| Error | eval | EvalError | Function |
| Infinity | isFinite | isNAN | JSON |
| Math | NaN | Number | Object |
| parseFloat | parseInt | RangeError | RefferenceError |
| RegExp | String | SyntaxError | TypeError |
| undefined | URIError |
데이터 타입
프로그래밍 언어의 기본구성요소인 데이터 타입은 숫자나 문자열처럼 변수에 저장하는 데이터 종류를 의미합니다.
C나 Java같은 프로그래밍언어에는 정수타입변수, 부동소수점타입 변수 등이 있어 변수의 타입과 일치하는 데이터만 저장할 수 있는데, 이를 정적타입언어 라고 부릅니다. 하지만 자바스크립트는 변수에 타입이 없어 모든 타입의 데이터를 변수에 저장할 수 있습니다.
ex) 변수 a에 3이라는 숫자를 대입했지만 그 후에도 "원주"라는 문자열을 대입할 수 있습니다. 즉 JS에서는 같은 변수에 숫자나 문자열 같은 다양한 타입의 데이터를 넣을 수 있습니다. 이처럼 데이터 타입을 동적으로 바꿀 수 있는 언어를 동적타입언어라고 부릅니다.
데이터타입은 크게 두가지로 나뉩니다. 원시타입, 객체타입 입니다.
원시타입은 숫자,문자열,논리값,특수한값(undefined, null),심벌 이 있습니다.
객체타입은 변수 여러개가 모여 만들어진 복합데이터 타입으로, 객체안에 저장된값을 바꿀 수 있습니다. 배열, 함수, 정규 표현식 등이 객체입니다.
숫자
JS는 대다수의 프로그래밍언어와 달리 숫자타입이 없어 모두 64비트 부동소수점(C나 Java에서의 double타입)으로 표현합니다.
프로그램에 직접 작성할 수 있는 상수값은 리터럴(literal)이라 하며, 정수/부동소수점 리터럴이 있습니다.
문자열
JS는 전세계에서 사용하는 문자를 대부분 표현할 수 있습니다. 문자열 리터럴은 작은따옴표(')나 큰따옴표(")를 문자열 앞뒤에 붙여서 표현합니다.
"안녕하세요"
'경기도 안양'
""
'3.14'
여기서 ""는 아무것도 포함하지 않는, 빈 문자열입니다.
작은따옴표로 감싸진 문자열은 큰따옴표로 묶어서 표현할 수 있고 반대도 가능합니다
"I'm going to home"
JS를 html요소에 끼워넣을 때는 html에는 큰따옴표, JS코드에는 작은 따옴표를 사용해 구분하는게 좋습니다
줄바꿈문자와 탭문자 등은 그대로 추가할 수가 없어 이스케이프시퀀스로 표현해야합니다.
역슬래시()뒤에 특정기호를 표기한 형태를 띠며 이를 이용해 특정 코드나 문자를 표현할 수 있습니다.
'I\'m going to home'
->ECMAScripit6부터는 백틱(`)을 작은따옴표/큰따옴표 대신 사용해 일반적인 줄바꿈이 가능합니다.
논리값
논리값은 조건식이 참인지 거짓인지 표현하기 위해 사용하는 값으로, true와 false가 있습니다.
x == 2
이 표현식은 x 값이 2와 같은지 판별하는 조건식입니다. ==는 좌변과 우변값이 같음을 표현하는 관계연산자입니다. JS에서는 논리값을 주로 제어구문(if/else문, while문, do/while문, for문)에서 주로 사용합니다.
특수한값
값이 없음 을 표현하는 null과 undefined가 있습니다.
undefined는 정의되지 않음을 뜻하며
- 값을 할당하지 않은 변수의 값
- 없는 객체의 프로퍼티를 읽으려고 시도했을때 값
- 없는 배열의 요소를 읽으려고 시도했을때 값
- 아무것도 반환하지 않는 함수가 반환하는 값
- 함수를 호출했을 때 전달받지 못한 인수의 값
이 undefined가 됩니다.
자바스크립트 엔진이 변수를 undefined로 초기화한 것입니다.
null은 아무것도 없음 을 값으로 표현한 리터럴입니다. 주로 프로그램에서 무언가를 검색했지만 아무것도 찾지 못했을때 아무것도 없다는 것을 전달하기 위한 값으로 사용됩니다.
ECMAScript 6 부터 추가된 데이터 타입
ECMAScript 6부터 심벌(Symbol)과 템플릿 리터럴(Template literals)라는 추가된 데이터 타입이 있습니다.
심벌은 ECMAScript 6 부터 추가된 몇가지 가능(이터레이터, instanceof 재정의, 메서드의 다양한 확장방법 등)을 이해하기 위해 필요한 기초 지식이며, 템플릿리터럴은 복잡한 문자열 처리를 간결하게 표현하도록 돕습니다.
Symbol
심벌은 새로 추가된 원시값으로, 자기 자신을 제외한 그 어떤 값과도 유일무이한 값입니다.
심벌은 Symbol()을 사용해 생성합니다.
심벌은 이름이 같아도 값이 항상 다릅니다.
var a = Symbol();
var b = Symbol();
console.log(a == b); 하면 false가 나옵니다.
var c = Symbol("ㅎㅇ") 이런식으로 심벌에 설명을 덧붙일 수 있습니다.
설명을 확인하고싶다면
console.log(c.toString()); toString()메서드를 통해 확인할 수 있습니다.
Symbol외에도 Symbol.for을 사용가능합니다.
템플릿 리터럴
템플릿은 일부만 변경해 반복하거나 재사용가능한 틀을 말합니다. 템플릿리터럴을 사용하면 표현식의 값을 문자열에 추가하거나 여러줄의 문자열을 표현할 수 있습니다.
문자열 리터럴에서 줄바꿈문자를 표현할땐 이스케이프시퀀스(\n)을 사용했지만, 백틱()을 통해 템플릿리터럴을 사용하면 일반적인 줄 바꿈 문자를 사용할 수 있습니다. 줄바꿈을 하고싶은데, 이스케이프시퀀스를 사용하면 'This is \napple.' 즉 \n을 사용해야하지만 템플릿리터럴을 사용하면 This is
apple.` 하면 알아서 줄바꿈이 된다. 물론 템플릿리터럴에서도 이스케이프시퀀스 사용은 가능하다.
보간표현식
템플릿리터럴 안에 플레이스 홀더${...}를 넣을 수 있다.
자바스크립트는 플레이스홀더 안에 있는 ... 부분을 표현식으로 간주해 평가합니다. 이를 활용해 문자열 안에 변수나 표현식의 결과값을 삽입할 수 있습니다. 예를 들어
var a = 2, b = 3;
console.log(${a} + ${b} = ${a+b}) => 2 +3 =5
ECMAScript 5 까지는 문자열에 변수값을 삽입할 때 더하기(+)연산자로 문자열을 연결했지만 보간표현식을 통해 더 보기쉽게 작성할 수 있습니다.
객체의 기초 - 객체 리터럴
자바스크립트에서는 원시타입을 제외한 모든 값이 객체입니다.
객체는 이름과 값을 한 쌍으로 묶은 데이터를 여러개 모은것입니다. 즉 객체는 데이터들을 하나로 모은 복합 데이터로, 연관배열 또는 사전이라고 부릅니다.
원주 를 표현하는 객체
나이: 27;
사는곳: "안양";
객체 안의 데이터 하나(이름과 값의 쌍)를 객체의 프로퍼티 라 부릅니다.
객체리터럴로 객체 생성하기 & 프로퍼티 추가와 삭제
var 원주 = {나이: 27;, 사는곳: "안양"};
{...}부분이 객체 리터럴이며 변수 원주에 대입하고 있습니다.
프로퍼티 이름과 값은 :로 구분하고 중괄호{} 안에 있는 프로퍼티들은 쉼표(,)로 구분합니다. 프로퍼티이름으로는 모든 식별자와 문자열리터럴을 사용할 수 있습니다.
변수에 대입된 객체안의 프로퍼티 값을 읽거나 쓸땐 마침표(.)연산자 혹은 대괄호[]연산자를 사용합니다.
원주.나이 // 27
원주["사는곳"] // 안양
객체에 없는 프로퍼티를 사용하면 undefined가 나타납니다.
원주.몸무게 // undefined
선언되지 않은 변수를 읽으려할때 오류가 나는 것과 대조적입니다.
객체 리터럴 안에 아무것도 만들지 않으면 빈 객체로 생성됩니다.
var obj = {};
console.log(obj) // {}
기존에 없던 프로퍼티 이름에 값을 대입하면 새로운 프로퍼티가 추가됩니다.
원주.머리 = "곱슬";
console.log(원주); // {나이:27, 사는곳:"안양", 머리:"곱슬"}
delete연산자를 사용하면 프로퍼티 삭제 가능합니다
delete.원주.나이; 이런식으로.
이와같이 JS의 객체는 실행중 프로퍼티를 자유롭게 추가/삭제할 수 있습니다.
in연산자로 프로퍼티 있는지 확인하기
in연산자를 통해 객체에 특정 프로퍼티가 있는지 확인할 수 있습니다. 포함되어있을 경우 true를 반환하고 아닐경우 false를 반환합니다.
var card = { suit: "하트", rank: "A" };
console.log("suit" in card); // true
console.log("color" in card); // false
객체 리터럴 예제
객체 리터럴을 사용하는 3가지 예
-
좌표평면의 점을 표현하는 객체
var p = { x: 1.0, y: 2.5 }; -
원을 표현하는 객체
var circle = {
center: { x: 1.o, y: 2.0 }, //원의 중점을 표현하는 객체
radius: 2.5 //원의 반지름
};위와 같이 객체의 프로퍼티 값으로 객체를 대입할 수 있습니다.
이때 원 중점의 x좌표는 다음과 같이 마침표 뒤에 프로퍼티 이름을 연결해 표현할 수 있습니다.
circle.cetner.x // 1.0 -
회원 정보를 표현하는 객체
var person = {
name: "이정규",
age: 18,
sex: "남",
married: false
};프로퍼티에 저장된 값의 타입이 함수일 경우 그 프로퍼티를 메서드라고 부릅니다. 메서드는 4.2.13절에서 설명
객체는 참조 타입
객체타입의 값을 변수에 대입하면 그 변수에는 객체의 참조(메모리에서의 위치정보)가 저장됩니다. 이때의 변수 상태를 '객체를 참조하고 있다'라고 합니다. 앞서말한 변수 원주 에 나이와 사는곳 이 저장되어 있음을 말합니다.
변수에 저장된 객체의 참조는 다른 원시 값과 마찬가지로 다른 변수에 저장할 수 있습니다.
var a = 원주;
그러면 변수 a가 원주 객체를 참조하게 되므로 원주 객체를 읽거나 수정할 수 있습니다.
console.log(a.나이); // 27
a.나이 = 99;
console.log(a.나이); // 99
console.log(원주.나이); // 99
처음 해 본 자바스크립트 스터디(살면서)
내가 맡아서 한 파트 중 Symbol은 아무리봐도 이해가 안간다
계속 공부하면서 알아가야할거가틈
일단 그냥 다 중요해보여서 책 내용을 거의 옮기다시피한듯
다른분들꺼 보면 훨 깔끔하게 정리도 잘했다
함께한 스터디원분들이 정리한 내용:
