JavaScript

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference

JavaScript 참고서 - JavaScript | MDN

개발자 도구 단축키 : ctrl + shift + I

 

alert() 명령을 활용하면 브라우저에  경고창을 띄울 수 있다

 

undefined는 실행된 명령인 console.log("출력 내용");의 결과값을 나타냅니다. 

console.log() 명령은 출력만 할 뿐 결과는 반환하지 않는 명령이므로 undefined(정의되지 않음)가 나온 것입니다

 

자바스크립트 프로그램에서 명령을 여러 개 나열하여 프로그램을 만들 수 있습니다. 프로그램은 작성한 순서대로 실행되며, 책을 읽어 나가듯 명령이 한 줄씩 실행된다는 것도 확인했습니다

 

a라는 변수를 선언할 때 코드

-> 

var a;

 

var : variable(변수)

var a는 변수 a라는 구문이다

쉼표(,)를 이용하면 변수를 여러 개 나열해서 한꺼번에 선언할 수 있습니다

> var a, b, c;
< undefined

-> 이렇게 변수를 선언하면 변수 a의 값을 저장할 공간이 만들어지지만, 만든 공간에는 아무런 값도 들어 있지 않은 상태가 된다

 

* 자바스크립트에서는 쉼표 다음에 공백(띄어쓰기)을 넣어도 되고 넣지 않아도 된다

 

변수를 선언하고 사용하기 전에 초기화라는 작업을 한다.

초기화 : 변수를 선언하고 변수에 처음으로 값을 저장하는 작업

 

* 변수 : 프로그램을 실행하는 도중에 임의 값을 저장해 두고 읽을 수 있는 공간을 말한다

             값의 위치를 가리키는 상징적인 이름 

* 변수 선언 : 지금부터 컴퓨터에게 변수를 사용할 것이라고 선언하는(알려 주는) 역할을 한다

 

변수에는 값을 어떻게 저장할까? 변수에 값을 저장할 때는 = 연산자를 이용한다

 

개발자 도구를 사용하면 명령에 대한 결과가 항상 < 기호 다음에 표시된다는 점을 기억해야함

 

 

* 변수에 여러 개의 값을 저장하는 방법

변수는 하나의 값을 저장하기 위한 메커니즘이다. 여러 개의 값을 저장하려면 여러 개의 변수를 사용해야 한다.

단, 배열이나 객체 같은 자료구조를 사용하면 관련이 있는 여러 개의 값을 그룹화해서 하나의 값처럼 사용할 수 있다

 

 

변수에 값을 저장하는 것 : 할당 assignment (대입, 저장)

변수에 저장된 값 : 변수 값

변수에 저장된 값을 잃어 들이는 것 : reference (참조)

 

prompt() 명령은 브라우저에게 제공하는 자바스크립트의 기본 명령 중 하나입니다. 사용자가 직접 값을 입력할 수 있는 창을 띄웁니다. 사용자가 값을 입력하면 입력한 값을 자바스크립트로 전달합니다

 

기본 데이터 타입

변수에 저장할 수 있는 값의 종류(Type)를 '데이터 타입' 혹은 '자료형'이라고 부른다

 

• 자료형의 종류
  • number Type: 숫자

  var a=100, b=3.14;
  

  • string Type: 문자열

  var c="안녕하세요", d="a";
  

  • boolean Type: 맞다/틀리다를 표현 (참/거짓)

  var e = true, f = false;

typeof() 명령어

• typeof 뒤에 따라오는 괄호 안에 들어있는 변수의 type을 알려주는 명령어

• var a=100;
  console.log(a,typeof(a));
  //100 "number"라고 출력
  
  var c="안녕하세요";
  console.log(c,typeof(c));
  //안녕하세요 "string"라고 출력
  
  var e=true;
  console.log(e,typeof(e));
  //true "boolean"라고 출력

* 소괄호 : (())

 

Number

Number

• 숫자를 나타내는 자료형
• 64bit로 실수와 정수 모두 표현 가능
• 정상적이지 않는 숫자나 표현할 수 없는 범위의 수를 표시하는 NaN, Infinity

parseInt, parseFloat 명령어

• 문자열 "1" 과 1 은 다름
• 명령어 뒤에 따라오는 괄호 안에 있는 문자열의 앞에서부터 Number를 인식함

* 자바스크립트에서는 정수와 실수를 따로 구분하지 않고 모두 숫자형이라는 데이터 타입으로 표현한다

숫자형 

 - 정수 (ex.-1,0,1)

 - 실수 (ex. 0,1,3.14)

 

console

> typeof(1);
< "number"
> typeof("1");
< "string"

1은 숫자형이고 "1"은 문자열이다

지금처럼 키를 묻는 상황에서는 사용자가 입력한 값을 숫자로 활용해야 의미가 있다

바로 문자열을 숫자로 변환하는 기능이 필요하다 이러한 역할을 하는 대표적인 명령이 parseInt()와 parseFloat()이다

* parseInt() 명령은 문자열의 앞부분에서 정수 부분을 추출할 수 있다

* parseFloat() 명령은 문자열의 앞부분에서 실수 부분을 추출할 수 있다

NaN : Not a Number의 약자로 '숫자가 아니다'라는 뜻이다

하지만 역설적이게도 Nan은 숫자형이다

 

* 자바스크립트의 숫자형은 허수(i)를 지원하지 않습니다. 제곱근을 계산하는 명령인 Math.sqrt()의 인수에 -1을 입력하면 NaN이 출력된다

 

NaN외에도 숫자형의 특수한 종류에는 Infinity가 있다

console > var a = 1/0; < undefined > a < Infinity

0 나누기 같은 수학적 오류가 있는 구문이 실행되거나 너무 큰 값을 계산하는 경우 무한대를 나타내는 Infinity가 나온다

 

 

String 표현

• 따옴표나('), 큰따옴표(")로 감싸서 문자열 표현
• 문자열 안에 따옴표, 큰따옴표 등의 문자를 활용하려면 escape character를 활용
  • escape character는 역슬래시(\)로 사용
  • 줄바꿈 : \n
  • 따옴표 : \'
  • 큰따옴표 : \"
  • 역슬래시 : \\

 

문자열을 큰 따옴표로 시작했는데 작은따옴표로 끝내면 SyntaxError(문법 오류)가 발생한다

반대 경우도 마찬가지다

console > "abcde';  (오류) Uncaught SyntaxError: Invalid or unexpected token > 'abcde";  (오류) Uncaught SyntaxError: Invalid or unexpected token

* SyntaxError는 문법이 어긋날 때 발생하는 오류

 

문자열 안에 큰따옴표와 작은따옴표를 모두 쓰려면 어떻게 해야하는 지 ?

-> 이런 문제를 해결하려면 이스케이프 문자(escape character)를 사용한다

이스케이프 문자는 역슬래시(\)로 시작한다

 

Object :  키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합

Object

• number, string, boolean의 단순 자료형보다 더 복잡한 자료를 표현할 때 사용

객체를 만드는 법

• 중괄호 {} 를 사용해 정의 가능

{
	//객체를 정의
};

• 객체는 속성의 집합으로 이뤄짐
  • 각 속성은 이름과 값으로 이뤄짐
  • 객체 정의 시 속성이름:값의 형태로 속성 정의 가능
  • 속성의 값은 모든 자료형이 가능, object 포함

객체의 속성에 접근하는 법

• 객체 이름 뒤에 점(.)을 사용하고 속성 이름에 접근 할 수 있음 (ex. 객체이름.속성이름 -> man.name)
• 객체 이름 뒤에 대괄호([]) 안에 속성 이름을 문자열로 접근할 수 있음  단, 속성의 이름은 문자열로 적어야 함 (ex. 객체이름["속성이름"] -> man["name"]

객체의 속성의 값을 변경하는 법

• 객체 속성에 접근해서 변수에 값을 저장하듯이 사용

// 코드의 값을 얻어올 때
> man.name;
< "홍길동"
> man["name"];
< "홍길동"

이번에는 객체의 속성 값을 변경해보자

> man.name = "이몽룡"; //변수의 값을 저장하듯 객체의 속성 값을 저장
< "이몽룡"
> man["age"] = 15; // 대괄호를 사용해서 나이를 15세로 저장
< 15
> man;
< > {name: "이몽룡", age : 15, height: 180}

 

* 변수 obj를 객체로 선언하고 name과 age라는 속성을 추가한 다음 각 속성의 값에 자신의 이름과 나이를 입력하세요

// 1
var obj = {};
obj ["name"] = "홍길동";
obj ["age"] = 20;

// 2
var obj = {name: "홍길동", age: 20};

* 객체를 선언할 때 속성 이름은 큰따옴표를 둘러싸지 않아도 된다

예를 들어 다음 두 경우는 모두 동일하게 동작한다

var book = {"title":"어린왕자"}; var book = {title: "어린왕자"};

undefined와 null

undefined

• 시스템에서 어떤 변수나 속성이 정의되지 않은 경우를 표현하기 위해 사용
  • 선언만 하고 초기화가 되지 않는 변수의 타입이나 값
  • 객체의 정의되지 않은 속성의 타입이나 값

null

• 개발자가 명시적으로 아무것도 없는 비어있는 상태를 나타낼 때 사용
  • typeof의 결과는 object이며 값은 null

 

 

null-var = null;

null_var이라는 빈 객체가 저장되어 있다는 뜻으로 개발자가 명시적으로 이 변수는 비어 있다고 정의한 것이다

 

문제 

변수 a는 undefined, 변수 b는 null로 만들어보자

힌트 : 변수를 선언만 한 상태가 undefined이다

var a;
var b;

답

var a;
var b = null;

 

 

 

산술연산자 : 숫자를 계산하는 연산자(계산하라는 기호)

Arithematic operator

이항연산자 (binary operator)

두개의 피연산자(A, B)를 가지는 연산자. A 연산자 B 의 꼴로 사용함. 피연산자는 변수나 숫자가 될 수 있음.

• + 더하기
• - 빼기
• * 곱하기
• / 나누기
• % 나머지

단항연산자 (unary operator)

하나의 피연산자(A)를 가지는 연산자. 보통 연산자A의 꼴로 사용함. 대표적으로 - 연산자가 있으며, -A의 꼴로 사용하는 경우 -는 이항 연산자가 아닌, 단항연산자임. A변수에 -1을 곱한 효과가 발생.

증감연산자 (++, --)

표현식 안에서 변수의 값을 증가하거나 감소시킬 수 있음.
각각, A=A+1, A=A-1의 효과를 발생함. 연산자를 변수 앞에 사용한 경우와 변수 뒤에 사용한 경우에 따라 변수의 값을 업데이트 하는 순서가 바뀜.

Code 1

var a;

a = 1;
console.log(++a);
console.log(a);

a = 1;
console.log(a++);
console.log(a);

Result 1

2
2

1
2

* ++a는 a = a + 1과 같다

 

Math 관련 명령어

• Math.pow(A,b) : A의 B승을 구해 줌
• Math.sqrt(A) : A의 제곱근을 구해 줌
• Math.random() : 0~1 사이의 임의의 난수를 발생시켜 줌

 

> -a; //단항연산자
< -5

함수 사용하기

함수의 정의

호출에 의해 여러번 실행할 수 있는 코드 블럭

• 반복되는 코드 감소
• 코드의 개발 및 수정 용이

함수 정의 구문

function 함수이름(파라미터1, 파라미터2){
    /*
        실행될 코드
    */
    return 반환값;
}

• 파라미터 : 함수의 정의부분에 나열되어 있는 변수
  • 여러개인 경우 콤마(,)로 구분.
  • 파라미터가 필요없는 경우 없어도 됨
  • 함수 안의 코드에서 변수처럼 활용 가능
• return 구문 : 함수의 출력으로 내보낼 값
  • return 구문을 만나면 함수는 즉시 종료됨
  • 함수를 호출한 표현식은 반환값으로 대치됨

함수의 호출 방법

함수이름(인자, ...) 의 형태로 호출

"`함수이름 (인수1, 인수2)" 형태로 호출

함수 호출 구문 예시

var inp = prompt();
console.log("Hello World"); 
var randomValue = Math.random();

함수를 호출하는 방법은 console.log() 명령을 실행하는 방법과 같다

함수 이름을 적고 소괄호를 열고 매개변수가 있는 경우에는 인수를 적고 소괄호를 닫으면 된다

매개변수가 없을 때는 빈 괄호를 적으면 되고 함수 끝에는 세미콜론(;)을 선택적으로 사용한다

 

매개변수와 인수

매개변수(parameter) : 함수를 정의할 때 사용한 변수

인수(argument) : 함수를 호출할 때 전달한 값

 

 

관계연산자

Relational operator, 관계연산자

두 표현식(A, B)의 관계를 비교하는 이항연산자. 관계에 따라 boolean 타입의 true, false로 표현됨

Logical operator, 논리연산자

두 boolean 피연산자에 대해 연산하는 연산자.

AND(&&) 연산자

두 피연산자가 모두 true인 경우에만 true를 나타내는 이항연산자

 

OR(||) 연산자

두 피연산자가 하나라도 true인 경우 true를 나타내는 이항연산자

NOT(!) 연산자

피연산자가 true인 경우 false를, false인 경우 true를 나타내는 단항연산자

 

연산자 우선순위

수학에서 곱하기를 더하기보다 먼저 계산하는 것 처럼, Javascript에서도 연산자에 우선순위가 존재.

우선순위 순으로 정리한 연산자

• ++, --
• !
• *, /, %
• +, -
• <, <=, >, >=
• ==, !=
• &&
• ||

괄호

우선순위를 명시하기 위해 괄호를 사용. 괄호안의 계산식이 먼저 계산됨.

• 부가적 효과
  
  • 코드의 가독성 향상
  • 연산자 우선순위 실수 방지

 

String 이어 붙이기

문자열 길이 알아내기

• 문자열의 .length 속성을 이용
  • str.length

문자열 붙이기

1. .concat 함수 사용
   • str1.concat(str2)
2. 더하기(+) 연산자 사용
   • str1+str2

 

> var str = "Hello"; //문자열 초기화
< undefined
> str.length; //마침표를 사용해서 문자열 길이에 접근
< 5 //Hello 문자열의 길이는 5

str을 객체라고 생각하고 마침표(.)를 사용해서 str.length형식으로 str의 length 속성에 접근하면 된다

객체 속성에 접근할 때는 마침표뿐만 아니라 대괄호([])를 이용해서 접근할 수도 있다

 

> str["length"]; //대괄호를 사용해서 문자열 길이에 접근
< 5

 

두 문자열을 이어 붙이려면 어떻게 해야 하는지? 

붙일 분자열 str 뒤에 마침표를 찍고 concat()라는 명령을 사용한다

concat : 연결하다라는 뜻을 가진 concaterate를 줄여 쓴 단어

이 명령 뒤에 소괄호를 열고 이어 붙일 문자열인 str2를 넣은 다음 소괄호를 닫아주면 된다

 

concat() 명령은 변수에 값을 집어 넣을 때도 활용할 수 있다

console

> var str3 = str.concat(str2); // str3에 str과 str2를 붙인 문자열을 저장
< undefined
> str3;
< "HelloWorld"

문자열 여러 개를 이어 붙이고 싶다면 다음과 같이 입력한다

console

> str.concat(str2).concat("!");
< "HelloWorld!"

concat() 명령의 소괄호 안에는 변수뿐만 아니라 문자열을 넣을 수도 있다

concat() 명령 앞에 str과 같은 변수 이름이 아닌 문자열을 바로 작성할 수도 있습니다

 

* +연산자를 사용하면 문자열을 쉽게 이어 붙일 수 있습니다

 

 

문제

변수 prefix와 변수 suffix에 저장된 문자열을 이어 붙여서 변수 word에 저장하세요

저장한 다음에는 문자열의 길이를 변수 word_length에 저장하세요

var prefix = "program";
var suffix = "mer";
var word;
var word_length;

// 이 줄 아래에 코드를 작성하세요
word = prefix.concat(suffix);
word_length = word.length;

String 다루기

특정 위치의 문자열 알아내기

• .charAt 함수 이용
  • 첫 문자 : str.charAt(0)
  • 마지막 문자 : str.charAt(str.length-1)
• 대괄호([]) 사용
  • 첫 문자 : str[0]
  • 마지막 문자 : str[str.length-1]

* 뒤에서 n번째 문자열을 알아내려면?

문자열의 length 속성을 사용하면 앞에서 몇번째에 있는 문자뿐만 아니라 뒤에서 n번째에 있는 문자도 알아낼 수 있습니다

예를 들어 str = "abcdeabcde"가 있을 때 뒤에서 다섯 번째 문자를 알고 싶다면 다음과 같이 작성합니다

코드

> str.charAt(str.length - 5);
< "a"

부분문자열 구하기

문자열의 연속된 일부분을 구하는 함수

• .substring(pos1, pos2) : pos1 에서 pos2까지의 부분 문자열 반환
  • pos2 생략시 pos1에서부터 마지막 까지의 문자열 반환
• substr(pos, length) : pos에서 length길이 만큼의 부분 문자열 반환
  • length 생략시, pos에서 마지막까지의 문자열 반환
  • pos 가 음수인 경우, str.length - pos 로 동작

console

> str.substring(2,4);
< "cd"
> str.substr(2,4)
< "cdea"

substring(2,4) 명령은 인덱스가 2(세 번째 문자열)인  c부터 인덱스가 4(다섯번째 문자열)인 e 전까지를 반환한다

즉, c부터 시작해서 e 바로 앞의 문자열인 d 까지를 반환한다

substr(2,4) 명령은 세 번째 문자열부터 길이가 4인 부분 문자열(sub-string)을 반환한다

즉, c부터 길이가 4에 해당하는 부분 문자열인 a까지를 반환한다

 두 명령 모두 두 번째 인수를 생략할 수 있다

 

*substr() 명령은 첫번째 인수에 음수를 입력하면 문자열 뒤에서부터 계산하여 부분 문자열을 돌려준다

 

문자열 검색하기

• indexOf(str) : 해당 문자열이 처음으로 나오는 곳의 위치
• lastIndexOf(str) : 해당 문자열이 마지막으로 나오는 곳의 시작 위치를 반환한다

 

 

문제

firstLetter() 함수를 수정해서 매개변수 str의 첫 번째 문자를 반환하는 함수를 만들어보세요

charAt() 명령을 이용하면 된다

function firstLetter(str) {
	return
}

function firstLetter(str) {
	return str.charAt(0);
}

 

first2Letters() 함수를 수정해서 매개변수 str의 첫 두문자를 문자열로 반환하는 함수를 만들어보세요. substring() 또는 substr() 명령을 이용하면 됩니다. 예를 들어 str이 "hello"라면 .substring() 또는 substr() 명령을 써서 "he"를 반환하면 됩니다

function first2Letters(str) {
	return
}

function first2Letters(str) {
	return str.substr(0,2);
}

 

배열 만들기

배열

값을 저장할 수 있는 엘리먼트(변수)의 연속된 공간. 주소(인덱스, index)를 이용해 각 엘리먼트에 접근 가능.

배열의 정의(대괄호[] 이용)

• 빈 배열 : var arr=[];
• 초기화된 배열 : var arr=[1,2,3,4,5];
• 엘리먼트에는 어떤 자료형이든 저장될 수 있음
  • var mixed_arr = [ 1, true, 3.14, "string", {name:"object"}, [1,2,3] ];

배열의 길이

• .length 속성 이용

배열의 엘리먼트에 접근하기

• 대괄호 안에 인덱스를 사용 : arr[index]
  • arr[0] = 1
  • console.log(arr[arr.length-1]);

*객체 : 속성이름과 그에 대응하는 값의 집합

* 배열에는 이름이 따로 없고 숫자로 된 인덱스가 있다는 점이 객체와 다른 점이다

* 객체에서 속성이 여러 개면 쉼표(,)로 구분해서 적었듯이 배열에서도 값이 여러 개면 쉼표로 구분해서 적을 수 있습니다

 

배열의 범위를 넘어서는 인덱스를 입력하면 undefined를 반환하는 것도 똑같다

문자열은 문자열의 배열 즉 배열의 "특수한 경우"이기 때문이다

 

 

* 배열 vs 객체 무엇을 사용해야 할까

배열은 비슷한 객체나 값을 여러 개 관리헤야 할 때 유용하고

객체는 속성이 여러 개인 복잡한 데이터 타입이 필요할 때 유용하다

예를 들면 연락처는 이름, 전화번호, 주소 같은 서로 다른 속성을 갖고 있으므로 객체로 나타내기에 적합하다

반면 주소록은 연락처라는 동일한 객체가 연속되어 있으므로 배열이 적합하다

 

* 배열을 사용하는 방법은 문자열을 사용하는 방법과 비슷하다

배열 사용하기

 

배열에 엘리먼트 추가/삭제하기

기본적으로 배열의 앞과 뒤에서 엘리먼트를 추가하거나 삭제할 수 있음.

• .push(element) : 배열의 뒤에 엘리먼트 추가
• .pop() : 배열의 뒤에서 엘리먼트 삭제하고 리턴
• .shift() : 배열의 앞에서 엘리먼트 삭제하고 리턴
• .unshift(element) : 배열의 앞에 엘리먼트 추가

console
> var arr [ 1, 2, 3, 4, 5];
< undefined
> arr.pop(); // 배열 arr에 pop() 명령을 실행하면
< 5			// 맨 뒤에 있는 5가 반환됨
> arr;
< [1, 2, 3, 4] // 1, 2, 3, 4, 5에서 맨 뒤에 있던 5가 빠진 것을 확인

console

> arr.shift(); // 배열 arr에 shift() 명령을 실행하면
< 1 // 맨 앞에 있는 1이 반환됨
> arr;
< [2, 3, 4] // 1, 2, 3, 4에서 맨 앞에 있던 1이 빠진 것을 확인

 

배열 붙이기, 검색하기

• arr1.concat(arr2) : arr1과 arr2 붙임
• arr.indexOf(element) : arr에서 element가 있는 첫 위치를 검색
• arr.lastIndexOf(element) : arr에서 element가 있는 마지막 위치를 검색

 

* concat()과 push() 명령의 차이

 arr1.concat(arr2)와 arr1.push(arr2)는 다르다 

console

> arr1.concat(arr2);
< [1,2,3,4,5,6]
> arr2.push(arr2);
< [1, 2, 3, [4, 5, 6]]

 

문자열 split 함수

• 문자열을 구분자(separator)로 나눠서 각각을 담은 배열을 반환하는 함수

Code

var str="1,2,3,4,5";
arr = str.split(",");

결과

arr = ["1", "2", "3", "4", "5"];

 

reverse() 명령은 배열의 순서를 뒤집는다(배열 엘리먼트의 순서를 거꾸로 뒤집는다)

sort() 명령은 배열 안의 원소들을 오름차순으로 정렬한다

 

 

주석

코드에 대한 설명등의 이유로 작성하는 프로그램의 동작과 무관한 코드.

한줄 주석 : 코드에 대한 설명을 추가할 때뿐만 아니라 코드 일부를 비할성화해서 개발의 편의를 높이는 데도 사용

두개의 슬래시 // 이후에 작성되는 주석

alert("이 코드는 실행됨"); //여기부터 주석
// alert("이 코드는 실행되지 않음"); // 이미 주석임

여러줄 주석 : 주로 코드 상단에 프로그램에 대한 설명, 라이선스 명시, 작성에 관한 정보를 기록할 때 사용

/* 으로 시작해서 */ 으로 끝나는 주석. 여러줄에 걸쳐 활용 가능

/* 여기서부터

age = prompt("나이를 입력하세요");

여기까지 모두 주석 */


var age = 5;
console.log(age);

alert(age + "을 입력하셨습니다.");

 

if문

조건문

조건에 따라 프로그램의 흐름을 분기해서 특정 코드가 실행되도록 함

if, else if, else

if(/*조건식*/){
    /*참인경우 실행될 코드*/
}
else if( /*조건식*/ ){
    /*if 문의 조건이 거짓이고, 위의 조건식이 참인경우 실행될 코드*/
}
/* 여러개의 else if... */
else if( /*조건식*/ ){
    /*위의 if, else if문의 모든 조건이 거짓이고, 위의 조건식이 참인경우 실행될 코드*/
}
else{
    /*모든 if, else if 문이 모두 실행되지 않았을 때 실행될 코드*/
}

* 조건에는 불형 표현식(참/거짓)을 사용함

 

 

 if 조건문을 사용하면 조건을 검사하고 조건이 참일 때만 특정 코드가 실행되도록 할 수 있다

code

var a = 1;
var b = 2;
var c = a + b;
if (Boolean type 조건) {
	// 조건이 참일 때만 
    // 코드 실행
}

 

두 개의 if 조건문 

실행결과

이 구문은 실행됩니다

if 뒤에 따라오는 소괄호 안에 참(true) 또는 거짓(false)을 판단할 조건식을 넣습니다

그리고 그 조건식이 참일 때 실행할 코드를 각각 중괄호 불록 안에 작성합니다

 

첫번째 if 조건문은 조건식이 참이므로 중괄호 안에 있는 구문이 항상 실행되고

두번째 if 조건문은 조건식이 거짓이므로 중괄호 안에 있는구문이 항상 실행되지 않습니다

 

 

else구문 : 바로 위에 작성한 if 조건문의 블록이 실행되지 않았을 때만 실행되는 구문으로 if 조건문과 짝을 이룬다

 

실행 결과

2

브라우저를 새로고침하면 1이 출력된다

2가 출력되지 않은 이유 : 첫번째 if 조건문에서 조건이 참이므로 else 구문은 실행되지 않고 바로 종료 되기 때문

 

반대로 if 조건문 안에서 조건이 거짓이면 if 조건문의 코드가 아닌 else 구문의 코드가 실행된다

코드에서 첫 번째 if 조건문의 조건을 거짓으로 바꾸고 브라우저를 새로고침하면 이번에 2가 출력된다

 

* if~else 조건문을 이용하면 조건이 참인 경우와 거짓인 경우에 실행할 코드를 각각 다르게 작성할 수 있다

 

* 중괄호도 생략할 수 있다

if ~ else 조건문에서 중괄호로 둘러싸인 코드 영역이 console.log("1"); 처럼 명령이 하나만 있는 경우라면 중괄호를 생략할 수 있다

즉, 다음과 같이 작성할 수도 있다

 

if (true) {
	console.log("1");
}
else {
	console.log("2");
}

↓

if (true) console.log("1");
else console.log("2");

이렇게 작성하면 코드가 간절해지는 장점이 있지만 그만큼 실수하기도 쉬워집니다

중괄호 생략은 바로 이어서 다룰 else if 조건문에도 적용됩니다

 

 

else if 조건문 : if 조건문과 else 구문 사이에 몇 개든 상관없이 작성할 수 있다

else if 조건문 위에 있는 if 조건문이 실행되지 않았을 때 조건을 검사하고 그 조건이 참이면 중괄호 안에 있는 명령을 실행

 

실행결과

1

1이 출력된다 첫번째 if 조건문의 조건이 참이므로 구문이 실행되고 뒤에 있는 else if와 else 구문이 실행되지 않기 때문이다

 

만약 첫 번째 조건을 거짓(if (false) {)으로 수정하고 새로 고침하면 2가 출력된다

 

* 조건식 안에 숫자나 문자열이 있어도 if 조건문이 동작합니다. 이 경우에는 숫자가 0일 때오 문자열일 빈 문자열일 때만 거짓으로 인식한다

하지만 입력할 때 실수하기 쉽고 나중에 코드를 이해하기도 어려워지므로 특별한 경우가 아니라면 사용하지 않길 권한다

 

문제

인자가 year가 윤년인지 아닌지를 true, false로 반환하는 solution 함수를 완성하세요

(편의상 4의 베수인 해는 모두 윤년으로 생각하세요)

* 4의 배수인지 검사하려면 year % 4 를 확인하면 된다

즉, yesr % 4 == 0이 참이면 true, 0이 아니라면 false가 반환되면 된다

 

function isLeapYear(year) {
	if (year % 4 == 0) {
    	return true;
        } else {
        	return false;
            }
       }

tip

function isLeapYear(year) {
	return (year % 4 == 0);
 }

switch문

switch, case

조건에 따라 프로그램의 흐름을 분기해서 특정 코드가 실행되도록 함

switch( /*비교할 값*/ ){
    case /*값1*/:
        /*비교할 값이 값1인 경우 실행될 코드*/
        break;
    case /*값2*/:
        /*비교할 값이 값2인 경우 실행될 코드*/
        break;

    /*
    ... 여러개의 case
    */

    default:
        /*비교할 값이 위의 모든 값과 다른 경우 실행될 코드*/
        break;
}

break

break구문을 만나면, switch-case 문의 마지막 중괄호(}) 밖으로 빠져나옴.

• break를 사용하지 않으면, switch문에서 빠져나오지 않고 다음 case에 해당하는 코드까지 실행됨.

 

 

if.js 파일의 코드를 보면 if 조건문과 else if 조건문이 계속 나오면서 매번 choice 값과 비교하는 구문이 반복된다

switch 조건문을 활용하면 이러한 코드를 효과적으로 줄일 수 있다

if.js 프로그램을 switch 조건문을 사용해서 switch.js 파일로 수정하면 다음과 같다

parseInt 가 왜 쓰인건가요?

그냥 prompt만 쓰면 안되는건가요?

prompt만 쓰게 되면 출력을 String으로 하게 됩니다.
그럼 swich(choice)에 들어갈 choice는 1,2,3,4 같은 숫자가 아닌 String이기 때문에 결과값이 항상 default로 나오게 됩니다.
그래서 이 String을 swich문이 인식할 수 있게 숫자로 만들어줘야 하는데 그때 쓰이는게 parseInt입니다.
parseInt로 prompt에 입력된 글자가 숫자일 경우 숫자로 변환해주고, 숫자로 변환된 값을 swich로 넣어주게 되면
case 1이나 case 2 같이 숫자로 된 case가 정상적으로 표시되게 됩니다.

 

 

---

switch 조건문은 소괄호 안에 표현식을 넣고 중괄호를 연 다음 그 안에 case 문과 default 문을 넣습니다

case는 if 또는 else if 처럼 동작하고 default는 else 처럼 동작한다

따라서 case 키워드 안에는 비교할 값을 적어야 하지만 default 키워드 안에는 값을 적을 필요가 없다

또한 두 구문 모두 콜론(:)으로 마친다

 

두 구문 모두 break 구문을 만나면 프로그램은 switch 조건문을 빠져 나온다

만약 choice == 2라면 switch 조건문에서 case 2인 곳으로 바로 점프하여 프로그램이 실행되고, break 구문을 만나서 바로 switch 조건문을 빠져나오는 원리이다

즉, break 키워드가 없으면 switch 조건문을 빠져나오지 않고 이후에 있는 코드들이 이어서 실행된다

---

문제

각 달을 month라는 인자를 받아서 그 달이 며칠까지 있는지 반환하는 daysInMonth() 함수를 완성하세요

(2월은 28일까지 있다고 가정하세요)

function daysInMonth(month){
	// 여기에 switch 문을 이용해 각 달의 날짜 수를 반환하는 프로그램을 작성하세요
    }
 }

완성코드

function solution( month ){
    // 여기에 switch를 이용해 각 달의 날짜수를 반환하는 프로그램을 작성하세요.
    switch (month)
        case 2:
            return 28;
        case 4:
        case 6:
        case 9:
        case 11:
            return 30;
        default:
    return 31;
}

 

while문

반복문

조건에 따라 프로그램의 일정 코드를 반복적으로 수행할 수 있도록 하는 구문 (while 반복문, for 반복문)

* 특정 조건을 만족하는 동안 일정한 코드를 반복해서 실행한다

while

조건이 만족하는 동안 반복실행될 코드를 계속 실행

while( /*조건식*/ ){
    /* 반복 실행될 코드 */
}

 

while 반복문은 조건식을 만족하면 중괄호로 둘러싸인 코드를 반복해서 실행합니다

코드를 한 번 다 실행하고 나면 다시 while 반복문의 조건을 계산하고 반복할지 말지를 결정한다

 

 사용자에게 정답을 입력받고 if 조건문으로 정답을 비교한다 정답이 아니면 메시지를 출력하는 동시에 ++ 연산자를 이용해서 틀린 개수를 담은 count 변수를 1 증가시킵니다 

그리고 countinue 명령으로 뒤에 있는 문제가 출력되지 않도록 한다

 

  var ans;
  ans = parseInt(prompt("1+1=?")); // 사용자에게 정답을 입력받기
  if (ans != 2) {
    console.log(++count + "번 틀렸습니다. 다시 도전하세요.");
    //정답이 아니면 count를 1 증가
    continue; // continue 키워드를 만나면 반복문의 맨 끝으로 이동
  }

while 반복문의 조건식이 true이므로 중괄호 안의 내용이 실행되어 다시 문제가 출력된다

세 번째 문제까지 정답을 모두 맞히면  break 키워드를 만나 while 반복문 밖으로 빠져나오고 참 잘했습니다!라는 메시지가 출력되면서 종료된다

 

while (true) {
	(중략)
   //countinue를 만나면 여기로 이동합니다
 }
 // break를 만나면 여기로 이동합니다
 console.log("참 잘했습니다!");

이처럼 반복문을 활용하면 조건에 따라 프로그램을 반복해서 실행할 수 있습니다

continue, break;

• continue : 남은 반복실행될 코드를 모두 skip (뒤에 있는 코드를 모두 건너 뛴다)
• break : 반복문에서 즉시 탈출

 

문제

sumFrom1ToN() 함수는 n을 인자로 받아서 1부터 n까지 더한 값을 반환하는 함수이다

예를 들어 sumFrom1toN(3)을 호출하면 1 + 2 + 3의 결과값인 6을 반환합니다. 코드 네 번째 줄과 코드 다섯 번째 줄을 수정해서 sumFrom1ToN() 함수를 완성해 보세요

function sumFrom1ToN(n) {
	var count = 1;
    var sum = 0;
    while ( count <= n ) {
    	sum = sum + count;
        count ++;
    }
    return sum;
 }

* 1부터 더하기 위해 count를 1부터 설정해서 n보다 작거나 같을동안(count <= n) while 반복문을 실행한다는 걸 주목하세요

또한  sum이라는 변수를 0으로 설정하고 반복해서 count를 더해 저장하는 부분을 눈여겨 보셈

 

do while문 (while 반복문의 변형, while 반복문과 매우 유사함)

do, while

한번은 코드가 실행되고, 이후에 반복실행될지 말지를 결정

do{
    /* 반복 실행될 코드 */
}while( /*조건식*/ );

일단 반복문을 한 번 실행한 다음 더 반복할지 말지를 조건식을 보고 결정하는 원리이다

 

 

* while 반복문보다 do while 반복문을 이용하면 더 간결하게 작성할 수 있다

(중략)
do {
	var ans = parseInt(prompt("1+1=?")); // 변수 ans는 문제 (1+1)의 답을 사용자에게 입력받습니다
 } while (ans != 2); //그런 다음 while 반복문을 이용해서 입력 값으로 정답 2가 입력되지 않으면(정답이 아니면) 계속 반복하도록 합니다
 while 반복문이 종료되면 맞혔습니다!라는 메시지를 출력합니다

* do while 구문을 사용하면 최소 한 번은 실행되고 그 이후에는 조건식에 따라 반복할지 말지 결정하는 코드를 작성할 수 있다

조건식이 거짓(False) 일 때,

• while : 한번도 실행되지 않음
• do, while : 한번은 실행되고 종료

 

* do while 반복문을 while 반복문으로 고치면?

do while 반복문으로 작성한 코드를 while 반복문으로 고치면 다음과 같다

 

- do while 반복문으로 작성한 코드

do {
		var ans = parseInt(prompt("1+1=?"));
} while (ans != 2);
console.log("맞혔습니다!");

- while 반복문으로 작성한 코드

var ans = parseInt(prompt("1+1=?"));
while (ans != 2) {
	ans = parseInt(prompt("1+1=?"));
}

같은 코드가 while 반복문의 위와 안에서 두 번 작성된 것을 볼 수 있다

 

 

 

for문

for

초기구문, 업데이트 구문, 반복조건 을 한 구문에 합친 반복문.

0~4까지 더하는 동일한 while문과 for문.

while 문

var sum = 0;
var i = 0; //초기 설정 코드
while( i < 5 /*조건식*/ ){
    sum = sum + i;
    i++; // 업데이트 코드
}

for문

var sum = 0;
for( var i = 0 ; i < 5 ; i++ ){
    sum = sum + i;
}

-> while 3.js 파일에서는 초기화 구문이 반복문 바깥에 있다

실행결과

1
2
...
9
10

 

while 반복문을 i 와 array 의 길이를 비교하면서 실행한다

 

프로그램을 실행하면 i가 0부터 이 조건을 만족하는 동안 순차적으로 증가하면서 array 값이 출력한다

* while 문에서 countinue;을 만나면 반복실행 코드의 끝으로 이동한 다음 바로 조건식 검사

 

프로그램을 작성할 때 반복문에 진입하기 전에 실행할 초기화 코드를 넣고 어떠한 조건을 만족하는 동안 반복문을 실행하되 업데이트 구문을 함께 실행하고 싶을 때가 있다

이럴 때는 while 반복문보다 for 반복문이 더 유용하다

 

while 반복문보다 코드가 한결 간결해졌다

* for 문에서 countinue; 문을 만나면 update 구문으로 이동

 

while 반복문에서는 초기화 구문, 조건식, 업데이트 구문을 각각 while 문 위, 소괄호 안, 중괄호 안에 입력했지만 for 반복문에서는 초기화 구문, 조건식, 업데이트 구문을 모두 소괄호 안에 입력한다

 

for 반복문을 작성하는 방법

 - 먼저 for 키워드를 입력하고 소괄호를 연 다음 초기화 구문(여기서는 var i = 0)을 작성하고 세미콜론(;)으로 구분한다

이어서 조건식(i < array.length)을 작성하고 다시 세미콜론으로 구분한 다음 업데이트할 구문(i++)을 작성한다

 

반복 실행할 코드는 while 반복문과 마찬가지로 중괄호 블록 안에 작성한다

주의할 점은 반복 실행할 코드는 위에서 작성한 for 반복문의 조건식 (i < array.length)을 만족하지 않으면 한 번도 실행되지 않지만 초기화 코드 (var i = 0)는 항상 실행된다는 점이다

 

 

* for 반복문에서는 초기화 구문이 실행되고 소괄호 안의 조건식이 참이 아니면 바로 for 반복문을 종료한다

 

while 반복문과 마찬가지로 for 반복문 안에서도 break와 continue 키워드를 쓸 수 있다

break 키워드를 만나면 for 반복문 바깥으로 빠져나간다는 점은 같지만 continue 키워드를 만나면 업데이트 구문이 실행되고 다시 조건식을 비교한다는 점이 다르다

 

 

* while 반복문에서는 continue 키워드를 만나면 중괄호가 닫히는 부분까지 단번에 점프한 다음 조건식을 검사하고 

다시 반복할지 말지를 결정한다

for 반복문에서는 중괄호 끝으로 간 다음에 이 조건식을 확인하기 전에 업데이트 구문을 먼저 실행하고 이 조건식을 검사한 후에 반복할지 말지를 결정한다

 

 

* 변수 여러 개를 한꺼번에 초기화하기

 

for 반복문을 사용할 때 쉼표를 활용하면 변수 여러 개를 한꺼번에 초기화하거나 업데이트를 할 수 있다

예시

for (var i = 0, j = 10; i < j; i ++, j--) {
	console.log(i,j)
}

실행하면 다음과 같이 출력된다

0 10
1 9
2 8
3 7
4 6

 

 

* 이중 반복문과 다중 반복문 사용하기

반복문과 조건문은 중첩해서 사용할 수 있다

예를 들어 다음과 같이 구구단을 출력하는 프로그램을 만들 수 있다

코드

for (var i = 2; i <= 9; i++) {
	for (var j = 1; j <= 9; j++) {
    	console.log(i + "*"+ j + "=" + i * j);
	 }
 }

 

다중 반복문을 사용할 때는 보통 변수를 i, j, k순서로 사용합니다

여기서 한 가지 주의할 점이 있다 바로 바깥쪽 for 문에서 선언한 변수를 안쪽에 있는 for 반복문에서 다시 사용하면 정상으로 동작하지 않는다는 점입니다

 

코드

다중 반복문의 잘못된 예

for (var i = 2; i <= 9; i++ {
	for(var i = 1; i <= 9; i++) {
    	console.log(i + "*" + i + "=" + i * i);
        }
 }

 

 

문제

for 반복문을 이용해서 배열 cost의 값을 모두 더해 total_cost 변수에 저장하세요

힌트 : 배열의 길이를 알 수 있는 length 속성을 사용하세요

var cost = [85, 42, 37, 10, 22, 8, 15];
var total_cost = 0;

for문은 초기구문, 업데이트 구문, 반복조건을 한 구문에 합친 반복문이다

while 문과 for문을 비교하는 예제를 참고

 

while문

var sum = 0;
var i = 0; //초기 설정 코드
while( i < 5 /*조건식*/ ){
    sum = sum + i;
    i++; // 업데이트 코드
}

for 문

var sum = 0;
for( var i = 0 ; i < 5; i++ ){    // 초기 설정 코드 ; 조건식 ; 업데이트 코드
    sum = sum + i;
}

완성코드

var cost = [85, 42, 37, 10, 22, 8, 15];
var total_cost = 0;

for (var i = 0; i < cost.length; i++) {
	total_cost = total_cost + cost[i];
 }

for in문

for in

객체의 각 엘리먼트에 접근할 수 있는 반복문.

객체의 속성들을 출력하는 동일한 코드

for 구문 사용

var property_list = Object.keys(obj);

for( var i=0 ; i<property_list.length ; i++ ){
    var propertyName = property_list[i];
    console.log( "\t", propertyName, ": ", obj[propertyName] );
}

 

for in 구문 사용

for( var propertyName in obj ){
    console.log( "\t", propertyName, ": ", obj[propertyName] );
}

 

for 반복문

var obj = {
	"속성1": 1,
    "속성2": 2,
    "속성3": 3
}

객체의 각 속성에 접근하고 싶다면 어떻게 해야하는 가?

for 반복문을 실행하면 변수 i가 배열의 각 요소의 인덱스를 나타내면서 각 배열의 요소에 접근한다

 

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

for (var i = 0; i < array.length; i++) { //조건식
	// 반복 실행할 코드
    console.log(array[i]);
}

객체에서 각 속성에 접근하려면 변수 i가 객체 속성의 이름을 나타낼 수 있으면 된다

이럴 때는 object.keys() 함수를 이용한다

 

object.key()함수는 객체를 인자로 받아서 객체 속성의 이름을 배열로 반환하기 때문이다

 

 

for in 반복문은 객체 속성에 대해서 반복된 코드를 수행할 수 있다

 

escape 문자 '\t"는 tab문자를 의미한다. 즉, 출력할 때 들여쓰기를 해준다

for in 반복문을 보면 초기화 코드나 업데이트 코드가 따로 없다

 

 

하지만 반복문이 실행되면서 in 앞에 있는 변수(propertyName)에 in 뒤에 있는 객체(obj)의 속성 이름을 하나씩 순서대로 넣어준다

그러면 for 반복문 안의 코드에서 객체의 속성 이름과 그 이름을 이용해 객체의 속성 값에 접근할 수 있다

for (var propertyName in obj) {

 

for in 반복문이 아닌 곳에서는 in이 연산자로 동작한다

in 연산자는 해당 속성의 이름이 객체에 존재하는 지 검사하는 연산자이다

결과는 true 또는 false로 반환한다

 

문제

for in문을 이용해서 obj의 속성중, number 타입의 값을 모두 더해서 sum에 저장하도록 빈칸을 채워 코드를 완성해 보세요.

 

for문 사용
var property_list = Object.keys(obj);     // Object.keys()를 통해 속성에 접근

for( var i=0 ; i<property_list.length ; i++ ){
    var propertyName = property_list[i];
    console.log( "\t", propertyName, ": ", obj[propertyName] );
}
for in문 사용
for( var propertyName in obj ){
    console.log( "\t", propertyName, ": ", obj[propertyName] );
}

 

var obj = {
    name: "object",
    age: 10,
    weight: 5
}
var sum = 0;
for ( 
var property
 in 
obj
 ){
    if( typeof( 
obj[property]
 ) == "number" ){
        sum = sum + 
obj[property
 ;
    }
}

console.log("sum :", sum);

변수의 scope

변수의 Scope

• 선언한 변수가 유효한 영역

function scope

• 선언된 변수는 선언된 함수 안에서 접근 가능
• 선언된 함수 안에서 선언된 함수 (nested function)에서도 접근 가능

 

변수의 shadowing

변수의 Shadowing

• 함수 안에서 밖에서도 선언되었던 같은 이름의 변수를 사용하는 경우
  • 함수 밖의 변수는 잠시 가려짐 (shadowing)
  • 함수 안에서는 해당 함수에서의 변수를 사용 (함수 밖 변수의 값은 변하지 않음)
  • 함수에서 빠져나오면 다시 해당 변수에 접근할 수 있음
• 함수 안에서만 값이 유지되어야 하는 경우
  • 함수 안에서 var 키워드를 사용해 선언하고 사용
• 여러 함수에서 값이 유지되면서 사용되는 변수의 경우
  • 함수를 포괄하는 곳에서 선언하고 사용

closure(클로저)

Closure 클로저

• 함수, 함수가 선언될 때의 environment로 구성
• 함수가 정의 될 때의 environment가 함께 closure로 결합되면서, 다양한 활용이 가능

function makeCounterFunction(initVal){
    var count = initVal;
    function Increase(){
        count++;
        console.log(count);
    }
    return Increase;
}

var counter1 = makeCounterFunction(0);
var counter2 = makeCounterFunction(10);

• counter1의 closure
  • 함수 : function Increase(){}
  • 환경 : var count = 0;
• counter2의 closure
  • 함수 : function Increase(){}
  • 환경 : var count = 10;