[JavaScript] 기초3

---

목차

• 변수의 유효범위
  • 전역 변수와 지역 변수
• 형변환하기
  • 묵시적(자동형)과 명시적 형변환
• 브라우저에서 입출력받기
  • 경고창 및 확인창
  • 입력창
  • 타이머
• 다국어의 인코딩 및 디코딩
  • encoding / decoding
• 문자열을 실행문으로 만들기
• 배열
  • 반복문을 이용해서 배열요소 출력
  • 배열 변수에 다른 배열변수 선언
  • 문자 배열 만들기
  • 다차원 배열 만들기
• 예제문제

---

 

ㅁ변수의 유효범위

ㅇ전역 변수와 지역 변수

-전역변수

함수 바깥에서 선언된 변수로 유효 범위가 전체 프로그램

 

-지역변수

함수 안에서 선언된 변수와 함수 인자로 유효 범위는 변수가 선언된 함수 내부

 

-변수의 충돌

변수에 유효 범위가 있는 이유는 프로그램의 다른 부분에서 선언된 이름이 같은 변수와 충동하지 않도록 하기 위해서이다.

전역변수와 지역 변수 이름이 같아지면 두 변수가 충돌한다. 

 

 

ㅁ형변환하기

ㅇ묵시적(자동형) 형변환과 명시적 형변환

-묵시적(자동형) 형변환

작은 자료형에서 큰 자료형으로 자동적으로 자바스크립트에서 변환을 해줌

 

-명시적 형변환

큰 자료형에서 작은 자료형이나 다른 자료형들끼리 타입을 변환시킬 때 사용한다.

명령어	변환 형태
Number()	숫자로 변환
String()	문자로 변환
Boolean()	진리값으로 변환

 

-명시적 형변환(문자열 -> 숫자)

Number() 는 변환하려는 값에 문자열이 있으면 형변환이 되지 않고

parseInt() 는 변환하려는 값에 문자열이 있으면 문자열은 무시하고 숫자만 바꿔준다.

     다만 pareseInt()는 앞에 숫자가 먼저 와야한다. 

     parseInt('일20')으로 작성하면 NaN이 나온다.

 

 

-명시적 형변환(숫자 -> 문자열)

String() 을 사용하면 숫자를 문자열로 바꿔주고

숫자 + '' + 숫자 를 사용해도 숫자를 문자열로 바꿔준다.

 

 

 

ㅁ브라우저에 입출력받기

ㅇ경고창 및 확인창

 

 

 

보통 확인창을 if문과 함께사용해서 사용자가 '확인'을 누를경우와 '취소'를 누를 경우를 나눈다.

 

ㅇ입력창

입력창에 숫자를 입력하든 문자를 입력하든 무조건 문자열로 인식한다.

취소를 누르면 Null이 나온다.

 

 

 

ㅇ타이머

타이머 관련 메서드를 활용하면 지정된 시간이 흐른 후에 함수를 실행하거나 일정한 시간 간격에 따라 함수를 반복 실행

할 수 있다.

이를 활용하면 병렬적인 흐림을 코딩할 수 있다.(Thread)

 

-setTimeout 메소드

지정된 시간 이후에 코드를 실행함

아래는 3초 뒤에 함수를 실행하는 코드이다. cmd는 콜백함수이다.

콜백함수는 다른 함수가 다른 함수를 호출하거나 시스템이 함수를 호출하는 함수를 말한다.

 

-setInterval 메소드

지정된 시간마다 지정된 코드를 계속 실행함. 

시계를 나타낼 때 사용

실행을 중지시키려면 브라우저를 끄거나 개발자모드에서 중지, 강제종료 메소드 clearInterval를 실행한다.

 

 

 

ㅁ다국어의 인코딩 및 디코딩

보통 브라우저에서 영어 이외의 문자로 된 데이터들을 송수신할 때 인코딩과 디코딩 과정을 거쳐야 한다.

인코딩은 다국어를 영어로, 디코딩은 영어를 다국어로 만들어준다.

ㅇEncoding / Decoding

 

 

ㅁ문자열을 실행문으로 만들기

일반적인 문자열을 코드로 인식하게 하는 함수는 eval()이다.

조금 더 응용해서 아예 eval()에 덧셈의 합을 구하는 실행문을 작성해보자

 

 

ㅁ배열

비슷한 성격의 값들을 동시에 저장하는데 사용되며 각각의 값을 배열 요소라고하고 이러한 값들이 저장된 배열의 

위치를 인덱스라고 한다. 이때 인덱스는 0부터 시작한다. 

 

만약 아래와 같은 배열에서

0 인덱스는 2,

1 인덱스는 4,

2 인덱스는 6,

3 인데스는 8 이 된다.

 

이때  evens은 배열의 주소값이 저장되고 실제 [2, 4, 6, 8]의 값은 다른 영역에 저장된다.

//배열은 [ ] 안에 값의 목록을 넣어준다.
var evens = [2, 4, 6, 8];


//다른 방법으로 선언하기
var evens = new Array(2, 4, 6, 8);

또한 배열의 타입은 object이다.

 

 

배열의 길이를 알고 싶으면 아래 메소드를 실행한다.

evens.length

 

ㅇ반복문을 이용한 배열요소 출력하기

배열의 모든 요소를 출력하고 싶으면 반복문을 이용한다.

-for 문 1

for(let i in evens) {
    console.log(i, evens[i]);
}


//출력
0 2
1 4
2 6
3 8

 

-for 문 2

배열의 값만 출력하고 싶으면 아래의 반복문을 사용한다.

for(let value of evens) {
    console.log(value);
}



//출력
2
4
6
8

 

 

ㅇ배열 변수에 다른 배열변수 선언

새로운 변수에 기존에 만들어진 배열의 참조변수를 할당하면 새로운 변수도 같은 참조변수를 가진다.

따라서 새로운 변수가 가리키는 배열도 같은 배열임을 알 수 있다.

아래 예시를 참고

let arr1 = [1, 2, 3, 4];

let arr2 = arr1;

arr2[0] = 5;
arr2[1] = 6;

console.log(arr2, arr1);



//출력
5, 6, 3, 4 / 5, 6, 3, 4

 

 

ㅇ문자 배열 만들기

배열에 문자도 저장할 수 있다. 문자열도 배열에 저장되어 있다.

let arr1 = ['a', 'b', 'c', 'd'];

 

 

 

ㅇ다차원 배열 만들기

여러 개의 행과 열을 가지는 다차원 배열을 만들어보자.

2차원 배열의 선언은 다음과 같다.

let arr1 = [
    [10, 20, 30],
    [40, 50, 60],
    [70, 80, 90]
];

데이터 접근하는 방법은 먼저

arr1[0] 에 접근한 다음 arr1[0][0], arr1[0][1], arr1[0][2]  순서대로 접근하고 다음으로

arr1[1] 에 접근한 다음 arr1[1][0], arr1[1][1], arr1[1][2] 순서대로 접근한다.

 

만약 값이 비어있는 다차원 배열을 만드려면 다음과 같다.

 

 

 

 

 

-다차원 배열 출력하기

이중 for문을 사용한다.

 

 

 

-함수의 매개변수 개수를 모를 경우 함수 선언하기

arguments를 사용하면 함수 호출시 매개변수 개수를 임의로 지정해도 함수가 실행된다.

또한 arguments는 배열이며 길이는 매개변수 개수와 같다.

 

 

 

-예제문제

arguments를 이용해서 구구단 출력하기

---

광고타임

 

---