모던 자바스크립트

운영하는 사람
Javascript
2021. 10. 28. 14:01

코드잇의 모던 자바스크립트 강의를 듣고 정리한 내용입니다. 문제가 될 시 삭제하겠습니다.

코드잇 모던 자바스크립트

1. 모던 자바스크립트 이해하기

현시점에서 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 자바스크립트
ECMAScript의 첫 버전은 1997년에 등장했지만, 매년 새로운 버전들을 출시하진 않았음
하지만 여섯 번째(ES6)부터는 매년 새로운 버전들이 출시되면서 ECMAScript의 버전을 부를 때 연호를 붙여 ES2015(ES6), ES2016(ES7) ****으로 부르게 되었음
자바스크립트 개발자들 사이에서는 ES2015 이후에 매년 출시된 버전들을 통칭하기 위해서 ES2015+ 혹은 ES6+라는 용어를 사용
ES6부터는 연호를 사용해서 ES2015, ES2016이라고도 부른다
개발자들 사이에서는 짧고 빠르게 소통하기 위해서 ES6, ES7이라는 용어를 사용하지만, 실제로 ECMA International에서 버전을 발표할 때 표기하는 정식 명칭은 연호를 사용해서 ECMAScript 2015라고 표기한다

JavaScript는 프로그래밍 언어이고, ECMAScript는 프로그래밍 언어의 표준
ECMAScript는 JavaScript가 갖추어야 할 내용을 정리해둔 '설명서'이고, JavaScript는 ECMAScript를 준수해서 만들어낸 '결과물'
두 번째 차이점은 JavaScript는 ECMAScript를 기반으로 하지만 ECMAScript에 정의된 내용뿐만 아니라, 다른 부가적인 기능도 있다

2. 자바스크립트의 동작 원리

01. 데이터 타입의 특징과 종류

기본형 (Primitive Type)
- Number, String, Boolean, Null, Undefined
- Symbol(유일한 값을 만들때!), BigInt(엄청 큰 숫자를 다룰 때!)
참조형(Reference Type)
- Object

02. Symbol과 BigInt

심볼(symbol) : 기본형 데이터 타입(primitive data type) 중 하나입니다. 심볼은 코드 내에서 유일한 값을 가진 변수 이름을 만들 때 사용

다른 어떤 값과 비교해도 true가 될 수 없는 고유한 변수가 됨

const user = Symbol('this is a user');

user === 'this is user'; // false
user === 'user'; // false
user === 'Symbol'; // false
user === true; // false
user === false; // false
user === 123; // false
user === 0; // false
user === null; // false
user === undefined; // false

똑같은 설명을 붙인 심볼을만들더라도 두 값을 비교하면 false임

const symbolA = Symbol('this is Symbol');
const symbolB = Symbol('this is Symbol');

console.log(symbolA === symbolB); // false

BigInt : BigInt는 자바스크립트에서 아주 큰 정수(Integer)를 표현하기 위해 등장한 데이터 타입입니다.
자바스크립트의 숫자형 값에는 9000조 정도의 정수 표현의 한계가 존재한다.
- 이럴때 일반 정수 마지막에 알파벳 n을 붙이거나 BigInt라는 함수를 사용한다.
- console.log(9007199254740993n); // 9007199254740993 console.log(BigInt(9007199254740993)); // 9007199254740993

03. typeof 연산자

typeof 'Codeit'; // string
typeof Symbol(); // symbol
typeof {}; // object
typeof []; // object
typeof true; // boolean
typeof(false); // boolean
typeof(123); // number
typeof(NaN); // number
typeof(456n); // bigint
typeof(undefined); // undefined
typeof null; // object
function sayHi() {
  console.log('Hi!?');
}

typeof sayHi; // function

05. 불린인 듯 불린 아닌 불린같은 값

False로 평가되는 값(Falsy 값) : false, null, undefined, NaN, 0, ''

True로 평가되는 값(Truthy 값) : 나머지 값들

07. AND와 OR의 연산 방식

자바스크립트에서 논리 연산자는 상황에 따라서 어느 한쪽을 선택하는 방식으로 동작함
&& 연산자는 왼쪽값이 truthy 하면 오른쪽 값을 return , falsy 하면 왼쪽값을 return 함
|| 연산자는 왼쪽 값이 truthy 하면 왼쪽값을 return , 왼쪽 값이 falsy 하면 오른쪽 값을 return

console.log('codeit' && 'JavaScript'); // JavaScript 가 출력됨

console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

console.log(null && undefined); // null
console.log(0 || true); // true
console.log('0' && NaN); // NaN
console.log({} || 123); // {}

falsy 한 값이 전달되면 'Codeit' return , 전달한 값이 있을 경우에는그 값을 사용

function print(value) {
    const message = value || 'Codeit';
    console.log(message);
}

print();
print('JavaScript');

AND와 OR 연산자 사이에서 AND연산자의 우선순위가 더 높음

console.log(true || false && false); // true
console.log((true || false) && false); // false

console.log('Codeit' || NaN && false); // Codeit
console.log(('Codeit' || NaN) && false); // false

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

10. null 병합 연산자

물음표 두개(??)를 사용해서 null 혹은 undefined 값을 가려내는 연산자
연산자 왼편의 값이 null이나 undefined 라면 연산자 오른편의 값이 리턴됨
연산자 왼편의 값이 null이나 undefined가 아니라면 연산자 왼편의 값이 리턴됨
OR 연산자(||)와 다른점은 null 병합 연산자(??)는 왼편의 값이 null이나 undefined인지 확인하고, OR 연산자는 왼편의 값이 falsy인지를 확인

const example1 = null ?? 'I'; // I 
const example2 = undefined ?? 'love'; // love
const example3 = 'Codeit' ?? 'JavaScript'; // Codeit

console.log(example1, example2, example3); // ?

11. 변수와 스코프

호이스팅 : var로 선언 시 선언부분만 할당 전에 끌어올려짐
let, const는 변수 선언 이전에 접근할 수 없음.
var 키워드는 코드블록 밖에서도 접근이 가능함, let, const 는 코드블록 안에서만 접근이 가능함
var : 함수 스코프 (function scope)
let : 블록 스코프 (block scope)
const : 블록 스코프 (block scope)

console.log(title); // undefined 선언이 나중에 되었지만, 위로 올라가는 현상
var title = 'codeit';
console.log(title); // codeit

// 변수와 스코프 
console.log(title);
let title;

var x = 3;

if (x < 4) {
    var y = 3;
}

for (var i = 0; i < 5; i++) {
    console.log(i); // 0 1 2 3 4
}

console.log('x:', x); // 3
console.log('y:', y); // 3
console.log('i:', i); // 5

3. 함수 다루기

01. 함수를 만드는 방법

함수 선언 : function 키워드를 통해서 함수를 선언하는 일반적인 방식
함수 표현식 : 이 함수 선언을 변수에 할당하거나 다른 함수의 아규먼트로 활용하면서 마치 함수 선언을 값처럼 활용해서 함수를 만드는 방식

// 함수를 만드는 방법
// 함수 선언(Function Declaration)
function 함수이름 (파라미터) {
    동작
    return 리턴값
}

// 함수 표현식 (함수 선언을 값처럼 사용)
// 선언 이후에 값을 활용
const printCodeit = function () {
    console.log('Codeit!');
};
printCodeit();

const myBtn = document.querySelector('#myBtn');
myBtn.addEventListener('click', function() {
    console.log('button is clickd!');
});

03. 이름이 있는 함수 표현식

Named Function Expression (기명 함수 표현식)

04. 즉시 실행함수 (IIFE)

즉시 실행함수 : 선언과 동시에 즉시 실행되는 함수
즉시 실행함수는 함수에 이름을 지어주더라도 외부에서 재사용할 수 없음

(function () {
  console.log('Hi!');
})();

(function (x, y) {
  consoel.log(x + y);
})(3, 5);

즉시 실행함수도 일반 함수처럼 파라미터를 작성하고, 함수를 호출할 때 아규먼트를 전달할 수도 있음

(function sayHi() {
  console.log('Hi!');
})();

sayHi(); // ReferenceError

즉시 실행 함수는 선언과 동시에 실행이 이루어지기 때문에 일반적으로 프로그램 초기화 기능에 많이 활용됨

(function init() {
  // 프로그램이 실행 될 때 기본적으로 동작할 코드들..
})();

혹은 재사용이 필요 없는, 일회성 동작을 구성할 때 활용
- 함수의 리턴값을 바로 변수에 할당하고 싶을 때

const firstName = Young;
const lastName = Kang;

const greetingMessage = (function () {
  const fullName = `${firstName} ${lastName} `;

  return `Hi! My name is ${fullName}`;
})();

익명함수

(function countdown(n) {
  console.log(n);
  if (n === 0) {
    console.log('End!');
  } else {
    countdown(n - 1);
  }
})(5);

05. 값으로서 함수

// 값으로서 함수
function getPrintHi() {
    return function() {
        console.log('Hi!?');
    };
};

const sayHi = getPrintHi();
sayHi();

# 출력 
# Hi!?
# getPrintHi()(); 바로 호출할 수도 있음

07. Parameter

// name='codeit' 이런식으로 사용하면, 값이 안들어왔을 때 default값으로 사용하게 된다.
function greeting(name='codeit') { 
    console.log(`Hi! My name is ${name}!`);
}

greeting('javascript');

function defaultTest(x, y = x+3){
    console.log(`x: ${x}`);
    console.log(`y: ${y}`);
}

defaultTest(2);

# x: 2
# y: 5

09. Arguments

전달되는 arguments 갯수가 다양할 때 arguments 객체를 사용함

function printArguments(a,b,c){
    console.log(arguments);
    for (const arg of arguments) {
        console.log(arg);
    }
    console.log('-------------');
}

printArguments('a', 'b', 'c');
printArguments('a');
printArguments('a', 'b');

11. Rest Parameter

ES6 이후에 나옴
...args 는 배열이기때문에 배열관련 함수들을 활용할 수 있다.

// Rest Parameter
function printArguments(...args){
    console.log(args.splice(0,2));
    console.log('-------------');
};

printArguments('a', 'b', 'c');
printArguments('a');
printArguments('a', 'b');

function printRank(first, second, ...others) {
    console.log('코드잇 레이스 최종 결과');
    console.log(`우승: ${first}`);
    console.log(`준우승: ${second}`);
    for (const arg of others) {
        console.log(`참가자: ${args}`);
    }
}

printRank('a', 'b', 'c', 'd', 'e');

13. Arrow Function

rest parameter를 사용한다거나 파라미터의 기본값을 지정하는 방식들은 기존의 함수와 똑같기 때문에 기존에 사용하던 함수 선언 방식들은 대부분 화살표 함수로 변환할 수가 있음
화살표 함수는 arguments 객체가 없어서 예외적으로 arguments 객체를 활용하는 함수는 화살표 함수로 변환하기가 어려움
일반함수와 this를 다루는 방법이 다름

const getTwice = function(number) {
    return number * 2;
};

// Arrow Function
const getTwice = (number) => {
    return number * 2;
};

const getTwice = number => {
    return number * 2;
};

const getTwice = number => number * 2;

console.log(getTwice(5));

const getCodeit = () => {
    return { name: 'Codeit', };
}

const getCodeit = () => ({ name: 'Codeit', });

const getObject = function(a, b, c) {
  return { 0: a, 1: b, 3: c };
}

const getObject = (a, b, c) => ({ 0: a, 1: b, 3: c });

14. What is this ?

// this 
const user = {
    firstName: 'Tess',
    lastName: 'Jang',
    getFullName: function() {
        return `${user.firstName} ${user.lastName}`;
    },
};

console.log(user.getFullName());

this : 함수를 호출한 객체를 가르킨 키워드

function getFullName() {
    return `${this.firstName} ${this.lastName}`;
}

const user = {
    firstName: 'Tess',
    lastName: 'Jang',
    getFullName: getFullName,
};

console.log(user.getFullName());

메소드가 속해있는 객체의 property 가 속해있는 상황에서도 this를 사용할 수 있음

const user = {
    firstName: 'Tess',
    lastName: 'Jang',
    getFullName: function () {
        return `${this.firstName} ${this.lastName}`;
    },
};

console.log(user.getFullName());

함수를 호출한 객체가 this에 담김

//this 
console.log(this);

function printThis() {
    console.log(this);
}

const myObj = {
    content: 'myObj',
    printThis: printThis,
};

const otherObj = {
    content: 'otherObj',
    printThis: printThis,
};

myObj.printThis();
otherObj.printThis();

4. 자바스크립트의 문법과 표현

01. 문장과 표현식

문장 : 자바스크립트에서 문장은 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리
표현식 : 결과적으로 하나의 값이 되는 모든 코드
const title = 'JavaScript'; const codeit = { name: 'Codeit' }; const numbers = [1, 2, 3]; typeof codeit // object title // JavaScript codeit.name // Codeit numbers[3] // undefined
자바스크립트에서 특별한 경우를 제외하면 일반적으로 표현식인 문장은 세미콜론으로, 표현식이 아닌 문장은 문장 자체의 코드 블록(중괄호)로 그 문장의 범위가 구분

02. 조건을 다루는 표현식

// 조건 연산자 (Conditional operator)

if (조건) {
    // 조건이 true 일 때 동작
} else {
    // 조건이 false 일 때 동작
}

switch (값) {
    case A: 
        // 값이 A와 일치할 때 동작
        break;

    default:
        // 값과 일치하는 case가 없을 때 동작

}

// 삼항 연산자 (Ternary operator)
// 조건 ? truthy 할 때 표현식 : falsy 할 때 표현식

const CUT_OFF = 80;

function passChecker(score) {
    return score > CUT_OFF ? '합격!' : '불합격!';
}

console.log(passChecker(75));

04. Spread 구문

배열을 다룰 때 유용하게 사용할 수 있음

const numbers = [1, 2, 3];

console.log(...numbers); // 1 2 3 이 출력됨(배열에서 괄호가 벗겨지고 각각 개별 값으로 펼쳐짐)
console.log(1, 2, 3);

const sumAll = (...args) => {
    let sum = 0;
    for (arg of args) {
        sum += arg;
    }
        return sum;
}

console.log(sumAll(1, 2, 3, 4));

const webPublishing = ['Html', 'CSS'];
const interactiveWeb = webPublishing; // 객체값이 참조됨
const interactiveWeb = [...webPublishing, 'JavaScript']; // 배열값이 복사됨

interactiveWeb.push('JavaScript');

console.log(webPublishing);  // ['html', 'CSS', 'JavaScript']
console.log(interactiveWeb); // ['html', 'CSS', 'JavaScript']

여러 배열을 합칠 때

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const arr3 = [...arr1, ...arr2];
console.log(arr3);

const arr4 = arr1.concat(arr2);
console.log(arr4);

배열을 펼쳐서 각각의 arguments로 사용할 수도 있음

const introduce = (name, birth, job) => {
    console.log(`저는 ${name}입니다.`);
    console.log(`저는 ${birth}년 생 입니다.`);
    console.log(`직업은 ${job}입니다.`);
}

const myArr = ['코드잇', 2017, '프로그래밍 강사'];
introduce(...myArr);

객체에도 담을 수 있음

const members = ['태호', '종훈', '우재'];

const newObject = { ...members };

console.log(newObject); // { 0:'태호', 1:'종훈', 2:'우재'}

const codeit = { 
  name: 'codeit', 
};

const codeitClone = { 
  ...codeit, // spread 문법!
};

console.log(codeit); // {name: "codeit"}
console.log(codeitClone); // {name: "codeit"}

const latte = {
  esspresso: '30ml',
  milk: '150ml'
};

const cafeMocha = {
  ...latte,
  chocolate: '20ml',
}

console.log(latte); // {esspresso: "30ml", milk: "150ml"}
console.log(cafeMocha); // {esspresso: "30ml", milk: "150ml", chocolate: "20ml"}

07. 모던한 프로퍼티 표기법

프로퍼티를 만들 때 프로퍼티 네임과 변수나 함수 이름이 같다면 다음과 같이 축약해서 사용 가능

const title = 'Codeit';
const birth = 2017;
const job = '프로그래밍 강사';

const user = {
    title,
    birth,
    job,
};

console.log(user);
// {title: 'Codeit', birth: 2017, job: '프로그래밍 강사'}

프로퍼티 네임과 변수나 함수의 이름이 같다면 생략할 수 있다.

function getFullName() {
    return `${this.firstName} ${this.lastName}`;
};

const user = {
    firstName: 'Tess';
    lastName: 'Jang';
    getFullName,
};

console.log(user.getFullName());

그리고 메소드를 작성할 때도 다음과 같이 function 키워드를 생략할 수가 있다.

const user = {
    firstName: 'Tess',
    lastName: 'Jang',
    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    },
};

console.log(user.getFullName());

const propertyName = 'birth';
const getJob = () => 'job';

const codeit = {
    ['topic' + 'Name']: 'Modern JavaScript',
    [getJob()]: '프로그래밍 강사',
};

console.log(codeit);

09. 옵셔널 체이닝

아래 코드에서 볼 수 있는 것처럼 물음표와 마침표를 붙여 사용하는 부분이 바로 옵셔널 체이닝 연산자(?.) 이다.

만약 옵셔널 체이닝 연산자 왼편의 프로퍼티 값이 undefined 또는 null 이 아니라면
그다음 프로퍼티 값을 리턴하고 그렇지 않은 경우에는 undefined를 반환하는 문법이다.

const user1 = {
  name: 'Captain',
  cat: {
    name: 'Crew',
    breed: 'British Shorthair',
  }
}

function printCatName(user) {
  console.log(user.cat?.name);
}

/**   
// console.log(user.cat?.name); 와 같은 내용

function printCatName(user) {
  console.log((user.cat === null || user.cat === undefined) ? undefined : user.cat.name);
}
**/

10. Destructuring (구조 분해)

const rank = ['효준', '유나', '민환', '재하'];

const macbook = rank[0];
const ipad = rank[1];
const airpods = rank[2];
const coupon = rank[3];

console.log(macbook);
console.log(ipad);
console.log(airpods);
console.log(coupon);

const [macbook, ipad, airpods, coupon] = rank; // 길이가 넘치거나 적어도 되지만, 넘치는 변수는 담기지 않음 
console.log(macbook);
console.log(ipad);
console.log(airpods);
console.log(coupon);

const rank = ['효준', '유나', '민환', '재하', '규식'];
const [macbook, ipad, airpods, ...coupon] = rank; 
console.log(coupon); // ['재하', '규식'];

let macbook = '효준';
let ipad = '유나';

console.log('MacBook 당첨자:', macbook);
console.log('iPad 당첨자:', ipad);

let temp = macbook;  // [macbook, ipad] = [ipad, macbook];
macbook = ipad;
ipad = temp;

console.log('MacBook 당첨자:', macbook);   
console.log('iPad 당첨자:', ipad);

12. Destructuring (구조 분해2)

const macbook = {
    title: '맥북프로 16형',
    price: 369000,
    memory: '16GB',
};

const { title, price } = macbook;  //  변수 이름과 똑같은 프로퍼티 네임이 있으면 할당이 됨 

const { title: product, ...rest } = macbook; // title을 product로 이름을 변경함 

console.log(title);
console.log(price);

14. 함수와 Destructuring

const macbook = {
    title : '맥북 프로 16형'
    price: 3690000,
    color: 'silver',
    memory : '16GB', 
    storage : '1TB SSD 저장장치',
    display : '16형 Retina 디스플레이',
};

function printSummary({ title, color, price }) {
    console.log(`선택한 상품은 '${title}'입니다.`);
    console.log(`색상은 '${color}'입니다.`);
    console.log(`가격은 '${price}'입니다.`);
};

printSummary(macbook);

// 구조 분해
const btn = document.querySelector('#btn');

btn.addEventListener('click', (event) => {
    event.target.classList.toggle('checked');
});

btn.addEventListener('click', ({ target }) => {
    target.classList.toggle('checked');
});

16. 에러와 에러 객체

에러가 발생하면 에러에 대한 정보를 name과 message라는 프로퍼티로 담고 있는 에러 객체가 만들어짐
- 대표적인 에러 객체는 SyntaxError, RefereceError, TypeError

// 에러와 에러 객체 
console.log('시작!');

const title = '코드잇';
console.log(title);

console.log('끝!');

const error = new TypeError('타입 에러가 발생했습니다.');
console.log(error.name); // TypeError
console.log(error.message; // 타입 에러가 발생했습니다.

throw error ; // '타입 에러가 발생했습니다.' 에러가 발생함 

throw new TypeError('타입 에러가 발생했습니다.'); // new 키워드와 에러 객체 이름을 딴 함수를 통해 에러 객체를 만들 수 있고, throw 키워드로 에러를 발생시킬 수 있습니다.

17. try catch 문

// try catch 문
try {
    // 코드 
} catch (e) {
    // try에서 코드가 실행되다가 에러가 발생했을 때 동작할 코드
    console.log(e);
    console.log(e.name);
    console.log(e.message);
}

20. finally 문

try {
  // 실행할 코드
} catch (err) {
  // 에러가 발상했을 때 실행할 코드
} finally {
  // 어떤 코드를 실행할 때 에러 여부와 상관없이 항상 실행할 코드
}

finally 에서도 발생한 에러를 실행하고 싶다면

try {
  try {
    // 실행할 코드
  } catch (err) {
    // 에러가 발상했을 때 실행할 코드
  } finally {
    // 항상 실행할 코드
  }
} catch (err) {
  // finall문에서 에러가 발생했을 때 실행할 코드
}

5. 자바스크립트의 유용한 내부 기능

01. 배열 메소드 1: forEach와 map

forEach : 배열의 반복 작업이 필요한 경우
const numbers = [1, 2, 3]; numbers.forEach((element, index, array) => { console.log(element); // 순서대로 콘솔에 1, 2, 3이 한 줄씩 출력됨. });
map : 반복작업을 통해서 새로운 배열이 필요한 경우
const numbers = [1, 2, 3]; const twiceNumbers = numbers.map((element, index, array) => { return element * 2; }); console.log(twiceNumbers); // (3) [2, 4, 6]


// forEach와 map
const members = ['a', 'b', 'c', 'd'];

for (let member of members) {
    console.log(`${member}`);
}

members.forEach(function (member) {
    console.log(`${member}`);
});

members.forEach((member, i, arr) => {
    console.log(`${i} ${member}`);
    console.log(arr);
});

// 새로운 배열의 결과 값을 return 함
members.map((member, i, arr) => {
    return members[i] + member;
});

const list = document.querySelector('.list');
const data = [{
    title: '자바스크립트 공부하기',
    isClear: true,
  }, {
    title: '쓰레기 분리수거',
    isClear: false,
  }, {
    title: '고양이 밥주기',
    isClear: true,
  }, {
    title: '독서하기',
    isClear: false,
  }, {
    title: '영어 공부하기',
    isClear: false,
  }
];

data.forEach((todo, i) => {
    const    li = document.createElement('li');

    if (todo.isClear) {
        li.classList.add('item', 'done');
    } else {
        li.classList.add('item');
    }

    li.textContent = `${i + 1}. ${todo.title}`; // 5번 조건
  list.appendChild(li); // 6번 조건

});

04. 배열 메소드2 : filter와 find

filter : 항상 return 값이 배열임
find : return 값이 값임, 조건을 만족하는 순간 반복이 종료됨

//filter와 find 

const devices = [
{name: 'Galaxy', brand:'Samsung'},
{name: 'MacbookPro', brand:'Apple'},
{name: 'GalaxyWatch', brand:'Samsung'},
];

const apples = devices.filter((el) => el.brand === 'Apple');
console.log(apples);

const apples = devices.filter((element, index, array) => {
  return element.brand === 'Apple';
});

const myLaptop = devices.find((el) => el.brand === 'Gram');
console.log(myLaptop);

const notKims = seoul.filter((name) => {
    return name[0] !== '김';
});

const notKims = seoul.filter((name) => name[0] !== '김');

const user = data.find((da) => {
    if (da.userName === nameValue && da.phoneNumber === phoneValue )
    return da
  });

const user = data.find((el) => nameValue === el.userName && phoneValue === el.phoneNumber);

07. 배열 메소드 3 (some과 every)

// some: 조건을 만족하는 요소가 1개 이상 있는지
const someReturn = numbers.some((element, index, array) => {
  console.log(index); // 콘솔에는 0, 1, 2, 3까지만 출력됨.
  return element > 5;
});

// some과 every
const numbers = [1,3,5,7,9];

// some : 조건을 만족하는 요소가 1개이상 있는지 찾으면 true return 
const someReturn = numbers.some((el) => el > 5);

const someReturn = numbers.some((el, i) => {
    console.log('some:', i);
    return el > 5;
});

// some: 조건을 만족하는 요소가 1개 이상 있는지
const everyReturn = numbers.every((element, index, array) => {
  console.log(index); // 콘솔에는 0까지만 출력됨.
  return element > 5;
});

// every : 모든 요소가 조건을 만족하는지 만족하면 true return
const everyReturn = numbers.every((el) => el > 5);

const everyReturn = numbers.every((el, i) => {
    console.log('every:', i);
    return el > 5;
});

console.log('some:', someReturn);
console.log('every:', everyReturn);

08. 이 중 스파이가 있다.

function checkSpy(team) {
  // 여기에 코드를 작성해 주세요.
  const result = team.members.some((member) => member !== '스파이');
  let message = '';

  if (result) {
    message = `[주의!] 팀 ${team.codeName} 에 이중 스파이가 있습니다!`;
  } else {
    message = `팀 ${team.codeName} 에는 이중 스파이가 없습니다.`;
  }

  console.log(message);
}

function checkSpy(team) {
  // 여기에 코드를 작성해 주세요.
  const result = team.members.some((member) => member !== '스파이');
  const message = result
    ? `[주의!] 팀 ${team.codeName} 에 이중 스파이가 있습니다!`
    : `팀 ${team.codeName} 에는 이중 스파이가 없습니다.`;

  console.log(message);
}

09. 배열 메소드 4: reduce

const numbers = [1, 2, 3, 4];

numbers.reduce((acc, el, i, arr) => {
    return nextAccValue;
}, initialAccValue);

const sumAll = numbers.reduce((acc, el, i) => {
    console.log(`${i}번 index 요소로 콜백함수가 동작중입니다.`);
    console.log('acc:', acc);
    console.log('el:', el);
    console.log('----------------');

    return acc + el;
}, 0); // 0은 초기값

console.log('sumAll:', sumAll);

Untitled

11. sort, reverse

sort

const numbers = [1, 10, 4, 21, 36000];

// 오름차순 정렬
numbers.sort((a, b) => a - b);
console.log(numbers); // (5) [1, 4, 10, 21, 36000]

// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers); // (5) [36000, 21, 10, 4, 1]

reverse

const letters = ['a', 'c', 'b'];
const numbers = [421, 721, 353];

letters.reverse();
numbers.reverse();

console.log(letters); // (3) ["b", "c", "a"]
console.log(numbers); // (3) [353, 721, 421]

12. Map, Set

map
- 이름이 있는 데이터를 저장한다는 점에서 객체와 비슷
- 하지만 객체와 다르게 메소드를 통해서 값을 추가하거나 접근할 수 있음

// Map 생성
const codeit = new Map();

// set 메소드
codeit.set('title', '문자열 key');
codeit.set(2017, '숫자형 key');
codeit.set(true, '불린형 key');

// get 메소드
console.log(codeit.get(2017)); // 숫자형 key key에 해당하는 값을 얻는 메소드. key가 존재하지 않으면 undefined를 반환.
console.log(codeit.get(true)); // 불린형 key
console.log(codeit.get('title')); // 문자열 key

// has 메소드
console.log(codeit.has('title')); // true
console.log(codeit.has('name')); // false

// size 프로퍼티
console.log(codeit.size); // 3

// delete 메소드
codeit.delete(true);
console.log(codeit.get(true)); // undefined
console.log(codeit.size); // 2

// clear 메소드
codeit.clear();
console.log(codeit.get(2017)); // undefined
console.log(codeit.size); // 0

set
- set은 개별 값에 바로 접근하는 방법이 없음
- 중복값을 허용하지 않음
- 최초에 추가된 순서를 유지하면서, 나중에 중복된 값을 추가하려고 하면 그 값은 무시하는 특징이 있음

// Set 생성
const members = new Set();

// add 메소드
members.add('영훈'); // Set(1) {"영훈"}
members.add('윤수'); // Set(2) {"영훈", "윤수"}
members.add('동욱'); // Set(3) {"영훈", "윤수", "동욱"}
members.add('태호'); // Set(4) {"영훈", "윤수", "동욱", "태호"}

// has 메소드
console.log(members.has('동욱')); // true
console.log(members.has('현승')); // false

// size 프로퍼티
console.log(members.size); // 4

// delete 메소드
members.delete('종훈'); // false
console.log(members.size); // 4
members.delete('태호'); // true
console.log(members.size); // 3

// clear 메소드
members.clear();
console.log(members.size); // 0

// Set 생성
const members = new Set();

// add 메소드
members.add('영훈'); // Set(1) {"영훈"}
members.add('윤수'); // Set(2) {"영훈", "윤수"}
members.add('동욱'); // Set(3) {"영훈", "윤수", "동욱"}
members.add('태호'); // Set(4) {"영훈", "윤수", "동욱", "태호"}

for (const member of members) {
  console.log(member); // 영훈, 윤수, 동욱, 태호가 순서대로 한 줄 씩 콘솔에 출력됨.
}

const numbers = [1, 3, 4, 3, 3, 3, 2, 1, 1, 1, 5, 5, 3, 2, 1, 4];
const uniqNumbers = new Set(numbers);

console.log(uniqNumbers); // Set(5) {1, 3, 4, 2, 5}

6. 자바스크립트 모듈

01. 모듈이란?

모듈은 간단하게, 자바스크립트 파일 하나라고 할 수 있습니다.
복잡하고 많은 양의 코드를 기능에 따라 각각의 파일로 나눠 관리하면

코드를 좀 더 효율적으로 관리할 수 있고,
비슷한 기능이 필요할 때 다른 프로그램에서 재사용 할 수도 있다는 장점

02. 모듈 파일의 조건

모듈 파일 안에서 선언한 변수는 외부에서 자유롭게 접근할 수 없도록 막아야 한다.
다시 말해 모듈은 파일 안에서 모듈 파일만의 독립적인 스코프를 가지고 있어야 함

HTML파일에서 자바스크립트 파일을 불러올 때 모듈 스코프를 갖게 하려면

script 태그에 type 속성을 module이라는 값으로 지정해 주어야 함

모듈 스코프 : 선언한 변수나 함수가 파일 안에서만 사용 가능해야 함 

<body>
<script type="module" src="printer.js"></script>
</body>

05. 모듈 문법

// printer.js
export const title = 'CodeitPrinter';

export function print(value) {
    console.log(value);
}

// index.js
// 모듈 문법
import { title, print } from './printer.js';

print(title);

07. 이름 바꾸기

as 키워드로 import 한 변수나 함수의 이름 변경 가능

// index.js
import { title as printerTitle, print } from './printer.js';

const title = 'Codeit';
print(title);

09. 한꺼번에 다루기

// index.js
// 한꺼번에 다루기

import * as printerJS from './printer.js';
import {
    title as membersTitle,
    data as membersData
} from './members.js';

console.log(printerJS.title);

const title = 'CodeitPrinter';
function print(value) {
    console.log(value);
}

export { title as printerTitle, print };

default export

default 키워드가 붙으면 한개만 내보낼 수 있음
모듈 파일 내에서 딱 한번만 사용할 수 있음
import 할 때도 default as 이름 이런형식으로 사용함

export const title = 'CodeitMembers';
export const data = [
    'a', 'b', 'c'
];

export default 'codeit'; // 변수, 함수, 혹은 값을 

import {
    default as codeit // 반드시 as 키워드를 붙여주어야 사용할 수 있음
} from '.members.js';

저작자표시