200229

JavaScript

객체

• 객체 선언

const ironMan = {    'name': '토니스타크',    'actor': '로버트 다우니 주니어',    'alias': '아이언맨',    'key is string': true,};

객체는 { } 로 감싸고 key: value 페어로 이루어져 있는데, key 는 문자열로 공백이 있다면 ' 로 감싸야 한다. 또한 , 를 빼놓으면 error가 발생한다.

• 객체 호출

console.log(ironMan);// Object {name: "토니스타크", actor: "로버트 다우니 주니어", alias: "아이언맨"}
console.log(ironMan.name);// 토니스타크
console.log(ironMan.actor);// 로버트 다우니 주니어
console.log(ironMan.alias);// 아이언맨

• 객체 구조 분해

const {alias, name, actor} = hero;const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;console.log(text);

객체에서 값을 추출해냄.

• 객체 내부 함수

const dog = {    name: '멍멍이',    sound: '멍멍!',    say: function () {        console.log(this.sound);    },};

function() 은 익명 함수이지만, function dogFunc() 처럼 named 함수로 만들어도 된다.

이렇게 함수를 객체 내부에 정의할 수 있다.

그런데 만약 화살표 함수를 정의하면 어떻게 될까?

const dog = {    name: '멍멍이',    sound: '멍멍!',    say: () => {        console.log(this.sound);    },};
dog.say();
// TypeError: Cannot read property 'sound' of undefined

function 키워드를 사용할 경우 this 로 자신이 속한 위치와 연결시키는 것이 가능.

화살표 함수의 경우 자기 자신이 속한 this 가 어디인지 모른다

const dog = {    name: '멍멍이',    sound: '멍멍!',    say: function () {        console.log(this.sound);    },};
const cat = {    name: '야옹이',    sound: '야옹~',};
cat.say = dog.say;dog.say(); // 멍멍!cat.say(); // 야옹~
// Errorconst dogSay = dog.say;const catSay = cat.say;dogSay();catSay();

cat.say = dog.say; 로 함수를 할당해줄 수 있는데, 만약 외부에 있는 const dogSay 에 할당한다면, 마찬가지로 this 가 어느 scope 인지를 알지 못해 error 가 발생한다.

• getter와 setter 함수

// EX 1const dog = {    _name: '멍멍이',    get name() {        console.log('_name을 조회합니다.');        return this._name;    },    set name(value) {        console.log('이름이 바뀝니다..' + value);        this._name = value;    },};
console.log(dog.name);dog.name = '뭉뭉이';console.log(dog.name);
// EX 2const numbers = {    _a: 1,    _b: 2,    sum: 3,    calculate() {        console.log('calculate');        this.sum = this._a + this._b;    },    get a() {        return this._a;    },    get b() {        return this._b;    },    set a(value) {        this._a = value;        this.calculate();    },    set b(value) {        this._b = value;        this.calculate();    },};
console.log(numbers.sum);numbers.a = 5;numbers.a = 6;numbers.a = 7;numbers.a = 8;console.log(numbers.sum);

get 함수와 sum 함수는 이름이 같아도 된다. 하지만 변수와 이름이 같으면 안된다. 따라서 변수명 앞에 _ 를 붙여준다.

EX2에서처럼 get, set을 사용할 때의 장점은 a의 값이 변할 때에 calculate 함수를 실행하여 sum 값을 업데이트하므로 효율적이다.

• 객체 내장 함수

const doggy = {    이름: '멍멍이',    소리: '멍멍',};
console.log(doggy);
console.log(Object.entries(doggy));console.log(Object.keys(doggy));console.log(Object.values(doggy));

배열

JS에서 배열은 타입을 신경쓰지 않아도 된다. ex) [ 'a', 1, 'text' ]

배열 내장함수

• push

• pop

• length

반복문

• for 문

• while 문

• for - of

const numbers = [10, 20, 30, 40, 50];
for (let number of numbers) {    console.log(number);}

컬렉션 전용 반복 구문

• for - in

var obj = {    a: 1,    b: 2,    c: 3,};
for (var prop in obj) {    console.log(prop, obj[prop]); // a 1, b 2, c 3}

객체의 속성들을 반복하여 작업 수행.

• continue

반복문 중에 건너뛰고 다음 반복을 실행.

• break

반복문을 빠져나감.

• foreach

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
superheroes.forEach((hero) => {    console.log(hero);});

• map

const array = [1, 2, 3, 4, 5, 6, 7, 8];
const square = (n) => n * n;const squared = array.map(square);
console.log(squared);

// 더 간략히const array = [1, 2, 3, 4, 5, 6, 7, 8];const squared = array.map(n => n * n;);
console.log(squared);

• indexOf

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];const index = superheroes.indexOf('토르');console.log(index);

• findIndex

const todos = [    {        id: 1,        text: '자바스크립트 입문',        done: true,    },    {        id: 2,        text: '함수 배우기',        done: true,    },    {        id: 3,        text: '객체 배열 배우기',        done: true,    },    {        id: 4,        text: '내장 함수 배우기',        done: false,    },];
const index = todos.findIndex((todo) => todo.id === 3);console.log(index);

• find

• filter