JavaScript 함수/조건문/반복문

1. JavaScript 기본문법
2. JavaScript 함수/조건문/반복문

09  함수  Function

---

다수의 명령문을 코드 블록으로 감싸고 하나의 실행 단위로 만든 코드의 집합으로, 유사한 동작을 하는 코드를 하나로 묶어 범용성을 확대시킨(=모듈화) 블록 코드이다.

함수는 가급적 한 가지 일만 수행해야 하며, 매개 변수는 최대 3개 이내로 작성하는 것을 권장한다.

09-1. 함수 선언 (function declaration)

함수 선언문

function showMessage() {
  alert( '안녕하세요!' );
}

function name(parameter1, parameter2, ... parameterN) {
  // 함수 본문
  return param1 + param2 ...
}

//함수 호출
showMessage();

함수 표현식

- 함수 선언문 방식으로 함수를 만들었을 때 발생하는 호이스팅(hoisting)과 중복 선언 문제를 방지

- 함수를 생성하고 변수에 값을 할당하는 것처럼 함수를 변수에 할당(함수 또한 값이기 때문)

- 익명 함수 표현식으로 작성 가능

 

** 호이스팅 hoisting **
- 코드에 선언된 변수 및 함수를 유효한 범위의 코드 상단으로 끌어 올리는 작업
- var의 변수/함수 선언만 위로 올려지고, 할당은 올려지지 않음
- let, const 변수 선언과 함수 표현식에서는 호이스팅 X

let sayHi = function() {
  alert( "Hello" );
};

 

메소드 Method

- 객체에 저장된 값이 함수인 경우, 이를 메서드(method)라고 부름

- 함수를 호출하는 객체가 있는 경우 메서드라 부르고, 함수를 호출하는 객체가 없으면 함수라고 부름

  ( = 객체의 프로퍼티가 함수인 경우가 메서드)

- 점 표기법 또는 대괄호 표기법을 통해 호출 가능

const obj={
  prop: function(){
  	//내용
  }
}

//메서드를 변수에 할당
let obj = {
  show1: function() {
    console.log('show1() 메서드 호출');
  }
}

obj.show1(); // 메서드

let funcCall = obj.show1;
funcCall();  // 함수

 

생성자 함수

- 유사한 객체를 다중으로 만들 때 사용되는 함수(타 언어의 class 개념과 유사)

- 일반적으로 생성자 함수의 첫 글자는 대문자로 시작

- 생성자 함수로 객체 생성 시 반드시 'new' 연산자를 통해 객체 생성

- 재사용할 수 있는 개체 생성 코드를 구현할 수 있음

- Date( ), Set( ) 등의 내장 객체를 생성자 함수를 이용해 만들 수 있음

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("보라");
/*
let user={
  name:"보라",
  isAdmin: false
}; 
와 동일하게 동작
*/

alert(user.name); // 보라
alert(user.isAdmin); // false

/*
new User(...) 실행
1. 빈 객체를 만들어 this에 할당
2. 함수 본문을 실행, this에 새로운 프로퍼티 추가해 this 수정
3. this 반환
*/

 

화살표 함수  Arrow Function (ES6)

- 본문이 한 줄인 함수를 작성할 때 유용한 작성 방식

- argument와 this의 작동 방식이 기존 함수와 다르므로 사용 시 유의 필요

 

• 중괄호 없이 작성: (...args) => expression - 화살표 오른쪽에 표현식을 둠
• 중괄호와 함께 작성: (...args) => { body } - 본문이 여러 줄로 구성되었을 시 중괄호를 사용(반드시 return으로 반환값 명기해야 함)

let func = (arg1, arg2, ...argN) => expression
/*
위 화살표 함수는 아래 함수의 축약형
let func = function(arg1, arg2, ...argN) {
  return expression;
};
*/

let sum = (a, b) => a + b;
/* 
let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

09-2. 매개변수/인자 (parameter)

매개변수를 이용해 임의의 데이터를 함수 안에 전달한다. (일종의 지역변수처럼 작용)

이미 만든 매개변수를 조작하기 어렵기 때문에 매개변수의 순서가 중요하다. (*객체를 만들어서 해결 가능함)

• 매개변수: 함수 선언 방식 괄호 사이에 있는 변수(선언 시 쓰임)
• 인수: 함수를 호출할 때 매개변수에 전달되는 값(호출 시 쓰임)

function showMessage(from, text) { // 인자: from, text
  alert(from + ': ' + text);
}

showMessage('Ann', 'Hello!'); // Ann: Hello! (*)
showMessage('Ann', "What's up?"); // Ann: What's up? (**)

//객체 만들어서 매개변수 넘기기
function params({p1,p2,p3}){
  console.log(p1,p3);  //'Parameter 1' 'Parameter 3'
  return
}

const result=func({
  p1: 'Parameter 1',
  p3: 'Parameter 3',
})

console.log(result);

09-3. arguments 객체

- 함수에 전달된 인수에 해당하는 배열 형태의 객체 (배열처럼 생겼지만 객체)

- 모든 함수 내에서 이용 가능한 지역 변수로, 매개변수를 선언하지 않아도 사용할 수 있음 (화살표 함수에서는 존재 X)

- 정해지지 않은 인자(가변인자)들을 넘길 때 유용하게 사용할 수 있음

arguments[0]
arguments[1]
arguments[2]

var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);

//실제 array처럼 사용 위해 변환할 수도 있음
var args = Array.from(arguments);
var args = [...arguments];

09-4. 나머지 매개변수 Rest Parameter

- 정해지지 않은 수의 매개변수를 배열로 받을 수 있음

- 마지막 매개변수 앞에  "..." 을 붙이면 모든 후속 매개변수를 배열에 넣도록 지정(이전에 정의한 매개변수는 포함 X)

- 형 변환하지 않아도 되며, 화살표 함수에서도 사용 가능

- Array 인스턴스이기 때문에 sort, map 등의 배열 메서드를 직접 적용 가능함

function f(a, b, ...theArgs) {
  // ...
}

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// 콘솔 출력:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]

즉시실행함수 IIFE

즉시실행함수(Immediately Invoked Function Expression)는 정의되자마자 즉시 실행되는 익명 함수로, 함수를 괄호 안에 넣고 바로 실행할 수 있다. 재사용이 불가능하기 때문에 이름을 지어줄 수는 있으나(기명 즉시실행함수), 크게 의미가 없다.

 

(function () {  //시작
    console.log("IIFE"); //내부 동작 코드
})();    //끝

//화살표 함수로도 사용 가능
(() => {
    console.log("IIFE");
})();

//다른 즉시실행함수가 뒤에 붙는 경우, ;로 구분해줘야 함(앞에 붙이거나 뒤에 붙이거나)
(function(){
})(); (function(){})(); (function(){})(); //이런 식으로
구분하지 않으면 에러

 

즉시실행함수를 사용하는 이유는 크게 두 가지가 있다.

 

1. 필요 없는 전역 변수의 생성을 줄일 수 있다.
2. private한 변수를 만들 수 있다.

함수를 생성하면 그 함수는 전역 변수로 남아 있게 되어 내부 변수가 전역으로 저장되지 않아 전역 스코프의 오염을 줄일 수 있다. 또한 이 특성으로 인해 외부에서 접근할 수 없는 자체적인 스코프를 가지게 되어 내부 변수를 외부로부터 private하게 보호할 수 있다. 이는 클로저(closure)의 사용 목적과 비슷하며, 차후 React Hook의 동작 원리 학습 시 이해에 도움을 줄 수 있다.

 

단 한 번의 사용이 필요한 함수(예: 변수를 초기화하는 함수)나 자바스크립트 모듈을 만들 때 활용할 수 있다.

10  조건문

---

10-1. if문

- if ( 조건 ) { 조건문 }의 구조의 알고리즘에서 논리적 비교를 할 때 사용되는 조건식

- if, else if, else 키워드를 통해 구성되며, 조건식에 맞을 경우 중괄호 {} 내에 있는 명령문 수행

  (명령문이 단일 문장일 경우 중괄호 생략 가능)

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

if (year < 2015) {
  alert( '숫자를 좀 더 올려보세요.' );
} else if (year > 2015) { //복수 조건 처리
  alert( '숫자를 좀 더 내려보세요.' );
} else { //if, else if가 false일 때
  alert( '정답입니다!' );
}
//else는 필수가 아닌 선택사항

10-2. 삼항(ternary) 연산자

-조건부(conditional) 연산자 물음표(?) 연산자를 사용해 식을 간결하게 변형

-피연산자가 세 개이기 때문에 삼항 연산자라 불림

-조건문을 괄호로 감쌀 필요는 없으나, 가독성 향상을 위해 괄호를 사용하는 것이 좋음

let result = condition ? value1 : value2;
//condition이 true - value1 반환
//condition이 false - value2 반환

** 다중 삼항연산

물음표 연산자 ?를 여러 개 연결하면 복수의 조건을 처리할 수 있다.

(조건문1) ? (조건문 1이 참일때) : (거짓일때 수행할 조건문2) ? (조건문 2 참일때) : (모두 거짓일 때)

let age = prompt('나이를 입력해주세요.', 18);

let message = (age < 3) ? '아기야 안녕?' :
  (age < 18) ? '안녕!' :
  (age < 100) ? '환영합니다!' :
  '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';

alert( message );

//if 문으로 보면
if (age < 3) {
  alert('아기야 안녕?');
} else if (age < 18){
  alert('안녕!');
} else if (age < 100){
  alert('환영합니다!');
} else {
  alert('나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!');
}

10-3. switch문

- 표현식을 평가하여 그 값이 일치하는 case문을 실행하는 조건문

- 복수의 if 조건문을 switch 문으로 바꿀 수 있음

- switch, case, break, default 키워드를 통해 구성되며, switch의 조건에 맞는 case 구문을 수행

- 일치 비교로 조건을 확인하기 때문에 case문의 값의 형과 값이 같아야 실행됨

- 하나의 case만 수행되도록 case 끝을 break로 끝맺음

switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    [break]

  case 'value2':  // if (x === 'value2')
    ...
    [break]

  default:
    ...
    [break]
}

//코드가 같은 case문은 한데 묶을 수 있음
let a = 3;

switch (a) {
  case 4:
    alert('계산이 맞습니다!');
    break;

  case 3: // (*) 두 case문을 묶음
  case 5:
    alert('계산이 틀립니다!');
    alert("수학 수업을 다시 들어보는걸 권유 드립니다.");
    break;

  default:
    alert('계산 결과가 이상하네요.');
}

11  반복문 Loop

---

11-1. for문

-선언문(Init Expression), 조건문(Test Expression), 증감문(Update Expression) 형태로 이루어진 반복문

-조건문이 fail 이 되기 전까지 코드 블록을 계속적으로 반복 수행

-선언문, 조건문, 증감문 자리에 공백 입력 가능

for (let i = 0; i < 3; i++) { // 0, 1, 2가 출력됩니다.
  alert(i);
}

//begin: i=0  반복문에 진입할 때 단 한번 실행
//condition: i < 3  반복마다 해당 조건을 확인하고 false면 반복문 멈춤
//body  alert(i)  조건이 true일 동안 계속 실행
//step  i++  각 반복의 body가 실행된 이후 실행

//인라인 변수 선언 : 반복문 안에 변수 선언, 반복문 안에서만 접근 가능
//기존에 정의되어 있는 변수 사용해도 됨

//구성 요소 생략 가능
let i = 0;

for (; i < 3;) {
  alert( i++ );
}

11-2. for문 확장

for ... in 반복문

- 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복함

- 객체의 key, value 형태를 반복하여 수행하는데 최적화된 유형 (객체 자료형에서 자료들을 하나씩 꺼낼 때)

- 첫번째부터 마지막까지, 객체의 키 개수만큼 반복

- 인덱스의 순서가 중요한 배열에서 반복을 위해 사용할 수 없음

//Syntax
for (const variable in object) {
  statement
}

var obj = {a: 1, b: 2, c: 3};

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

key, value 외에도 prototype도 같이 출력되기 때문에 if문과 hasOwnProperty() 함수를 사용해 키값만 출력할 수 있다.

for (key in book) {
   //객체명.hasOwnProperty(key값)
     if (book.hasOwnProperty(key)) {
       console.log(`key : ${key} / value : ${book[key]}`);
     }
   }
//hasOwnProperty(): 오브젝트가 이 키값을 가지고 있는지 아닌지 판단해주는 함수

 

for ... of 반복문

- Collection 객체 자체가 Symbol.iterator 속성(property)을 가지고 있어야 동작 가능한 유형

- ES6에 새로 추가된 collection 기반의 반복 구문

- 배열 안에서 자료들을 하나씩 꺼내고 싶을 때 사용

- 문자, arguments, Map, Set 등의 자료형에도 사용 가능(iterable인 자료형들에만)

//Syntax
for (variable of iterable) {
   statement
}

//배열에 대해 반복
let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

11-3. while

- 조건문이 참일 때 코드 블록을 계속해서 반복 수행하는 반복문

- for문에 비해 선언문과 증감문 없이 loop 수행, 무한 루프 등 수행 시 많이 사용

- 조건문을 코드 블록보다 아래로 옮긴 do…while 반복문도 존재 (최소 한 번 수행이 필요할 때 많이 사용)

- 각 반복이 시작하기 전에 조건을 확인

let i = 0;
while (i < 3) { // 0, 1, 2가 출력됩니다.
  alert( i );
  i++;
}

**반복문의 제어**

break

- 반복문 수행 시 코드 블록을 탈출할 때 사용되는 식별자

- 다중 반복문일 경우 가장 안쪽의 반복문을 종료

- Label 통하여 다중 반복문을 한번에 종료 가능 ( Label : 반복문 앞에 콜론과 함께 쓰이는 식별자 )

let sum = 0;

while (true) {
  let value = +prompt("숫자를 입력하세요.", '');
  if (!value) break; // (*)
  sum += value;
}
alert( '합계: ' + sum );

//break <labelName> 활용
outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    let input = prompt(`(${i},${j})의 값`, '');
    // 사용자가 아무것도 입력하지 않거나 Cancel 버튼을 누르면 두 반복문 모두를 빠져나옵니다.
    if (!input) break outer; // (*)
    // 입력받은 값을 가지고 무언가를 함
  }
}
alert('완료!');

continue

- 반복문 수행 시 코드 블록 실행을 해당 라인에서 중지하고 블록 코드를 종료시킨 후 반복문 내 명시된 조건 판단

- 중첩을 줄이는 데 도움을 줌

for (let i = 0; i < 10; i++) {
  // 조건이 참이라면 남아있는 본문은 실행되지 않습니다.
  if (i % 2 == 0) continue;
  alert(i); // 1, 3, 5, 7, 9가 차례대로 출력됨
}

11-4. do...while 반복문

- 조건 부분을 반복문 본문 아래로 옮길 수 있음

- 본문이 먼저 실행되고, 조건 확인 후 조건이 true일 동안 실행 ( =각 반복이 끝난 후에 조건을 확인 )

- 조건의 true, false 여부와 상관 없이 본문을 최소 한 번이라도 실행하고 싶을 때만 사용

let i = 0;
do {
  alert( i );
  i++;
} while (i < 3);

---

참고 자료

 

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

https://ko.javascript.info/

https://jongminfire.dev/java-script-%EC%A6%89%EC%8B%9C%EC%8B%A4%ED%96%89%ED%95%A8%EC%88%98-iife

https://developer-talk.tistory.com/534

https://velog.io/@hoon_dev/JavaScript-for-in-for-of-%EB%B0%98%EB%B3%B5%EB%AC%B8-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0