181105 - TIL

---

주제: 자바스크립트

강의:  자바스크립트 부트캠프

날짜: 2018.11.05

강의자: 김민태님

---

prompt(), alert() - 함수, 모양을 보아도 함수. ()호출하고 있다.

window.prompt() -> window객체에 있는 prompt메소드

window는 가장 상위에 있는 전역객체이기 때문에 생략이 가능.

prompt의 반환값은 모두 문자열. 숫자입력도 문자열로 리턴한다.

내가 무엇인가를 만드려고 할 때

• 그림으로 그려보자(최대한 단순하게 그림으로 도식화하기)

문제가 여러개가 있고 사용자가 답을 입력하는 프로그램 만들기

문제1)

• 문제가 여러개다. -> 배열, 객체
• 여러개지만 문제에 각 이름은 필요없다 -> 배열(문제데이터)
• 답도 여러개다. -> 배열(정답데이터)
• 문제가 여러개가 들어있다. 문제를 내고 답을 받고 비교후 점수를 확인하는 작업을 반복 -> 반복문
• 사용자에게 몇점을 맞았는지 알려준다

전체적인 틀을짜고 세세한 내용을 작업 -> 처음부터 코드를 짜려고 하면 어렵다. 단계적으로 해결해야한다.

데이터의 구조가 바뀌면 코드의 구조도 바뀌게 된다.

문제2)

while (step < questionList.length) {

let answer = prompt(questionList[step]);

if (answer == questionList[step + 1]) {

score = score + 10;

}

step = step + 2;

}

배열 한개에 문제와 답을 다 넣어놓았다. 

하지만 코드상에 숫자가 들어가있다면 좋은 코드가 아니다. 숫자는 의미가 없다. -> 의미를 부여하는 식으로 코드를 바꿔야한다. 

let questionList = [

'오늘의 요일은?', '수요일', 10,

'미국의 수도는 어디입니까?', '워싱턴', 20,

'물에 가라앉고 있는 나라는?', '몰디브', 40

];

const SEPARATOR = 3; //변하지않는 값. const로 변수생성, 상수(값이 변하지 않는 불변값)는 대문자로.

const ANSWER = 1; //하지만 이러한 변수명은 부족한 내용이다. 숫자가 의미하는 것이 담겨있지 않았다. 

const SCORE = 2; //position이나 location 등의 변수명이 추가적으로 들어간다면 좋은 변수명. 이름을 너무 짧게만 지으려고 하지 않도록.

let step = 0;

let score = 0;

while (step < questionList.length) {

var answer = prompt(questionList[step]);

/**

* 의미를 부여할 수 없는 숫자 값을 의미를 부여할 수 있는 식별자로 변경함으로서

* 코드의 의미를 좀 더 명확히 할 수 있게 되었다

*/

if (answer == questionList[step + ANSWER]) {

score = score + questionList[step + SCORE];

}

step = step + SEPARATOR;

}

하지만 위의 코드는 데이터를 위치에 기반해서 사용하고 있는 취약점이 있다.

## 연산자의 이해

연산자의 우선순위, 명시적인 연산자우선순위 지정은 () 쓰기. 괄호안에 있는 것부터 연산한다.

##비교문

switch case - 동등비교를 사용할때 유용하다, break문을 만나면 switch문을 벗어난다.

switch(car) {

case '쏘나타':

alert('현대자동차');

break;

case 'K5':

alert('기아자동차');

break;

case '말리브':

alert('쉐보레');

break;

case 'X3':

case 'X5':

alert('MBW');

break; //스위치문은 break를 만나야 탈출.

case 'F40':

alert('페라리');

return; //스위치 문이 함수안에 있을 때 함수에서 벗어나고 싶은경우에 retrun

default: //if else의 맨 마지막과 같다. 모든 case에 맞지 않을 경우. 생략 가능

alert('모르겠습니다.');

break;

}

return을 함수의 종료라고 하기엔 좁은의미의 이해. return은 함수의 값을 호출한 곳으로 반환한다.

if와 switch문은 사용을 지양하자;; -> 변화에 취약. 비용이 높은 구조.

## 값타입의 변환

let a = 10;

a + 30; //40

a + "30"; //'1030' 자바스크립트가 암묵적으로 숫자타입을 문자열타입으로 변환한다. 이를 형변환(type casting)이라고 한다.(암묵적 형변환)

형변환에도 규칙이 있다.

let age = prompt('나이를 알려주세요. 숫자로만 입력해주세요.'); //30 입력시, prompt에서 리턴하는 값은 모두 문자열열

alert('당신의 13년 후 나이는 ' + (age + 13) + '세입니다.'); // 3013세

age = Number(age);

alert('당신의 13년 후 나이는 ' + (age + 13) + '세입니다.'); //43세

## 함수정의

모든 함수는 값을 반환한다. 값을 반환하기 때문에 함수는 식이다!

함수에서의 호출시 오류는 이름이 틀린 경우를 제외하고는 오류가 발생하지 않는다.

function sum(x, y) {

return x + y;

}

let r1 = sum(10, 20);

let r2 = sum(10);

let r3 = sum();

let r4 = sum(10, 20, 30, 40); //함수를 만들때 인수를 두개만 받는걸로 되어있지만 함수호출시 인수를 안넣건 4개를 넣건 상관없이 호출된다.

console.log(r1, r2, r3, r4);

자바스크립트의 함수는 이름생략이 가능하다. -> 익명함수

function add(){

}

let a = add;//함수는 값이기 때문에 변수에 담을 수 있다.

a();//변수명으로 함수를 호출 가능. 변수명은 마치 함수이름처럼 보인다. 고로 이름없이 함수를 만들수 있다.

let a = function(){ //익명함수

}

//익명함수를 정말 많이 사용한다. 익명함수는 객체에서 많이 사용된다. 

let foo = {

    getName : function(){

    }

}

// es2015이후 버전부터는 function도 생략해서 사용한다

let foo = {

    getName(){

    }

}

//함수에서의 인수는 변수다. 변수에는 함수를 담을 수 있기 때문에 함수의 인수에 변수를 담을 수 있다

let x = function(){

}

foo(x){

}

foo(10);// foo(x = 10);

foo(function(){})

// 함수는 값이기 때문에 리턴값이 될 수 있다.

function foo(x){

    return function a(){

    }

}

자바스크립트는 함수를 값으로 취급하기 때문에 변수에 담을 수 있고 이름도 생략할 수 있고, 인수도 변수이고 리턴값도 값이기 때문에 인수로 전달될 수 도 있고 반환값으로 함수가 리턴될 수 도 있다.

자바스크립트의 함수는 값이다!

설명이 복잡하지만 자주쓰고 있다.

setTimeout(function, time);//보통 함수와 시간, 두개의 인수를 받는다. 함수의 인수로 함수를 보낸다

//우리가 만든 함수의 호출 권한을 setTimeout함수에게 위임한다. 이러한 함수를 콜백함수라고 부른다.

setTimeout(function(){

    alert('안녕');

},1000) //안녕이라는 alert을 띄우는 함수의 호출을 setTimeout에게 위임. 1초후에 호출한다.

## 자바스크립트의 함수는 1급함수

1급함수의 특징을 모두 가지고 있다!

## 화살표함수

es6에 추가된 새로운 함수 식. 

let a = function(x){

    return x * 2;

}

//es6의 새로운 함수

let a = x => x *2;

// 변수 a선언까지 같다. 

// function 생략, => 화살표모양이 function

// => 앞에 있는 x가 (x)에 있던 인수, 인수와 function의 위치가 바뀜

//당연히 리턴하기 때문에 return을 생략

//한줄함수(수학의 람다함수에서 가져온 개념(?), 애로우펑션)

//x라는 값을 받아서 => 화살표를 따라 x *2를 계산해서 반환

//계산의 흐름에 따라 만들어진 함수.

let a = (x, y) = > x + y; //인수가 한개일땐 괄호생략 가능, 인수가 두개 이상일땐 괄호가 반드시 필요. 인수가 없을때도 ()사용.

//함수의 인수가 많은건 권장하지 않는다. 

공부하기

1급함수가 무엇인지 좀 더 자세히 공부해보자.

---

---

초보 퍼블리셔의 공부정리 블로그입니다.

내용에 오류가 있거나 수정사항이 있다면 꼭 댓글 부탁드립니다