JavaScript 2주차 스터디 노트
1. 조건문
조건문은 주어진 조건에 따라 에플리케이션을 다르게 동작하도록 하는 것이다.
if 조건문
if(true) {
alert('result : true');
}위 예제의 실행 결과는 'result:true'이다. if 다음에 true가 오면 중괄호 안쪽 부분이 실행된다.
if(false) {
alert('result : true');위 예제의 실행 결과는 없다(undefined). if 다음에 false가 오면 중괄호 안쪽 부분이 무시된다.
if 만으로는 좀 더 복잡한 상황을 처리하기엔 한계가 있다. 따라서 else 를 추가적으로 사용한다.
else 예시
if(true) {
alert(3);
} else {
alert(4);
}위 코드의 결과는 3이다. if 문이 true 이면 if 문의 조건문만 실행되고,
if 문이 false 라면 else 문의 조건문만 실행된다.
따라서 else 를 "앞쪽에 나온 조건문이 실행되지 않았을 경우" 라고
else if
else if 를 사용하면 조건문을 좀 더 풍부하게 할 수 있다.
if 와 else는 시작과 끝에 사용하고 중간에 들어가는 여러 조건문은 else if 로 작성? 한다.
if
else if
else if
else if
else지금까지 나온 - 조건문 안에 true 값이 들어가는 - 예제는 언제나 실행이 되기 때문에 조건문의 역할을 잃은 옳지 않은 문법이지만 생활코딩님이 조건문의 이해와 조건문 안에 boolean 값이 들어갈 수 있음을 설명하기 위해 고안 한 것이다.
조건문은 아니지만 앞으로 사용될 자바스크립트 코드
일단 alert - > 경고창
그리고 지금 새롭게 알게 된 것...
prompt
prompt('당신이 가장 좋아하는 음식은?');
이렇게 경고창에 사용자로부터 답변을 받을 수 있는 칸이 생성된다.
조건문을 html 문서에서 활용한다면
<body>
<script>
id = prompt('아이디를 입력해주세요.');
if(id == 'legend){
alert('아이디가 일치 합니다.') ;
} else {
alert('아이디가 일치하지 않습니다.') ;
}
</script>
<body>id를 입력받을 수 있는 prompt 창이 뜰 것이며 사용자가 그 곳에 자신의 id를 입력하면
만약 id가 legend라면 아이디가 일치합니다 라는 경고창이 뜨고
id가 legend 가 아니라면 아이디가 일치하지 않습니다 라는 경고창이 뜬다.
switch
조건문에서 비교할 케이스가 많은 경우,
if-else문을 여러번 사용하는 것보다 switch문을 이용하면 가독성을 높일 수 있다.
예제
let fruit = prompt('무슨 과일 살거야?') ;
switch(fruit){
case('사과') :
console.log('사과입니다') ;
break;
case('바나나') :
console.log('사과입니다') ;
break;
case('귤') :
console.log('사과입니다') ;
break;
case('자두') :
console.log('사과입니다') ;
break;
default :
console.log('그런 과일은 없습니다.')
중간에 break를 쓰지 않으면 해당하는 case 이후의 코드도 같이 등장한다.
switch 문에서 else는 default로 이용한다.
삼항연산자
자바스크립트 삼항 연산자는 참/거짓에 따라 선택적으로 실행되는 조건문이다.
조건문 ? 선택문1 : 선택문2
삼항 연산자는 조건문이 True일때 선택문1을 실행한다. 조건문이 false일 때 선택문2를 실행한다.
let x = 100, y = 10;
let z = x > y ? "x가 y보다 더 크다." : "x가 y보다 더 작다.";
console.log(z);
2.반복문
while
while(조건) {
반복해서 실행할 코드
}
while(true){
document.write('coding everybody <br>');
}이렇게 하면 웹 페이지에서 coding ev- 가 무한 번 작성될 것이다.-> 무한루프로 인해 오류 발생... 이것을 막을려면?
let i = 0;
while(i < 10){
document.write('coding everybody <br>')
i=i+10
}1회 반복될 때 마다 i가 1씩 증가하도록 하고 i가 10 이하일 때만 반복문이 실행되도록 설정하면 된다.
do while
do {
// 반복할 코드
}
while (조건문);do...while문은 조건문을 판단하기 전에 do 블록의 코드를 먼저 실행합니다.
그리고, 조건문을 판단하여, 조건문의 결과가 true이면 do 블록의 코드를 다시 실행합니다.
이 과정을 반복합니다.
for
반복문은 for 문으로도 작성 가능하다.
for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){
반복해서 실행될 코드
}예제
for(var i = 0; i < 10; i++){
document.write('coding everybody'+i+'<br>');
}변수의 선언과 초기화를 for 안에 동시에 진행하며 반복조건 또한 한 번에 작성한다.
반복문의 제어
위에서 break를 사용하긴 했지만 제대로 정리하자면 break 와 continue 를 통해 반복문의 수행을 제어할 수 있다.
for(let i = 0; i < 10; i++){
if(i === 5) {
break;
}
document.write('coding everybody'+i+'<br>');
}이 경우 10행이 출력되지 않고 5행만 출력된다. 2행의 if(i === 5) 에 의해서 i의 값이 5일 때 break 문이 실행되면서 반복문이 완전히 종료된 것이다.
continue는 어떠한 행위를 하다가 continue문을 만나면 해야할 명령문을 실행하지 않고 그 다음 명령문을 실행하는 명령문 이다.
3.함수
함수(function)란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.
함수를 선언하는 6가지 방법
1. named function declaration (명명 함수 선언)
function hello() {
// ...
}가장 대중적인 방법이다. 함수의 이름이 hello가 된다. 이미 여러차례 싸질러 놨듯, 호이스팅 되기 때문에 이 함수는 어느 스코프에서든 호출 할 수 있는 함수가 된다.
2. anonymous function expression (익명 함수 표현)
var hello = function () {
//...
}이름이 없는 함수를 변수에 담은 방식이다. 이름이 없는 함수긴 한데, 자바스크립트 엔진이 이름을 변수명으로 추정하여 넣는다.
var hello = function () {
//...
}
hello.name
// > "hello"
hello
// > ƒ () {
// //...
// }변수 할당은 호이스팅 되지 않으므로, 할당 된 이후에만 실행 가능하다.
3. named function expression (명명 함수 표현)
var hello = function originalName() {
// ...
}2와 거의 동일하다. 다른 점은 함수 이름이 명확하게 선언되어 있으므로 JS 엔진에 의해 추론되지 않는 다는 것이다.
4. Immediately-invoked expression (즉시 실행 표현)
var hello = (function () {
//...
})()즉시 실행 함수로, 클로져를 활용할 수 있다. 내부 함수는 변수나 다른 함수등을 쓸 수 있지만,이 함수 밖에서는 완전히 캡슐화되어 접근 할 수 없다. 가장 흔해 빠진 예제 중 하나로는 카운터가 있다.
var myCounter = (function (initialValue = 0) {
let count = initialValue
return function () {
count++
return count
}
})(1)
myCounter() // 2
myCounter() // 3
myCounter() // 4외부 함수에서 넘겨준 1을 가지고, 내부에서 처리를 하여 리턴하고 있다.
5. function constructor
var hello = new Function()아마도 이런식으로 함수를 쓸일은 거의 없을 것이다.
const adder = new Function('a', 'b', 'return a + b')
adder(2, 6)
// 8이는 eval()을 사용하는 것과 같기 때문에 굉장히 위험하다. 그리고 이 생성자는 전역 범위로 한정된 함수만 생성할 수 있다.
6. arrow function (화살표 함수)
var hello = () => {
//...
}그리고 요즘들어 많이 쓰이고 있는 화살표 함수다. 몇가지 다른게 있다면
constructor로 쓰일 수 없다.
prototype을 가지고 있지 않는다.
yield 키워드를 허용하지 않으므로 generator를 쓸 수 없다.
this도 다르다.
리턴
const f1 = (x, y, z) => x + y + z
const f2 = (x, y, z) => {
return x + y + z
}
위 f1 f2는 값이 같다. object를 바로 리턴하려면 괄호를 씌우면 된다.
const f3 = (x, y, z) => ({ x, y, z })
함수를 호출하는 방법
자바스크립트에서 함수를 호출하는 방법은 '함수명()'이다.
function hello() {
console.log('hello world!') ;
};
hello()
//위 함수를 호출하면 다음과 같은 결과를 얻음
//hello world!return 활용하기
return 문은 함수에서 결괏값을 반환할 때 사용합니다.
또한 함수에서 return 문이 실행되면 반복문의 break문과 비슷하게 코드가 강제 종료됩니다.
즉, 함수 정의문에 return 문이 사용되면 함수를 호출했을 때 결과값(data)를 반환합니다.
#데이터를 반환하고 강제 종료하는 return 문
함수에서 return은 함수의 실행을 강제종료합니다. 그러므로 reture문 아래의 로직은 작동하지 않습니다.
function 함수명() {
var js_code = 1;
return js_code;
//return이 이미 실행되어 이 코드는 의미 없다.
var js_code_2 = 2;
}
Copied!
function sum(num1, num2) {
return num1 + num2;
}
var result = sum(10, 20);
console.log(result); //30
Copied!함수의 범위
JavaScript에는 스코프라는 유형으로 변수를 구분하여 변수에 접근한다.
스코프에는 두 가지 유형의 범위가 있다.
지역 범위(local scope)
전역 범위(global scope)
-변수 스코프(적용 범위)
전역 범위 - 코드 전체에 선언되는 변수의 범위
지역 범위 - 코드 중 특정 범위에서 선언되는 변수의 범위
함수 범위 : 함수 내부 영역에 선언되는 변수의 범위
블럭 범위 : if, for 같은 구문 블럭 내부 영역에 선언되는 변수의 범위
한마디로 전역범위는 어디에서든 사용할 수 있고 지역범위는 선언한 블럭에서만 사용할 수 있다는 것
재귀 함수
함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것을 재귀 함수 호출이라고 합니다.
재귀 함수 호출은 함수를 반복문처럼 여러 번 호출하기 위해 사용합니다.
function fun() {
var a = 0;
fun();
}
fun();
Copied!재귀 함수를 적용해 1부터 10까지 출력하는 예제
var num = 0;
function fun() {
num++;
document.write(num, "<br>");
if (num == 10) return;
fun();
}
fun();매개변수 사용하기
매개변수(parameter)란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미한다. 인수(arguement)란 함수가 호출될 때 함수로 값을 전달해주는 값을 말한다.
예시
function timeToGoHome(speed, distance) {
let time = distance / speed;
return time;
}
timeToGoHome(20, 100);
만일, 전달인자의 길이가 유동적이라면?
Math.max(3, 5, 8, 10); // 10
Math.max(3, 5, 8, 10, 20); // 20
Math.min(3, 5, 8, 10, 100, 1000); // 3보통 optional한 parameter는 대괄호로 표시한다.
Math.max와 같은 기능을 하는 getMaxNum([값1[, 값2[, ...]]]) 함수를 만들어보자. parameter를 어떻게 지정해주어야 할까?
1. [ES6] ... : Rest Parameter
function getMaxNum(...nums) {
console.log(nums); // [3, 5, 8, 10]
}
getMaxNum(3, 5, 8, 10);
function getMaxNum(...nums) {
return nums.reduce(function(acc, current) {
if (acc > current) {
return acc;
} else {
return current;
}
});
}
getMaxNum(3, 5, 8, 10); // 10ES6 : Rest Parameter를 이용해 매개변수를 지정해준다. 매개변수가 배열의 형태로 전달된다.
- [ES5] arguments 라는 키워드를 이용할 수도 있다.
function getMaxNum() {
console.log(arguments); // {0:3, 1:5, 2:8, 3:10}
}
getMaxNum(3, 5, 8, 10);다만, 이 arguments 객체는 배열 같아 보이지만, 배열이 아니다. 이를 유사 배열이라고 부른다.
매개변수에 기본값을 넣어주고 싶은 경우
function getRoute(destination, departure = 'ICN') {
return '출발지: ' + departure + ','
+ '도착지: ' + destination;
}
getRoute('PEK'); // "출발지: ICN, 도착지: PEK"
ES6 : Default Parameter를 할당해줄 수 있다. 문자열/숫자/객체 등 어떠한 타입도 가능하다.
function getRoute(departure = 'ICN', destination) {
return '출발지: ' + departure + ','
+ '도착지: ' + destination;
}
getRoute(undefined, 'PEK'); // "출발지: ICN, 도착지: PEK"중간에 기본 매개변수가 들어가는 경우, undefined를 넘겨줬을 때 기본값으로 처리한다.
화살표 함수
화살표 함수
자바스크립트에서는 화살표 함수를 이용해 함수표현식을 간단하게 작성할 수 있다.
화살표 함수에는 function을 제거하고 매개변수 => { return } 과 같은 형태로 작성할 수 있다.바로 반환만 하는 경우에는 ()을 이용해 한줄로 작성할 수도 있다.
const sum = (a,b) => {
return a+b;
}
const sum2 = (a,b) => (a+b)
const sum3 = (a,b) => a+b