자바스크립트를 이미 어느 정도 알고 있어서 처음 문제를 들었을 때 어떻게 짜야할지는 바로 생각이 나서 다행이었다. 근데 문제는.. 내가 printf나 println, print가 아직 익숙하지 않고 특히 printf 안의 %c, %d, %.2f와 같은 표기가 낯설다는 것인듯..

얼른 미묘하게 헷갈리는 내용들을 티스토리 블로그에 정리해야겠다

라고 코드를 작성한 뒤, 콘솔창에

console.log(firstname);
console.log(age);

를 작성하면 변수값이 잘 할당된 것을 확인할 수 있는데, 문제는 아래에 뜨는 undefined이다.

대체 이게 왜 뜨는 걸까... 혼자 머리를 굴려봐도 이유가 떠오르지 않았다.

궁금해서 검색해보았더니 (검색 키워드: console창에 undefined가 연달아) 위 현상을 이해하기 위해서는 자바스크립트에서 문과 표현식에 대해서 이해가 필요하다고 한다.

문이란?

• 문이란 프로그램을 구성하는 기본 단위이자 실행 단위로, 명령문이라고도 부른다. 조건문, 선언문, 반복문 등등 문을 실행하면 해당 프로그램에서 명령이 실행된다.

  표현식(expression)이란?

• 표현식이란 값으로 평가될 수 있는 문을 말한다. 예를 들어 1+2=3이라는 수식에서 1+2와 3은 동치이므로 1+2는 3으로 표현될 수 있다는 말과 비슷하다.

//값으로 평가될 수 있는 문들
1+2 //3
a = 1 //1
b = [1,2,3] //[1,2,3]
b[1] //2

표현식이 아닌 문들

표현식 값으로 평가될 수 있는 문이란 뜻이기 때문에 표현식이 아니라는 뜻은 값으로 평가될 수 없다는 뜻이다.

다음과 같은 코드들은 값으로 평가될 수 없다. 그리고 이러한 문들은 변수에 직접 대입해봄으로써 판단할 수 있다. 값으로 평가될 수 없기 떄문에 변수에 할당할 수 없기 때문이다.

//값으로 평가될 수 없는 문들
var a;
var a = 10;

//표현식이 아닌 문들은 할당할 수 없다.
var b = var a; //Unexpected token 'var'

그래서 왜 undefined가 나오는 것인가

표현식은 값으로 평가될 수 있는 문이라고 했는데, 크롬의 콘솔창에서는 표현식의 평가된 값을 반환하기 때문에 표현식이 아닌 문을 실행했을 때 undefined를 반환한다.

마지막에 작성한 코드가 아무런 리턴 값이 없을 경우(console, 단순 변수 선언 등)에 undefined가 찍힌다고 보면 될 것 같다.

//아웃풋이 있는 예시
function add(a,b){
  return a + b;
}
add(2,5);

위 코드를 콘솔창에 붙여넣으면 7이라는 아웃풋이 나오면서 undefined가 뜨지 않는다.

하지만 만약

function add(a,b){
  return a + b;
}
console.log(add(a,b));

이렇게 작성한다면, console.log로 인해서 7이 출력되고 console.log의 리턴값인 undefined가 콘솔에 찍히게 된다.

함수의 형태

//일반함수
function 함수명(){
  함수내용
}

//익명함수
function(){
  함수내용
}

일반함수와 익명함수의 차이는 함수명이 있느냐 없느냐의 차이를 가지고 있다. 익명함수는 메모리를 따로 차지하지 않기 때문에 재사용하기보다는 일회용으로 많이 사용이 되는 편이다. 따라서 익명함수를 사용할 때에는 변수에 담아서 사용하는 형태를 갖추고 있다.

const 변수 = function(){
  함수내용
}

▲위와 같이 익명함수를 변수에 저장하는 방식을 리터럴 방식이라고 한다. 리터럴 방식은 변수를 선언함과 동시에 그 값을 저장해주는 방식이라고 생각하면 된다.

익명함수는 리터럴 방식으로 변수에 담겨 작성될 때, 호이스팅 시 위로 올라가지 않고 익명함수를 저장한 변수만 올라가게 된다.

따라서 아래의 상황에서는 에러가 발생하게 된다.

익명함수();

var 익명함수 = function(){
  console.log('익명함수를 담은 변수를 상단에서 호출하면 어떻게 될까');
}

익명함수();

첫번쨰 줄 익명함수()에서 에러가 뜬다. ReferenceError: Cannot access '익명함수' before initialization

일반함수를 선언하면 함수 자체가 호이스팅 되어서 함수가 선언되기 이전 줄에서도 해당 함수를 부를 수 있는데 익명함수는 그게 불가능하다.

따라서 익명함수는 한 번 사용하고 쓰지 않을 함수에 한해서 사용하는 것이 좋다. (일회성 함수로 사용될 불필요한 메모리를 줄일 수 있기 때문이다)

💡참고사항

일반함수와 익명함수 모두 함수 안에서 this를 호출하면 window가 뜨게 된다. 특정한 다른 함수(ex. eventListener 등) 안에서 function이 새롭게 작성되면 this 값을 다시 재정의한다. 만약 재정의하고 싶지 않다면(상위의 this 값을 가지고 오고 싶다면) 화살표 함수로 교체하는 것이 좋다.

화살표 함수(=람다함수)

//일반함수
function 일반함수(){
  console.log('일반함수');
}

//화살표함수
var 화살표함수 = () => {
  console.log('화살표함수');
}

화살표 함수는 짧아서 사용하기가 간편하다. 화살표 함수에는 별도로 함수명을 쓰지 않기 때문에 익명함수라고도 한다. 화살표 함수는 효율적인 메모리 관리가 가능하다는 익명함수의 특징을 포함하고 있다.

화살표 함수가 한 줄일 경우에는 아래와 같이 더 짧게 선언하는 것도 가능하다.

var 화살표함수 = () => console.log('화살표함수');

화살표 함수에서의 this

아래 예시를 통해서 이해도를 높여보자.

var target = '전역변수';

function 일반함수(){
  console.log(this.target);
}

var 오브젝트 = {
  target: '지역변수',
  action: 일반함수,
}

오브젝트.action(); //결과값은?

위 코드의 결과값은 '지역변수' 이다.

오브젝트 내에서 this를 부르면 this를 포함하고 있는(감싸고 있는) 부모 요소를 가리키게 된다. 결국 this.target 은 오브젝트.target 과 동일한 표현이 된다.

var target = '전역변수';

var 화살표함수 = () => {
  console.log(this.target)
};

var 오브젝트 = {
  target: '지역변수',
  action: 화살표함수,
}

오브젝트.action(); //결과값은?

위의 결과 값은 '전역변수'인데, 화살표 함수의 경우 내부의 this는 선언이 된 시점에서 this를 호출한다. 따라서 target 변수는 밖에서 받아온 this(=window)라는 전역 설정한 값이 들어오게 되는 것이다.

이렇게 예시를 들어가면서 공부하니까 확실히 이해가 빠르게 된다.

this값을 선언할 때마다 화살표 함수/일반함수/익명함수 별로 어떻게 관리를 해야하는지 좀 헷갈렸었는데 정리가 되는 기분이다.

참고:: [javascript] 쉽게 이해하는 화살표 함수와 람다 함수 (익명함수) - HAN_PY 티스토리 블로그

var data = [1,11,14,3,61,4];

data.sort();
// 결과값 [1,11,14,3,4,61];

숫자가 문자 순서대로 정렬되어서 뒤죽박죽이 되어버렸는데 이걸 해결할 방법을 찾아야한다.

mdn에 .sort()를 검색해보았다.

arr.sort([ compareFunction ]);

매개변수 compareFunction 정렬 순서를 정의하는 함수인데 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니코드 코드 포인트 값에 따라 정렬이 된다.

compareFunction이 제공되지 않으면 요소를 문자열로 변환하고, 유니코드 코드 포인트 순서로 문자열을 비교하여 정렬된다. 예를 들어 "바나나"는 "체리" 앞에 온다. 숫자 정렬에서는 9가 80보다 앞에 오지만 숫자는 문자열로 변환되기 떄문에 "80"은 유니코드 순서에서 "9" 앞에 오게 된다.

compareFunction이 제공되지 않으면.. 이라는 가정은 결국 array.sort()의 경우를 말하는 것이고, compareFunction을 제공해주려면 .sort()의 괄호 안에 무엇인가 적어주면 되는 것 같다.

💡규칙

compareFunction이 제공되면 배열 요소는 compare 함수의 반환 값에 따라 정렬된다. a와 b가 비교되는 두 요소라면,

• compareFunction(a, b)이 0보다 작은 경우 a를 b보다 낮은 색인으로 정렬한다. 즉 a가 먼저 온다.

• compareFunction(a, b)이 0보다 큰 경우 b를 a보다 낮은 인덱스로 소트한다.

• compareFunction(a, b)은 요소 a와 b의 특정 쌍이 두 개의 인수로 주어질 때 항상 동일한 값을 반환해야한다. 일치하지 않는 결과가 반환되면 정렬 순서는 정의되지 않는다.

따라서 compare 함수의 형식은 다음과 같다.

function comapare(a,b){
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
      return 1;
  }
  // a must be equal to b
  return 0;
}

문자열 대신 숫자를 비교하기 위해 compare 함수는 a에서 b를 뺼 수 있는데, 다음 함수는 배열을 오름차순으로 정렬한다. (Infinity 및 NaN이 포함되어 있지 않은 경우)

function compareNumbers(a, b){
  return a - b;
}

내림차순으로 정렬하고 싶을 경우엔 compareNumbers() 함수 안의 return 값을 조금 수정하면 된다.

function compareNumbers(a, b){
  return b - a;
}

sort메소드는 함수식(및 클로저)와 함께 편리하게 사용할 수 있다.

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function (a,b){
  return a - b;
});
console.log(numbers); //[1, 2, 3, 4, 5]

개체는 해당 속성 중 하나의 값을 기준으로 정렬할 수 있다.

var items = [
  { name: "Edward", value: 21 },
  { name: "Sharpe", value: 37 },
  { name: "And", value: 45 },
  { name: "The", value: -12 },
  { name: "Magnetic", value: 13 },
  { name: "Zeros", value: 37},
];

//value 기준으로 정렬
items.sort(function (a, b){
  if (a.value > b.value){
    return 1;
  }
  if (a.value < b.value){
    return -1;
  }
  //a must be equal to b
  return 0;
});

//name 기준으로 정렬
items.sort(function(a, b){
  var nameA = a.name.toUpperCase(); //ignore upper and lower case
  var nameB = b.name.toUpperCase(); //ignore upper and lower case

  if (nameA < nameB){
    return -1;
  }
  if (nameA > nameB){
    return 1;
  }

  //이름이 같을 경우
  return 0;
}

아래 두 가지 상황에서 함수를 써야 한다

1. 여러 가지 기능을 하는 코드를 한 단어로 묶고 싶을 때(그리고 나중에 재사용할 때)
2. 입출력 기능을 만들 때

arrow function을 사용하는 데에는 몇 가지 이유가 있는데 ** 1. 첫번째로 함수 본연의 입출력 기능을 아주 직관적으로 잘 표현해줌 **

var 두배만들기 = (x) => { return x * 2 };

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

화살표 모양을 사용함으로써 함수의 기능을 파악하는 데에 쉬워짐

** 2. 두번째로 소괄호 생략이 가능함 **

var 두배만들기 = x => { return x * 2 };

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

파라미터가 한 개일 경우 소괄호를 생략할 수 있음

** 3. 세번째로 중괄호 생략이 가능함 **

중괄호 안에 return 한 줄 뿐이라면 중괄호와 return 모두 생략 가능함

var 두배만들기 = x => x * 3;

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

arrow function을 쓰면 내부에서 this값을 쓸 때 밖에 있던 this값을 그대로 사용함

arrow function은 어디서 쓰던지 내부의 this값을 변화시키지 않음 따라서 바깥에 있던 this의 의미를 그대로 내부에서도 사용하는 함수가 arrow function

이것이 네번째 장점이자 arrow function을 사용하는 핵심 이유

var 오브젝트1 = {
  함수 : function(){ console.log(this);
}

오브젝트1.함수();

위의 코드를 실행시키면 함수()를 가지고 있는 오브젝트인 오브젝트1이 콘솔창에 출력됨

var 오브젝트1 = {
    함수 : () => { console.log(this); }
}

오브젝트1.함수();

위의 코드를 실행시키면 this의 값으로 window가 나옴

arrow function은 외부에 있던 this를 그대로 내부로 가져와서 사용하는 함수이기 때문에 일반 function과 용도가 다름

일반 function을 대체하여 arrow function을 사용하는 일이 없도록 하기

아무데서나 일반(전역)함수로 this를 호출하면 window를 가지고 옴

Q. window가 무엇인가요? A. window는 모든 전역변수, 함수, DOM을 보고나하고 관리하는 전역 객체입니다

그러나 strict mode일 때 함수 안에서 쓰면 this는 undefined가 나옴

var object = {
    data : 'kim',
      함수 : function(){
        console.log(this);
    }
}

object.함수(); //{data: 'Kim', 함수: ƒ}

오브젝트 내 함수 안에서 쓰면 그 함수를 가지고 있는 오브젝트를 뜻함

🎈문제1

var 오브젝트 = {
    data: {
        함수: function(){
            console.log(this);
        }
    },    
}

오브젝트.data.함수();

정답1

{함수: f};

📌신 문법 - Arrow Function 특징

this값을 함수 밖에 있던 것을 그대로 가져와서 씀

var 오브젝트 = {
    data: {
        함수: ()=> {
            console.log(this);
        }
    },    
}

오브젝트.data.함수(); //Window {window: Window, self: Window, document: document, name: '', location: Location, …}

함수 밖에 있던 window값이 console로 출력됨 (상위요소가 가지고 있던 this값을 가지고 오는 것)

📌신 문법 - 오브젝트 안에 함수 넣을 때

메소드 안에 함수를 넣고 싶을 때

var 오브젝트 = {
    data: {
        함수(){
        //함수: function(){..} 에서 ': function: 생략
            console.log(this);
        }
    },    
}

오브젝트.data.함수();

✨ 결국 this는 나를 담고 있는 오브젝트(상위 주인공)를 담고 있는 것임

git을 사용해서 이것저것 테스트하던 와중에, 폴더명을 바꾸고 새로 생성할 일이 있었다

아무 생각 없이 직접 폴더를 옮겼다가 에러가 잔뜩 떠서 뭐가 문제지 했는데

1. 파일의 이름을 변경하거나
2. 디렉토리 구조를 바꿔야하는 경우가 발생할 때에는

이럴 땐 직접 이동시키지 않고 git mv 명령어를 사용하면 되는 것이었다😓

git mv [원래 파일명] [변경할 파일명]
git mv [원래 폴더] [이동할 폴더]

폴더 이동의 경우, 이동할 폴더가 존재하지 않으면 원래 폴더의 이름만 변경되고, 존재하면 해당 폴더 안으로 들어간다

그냥 이동시키면 사진과 같이 deleted라고 뜨는데

git mv 명령을 사용하여서 옮기면 아래와 같이 renamed라고 뜬다

(1) 3-way merge

브랜치에 각각 신규 commit이 1회 이상 있는 경우, merge 명령을 내리면 두 브랜치의 코드를 합쳐서 새로운 commit을 자동으로 생성해주는 것

이것이 merge의 기본 동작방식

commit2 시점에서 commit2-1이라는 신규 브랜치를 만들고 그 이후 각각 commit3, commit2-2라는 신규 커밋이 1회 이상 생겼을 때 merge를 해주는 것이 3-way-merge이다.

(2) fast-forward merge

새로운 브랜치에만 commit이 되어있고 기준이 되는 브랜치에는 신규 commit이 없는 경우가 있는데,

이럴 경우 merge하게 되면 "fast-forward merge 되었습니다" 라고 알려줌

기준이 되는 브랜치에 새롭게 합칠 것이 없어서 분리된 브랜치를 메인 브랜치처럼 다루는 것

만약, fast-forward merge가 싫다면

git merge --no-ff 브랜치명

를 사용하여 강제로 3-way merge할 수도 있음

(3) 브랜치 삭제 방법

위의 두 가지 방법으로 merge를 하더라도 브랜치가 자동으로 삭제되진 않는다

git branch -d 브랜치이름
git branch -D 브랜치이름

둘 중 하나를 사용하면 필요없는 브랜치를 삭제할 수 있다 병합이 완료된 브랜치를 삭제할 땐 -d만 사용해도 되는데 병합하지 않은 브랜치를 삭제할 땐 -D를 사용해야 한다.

(4) rebase and merge

rebase

rebase는 브랜치의 시작점을 다른 commit으로 옮겨주는 행위다

1. rebase를 이용하여 신규 브랜치의 시작점을 main 브랜치 최근 commit으로 옮긴 다음
2. fast-forward merge를 하는 것

1. 3-way merge 말고 강제로 fast-forward 하고 싶을 때
2. 브랜치 없이도 코드를 잘 짜는 고수 느낌을 주고 싶을 때 rebase & merge를 사용한다

rebase and merge 하는 법

1. 새로운 브랜치로 이동
2. git rebase main
3. 브랜치가 main 브랜치 끝으로 이동하는데 그걸 fast-forward merge 하면 됨

git switch 새로운브랜치
git rebase main

git switch main
git merge 새로운브랜치

main 브랜치 뿐만 아니라 다른 브랜치끼리도 가능함

단, 브랜치끼리 차이가 너무 많은 경우에 rebase를 하게 되면 충돌이 많이 발생할 수 있음

(5) squash and merge

모든 브랜치를 3-way merge해버리면 이후에 문제가 생길 수도 있음

1. 3-way merge 된 것들은 그래프상 복잡해보이고
2. main 브랜치 git log를 출력해보면 3-way merge된 브랜치들의 commit 내역도 다 출력되어서 더러워지는 현상이 있기 때문

그게 싫을 경우, rebase 또는 squash and merge하면 됨

위와 같이 사용하면 새로운 브랜치에 있던 commit들을 연결해주는 것이 아니라 똑 떼와서 main 브랜치에 붙여주기 때문에 1번과 2번 걱정을 하지 않아도 됨

squash

squash and merge를 하게 될 경우, 3-way merge처럼 선으로 이어주지 않고 새 브랜치에 있던 코드변경사항들이 main 브랜치로 순간이동함

main 브랜치의 git log를 출력해볼 때 merge 완료된 브랜치의 commit 같은 것들은 출력되지 않음 (훨씬 깔끔)

git switch main
git merge --squash 브랜치명
git commit -m '메세지'

git merge 뒤에 --squash 옵션 추가하면 됨

▲ 그냥 merge 했을 경우

▲ merge --squash 했을 경우

navigator 객체는 브라우저 관련된 정보를 컨트롤 한다. 브라우저에 대한 버전, 정보, 종류 등 관련된 정보를 제공한다.

//javascript
navigator.속성

## navigator 객체 속성
* `navigator.appCodeName` : 브라우저의 코드명을 반환
* `navigator.appName` : 브라우저의 이름을 반환
* `navigator.appVersion` : 브라우저의 버전을 반환
* `navigator.cookieEnabled` 브라우저의 쿠키 사용 가능 여부를 반환
* `navigator.language` 브라우저에서 사용되는 언어를 반환
* `navigator.onLine` : 브라우저가 온라인인지의 여부 반환
* `navigator.platform` : 브라우저가 실행되는 플랫폼 정보 반환
* `navigator.product` : 브라우저에서 사용되는 엔진 이름 반환
* `navigator.userAgent` : 브라우저와 운영체제 정보를 반환

_ _ _

#### 📌브라우저 주소 관련 예제1
```javascript
var nowAppCodeName = navigator.appCodeName;
var nowAppName = navigator.appName;
var nowAppVersion = navigator.appVersion;
var nowCookieEnabled = navigator.cookieEnabled;
var nowLanguage = navigator.language;
var nowOnline = navigator.onLine;
var nowPlatform = navigator.platform;
var nowProduct = navigator.product;
var nowUserAgent = navigator.userAgent;

document.write("브라우저의 코드명[navigator.appCodeName]: " + nowAppCodeName, "<br>");
document.write("브라우저의 이름[navigator.appName] : " + nowAppName, "<br>");
document.write("브라우저의 버전[navigator.appVersion] : " + nowAppVersion, "<br>");
document.write("쿠키 사용 가능 여부[navigator.cookieEnabled] : " + nowCookieEnabled, "<br>");
document.write("브라우저에서 사용되는 언어[navigator.language] : " + nowLanguage, "<br>");
document.write("온라인인지 여부[navigator.onLine] : " + nowOnLine, "<br>");
document.write("플랫폼 정보[navigator.platform] : " + nowPlatform, "<br>");
document.write("브라우저 엔진 이름[navigator.product] : " + nowProduct, "<br>");
document.write("운영체제 정보[navigator.userAgent] : " + nowUserAgent, "<br>");

📌결과

브라우저의 코드명[navigator.appCodeName] : Mozilla 브라우저의 이름[navigator.appName] : Netscape 브라우저의 버전[navigator.appVersion] : 5.0 (Macintosh; Intel Mac OS X 10_15_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36 쿠키 사용 가능 여부[navigator.cookieEnabled] : true 브라우저에서 사용되는 언어[navigator.language] : ko-KR 온라인인지 여부[navigator.onLine] : true 플랫폼 정보[navigator.platform] : MacIntel 엔진 이름[navigator.product] : Gecko 운영체제 정보[navigator.userAgent] : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36

📌브라우저 주소 관련 예제2

<!--html-->
<div id="info"></div>

//javascript
var os = navigator.userAgent.toLowerCase();
var sw = screen.width;
var sh = screen.height;
var info = document.getElementById("info");

if(os.indexOf('windows') >= 0){
  info.innerHTML = "현재 윈도우를 사용하고 있으며 화면 크기는 " + sw + "x" + sh + "px입니다.";
}else if(os.indexOf('macintosh') >= 0){
    info.innerHTML = "현재 맥을 사용하고 있으며 화면 크기는 " + sw + "x" + sh + "px입니다.";
}else if(os.indexOf('iphone') >= 0){
    info.innerHTML = "현재 아이폰을 사용하고 있으며 화면 크기는 " + sw + "x" + sh + "px입니다.";
}else if(os.indexOf('android') >= 0){
    info.innerHTML = "현재 안드로이드 폰을 사용하고 있으며 화면 크기는 " + sw + "x" + sh + "px입니다.";
}

호환성

그 외 navigator 메소드 참고 :: MDN JavaScript

window 객체는 두 가지 역할을 하는데

1. 브라우저 안의 모든 요소들이 소속된 객체로, 최상위에 있기 때문에 어디서든 접근이 가능하다고 해서 전역 객체 라고도 부른다.
2. 일반적으로 우리가 알고 있는 브라우저 창(browser window)을 의미하고, 이 창을 제어하는 다양한 메서드를 제공한다.

## 1. 전역 객체로써 window

`window` 객체는 문자 그대로 `window`라는 이름으로 접근할 수 있다.
>```javascript
//javascript
window

브라우저 console에서 window를 찍어보면, > Window {parent: Window, opener: global, top: Window, length: 3, frames: Window, …} 와 같은 값을 얻을 수 있는데 이 속에 무수히 많은 프로퍼티들이 존재하는 것을 확인할 수 있다.

우리가 작성하는 코드들은 대부분 다 window 객체의 프로퍼티가 된다는 사실을 기억해두자.

var myName = "Ssari";

function getMyName(){
    return myName;
}

console.log(window.myName); //Ssarri
console.log(window.getMyname()); //Ssarri;

위와 같이 var 키워드로 변수를 선언하거나 함수를 선언하면, window객체의 프로퍼티가 된다. 그럼에도 불구하고 우리는 변수와 함수를 선언하고서 앞에 window를 붙이지 않는데, 말 그대로 window는 전역 객체로 페이지 내에 있는 모든 객체를 다 포함하고 있기 때문에 window는 그냥 생략이 가능한 특징을 가지고 있다.

따라서 특별한 경우를 제외하면 window객체를 직접 사용할 일은 드물다.

💡깨알상식

let과 const로 선언한 변수는 블록 스코프이기 때문에 window객체 내부의 블록에서 선언된 것으로 평가되어 전역 객체의 프로퍼티로 활용되기는 어렵다.

let myName = "Ssarri";

console.log(window.myName); //undefined

2. 브라우저 창으로써의 window

window 객체는 **브라우저의 창을 대변하고 다양한 메서드를 통해 이 창을 제어할 수 있다.

• .close() : 브라우저 창을 닫음
• .open() : 브라우저 창을 엶
• .innerWidth : 브라우저의 안쪽 넓이의 값
• .innerHeight : 브라우저 안쪽의 높이값 반환
• .outerWidth : 브라우저의 프레임을 포함한 넓이값 반환
• .outerHeight : 브라우저의 프레임을 포함한 높이값 반환
• .scrollY : 현재 스크롤된 브라우저의 Y축 거리값
• .scrollX : 현재 스크롤된 브라우저의 X축 거리값

  📌예제

  window.addEventListener('resize', e=>{
   console.log(window.innerWidth);
  });

let style = window.getComputedStyle(element[, pseudoElt]);

`element`
* 속성값을 얻으려하는 요소
>
>`pseudoElt`
* 일치시킬 의사요소(`pseudo element`)를 지정하는 문자열. 보통의 요소들에 대해서는 생략되거나 `null`이어야 함

_ _ _
#### 📌예제1
해당 예제에서는 간단한 `<div>` 요소에 CSS스타일을 적용하고, `getComputedStyle()`를 사용해서 적용된 스타일 값을 찾아낸 후에 `<div>`의 본문으로 출력한다.

```html
<!--html-->
<p>Hello</p>

/* css */
p{
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    font-size: 2rem;
    font-family: sans-serif;
    color:white;
    line-height: 2;
    text-align:center;
    background:purple;
}

//javascript
let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
para.textContent = 'My computed font-size is ' + compStyles.getPropertyValue('font-size') + ',\nand my computed line-height is '+ compStyles.getPropertyValue('line-height') + '.';

📌예제2

<!--html-->
<div class="box"></div>

/* css */
.box{
    width:300px;
    height:300px;
    margin:50px;
    background:lightgreen;
}

```javascript //javascript const box = document.querySelector('.box');

box.addEventListener('click', e=> { const bg = getComputedStyle(e.currentTarget).backgroundColor; const wid = getComputedStyle(e.currentTarget).width; console.log(bg); console.log(wid); }

❓function(e)를 사용하는 이유

addEventListener에서 function(e)가 쓰여져있는 위치에는 이벤트 핸들러가 주어져야 한다. 이벤트가 발생했을 때 실행되는 함수가 놓여져야한다는 것이다

그래서 click 이벤트가 발생하면

function(e){
  e.preventDefault();
}

가 실행된다.

그리고나서 이벤트가 발생하면 이벤트 객체가 생성이 되는데, 그 이벤트 객체가 e라는 파라미터에 할당이 된다.

❓이벤트 객체

1. 이벤트 객체란?

이벤트가 발생하면 브라우저는 발생한 이벤트에 관련된 다양한 정보를 담은 이벤트 객체를 만들어 이벤트 리스너에 전달한다.

ex) mousedown 이벤트의 경우 (1)마우스 좌표, (2)버튼 번호, keydown 이벤트의 경우 (1)키 코드 값, shift키가 눌려졌는지 등

이벤트 리스너는 이벤트 객체의 프로퍼티 값ㅇ르 통해 발생한 이벤트에 관한 자세한 사항을 알 수 있다.

2. 이벤트 객체 전달받기

이벤트 리스너가 이벤트 객체를 전달받는 방법에는 3가지가 있다.

1) 이름을 가진 이벤트 리스너 함수의 경우

이벤트 리스너 함수는 다음과 같이 첫 번째 매개변수를 통해 이벤트 객체를 전달받을 수 있다. 매개변수의 이름은 e 대신 마음대로 붙여도 된다(생략도 가능)

function f(e){ //매개변수 e에 이벤트 객체를 전달받음. e는 생략 가능
  ...
}
obj.onclick = f; //obj 객체의 onclick리스너로 함수 f 등록

2) 익명함수의 경우

익명함수의 경우에도 다음과 같이 첫 번째 매개변수(e)를 통해 이벤트 객체를 전달 받는다.

obj.onclick = function(e){//매개변수 e에 이벤트 객체를 전달받음. e는 생략 가능
    ...
}

3) HTML 태그의 리스너의 경우

HTML 태그에 리스너를 만드는 경우엔 이벤트 객체는 event라는 이름으로 전달된다.

//javascript
function f(e){
    ...
}

<!--html-->
<button onclick="f(event)">버튼</button>
<div onclick="alert(event.type)">버튼</div>

❓이벤트에 들어있는 정보

• 이벤트 객체에는 발생한 이벤트에 관한 정보를 담고 있는 프로퍼티와 이벤트의 흐름 등을 제어하는 여러 메소드가 들어있다.

이벤트의 디폴트 행동 무효화

• HTML 태그 중 몇몇은 특정 이벤트에 대해 디폴트 행동을 한다. (<a>태그를 클릭하면 웹 페이지를 로드하는 것, <button type="submit">을 클릭하면 폼 데이터를 웹 서버로 전송하는 것 등)
• 위와 같은 디폴트 행동을 취소시킬 수 있는 방법에 두 가지가 있다.

1) 이벤트 리스너에서 false를 리턴

<a href="http://velog.io/" onclick="return false">이동할 수 없는 링크</a>

2) 이벤트 객체의 preventDefault()를 호출

<a href="http://velog.io/" onclick="event.preventDefault()">이동할 수 없는 링크</a>

모든 이벤트의 디폴트를 금지시킬 수 있는 것은 아니나, 이벤트 객체의 cancelable 프로퍼티가 true인 경우에만 취소가 가능하다.

📌예제3

<!--html-->
<h3>이벤트의 디폴트 행동 취소</h3>
<a href="http://www.naver.com" onclick="return query()">네이버로 이동할 지 물어보는 링크</a>
<form action="">
    <input type="checkbox">빵(체크 가능)<br>
    <input type="checkbox" onclick="noAction(event)">술 (체크 불가능)
</form>

//javascript
function query(){
    const ret = confirm("네이버로 이동하시겠습니까?");
    return ret;
}
/*
confirm();은 확인/취소가 가능하도록 창이 뜨는 함수로,
'확인'을 누르면 true,
'취소'를 누르면 false가 반환되고
그렇게 a태그의 이벤트 디폴트 행동이 막히게 된다.
*/
>
function noAction(e){
    e.preventDefault();
}

❓e와 window.Event 둘 다 사용하는 이유

인터넷 익스플로러는 e구문을 이해하지 못해서 window.Event 구문을 함께 작성해주어야한다.

크로스브라우징을 위하여 아래와 같이 작성해주면 된다.

test.onclick = function(e){
  e = e||window.Event;
  ...
  ...
}

참고로 익스플로러는 화살표 함수도 이해하지 못하기 때문에 크로스브라우징을 위해서는 function(e)와 같이 따로 적어주어야 한다.

비구조화할당이란, 배열이나 객체 속성을 해제하여 개별 변수에 값을 담을 수 있는 javascript 표현식을 말한다. 비구조화할당 또는 구조 분해 할당이라고 한다.

💻기본문법

: 비구조화 할당의 기본 구조는 좌측에는 변수, 우측에는 해당 변수에 넣어지는 값을 표현한다. 배열의 경우에는 []를 사용하고, 객체의 경우에는 {}을 사용한다

📌예제1: 배열 비구조화

let [x,y] = [1,2];
>
console.log(x); //1
console.log(y); //2

📌예제2: 객체 비구조화

const object = { a:1, b:2 };
function print({ a, b }){
    console.log(a);
    console.log(b);
}
print(object);
//1
//2

📌예제3

const { red, yellow, green } = {
   red : 'RED',
   yellow : 'YELLOW',
   green : 'GREEN'
};

배열 비구조화 다른 점이 있다면, 배열 비구조화의 경우에는 index에 따라 값이 할당되지만, 객체 비구조화의 경우에는 동일한 key값에 할당된다

💻비구조화 할당의 장점

1. 배열, 객체 내 값을 추출하는 코드가 매우 간단해짐
2. 필요한 객체와 나머지 요소 분리가 매우 간단하다
3. 기본값 지정이 가능하다

📌비구조화할당 '전' 코드 예시1

//비구조화할당 전 코드
let fruit = ['apple', 'banana', 'peach'];

let apple = fruit[0];
let banana = fruit[1];
let peach = fruit[2];

console.log(apple);        //apple
console.log(banana);    //banana
console.log(peach);        //peach

---

📌비구조화할당 '전' 코드 예시2

const colors = {
   red : 'RED',
   yellow : 'YELLOW',
   green : 'GREEN'
};
const red = colors.red;
const yellow = colors.yellow;
const green = colors.green;

각 배열 안에 있는 요소들을 사용하기 위해서는 각각의 변수 안에 배열 내 index 또는 key값을 찾아서 매칭시켜주어야함.

📌비구조화할당 코드 예시

//비구조화할당 코드
let fruits = ['apple', 'banana', 'peach'];
let [apple, banana, peach] = fruits;

console.log(apple);        //apple
console.log(banana);    //banana
console.log(peach);        //peach

한 줄로 바로 배열 안에 넣어주는 것이 가능함. 비구조화할당 코드를 이용하면 왼쪽의 변수에 오른쪽 배열 값을 바로 분해해서 할당해줌

💻속성 이름이 유효한 JavaScript 식별자명이 아닌 경우

구조분해는 JavaScript 식별자 이름으로 적합하지 않은 속성명이 제공된 경우에도 이용할 수 있다. 이 때, 대체할 유효한 식별자명을 제공해야 한다.

const foo = { 'fizz-buzz' : true };
const { 'fizz-buzz': fizzBuzz } = foo;

console.log(fizzBuzz); //true

💻비구조화 할당 구조 분해

: 1:1로 값이 매칭되는 것이 아니라 하나의 값은 변수에 넣고 나머지는 나머지 변수에 할당하는 것이 가능. 전개 연산자인 ...을 이용하면 매칭된 값 외의 모든 데이터 값을 할당할 수 있음.

let fruit = ['apple', 'banana', 'peach', pear'];
let [apple, ...etc] = fruit;

console.log(apple); //하나의 값은 변수에 넣음
console.log(etc);     //['banana', 'peach', 'pear']
//spread 문법을 사용하면 매칭된 값 외에 모든 데이터 할당 가능

• ...을 이용하면 하나의 변수를 할당하고 나머지 값들을 모두 넣어준다
• ...인 전개 연산자를 사용하기 위해서는 가장 마지막 요소에 넣어주어야함

💻선언에서 분리한 할당 및 변수 값 교환

📌배열 비구조화 예시

//선언에서 분리한 할당
const colorList = ['red', 'yellow', 'green'];
let red, yellow, green;

[red, yellow, green] = colorList;

//변수값 교환
let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); //3
console.log(b); //1

미리 선언되어 있는 변수를 통해서도 비구조화 할당이 가능하다

그리고 비구조화 할당을 활용한 변수값의 교환이 가능한데, 이는 두 변수의 값을 서로 교환하기 위해서는 기존에는 임시 변수가 필요했었으나 비구조화 할당을 통해 임시변수가 필요하지 않고 위 예제처럼 서로 교환이 가능하다

📌객체 비구조화 예시1

const colors = {
   red : 'RED',
   yellow : 'YELLOW',
   green : 'GREEN'
};

let red, yellow, green;
({ red, yellow, green } = colors);

📌객체 비구조화 예시2

let a, b;
({a, b} = {a:1, b:2}); //let {a, b} = {a:1, b:2}와 동일

객체 비구조화에서도 선언에서 분리한 할당이 가능하나, 주의해야할 점은 괄호()를 사용해주어야 한다는 점이다.

스크립트에서는 블록{}으로 간주하기 때문에 위 예제처럼 괄호로 감싸주어야한다.

• 괄호 역시 꼭 세미콜론(;)을 넣어 끝났다는 표시를 해주어야 한다

💻기본값 지정

: 만약 지정한 변수 이외에 매칭할 값이 없다면 undefined가 발생한다.

• 변수 집합의 길이보다 우측의 할당하려는 배열의 길이가 길면 상관없지만 그 반대로 변수 집합의 길이보다 우측의 할당하려는 배열의 길이가 짧을 경우 문제가 생긴다.
• 이를 방지하기 위해 기본값을 할당할 수 있다
• 기본값을 할당할 경우 비구조화 할당을 하려는 값이 undefined일 때 기본값을 대신 사용하여 할당한다.

📌비구조화할당 코드 예시1

let fruit = ['apple', 'banana', 'peach'];
let [apple, banana, peach, pear='pear'] = fruit;

console.log(apple);        //'apple'
console.log(banana);    //'banana'
console.log(peach);        //'peach'
console.log(pear);        //'pear'

pear은 fruit 배열 안에 없으나, 구조분해할당에서 기본값을 지정해주었기 때문에 해당값이 콘솔에 찍힌다

📌비구조화할당 코드 예시2

const object = { a:1 };

function print({ a, b=2 }){
   console.log(a);
   console.log(b);
}

print(object);
//1
//2

b에게 기본값을 주고 싶다면 위와 같이 처리도 가능하다

📌비구조화할당 코드 예시2

//기본값 할당 x
const [ a, b, c ] = [1, 2];
console.log(a); //1
console.log(b); //2
console.log(c); //undefined

//기본값 할당 o
const [ a=4, b=5, c=6] = [1, 2];
console.log(a); //1
console.log(b); //2
console.log(c); //6

💻일부 반환값 무시하기

필요하지 않은 반환값을 무시할 수 있다

function f(){
    return [1, 2, 3];
}

let [a, , b] = f();
console.log(a); //1
console.log(b); //3

반환값을 모두 무시할 수도 있다

[, ,] = f();

💻원래 key대신 다른 변수명 사용

//새로운 변수명 할당과 기본값 할당의 동시 사용
const {a:aa = 4, b:bb = 5, c:cc = 6} = {a:1, b:2};
console.log(aa); //1
console.log(bb); //2
console.log(cc); //6

객체 비구조화는 동일한 key값을 통해 할당이 되는데 해당 key값은 할당 받은 후, 새롭게 사용할 변수명을 콜론:을 통해 변경할 수 있다

그리고 동시에 기본값 할당도 사용할 수 있다

💻변수에 배열의 나머지 값들 할당하기

(배열 결합/합치기/깊은 복사)

: 나머지 매개 변수 및 확산 연산자 (Rest parameter and Spread operator)라고도 한다

//1. 배열의 나머지 값 할당
const [a, ...b] = [1, 2, 3];
console.log(a); //1
console.log(b); //[2, 3]

//2. 배열의 결합
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); //[1, 2, 3, 4, 5, 6]

/*
const arr3 = [arr1, arr2];
위와 같이 선언하면 아래와 같이
배열 자체를 통째로 담아낸 결과값이 나온다

나머지 구문('...')을 사용해야
배열이 결합되어 변수 안에 새롭게 담긴다
*/

//3. 배열의 복사
const arr1 = [1, 2, 3];
const arr2 = arr1;
const arr3 = [...arr1];
const [...arr4] = arr1;

arr1[0] = 7;
console.log(arr1); //[7, 2, 3]
console.log(arr2); //[7, 2, 3]
console.log(arr3); //[1, 2, 3]
console.log(arr4); //[1, 2, 3]

/*
arr1[0] 자리에 7을 대입해서
arr1과 arr2는 [1,2,3]에서 [7,2,3]으로 변하지만

arr3, arr4는 arr1을 나머지 구문('...')을 사용하여 복사해두었기 때문에
console로 찍어보면 [1,2,3]의 값을 가진다
*/

나머지 구문 ...을 사용하여 배열을 결합하거나 복사할 수 있다

나머지 요소의 오른쪽 뒤에 쉼표가 있으면 SyntaxError가 발생한다

var [a, ...b, ] = [1, 2, 3];
//SyntaxError: rest element may not have a trailing comma

_ _ _

## 💻변수에 객체의 나머지 값들 할당하기
##### 객체 결합/합치기/깊은복사
: 나머지 매개 변수 및 확산 연산자(Rest parameter and Spread operator)라고도 한다

```javascript
//객체의 나머지 값 할당
const {a, ...b} = {a:1, b:2, c:3};
console.log(a); //1
console.log(b); //{b:2, c:3}

//객체의 결합
const obj1 = {a:1, b:2, c:3};
const obj2 = {c:4, d:5, e:6};
const obj3 = {...obj1, ...obj2};
console.log(obj3); //{a:1, b:2, c:4, d:5, e:6}

//객체의 복사
const obj1 = {a:1, b:2, c:3};
const obj2 = {
  ...obj1,
  c:4,
  d:5
}
console.log(obj2); //{a:1, b:2, c:4, d:5}

객체의 나머지값 할당에 대해서는 **객체 비구조화 할당의 원리가 아무리 key값 매칭이라고 하여도 나머지 값을 뜻ㅅ하는 구문 전개연산자(...)는 우항의 key에 영향을 받지 않으므로 b라는 key값에 나머지 값들이 할당되는 것을 볼 수 있다.

그 다음 객체의 결합에 있어서는, 중복되는 key값에 대해서는 마지막으로 결합된 key값을 따르게 된다. 위 예제에서는 c의 값이 3이 아닌 4로 할당된 것을 볼 수 있다.

💻깊은 값 비구조화 할당

: 객체의 깊숙한 곳에 들어있는 값을 꺼내는 방법에는 두 가지가 있다

const deepObject = {
   state: {
       information: {
           name: 'velopert',
           languages: ['korean', 'english', 'chinese']
       }
   },
   value: 5
}

여기서 만약 name, languages, value 값들을 밖으로 꺼내고 싶다면 첫번째로 비구조화 할당 문법을 두 번 사용한다

📌깊은 값 꺼내는 비구조화할당 코드 예시1

ES6 의 object-shorthand 문법

const deepObject = {
    state: {
        information: {
            name: 'velopert',
            languages: ['korean', 'english', 'chinese']
        }        
    },
    value: 5
};

const { name, languages } = deepObject.state.information;
const { value } = deepObject;

const extracted = {
    name,
    languages,
   value
}

만약 key 이름으로 선언된 값이 존재한다면 바로 매칭시켜주는 문법이다.

extracted 객체를 선언한 저 코드는 아래의 코드와 동일하다

const extracted = {
    name: name,
      languages: languages,
      value: value
}

deepObject 객체에서 names, languages, value를 추출하는 과정에서 구조화할당을 두 번 했는데, 이번에는 한 번에 모두 추출하는 방법을 살펴보자

📌깊은 값 꺼내는 비구조화할당 코드 예시2

const deepObject = {
   state: {
       information: {
           name: 'velopert',
           languages: ['korean', 'english', 'chinese']
       }
   },
   value: 5
};

const {
   state: {
       information: { name, languages }
   },
   value
} = deepObject;

const extracted = {
   name,
   languages,
   value
}

console.log(extracted);

💻비구조화 할당 시 이름 바꾸기

const animal = {
   name: '멍멍이',
     type: '개'
};

const nickname = animal.name;
console.log(nickname); //멍멍이

위 코드에서 animal.name 값을 nickname 값에 담고 있는 상태임 이름이 같다면 비구조화 할당을 쓰면 되는데 지금은 이름이 다른 상태임

이런 상황에서 : 문자를 사용하여 이름을 바꾸어줄 수 있다

📌비구조화할당 이름 변경 예시1

const animal = {
    name: '멍멍이',
      type: '개'
};

const { name: nickname } = animal;
console.log(nickname); //멍멍이

위 코드는 animal 객체 안에 있는 name을 nickname이라고 선언하겠다는 의미이다

참조 블로그1 :: [JavaScript] 비구조화 할당/구조분해할당 참조 블로그2 :: 06. 비구조화 할당 (구조분해) 문법 참조 블로그3 :: [ES6+] 배열 및 객체의 비구조화 할당- Destructuring Assignment (ft. 나머지 매개 변수 및 확산 연산자 - Rest parameter and Spread operator) 참조 페이지4 :: (MDN) 구조분해할당

const txt = "Hello World";

//1. .length
console.log(txt.length);        //11

//2. .indexOf()
console.log(txt.indexOf("Wo"));    //6
console.log(txt.indexOf("apple"));//-1

//3. .slice()
const txt2 = txt.slice(0, 4);
console.log(txt2);                //Hell

//4-1. .substr()
const txt3 = txt.substr(6, 3);    //6번째 글자에서부터 3글자 잘라냄
console.log(txt3);                //Wor

//4-2. .substr()
const origin = "학교종이 땡떙땡 어서모이자 선생님이 우리를 기다리신다.";
let result = '';

if(origin.length > 15) ? result = origin.substr(0, 15) + '...' : result = origin;

console.log(result);

//5. .replace()
const introduce = "우리 ABC회사는 높은 품질의 제품을 만들고 있으며 ABC라는 회사 브랜드 가치를 높이기 위해서 노력하고 있습니다. 앞으로 우리 ABC회사 제품을 많이 애용해주세요.";

const introduce2 = introduce.replace("ABC", "BBC");
const introduce2 = introduce.replace(/ABC/g, "BBC");
console.log(introduce2);    //우리 BBC회사는 높은 품질의 제품을 만들고 있으며 BBC라는 회사 브랜드 가치를 높이기 위해서 노력하고 있습니다. 앞으로 우리 BBC회사 제품을 많이 애용해주세요.

//6. .split()
const colors = "red green blue";
const arr = colors.split('');
console.log(arr);            //['red', 'green', 'blue']

forEach()가 배열 요소마다 한 번씩 주어진 함수(콜백)를 실행하는 것과 달리, map()은 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과들을 모아 새로운 배열을 반환한다는 특징을 가지고 있다

그리고 그 함수는

1. currentValue (배열 원소의 값)
2. index (현재 요소의 인덱스)
3. array (현재 배열)

이 세 개의 인자를 가지고 호출된다.

배열의 각 원소에 3을 곱하는 코드를 forEach()와 map()의 특징에 맞게 짜본다면 다음과 같이 작성이 가능하다

예시: forEach();

const arr = [1, 2, 3, 4, 5];
const mulArr = [];

arr.forEach(num => {
     mulArr.push(num * 3);
});

console.log(mulArr); //[3, 6, 9, 12, 15]

예시: map();

const arr;
const mulArr = arr.map(num => num * 3);

console.log(mulArr); //[3, 6, 9, 12, 15]

2. return값을 보내지 않는 forEach()

forEach()는 밖으로 return값을 반환하지 못한다.

let arr = [1, 2, 3, 4, 5];
let a = arr.forEach(function(value){
    return value;
});

console.log(a); //undefined

위와 같이 forEach()를 return하면 undefined 값을 얻게 된다.

하지만 같은 경우라도 map()을 이용하면 다르다.

let arr = [1, 2, 3, 4, 5];
let a = arr.map(function(value){
    return value + 1;
});

console.log(a); //[2, 3, 4, 5, 6]

위의 경우에는 [2, 3, 4, 5, 6]이 들어있는 배열이 출력된다.

map()은 리턴값을 출력할 수 있다.

즉, forEach()와 map()의 가장 큰 차이는 리턴값에 있다.

또한, forEach()는 기존의 Array를 변경하는 반면, map()은 새로운 Array를 반환한다.

3. reduce()

reduce()의 문법은 아래와 같다.

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
   return accumulator + currentValue;
});

reduce()의 인자로는 총 4개를 받을 수 있는데, 이전값, 현재값, index, 배열을 받을 수 있다.

let arr = [1, 2, 3, 4, 5];
let a = arr.reduce(function(preValue, currentValue){
    return preValue + currentValue;
});

console.log(a); //15
/*
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10
10 + 5 = 15
*/

앞과 뒤의 값을 더하여 15라는 값을 도출하는 것을 알 수 있다.

preValue만 리턴할 경우, 배열의 첫번째 요소인 1이 리턴된다. currentValue는 배열의 마지막 요소인 5가 리턴된다.

• 여러 개의 코드블록 중에서 하나를 선택해야할 때 사용
• if문과 다르게 부등호로 조건이 들어갈 경우 사용할 수 없다
• switch문은 = 등호 형태의 조건문
• 모든 switch문은 if문으로 바꿀 수 있지만 if문에서 부등식이 사용된 경우에는 switch문으로 치환할 수 없음

그러나 switch문을 사용함으로써 if문보다 좀 더 코드의 가독성이 좋게끔 작성할 수 있으며 if문보다 switch문이 미세하게 빠르기 때문에 switch문으로 작성할 수 있는 코드가 있다면 if문보다 switch문으로 코딩하는 습관을 가지는 것이 좋다

swtich(표현식){
    case A:
        //실행할 코드 블록
        break;
    case B:
        //실행할 코드블록
        break;
    default:
        //실행할 코드블록
}
//여기서 A, B는 switch문 안의 표현식의 결과값을 의미함

_ _ _
#### 예제
```javascript
//요일을 구하는 switch문
switch(new Date().getDay()){
    case 0:
        console.log('Sunday');
        break;
    case 1:
        console.log('Monday');
        break;
    case 2:
        console.log('Tuesday');
        break;
    case 3:
        console.log('Wednesday');
        break;
    case 4:
        console.log('Thursday');
        break;
    case 5:
        console.log('Friday');
        break;
    case 6:
        console.log('Saturday');
        break;
}

자주 쓰는 실행코드들을 블록 단위로 묶어서 패키징 해놓은 형태 자주 쓰는 코드들을 기능단위로 재사용하기 위함

함수정의 : 미리 function 키워드를 이용해서 자주 쓸 코드들을 묶어서 정의하는 행위

함수호출 : 정의되어 있는 함수를 호출해야지만 기능이 실행됨

함수의 종류

1. 선언적 함수

• 함수에 미리 이름을 붙여서 정의해놓은 형태
• 자바스크립트 파일을 읽을 때 선언적함수를 우선적으로 읽어줌
• 선언적 함수는 호출위치가 자유로움

2. 익명함수

• 함수에 이름 없이 정의하는 형태
• 익명함수 자체만으로는 호출이 불가능
• 변수에 익명함수를 대입하거나(대입형) 특정 이벤트 객체에 대입하는 식으로 호출 가능

3. 대입형함수

• 변수에 익명함수가 대입된 형태

4. 즉시실행함수

• 함수가 자기자신을 정의하자마자 바로 자신을 호출
• 즉시실행함수를 쓰는 이유
  • 즉시실행함수 안쪽의 값들을 캡슐화

5. 화살표 함수

• 기존의 익명함수를 좀 더 쓰기 편하게 축약한 형태
• 내부로 전달되는 파라미터가 하나면 괄호는 생략 가능
• 코드블록 안에서 실행되는 코드가 한줄이면 코드블록 괄호도 생략 가능

(1) 함수 매개변수 (parameter) : 함수외부에서 함수 내부로 특정 값을 전달하기 위한 통로 이름

(2) 인수 (argument) : 함수를 호출할 때 파라미터를 통해서 전달되는 값

(3) 반환값 (return) : 함수 내부에서 만들어진 값을 함수 호출 시 외부로 반환 : 함수구문 실행 도중 특정 시점에서 강제로 코드가 실행 중단될 때

1. for: 고전적 for문
2. for in: 객체의 프로퍼티 키 열거 전용
3. for of: 이터러블 순회 전용
4. forEach(): 배열 순회 전용 메서드
5. while: 고전적 while문
6. do while: 고전적 do...while문
7. Object 객체 메서드: 객체 순회 전용
8. Array.prototype 메서드: 배열 전용

1. for문

for문은 while문과는 다르게 자체적으로 초기식, 표현식, 증감식을 모두 포함하고 있는 반복문 따라서 while문보다 더 간결하게 반복문 표현이 가능하다

for(let i=0; i<10; i++){ ... 반복 수행 코드 ... }

for (let i=0; i<10; i++){
  console.log(i);
}
/* 주의: 변수 선언 시, const를 사용하면 값 변경이 불가능하여 에러가 발생함 */

2. for in문

해당 객체의 모든 열거할 수 있는 프로퍼티(enumerable properties)를 순회할 수 있도록 해줌

• ※ 열거할 수 있는 프로퍼티란 내부적으로 enumerable 플래그가 true로 설정된 프로퍼티를 의미함

이러한 프로퍼티들은 for in문으로 접근할 수 있음

for(const key in 객체){ ... 반복 수행 코드 ... }

const obj = {
  name: 'ssari',
  job: 'publisher',
}

for (const key in obj){
    console.log(`${key} : ${obj[key]}`);
}
//name: ssari
//job: publisher

var obj = {
    name : "이순신",
    age : 20
};

for (var i in obj) {
    document.write(i + "<br>");
}
//name
//age

3. for of문

반복할 수 있는 객체(iterable objects)를 순회할 수 있도록 해주는 반복문 자바스크립트에서 반복할 수 있는 객체에는 Array, Map, Set, arguments, String, DOM컬렉션(HTMLCollection, NodeList) 등이 있음 해당 반복문은 루프마다 객체의 열거할 수 있는 프로퍼티 값을 지정된 변수에 대입함 for of문은 익스플로러에서 지원하지 않음

const arr = [11, 22, 33];

for(const item of arr){
    console.log(item);
  //11, 22, 33 출력
}

/* 아래와 같이 for of문을 한 줄로 사용할 수도 있다 */
for(const item of arr) console.log(item);

4. forEach()

배열.forEach( function(value, index, array){ ... 반복 수행 코드 ... })

• 콜백함수의 매개변수로 value에 요소값, index에 인덱스, array에 원본 배열이 들어온다

[10, 20, 30].forEach((value, index, array) => {
    console.log(`${index} : ${value}`);
});
//0:10, 1:20, 2:30 출력

5. while문

잘 사용하지 않는다

let num = 0;
while(num < 3){
    console.log(num);
    num++;
}
//0~2까지 출력

6. do while문

do{
   console.log('일단 한 번은 실행된다); //해당 코드 한 번 실행한 수 
}while 

참고: https://curryyou.tistory.com/202

사용자가 임의로 만드는 명칭

ex) const, let 식별자를 작성할 때에는 예약어는 피해야함

예약어

자바스크립트 자체적으로 특정 기능을 실행하기 위해 예약된 명령어

실행문

특정 명령어를 실행하기 위한 구문

ex) document.querySelector(); 여러 가지의 예약어가 모여 실행문이 되기도 함