요기보드3   필수기초 선택과목 요기보드 그누보드 로그인

자바스크립트


변수, 상수, 배열

■ 변수(variable)
php뿐만 아니라 모든 프로그램 언어에는 '변수' 라는 아주 중요한 개념이 있어.
변수란 임시로 문자나 숫자 등을 저장하는 장소의 이름인데 var 또는 let 이라는 키워드를 사용해서 선언을 하고 사용해.
변수명을 정할 때 주의할 점은 변수명은 모두 [소문자]를 사용하라는 거야.
대문자를 사용할 수도 있지만 자바스크립트에서 변수는 대문자와 소문자를 구분해. 즉, a와 A는 다른 변수 이름인 거지.
대부분 영문 소문자와 숫자, 그리고 언더바(_)만 사용하는 게 일반적이야. 변수 이름을 정할 때 규칙 꼭 기억해 두자고..
  • 변수는 let 또는 var 로 정의
  • 변수명은 영문, 숫자, _ , $ 4개만 사용
  • 변수명 첫 글자는 꼭 영문으로
  • 변수명의 대소문자를 다른 문자로 인식함
변수 이름이 좀 길어서 두 단어를 합친 이름으로 정할 때는 "낙타형(camelCase)" 방식으로 기록하는 것을 추천해.
낙타형이란 마치 낙타의 등 처럼 소문자로 시작해서 뒷 단어의 첫글자는 대문자로 기록하는 방법으로 변수 이름을 쉽게 구분하기 좋아서 자바스크립트 이외의 다른 언어에서도 많이 사용하는 방식이야.
예를들어 아래와 같이 변수 이름을 정하는 거지.
myDog
yourCat
변수를 선언할 때는 아래와 같은 방법을 사용해.
let myDog = '해피'
var yourCat = '나비'
let name
var tel
이렇게 변수명과 초기값을 넣어도 되고, 그냥 변수이름만 먼저 만들고 값은 나중에 넣어도 돼.
그런데 위에서 선언하는데 let 을 쓰기고 하고, var 를 쓰기도 했네?
둘 다 돼.
그러나 let 이 더 최신 문법이야. 여러분은 되도록 let 을 사용해서 변수를 만들도록 해.
var 도 거의(?) 똑같은데 옛 방식이야.
그래도 알고 있어야 하는게 인터넷에서 검색하다 보면 자바스크립트의 예제는 var 를 사용하는게 훨씬 많거든.
왜냐하면 오래동안 사용되었으니까..
let 으로 만드는 변수와 var 로 만드는 변수에는 약간의 차이가 있는데, 그건 고수가 되면 알게 될거야.
일단 초보 일때는 그냥 똑같다고 생각하고 let 위주로 사용하면 될거야.

■ 상수(constant)
변수는 새로운 값을 다시 넣으면 값이 변하는데 반해 상수(constant)는 한번 값을 넣으면 변하지 않아야 할때 사용해.
많이 사용되지는 않지만 그럴 필요가 있을 때도 있거든.
자주 사용하지 않으니 대충 넘어갈께. 선언하는 방법은 다음과 같아.
const pi = 3.14
■ 배열 (array)
'배열' 은 하나의 변수 이름 안에 여러개의 값을 저장할 수 있는 특수한 용도의 변수야.
예를들면 animal(동물) 이라는 변수 안에 개, 소, 말, 닭 을 모두 넣을 수 있는거지.
자바스크립트에서 변수 만큼이나 유용하게 많이 사용하는게 '배열'이야.
배열을 선언하고 값을 넣는 방법은 다음과 같아.
let animal = ['개', '소', '말', '닭']
또는 들어갈 값이 아직 정해지지 않았으면, 아래와 같이 배열 이름만 먼저 선언해 두고 나중에 값을 넣을 수도 있어.
let animal = [ ]

또는 아래와 같이 선언해도 돼
(잘 안쓰는 방법이지만 다른 사람의 코드를 이해하기 위해 알고는 있어야 겠지)

let animal = new Array()
배열을 만들고 나면 그 안에 갚을 넣을 때는 어떻게 할까?
대괄호([ ])와 배열 순서를 이용해서 값을 넣거나 변경, 삭제할 수 있어.
이때 배열의 순서는 1 이 아니고 0 부터 시작해 (아주 중요하고, 다른 언어들도 대부분 마찬가지야.)
animal[0] = '강아지'; //- 첫번째 '개' 가 '강아지'로 변경됨
animal[1] = '송아지'; //- 두번째 '소' 가 '송아지'로 변경됨
마지막에 추가하려면?
animal[4] = '쥐'
이제 배열의 5번째 칸에 '쥐' 가 저장될거야. (배열 순서는 0 부터 시작한다고 했으니 [4] 면 5번째 칸이 되겠지?)
그런데 현재 배열에 몇 개가 들어 있는지 모르는데 추가해야 한다면?
이때는 push 라는 메소드(나중에 설정)를 사용하면 돼.
animal.push('뱀')
이렇게 하면 마지막 6번째 칸에 '뱀'이 저장될거야.
지금 현재 배열에 총 몇 칸을 사용하고 있는지 필요할 때도 종종 있어.
이때는 length 라는 속성을 사용해.
let cnt = animal.length
alert(cnt)
이렇게 하면 cnt 라는 변수에 animal 배열의 총 길이(칸)을 저장하는데 지금은 6 이 될거야.
변수에 넣지 않고 alert(animal.length)로 확인해 볼 수도 있어.
■ 따옴표, 곁따옴표, 세미콜론
초보자가 자바스크립트로 코드를 작성할 때 가장 많은 실수가 따옴표(' '), 곁따옴표(" ")의 누락이야.
기본적으로 따옴표, 곁따옴표는 위의 예에서 보듯이 문자열 임을 표시할 때 사용해.
문자열을 감쌀 때 따옴표(' '), 곁따옴표(" ") 어느 것을 사용해도 돼.
그렇지만 문자열 안에 따옴표(' ')가 들어갈 경우도 있잖아. 예를들어..
let home = 'Tom's cabin'
이때, 위 처럼 쓰면 브라우저는 어느 따옴표가 닫는 것인지 몰라 에러를 발생해.
그래서 위와 같은 경우는 곁따옴표(") 를 쓰면 되겠지?
let home = "Tom's cabin"
반대로 문자열 안에 곁따옴표(")를 사용하려면 바깥 쪽을 따옴표(')로 감싸면 되겠지?
또 다른 방법으로는 \ 기호를 이용하는 방법이 있어. 위 문장은 아래와 같아.
let home = "Tom\'s cabin"
'에스케이프(Escape)문자' 라고 부르는데, \ 뒤에 오는 문자는 문자열을 감싸는 기호가 아니고 문자내용이다.. 라고 알려주는 방법이야.

■ 문자열 연결 (+)
두개의 문자열을 붙이는 경우에는 + 기호를 사용해.
let home = '행복한' + '우리집'
이렇게 하면 home 변수에는 '행복한 우리집' 이라는 내용이 들어가겠지?
이 더하기 기호는 변수에도 적용돼.
let one = '행복한'
let two = ' 우리집'
let home = one + two
또 동일한 변수와 + 기호를 이용해서 내용을 변경할 수도 있어.
let home = '행복한'
home = home + ' 우리집' //- 이제 home 은 '행복한 우리집'
home = home + ' 만세!' //- 이제 home 은 '행복한 우리집 만세!'
같은 변수에 추가로 내용을 추가할 때는 간단하게 아래와 같이 += 기호를 많이 사용해.
위 코드와 아래 코드는 완전히 똑같은 거야. (대부분은 아래 방식을 사용해)
let home = '행복한'
home += ' 우리집' //- 이제 home 은 '행복한 우리집'
home += ' 만세!' //- 이제 home 은 '행복한 우리집 만세!'
앞서 배운 PHP 기억나?
PHP 에서는 문자열을 연결할 때 마침표(.)를 사용했는데, 자바스크립트는 + 를 사용해.
왜 그럴까? 그거야 각 언어를 만든 사람 마음이니까...ㅎ 그렇지만 기호만 다를 뿐 사용법은 거의 똑 같아.

■ 세미콜론(;)
세미콜론은 하나의 명령이 끝났다는 의미와 용도로 사용하는 기호야.
자바스크립트는 기본적으로 한 줄 입력하고 Enter로 다음 줄에 입력할 때는 ; 기호를 넣어 줄 필요는 없어.
자바스크립트에서 내부적으로 새 줄로 가면 자동으로 명령을 구분하거든,
한 줄에 여러 줄의 명령을 쓰는게 보기 좋을 때도 있어. 이때는 ; 기호를 사용해서 명령을 구분하면 돼.
let a = '에이' ; let b = '비' ; let c = '씨'
그런데 인터넷에서 검색하다 다른 사람들의 코드를 보면 명령이 1개 인데도 ; 를 쓰는 것을 훨씬 더 자주 볼 수 있어.
이것은 많은 개발자들의 습관이야.
다른 언어에서는 줄 바꿈과 상관없이 명령을 구분하는 기호를 꼭 넣어야 하는 경우도 있거든.
대표적인게 PHP 야.
PHP 코드를 작성할 때는 ; 기호 넣고, 자바스크립트는 안 넣고 하는 것도 헷갈리니 습관처럼 명령 끝나면 ; 를 입력하는 경우가 많아.
(항상 ; 를 넣어도 아무 문제는 없으니 이 방법이 더 좋을지도..)

뭐, 지금까지는 간단하지?
그런데 지금까지 설명한 내용은 자바스크립 기본 문법의 극히 일부분이야.
대부분의 학습서나 메뉴얼을 보면 이번 장에서 내용을 설명하는데 40-50 페이지를 사용해.
그거 읽다 보면 "나는 누구? 여긴 어디?"

그런데 또 확실하게 알기 전에는 다음으로 못 넘어가는 아주 꼼꼼한 분들도 있어.
여러분이 그런 분이라면 아래 링크를 꼼꼼히 읽어 봐....ㅎ

https://ko.javascript.info/string
목차제 목조회
1 173
2 200
3 195
4 174
5 175
6 197
7 168
8 239
9 153
10 157
11 175
12 148
13 194
14 175
15 123
16 97
17 91
18 103
19 108
20 106
21 115
22 111
23 154