[211028] 제어문, 배열, 함수

제어문(조건문, 반복문, 분기문), 배열

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제어문 예제</title>
<style>
output {
display: block;
padding: 1em 0;
}
</style>
</head>
<body>
<div>
<h2>if 문 예제.</h2>
<button type="button" onclick="ex1();">ex1 실행</button>
<output id="res1"></output>
</div>
<hr>
<div>
<h2>for 문 예제.</h2>
<button type="button" onclick="ex2();">ex2 실행</button>
<button type="button" onclick="ex3();">ex3 실행</button>
<output id="res2"></output> 
</div>
<hr>
<div>
<h2>while 문 예제.</h2>
<button type="button" onclick="ex4();">ex4 실행</button>
<output id="res3"></output>
</div>
<hr>
<div>
<h2>switch 문 예제.</h2>
<button type="button" onclick="ex5();">ex5 실행</button>
<output id="res4"></output>
<output id="res5"></output>
</div>
<hr>
<div>
<h2>배열을 이용한 반복문(for ... in)</h2> 
<button type="button" onclick="ex6();">ex6 실행</button>
<output id="res6"></output>
</div>
<hr>
<div>
<h2>배열을 이용한 반복문(for ... of)</h2>
<button type="button" onclick="ex7();">ex7 실행</button>
<output id="res7"></output>
</div>
<hr>
<div>
<h2>객체를 이용한 반복문(for ... in)</h2>
<button type="button" onclick="ex8();">ex8 실행</button>
<output id="res8"></output>
</div>
<hr>
</body>
<script type="text/javascript" src="/static/js/ch05_2.js"></script>
</html>

// 한 줄 주석
/*
여러줄 주석
*/

var v1; // 지역변수 생성
v2 = 10; // var 생략하여 전역변수 생성. 전역 변수 -> window 객체의 멤버 변수
// v3; // 에러

console.log(typeof '1');
console.log(typeof 1);
console.log(typeof 1.1);
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof function(){});
console.log(typeof null);
console.log(typeof NaN);
console.log(typeof Infinity);

function ex1(){
/*
* 영문자 알파벳 범위의 ASCII 코드 번호를 입력받은 경우에만 해당하는 문자를
* 출력하고 코드 범위를 벗어난 경우에는 "ASCII 코드 영문자 범위를 벗어났습니다."
* 라는 메시지를 출력하도록 하시오.
*
*
* 예 1.)
* 영문자 범위의 ASCII 코드 번호 입력 : 65
* 입력한 ASCII 코드 65 의 영문자는 'A' 입니다.
*
* 예 2.)
* 영문자 범위의 ASCII 코드 번호 입력 : 92
* ASCII 코드 영문자 범위를 벗어났습니다.
* 97~122 or 65~90
*/

// var v1 = parseInt(prompt("영문자 범위의 ASCII 코드 번호 입력"));
// ㄴ parseInt 썼지만 문자열이 저장되면 NaN을 반환
// -> 사용자입력에 "65" 쓰면 65 int로 보지 않고 NaN -> 숫자로만 입력하라고 뜸

var res1 = document.getElementById("res1");
var v1 = prompt("영문자 범위의 ASCII 코드 번호 입력");
console.log(typeof v1);

if(isNaN(v1)){
res1.innerText = "숫자로만 입력하세요.";
} else {
if(('A'.charCodeAt() <= v1 && v1 <= 'Z'.charCodeAt()) ||
('a'.charCodeAt() <= v1 && v1 <= 'z'.charCodeAt())) {
res1.innerText = "입력한 ASCII 코드 " + v1 + "의 영문자는 " + String.fromCharCode(v1) + " 입니다.";
} else if (v1 == false || v1 == null) { //빈 확인(빈문자열-false저장), 취소
res1.innerText = "숫자를 입력해주세용";
} else {
res1.innerText = "ASCII 코드 영문자 범위를 벗어났습니다.";
}
}
}

function ex2() {
var res2 = document.getElementById("res2");
var txt = "";
for(var x = 0; x < 5; x++) {
txt += (x + " ");
}
res2.innerText = txt
}

function ex3() {
var res2 = document.getElementById("res2");
var txt = "";
var x = 0;
for(;;) {
if(x >= 5) {
break;
}
txt += (x + "\n");
x++;
}
res2.innerText = txt
}

function ex4() {
var res3 = document.getElementById("res3");
var txt = "";
var x = 0;
while(true) {
if(x >= 5) {
break;
}
txt += (x + "\n");
x++;
}
res3.innerText = txt
}

function ex5() {
var res4 = document.getElementById("res4");
var res5 = document.getElementById("res5");
var txt1 = ""; var txt2 = "";
var x = 0;
while(true) {
switch(x%2) {
case 0:
txt1 += x + "\n"; break;
case 1:
txt2 += x + "\n"; break;
default: //0도 1도 아니면 default
break;
}
if(x >= 20) {
break;
}
x++;
}
res4.innerText = txt1; res5.innerText = txt2;
}

function ex6() {
var res6 = document.getElementById("res6");
var txt = "";
var arr = [1, 2, 3, 4, 5];
// console.log(arr);
// console.log(arr[0]); console.log(arr[1]); console.log(arr[2]);
// console.log(arr.length);
// for(var i = 0; i < arr.length; i++) {
// txt += arr[i] + " ";
// }
// res6.innerText = txt;

for(var item in arr) {
txt += arr[item] + " ";
}
res6.innerText = txt;
}

function ex7() {
var res7 = document.getElementById("res7");
var txt = "";
var arr = [1, 2, 3, 4, 5];

for(var item of arr) {
txt += item + " ";
}
res7.innerText = txt;
}

function ex8() {
var res8 = document.getElementById("res8");
var txt = "";
var obj = {"a": 1, "b": 2, "c": 3, "d": 4};

for(var item in obj) {
txt += item + "(item): " + obj[item] + " ";
}
res8.innerText = txt;
}

▶ 배열

다양한 타입의 데이터를 보관하는 변수 모음으로 [ ]를 통해 생성과 초기화를 동시에 처리 가능
자료형 지정이 없어 모든 자료형 데이터로 저장 가능
* 모든 자료형 : 숫자, 문자열, 함수, Boolean, undefined, 객체

자바스크립트에서 배열 선언방법
var 변수 명 = [값1(숫자), 값2(문자), 값3(객체), 함수 ….]; 또는

var 변수 명 = new Array(1, 2, 3, 4, 5);

크기를 정하지 않은 배열 선언 : var 변수 명 = new Array();
크기를 정한 배열 선언 : var 변수 명 = new Array(개수);

▶ Array객체 메소드

Array도 하나의 객체이기 때문에 배열에서 활용할 수 있는 메소드가 있음

이름	설명
배열명.indexOf(“값”)	배열에서 요소가 위치한 인덱스 리턴
배열명.concat(배열명)	두 개 또는 세 개의 배열을 결합
배열명.join()	배열을 결합하고 문자열로 반환
배열명.reverse()	배열 순서를 뒤집음
배열명.sort()	내림차순/오름차순 정렬
배열명.push(‘값’)	맨 뒤에 요소 추가
배열명.pop()	맨 뒤의 요소 제거
배열명.shift()	첫 번째 요소 제거
배열명.slice(숫자,숫자)	배열의 요소 선택 잘라내기
배열명.splice([index], 제거 수, 추가 값)	배열의 index 위치의 요소 제거, 추가
배열명.toString()	배열을 문자열로 반환
배열명.unshift(‘값’)	배열의 앞에 새로운 요소 추가

▶ sort()메소드

문자열 기준 오름차순으로 정렬하며 정렬 방법에 변화를 주고 싶을 땐 sort() 인자에 함수를 설정하면 됨
매개변수로 들어가는 함수에는 기본 2개의 매개변수를 설정할 수 있음

배열변수.sort(function(left, right) {
return left-right; // 오름차순;
또는
return right-left; // 내림차순
};

콘솔 예시

arr.indexOf(1); <-첫번째 인덱스 값 조회
0

arr.join(", "); <- 모든 배열 요소가 ", " 구분자로 하나의 문자열로 연결.
'1, 2, 3, 4, 5'
arr.push(10); <- 배열에 값 추가하기
6 <- 추가된 곳의 인덱스 알려 줌 (배열의 총 길이)
arr
(6) [1, 2, 3, 4, 5, 10]

arr.unshift(20); <- 배열의 앞에 새로운 요소 추가
7 <- 추가 후 배열의 길이
arr
(7) [20, 1, 2, 3, 4, 5, 10]
arr.sort();
(7) [1, 10, 2, 20, 3, 4, 5] <- 문자열로 변환해서 정렬을 시켜주기 때문에 sort 쓰면 정렬이 이상함.

따라서 다음과 같이 함수를 사용하여 만들어야 함

arr.sort(function(x, y) {
return x - y; <- 오름차순 (x(20)-y(1) 값이 양수면 두 수의 자리가 바뀌어진다)
})
(7) [1, 2, 3, 4, 5, 10, 20]

arr.sort(function(x, y) {
return y - x; <- 내림차순
})
(7) [20, 10, 5, 4, 3, 2, 1]

객체 생성

var obj = new Object();
undefined

obj.a = 1;
1

obj.b = 2;
2

obj.c = 3;
3

obj.d = 4;
4

obj
{a: 1, b: 2, c: 3, d: 4}

또는

var obj1 = new Object({"a": 1, "b": 2, "c": 3, "d": 4});
undefined

obj1;
{a: 1, b: 2, c: 3, d: 4}

객체 접근 방법

obj.a;
1

또는 대괄호 써서 접근할 경우

obj["a"]; <- 문자 a "" 안에 적어줘야 한다
1

객체에 메서드 만들어서 넣어주기

obj.add = function(x, y) { return x + y; }; <- 함수명 없이 생성 [람다(익명)함수, callback 함수]
ƒ (x, y) { return x + y; }
obj.add(10, 20);
30

함수, 객체 자유롭게 삭제

delete(obj.add);
true
delete(obj.a);
true
obj
{b: 2, c: 3, d: 4} <- 삭제 완료

함수

소스코드의 집합으로 메소드, 모듈, 기능, 프로시저 등을 말하며 자바스크립트에서는 function자료형
함수는 인자/매개변수, 리턴 값을 가질 수 있음

▶ 함수 선언

반환 값 선언 없이 function 키워드만 이용하여 사용

function키워드에 함수 명을 작성하여 사용하는 방법(선언적 함수)

function 함수명([매개변수]){
로직;
[return 값;]
}

function에 함수 명 작성하지 않고 변수에 대입하는 방법(callback형태, 익명함수)

var f1 = function ([매개변수]){
로직;
[return 값;]
}

스스로 동작 함수 (호출 없이 바로 실행)

(function(){
로직;
})();

▶ 함수 호출

함수는 반드시 선언(정의)이 되어야만 실행 가능
원하는 기능에 대한 함수를 호출하는 것을 함수 실행이라고 부르며 return 값이 있다면 리턴 값을 받을 변수가 있어야 함

return 값이 없는 경우
함수 명();
함수 명(인자 값1, 인자 값2, …);

return 값이 있는 경우
var 변수 명 = 함수 명();
var 변수 명 = 함수 명(인자 값1, 인자 값2, …);

▶ 매개변수와 return

▷매개변수(전달인자)
호출하는 코드와 호출되는 함수를 연결해주는 변수
지정된 매개변수보다 많게 선언하고 호출하는 것을 허용하나 초과되는 매개변수는 무시함
지정된 매개변수보다 적게 선언하고 호출하는 것도 허용하나 선언이 안 된 매개변수는 undefined로 자동 설정 됨

▷ return [되돌려 줄 값]
return은 함수를 호출한 위치로 돌아가라는 의미로 return 값미지정 시 undefined 자료형으로 반환 됨

▶ 가변인자 함수

매개변수의 개수가 변하는 함수를 말하며 모든 함수 내부에 arguments라는 배열에 자동으로 생성되어 매개변수를 저장
매개변수가 지정되지 않은 값이 넘어오면 arguments배열에 순서대로 저장
매개변수의 개수에 따라 함수처리를 달리 하려면 조건문을 사용하여 다르게 적용할 수 있음

함수 예시

function randInt(max, min=0){ //매개변수 하나 생략해도 동작하며, 기본값 설정도 가능-
// 값 설정을 하지 않으면 0으로 들어가는 것(자바와 차이)
if(min === undefined) {
min = 0;
}
console.log(arguments);
console.log(arguments[2]);
console.log(arguments[3]);
return Math.floor(Math.random() * (max - min + 1) + min);
}

randInt(100, 90, 1, 2, 3, 4); <- 매개변수 많이 넣어서 실행, 값에 영향 주진 않지만 arguments 에 남는다.
1 <- console.log(arguments[2]);
2 <- console.log(arguments[3]);
93

// 가변길이 매개변수 (...args)
function func1(x, ...args) {
console.log(x);
console.log(args);
}

func1(1, 2, 3, 4, 5);
1 <- console.log(x);
(4) [2, 3, 4, 5] <- console.log(args); args라는 이름으로 가변길이 매개변수 저장

// 함수가 저장된 변수

var func2 = function(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
undefined
func2(10, 1); <- 사용법 동일
7
typeof func2;
'function'

(추가)
// 함수 변수에 저장
var func2 = function(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}

var func4 = function(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
// 변수에 저장된 함수 변수에 저장
var func3 = func4;

// 매개변수 함수
function rand1To10(f) { //함수 매개변수로 받고
return f(1, 10); //그 함수로 연산해서 리턴
}
var r = rand1To10(func4); //넘겨 준 매개변수가 함수

var r2 = rand1To10(function(min, max) { //function~~ : callback (함수가 내가 생성한 자리에서 실행되는 것이 아닌 다른 위치에서 실행이 되고 그 결과가 반환이 되는 형태의 함수)
return Math.floor(Math.random() * (max - min + 1) + min);
})

연습 문제

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
output {
display: block;
margin: 0.5em;
}
</style>
</head>
<body>
<div>
<h2>사용자가 입력한 값의 합을 구하기.</h2>
<input id="input1" type="text" placeholder="1, 2, 3, ...">
<button type="button" onclick="ex1();">실행</button>
<output id="out1">여기에 실행 결과가 출력됩니다.</output>
</div>
<hr>
<div>
<h2>사용자가 입력한 값이 리스트의 목록이 되도록 하기.</h2>
<input id="input2" type="text" placeholder="목록1, 목록2, 목록3, ...">
<button type="button" onclick="ex2();">실행</button>
<output id="out2">여기에 실행 결과가 출력됩니다.</output>
</div>
</body>
<script type= "text/javascript" src= "/static/js/ch05_3.js"></script>
</html>

'Javascript' 카테고리의 다른 글

[211102] 자바스크립트 개인실습 (0)	2021.11.03
[211101] BOM(Browser Object Model) & 이벤트 (0)	2021.11.01
[211029] DOM(Document Object Model), 로또 번호 생성기 실습 (0)	2021.10.30
[211027] 자바스크립트 기초 (0)	2021.10.27

제블로그오셔서자격증정보얻어가세요

[211028] 제어문, 배열, 함수

제어문(조건문, 반복문, 분기문), 배열

함수

'Javascript' 카테고리의 다른 글

티스토리툴바

[211028] 제어문, 배열, 함수

제어문(조건문, 반복문, 분기문), 배열

함수

'Javascript' 카테고리의 다른 글

'Javascript' Related Articles

티스토리툴바