1. 변수
- 프로그램에서 사용하기 위해 값을 담아놓는 바구니
- 일반적으로 변수는 프로그램 안에서 값이 달라질 수 있는 데이터를 가리킴
- 하지만 프로그램 안에서 계속 값이 바뀌지 않더라도 변수로 만들어서 사용함 (상수 변수라고 함)
변수 이름 지정하기
- 변수 이름을 지정하는 것은 값을 저장해 놓은 메모리 공간에 문패를 붙이는 것과 같다
- 프로그램 안에서 사용할 값이 메모리의 어느 위치에 저장되어 있는지 신경쓰지 않고 문패 이름, 즉 값을 넣어놓은 변수 이름만 기억해 놓으면 됨
- 변수 이름을 쉽게 가져와서 그 안의 값을 사용할 수도 있고, 같은 위치에 바뀐 값을 저장할 수도 있음
- 따라서 변수 이름은 서로 다르게 만들어야 함!
변수 이름 정하는 규칙
- 변수 이름은 숫자로 시작할 수 없고 이름 안에 공백이 포함되어 있으면 안 된다
- current, _current, $current // 사용 가능
- 25current, curr ent, current* // 사용 불가능
- 자바스크립트는 영문자의 대소문자를 구별한다
- current, Current, CURRENT // 모두 다른 변수
- 한 단어로 이루어진 변수를 사용할 때에는주로 소문자를 사용
- current, age, sum
- 두 단어 이상으로 이루어진 변수는 언더바(_)로 연결하거나 중간에 대문자를 섞어 사용
- current_year, total_area // 스네이크 표기법
- currentYear, totalArea // 카멜 표기법
- 자바스크립트에서 미리 정해 놓은 예약어(예: let 등) 는 변수 이름으로 사용할 수 없음
- 무의미한 변수 이름은 피한다
var, let, const
- ECMAScript 2015(ES6) 이전까지는 var를 사용해 변수를 선언했음
- 지금은 자바스크립트 역할이 커지면서 var로는 부족해서 let과 const를 사용하게 됨
| 키워드 | 선언하지 않고 사용하면? | 재선언 | 재할당 |
| var | 오류 없음 | O | O |
| let | 오류 발생 | X | O |
| const | 오류 발생 | X | X |
[선언 단계 - 일시적 사각지대] → [초기화 단계] → [할당 단계]
* 초기화 단계까지 거쳤으면 access가 가능함
var
- 자바스크립트 엔진이 가동될 때, 선언 단계에서 초기화 단계도 함께 일어남
* var bar;로 선언해 두면, bar = undefined로 초기화 됨
let
- 자바 스크립트 엔진이 가동될 때, let은 선언 단계에서 머무름
- 코드를 만나기 전까지 초기화 단계가 일어나지 않음
* let bar;로 선언해 두면, bar = undefined로 초기화 됨
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let foo = 1; { console.log(foo); //ReferenceError: Cannot access 'foo' before initialization at 13_07.html:13:25 let foo = 2; //console.log의 foo는 전역변수 foo(==1)을 찾아가는게 아니라 이 foo에 접근하려고 함. 근데 let은 아직 초기화가 되지 않았기 때문에 에러가 남 } </script> </body> </html>
* var로 선언된 전역 변수는 window 객체의 프로퍼티가 되며, let / const로 선언된 변수는 그렇지 않음
2. 자료형
- 프로그램에서 처리하는 자료의 형태 (예) 3을 숫자로 처리할지, 문자로 처리할지
- 자료형, 자료 유형, 데이터 타입 등으로 부름
- 자바스크립트 자료형은 크게 ‘원시형’과 ‘복합형’로 나눔
- 원시형(primitive type) : 하나의 값만 가지고 있는 자료형
- 복합형 : 원시형 외의 모든 자료형
| 자료형 | 설명 | |
| 기본형 | number(숫자) | 따옴표 없이 표기한 숫자로 나타냄 |
| string(문자열) | 작은따옴표(')나 큰따옴표(")로 묶어 나타냄 | |
| boolean(논리형) | 참(true)과 거짓(false)이란 두 가지 값만을 가진 유형 | |
| undefined | - 자료형을 지정하지 않았을 때의 유형 - 변수를 선언하고 값을 정의하지 않은 경우 |
|
| null | - 값이 유효하지 않았을 때의 유형 | |
| 복합형 | array(배열) | - 하나의 변수에 여러 값을 저장하는 유형 |
| object(객체) | - 함수와 속성이 함께 포함된 유 | |
typeof() 함수
- 자바스크립트 안에 미리 만들어져 있는 함수로, 괄호 안에 값이나 변수를 넣으면 어떤 자료형인지 알려준다.
typeof(값 또는 변수)
숫자형 (number)
- C나 자바 같은 프로그래밍 언어에서는 정수와 실수를 명확히 구별하고 정수도 크기에 따라 다른 자료형을 사용함
- 하지만 자바스크립트에서는 정수와 실수를 함께 묶어서 숫자형이라고 함
- 최근에 BigInt라는 자료형이 추가됨 : 기존의 자바스크립트 숫자형의 한계를 넘는 큰 정수를 다루기 위한 자료형
문자열(string)
- 작은따옴표(')나 큰따옴표(")로 묶은 데이터
- 큰따옴표이든, 작은따옴표이든 문자열의 앞뒤에 붙이는 따옴표는 같아야 함
- 최근에는 작은 따옴표(‘ ‘)를 많이 사용하는 추세
특수 기호 표시하기
- 특수 기호를 표시하려면 백슬래시(\) 다음에 기호 사용
(예) 문자열이 아니라 순수하게 따옴표를 표시하고 싶다면 \” 처럼 써야 함
| \ddd (여기서 d는 숫자) | 8진수 문자 |
| \xddd | 16진수 문자 |
| \\ | 백슬래시 문자 |
| \' | 작은따옴표 문자 |
| \" | 큰따옴표 문자 |
| \b | 백스페이스 문자 |
| \f | 폼 피드 문자 |
| \n | 줄 바꿈 문자 |
| \r | 캐리지 리턴 문자 |
| \t | 탭 문자 |
문자열에 접근하기
원시 유형에서 메서드 사용하기
- 자료형 중 단순히 값만 가지고 있을 때 → 원시 유형(primitive type)
- 원시 유형에서도 프로퍼티와 메서드를 사용할 수 있다.
str = “hello”
str.length
str은 문자열(string)인데, length 프로퍼티는 어디에서 온 것일까?
- 숫자형과 논리형, 문자열 유형은 별도로 객체가 만들어져 있다.
- Number(원시유형 : number), Boolean(원시유형 : boolean), String(원시유형 : string) 객체 (래퍼 객체)
오토박싱(autoboxing)
- 필요할 때에만 임시로 객체로 바꿔 사용하고 사용이 끝나면 다시 원시 유형으로 되돌아오는 것
- number 등 원시 유형에서 프로퍼티, 메서드를 사용 시 일시적으로 원시 유형을 해당 객체로 변환
- 프로퍼티나 메서드의 사용이 끝나면 해당 객체는 메모리에서 사라짐
문자열 관련 메서드
| 메서드 이름 | 기능 |
| length | - 형태 : 문자열.length - 문자열 길이 반환 |
| charAt() | - 형태 : 문자열.length(위치) - 위치를 매개변수로 넣어, 해당 위치의 문자 반환 |
| indexOf() | - 형태 : 문자열.indexOf(문자열) - 부분 문자열의 위치 찾을 때 사용 - 괄호 안의 문자열이 나타난 위치 반환 - 찾는 문자열이 없으면 -1 반환 |
| startsWith() | - 형태 : 문자열. startsWith(문자 또는 문자열) - 문자열이 특정 문자나 문자열로 시작하는지 확인 - 문자나 문자열에서 영문자의 대소문자를 구별하므로 주의 |
| endsWith() | - 형태 : 문자열. endsWith(문자 또는 문자열) or 문자열.endsWith(문자 또는 문자열, 길이) - 문자열과 함께 길이를 지정하여 사용할 수 있음 - 문자열이 특정 문자나 문자열로 끝나는지 확인 - 문자나 문자열에서 영문자의 대소문자를 구별하므로 주의 |
| includes() | - 형태 : 문자열.includes(문자 또는 문자열) - 문자열에 특정 문자나 문자열이 있는지 확인 - 대소문자 구별하므로 주의 |
| trim() | - 형태 : 문자열.trim() - 문자열의 앞뒤 공백 제거 |
| trimStart() | - 형태 : 문자열.trimStart() - 문자열의 앞쪽 공백 제거 |
| trimEnd() | - 형태 : 문자열.trimEnd() - 문자열의 뒤쪽 *공백 제거 |
| toUpperCase() | - 형태 : 문자열.toUpperCase() - 영문자 문자열의 경우, 문자열을 모두 대문자로 변환 |
| toLowerCase() | - 형태 : 문자열.toLowerCase() - 영문자 문자열의 경우, 모두 소문자로 변환 |
| substring() | - 형태 : 문자열.substring(시작 위치) or 문자열.substring(시작 위치, 끝 위치) - 시작 위치부터 끝 위치의 직전까지 추출해서 반환 - 끝 위치를 지정하지 않으면 시작 위치부터 문자열 끝까지 추출해서 반환함 |
| slice() | - 형태 : 문자열.slice(시작 위치) or 문자열.slice(시작 위치, 끝 위치) - 시작 위치부터 끝 위치의 직전까지 추출해서 반환 - 끝 위치를 지정하지 않으면 시작 위치부터 문자열 끝까지 추출해서 반환함 - slice() 메서드는 음수를 사용해 위치를 지정할 수 있음 - 음수로 지정시 문자열의 끝에서부터 위치를 찾기에, 문자열을 뒤에서부터 자를 때 편리 |
| split() | - 형태 : 문자열.split(구분자) - 문자열에서 구분자를 기준으로 문자열을 나누고 배열을 반환 - ""으로 나누면 문자 하나하나 분리 가능 |
*공백 : [Spacebar]를 눌러 입력한 공백, [Tab]을 눌러 입력한 탭, 줄을 바꾸기 위해 사용한 이스케이프 문자(\n, \r) 등을 말함
템플릿 리터럴
- 문자열과 변수, 식을 섞어서 하나의 문자열을 만드는 표현 형식
- ES6 이전에는 +를 사용해서 식이나 변수와 연결했음 → 변수나 식이 많아질수록 오타가 나올 확률이 높음
- 백팃(` `)기호 사용 (백팃을 눌렀는데 ₩로 표시된다면 영문 상태로 바꾸고 백팃 입력)
- 변수나 식이 들어간다면 ${ }로 묶고, 태그나 띄어쓰기, 이스케이프 문자를 그대로 표시할 수 있기 때문에 사용이 편리
name = "백두산"
classroom = 205
console.log(`${name}님, ${classroom}호 강의실로 입장하세요.`)
논리형
- 참(true)이나 거짓(false) 값을 표현하기 위한 데이터 유형
- 불린boolean 유형이라고도 함
- 사용할 수 있는 값은 true와 false
- 논리형 값은 지정한 조건을 체크하는 조건식에서 많이 사용함
truthy와 falsy
- true와 false 라는 명확한 값 외에 참과 거짓을 판별하는 방법
- truthy: true로 인정할 수 있는 값
- falsy: false로 인정할 수 있는 값
- falsy 값을 제외한 모든 값은 truthy함. 즉 true로 침!
- NaN
- 숫자가 아님(Not a Number)을 나타냄
- 변수를 선언만 하고 값이 할당되지 않은 상태에서 그 변수를 더하거나 빼는 연산에 사용하면 NaN이 됨
/* falsy */
0 // 숫자 0
"" // 빈 문자열
NaN
undefined
null
undefined과 null
| undefined | null |
| 선언만 하고 할당하지 않음 | null 값을 할당함(유효하지 않은 값) |
| 주로 사용자의 실수에 의해 발생 | 주로 사용자가 의도적으로 null 을 할당 |
| 값이면서 동시에 자료형 | |
배열
• 하나의 변수에 여러 값을 할당할 수 있는 형태
• 대괄호([ ])로 묶고, 그 안에 값을 나열함. 각 값은 쉼표(,)로 구분
• 대괄호 안에 아무 값도 없으면 ‘빈 배열’이라고 하고, 이것 역시 배열
인덱스를 통해 배열에 저장된 값에 접근할 수 있으며 인덱스는 0부터 시작해서 0,1,2,3... 으로 셈
배열명 = [값1, 값2, ...]
emptyArr = [] // 빈 배열
colors = ["red", "blue", "green"] // 문자열 배열
arr = [10, "banana", true] // 여러 자료형으로 구성된 배열| 메서드 이름 | 기능 |
| length | - 형태 : 문자열.length - 문자열 길이 반환 |
| from() | - 형태 : Array.from(문자열) - 순회 가능 객체(Map, Set과 같은 객체) 또는 유사 배열 객체(length 속성과 인덱싱된 요소가 있는 객체)의 경우 Array.from()을 사용하면 배열(Array)를 만들 수 있음 |
| join() | - 형태 : 배열.join(구분자) - 구분자로 공백없이 “”를 사용하면 배열 요소를 연결해서 문자열을 만듦 |
| forEach() | - 형태 : 배열.forEach(값) or 배열.forEach(값, 인덱스) or 배열.forEach(값, 인덱스, 배열) - 배열을 순회함 - for문은 중간에 break문을 사용해 멈출 수 있지만, forEach는 끝까지 다 순회해야 끝 |
| concat() | - 형태 : 배열.concat(배열 또는 값, 배열 또는 값, ...) - 기존 배열에 또 다른 배열 혹은 값을 합쳐 새로운 배열을 만듦 - 해당 메서드를 쓰는 방법 외에, '전개 연산자(...)'를 쓰는 방법도 있음 let vegitable = ["양상추", "토마토", "피클"] let cheese = ["모짜렐라", "슈레드"] let cheeseBurger = ["빵", ...vegitable, ...cheese] cheeseBurger // ["빵", "양상추", "토마토", "피클", "모짜렐라", "슈레드"] |
| reverse() | - 형태 : 배열.reverse() - 배열 요소의 순서를 거꾸로 바꾸는 메서드 (값의 크기와는 무관) |
| sort() | - 형태 : 배열.sort(정렬 함수) - 정렬 함수가 존재하는 경우, 배열 요소는 정렬 함수의 반환 값에 따라 정렬됨 - 정렬함수(a,b)의 반환값이 0보다 작은 경우 : a를 b보다 작은 인덱스로 정렬함 - 정렬함수(a,b)의 반환값이 0인 경우 : 정렬 없음 (변경하지 않음) - 정렬함수(a,b)의 반환값이 0보다 큰 경우 : a를 b보다 큰 인덱스로 정렬함 |
| push() | - 형태 : 배열.push(값) - 배열의 맨 끝에 값 추가 |
| pop() | - 형태 : 배열.pop() - 배열의 맨 끝에 있는 값 제거 |
| unshift() | - 형태 : 배열.unshift(값) - 배열의 맨 앞에 값 추가 * unshift() 메서드는 배열에서 맨 앞의 요소를 변경하기 때문에 인덱스 변경으로 인하여 배열의 요소가 많거나 요소의 내용이 복잡할수록 메서드의 실행 시간이 좀 더 길어짐 |
| shift() | - 형태 : 배열.shift() - 배열의 맨 앞에 있는 값 제거 * shift() 메서드는 배열에서 맨 앞의 요소를 변경하기 때문에 인덱스 변경으로 인하 배열의 요소가 많거나 요소의 내용이 복잡할수록 메서드의 실행 시간이 좀 더 길어짐 |
| splice() | 1. 형태 : 배열.splice(위치) - '위치'부터 끝까지 요소를 삭제 2. 형태 : 배열.splice(위치, 숫자) - '위치'에서 '숫자' 개수만큼 요소 삭제 3. 형태 : 배열.splice(위치, 숫자, 값) - '위치'에서 '숫자' 개수만큼 요소를 삭제한 후 '값' 추가 |
| slice() | 1. 형태 : 배열.slice(위치) - '위치'부터 끝까지 요소를 추출 2. 형태 : 배열.slice(위치 1, 위치 2) - 위치 1부터 위치 2 직전까지 추출 |
| map() | - 형태 : 배열.map(함수(값)) - 각 배열 요소에 똑같은 함수를 실행한 후 그 결과를 새로운 배열로 반환 |
| filter() | - 형태 : 배열.filter(함수(값)) or 배열.filter(함수(값, 인덱스)) or 배열.filter(함수(값, 인덱스, 배열)) - 특정 조건에 맞는 요소만 골라내는 메서드 |
| reduce() | - 형태 : 배열.reduce(함수(누산기, 현잿값, 인덱스, 원래 배열), 초깃값) - 배열 요소에 차례로 함수를 실행하면서 결괏값을 하나로 누적함 - 초깃값 생략 가능하며, 생략 시 배열의 첫 번째 값을 초깃값으로 사용 |
심볼
- ES6에 새롭게 추가된 원시 유형의 자료형
- 심볼의 가장 큰 특징은 유일성을 보장한다는 것
- 심볼은 객체 프로퍼티의 키로 사용할 수 있음
- 심볼을 만들 때는 Symbol() 함수 사용
- 심볼은 한 번 만들면 변경할 수도 없고, 같은 값을 가진 심볼을 만들 수도 없음
let var1 = Symbol()
let var2 = Symbol()
// var1과 var2는 똑같아 보이지만, 심볼은 유일한 값이기 때문에 두 변수는 같지 않다
var1 === var2 // false
- 심볼을 키로 사용할 때에는 [키]처럼 대괄호로 묶어서 표현
- 키에 접근할 때도 마침표가 아닌 대괄호 사용
let id = Symbol();
const member ={
name : "오거폰",
cute : 550,
[id] : 1234
};
member; // {name : "오거폰", cute : 550, Symbol(): 1234}
member[id]; // 1234
member.id = 5678;
member; // {name : "오거폰", cute : 550, id: 5678, Symbol(): 1234}
id = Symbol();
member[id] = 5678;
member; // {name : "오거폰", cute : 550, id: 5678, Symbol(): 1234, Symbol(): 5678}
심볼 관련 메서드
| 메서드 | 기능 |
| Symbol.for(키) | - 키를 인수로 받고 전역 심벌 레지스트리를 뒤져 키에 해당하는 심벌을 찾음 - 레지스트리에서 키에 맞는 심벌이 있으면 해당 심벌을 반환 - 레지스트리에서 키에 맞는 심벌이 없으면 새로운 심벌을 만들어 반환함(같은 키 => 같은 심벌!) |
| Symbol.keyFor(심벌값) | - 심벌값을 인수로 받아서 전역 심벌 레지스트리를 뒤져서 심벌값의 키를 찾음 |
3. 형변환
- 자바스크립트는 다른 언어와 다르게 프로그램 실행 중에 자료형이 변환되는 언어
- 자동으로 형이 변환될 때에도 있음
→ 이런 상황을 미리 알아 두지 않으면 오류를 발생시키기도 하고, 처음에 예상했던 것과 다른 결과가 나올 수도 있음
| C 언어나 자바 등 일반 프로그래밍 언어 | 자바스크립트 |
| - 변수를 선언할 때 변수의 자료형을 결정 - 자료형에 맞는 값만 변수에 저장 가능 - 자료형으로 인한 프로그램의 오류 방지 가능 |
- 변수를 선언할 때 자료형 지정하지 않음 - 변수에 값을 저장할 때 자료형 결정 - 편리하긴 하지만 변수를 일관성 있게 유지하기 힘들다 |
암시적 형 변환
- 변수에 값을 저장할 때 자료형이 결정되기도 하지만 연산을 할 때 자료형이 자동으로 변환됨 (주의!)
- 문자열을 사칙 연산에 사용하면 자동으로 숫자형으로 변환됨
- 숫자와 문자열을 연결하면 숫자가 문자열로 변환됨
+ 연산자
- + 기호 앞이나 뒤에 문자열이 있으면 연결 연산자
- + 기호 앞뒤에 숫자가 있으면 더하기 연산자
one = "20" // 문자열
two = 10 // 숫자형
-, *, / 연산자
기호 앞이나 뒤에 문자열이 있으면 숫자로 인식함
one + two // "2010”
one - two // 10
명시적 형변환
Number(), parseInt(), parseFloat()
- 숫자형으로 변환
- partseInt() 함수: 괄호 안의 값을 정수로 변환
- parseFloat() 함수 : 괄호 안의 값을 실수로 변환
- 문자열뿐만 아니라 null과 undefind를 포함해서 모든 자료형을 숫자로 변환할 수 있음
Number() 함수의 변환 규칙
| 기존 유형 | 변환 결과 |
| true | 1 |
| false | 0 |
| 숫자 | 숫자 |
| null | 0 |
| undefined | NaN |
| 정수 문자열 | 정수(맨 앞에 0이 있으면 제거) |
| 실수 문자열 | 실수(맨 앞에 0이 있으면 제거 |
| 16진수 문자열 | 10진수 |
| 빈 문자열 | 0 |
| 위 상황 외 | NaN |
toString(), String()
toString()
- null 데이터형과 undefined 데이터형을 제외한 데이터형을 문자열 데이터로 변환
- 원랫값 뒤에 마침표를 붙이고 함수를 작성
- 숫자를 문자열로 변환할 때는 basis 옵션을 사용해 숫자가 10진수인지, 2진수인지 같이 지정
String()
- null 데이터형과 undefined 데이터형을 포함해서 문자열 데이터로 변환
- String() 함수의 괄호 안에 값을 넣어서 변환
- null이면 ‘null’로, undefined이면 ‘undefined’로 변환
- 그 외에는 toString() 함수와 같음
Boolean()
- 다른 유형의 데이터를 논리형 데이터로 변환
- 함수의 괄호 안에 원랫값을 넣음
논리형으로 변환할 때의 규칙
| true 값이 되는 데이터 | false 값이 되는 데이터 | |
| 숫자형 | 0이 아닌 값 | 0 |
| 문자열 | 빈 문자열이 아닌 모든 문자열 | 빈 문자열 |
| undefined | - | undefined |
자료형 비교
==(!=)와 ===(!==)의 차이
- ==(!=) : 암시적 형 변환이 일어나 값만 비교하게 됨
- ===(!==) : 암시적 형 변환이 일어나지 않아 자료형까지 비교하게 됨
'언어 > 자바스크립트(Java Script)' 카테고리의 다른 글
| [자바스크립트] DOM(문서 객체 모델) (0) | 2024.07.30 |
|---|---|
| [자바스크립트] 스코프 (0) | 2024.07.30 |
| [자바스크립트] 개발 환경 세팅 (0) | 2024.07.30 |
| [자바스크립트] 기본 사항 (0) | 2024.07.30 |
| [자바스크립트] 함수 (0) | 2024.07.30 |
댓글