[JavaScript] 기본 문법 2

DANI·2023년 10월 26일
0

JavaScript 간단하게 익히기

목록 보기
2/3
post-thumbnail

✅ 객체

하나의 이름에 여러 종류의 값을 넣을 수 있게 해줍니다.

🔴 예시 1

const ironman = {
    name : '토니 스타크', // (키 : 값)의 형태로 넣는다
    actor : '로버트 다우니 주니어',
    alias : '아이언맨',
    'avengers: end' : true // 키 값에 공백을 넣고 싶을 때
};

const captainAmerica = {
    name : '스티븐 로저스',
    actor : '크리스 에반스',
    alias : '캡틴 아메리카',
    'avengers: end' : true
};

function print(hero){  // hero는 매개변수
    const text = `${hero.alias}(${hero.name})역할을 맡은 배우는 ${hero.actor}입니다.`;
    console.log(text);
}

print(ironman); // ironman은 인수
print(captainAmerica);

🔵 결과

아이언맨(토니 스타크)역할을 맡은 배우는 로버트 다우니 주니어입니다.
캡틴 아메리카(스티븐 로저스)역할을 맡은 배우는 크리스 에반스입니다.


✅ 객체 비구조화 할당(객체 구조 분해)

🔴 예시

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

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

print1(ironman);
print1(captainAmerica);

print2(ironman);
print2(captainAmerica);

🔵 결과

아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어 입니다
캡틴 아메리카(스티븐 로저스) 역할을 맡은 배우는 크리스 에반스 입니다
아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어 입니다
캡틴 아메리카(스티븐 로저스) 역할을 맡은 배우는 크리스 에반스 입니다


✅ 객체 안에 함수 넣기

🔴 예시 1

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

dog.say();

const cat = {
    name : '야옹이',
    sound : '야옹~',
    // 함수 이름 생략 가능
    say : function() { 
        console.log(this.sound);
    }
};

cat.say();

🔵 결과

멍멍!
야옹~

🔴 예시 2

const tiger = {
    name : '호랭이',
    sound : '어흥~',
    say : () => {
        // 화살표 함수는 this값을 제대로 가르키지 못함
        console.log(this.sound); 
    }
};

tiger.say();

🔵 결과

undefined

function 으로 선언한 함수는 this 가 제대로 자신이 속한 객체를 가르키게 되는데, 화살표 함수는 그렇지 않다.



✅ Getter 함수와 Setter 함수

const는 주소값만 갖고 있음, 값이 변해도 주소값이 변하지 않기 때문에 배열에서 push등의 함수를 사용할 수 있음

🔴 예시 1 : Getter 함수

const numbers = {
    a : 1,
    b : 2,
    get sum(){
        console.log('sum 함수가 실행됩니다!');
        return this.a + this.b;
    }
};

console.log(numbers.sum); // 3

numbers.b=5; // b값을 5로

// Getter 함수는 특정 값을 조회 할 때 우리가 설정한 함수로 연산된 값을 반환
console.log(numbers); 

console.log(numbers.sum); // 바뀐 b값으로 계산됨 6

🔵 결과

sum 함수가 실행됩니다!
3
{ a: 1, b: 5, sum: [Getter] }
sum 함수가 실행됩니다!
6

sum은 Getter 함수로 Getter 함수는 특정 값을 조회 할 때 우리가 설정한 함수로 연산된 값을 반환함


🔴 예시 2 : Setter 함수

const numbers = {
    _a : 1,
    _b : 2,
    sum : 3,
    calculate(){
        console.log('calculate');
        this.sum = this.a + this.b; // sum을 다시 계산함
    },

    get a(){
       return this._a;
    },

    get b(){
        return this._b;
    },

    set a(value){
        console.log('a가 바뀝니다.');
        this._a = value; // a값 변경
        this.calculate(); // calculate() 실행. 즉, sum이 다시 계산됨
    },

    set b(value){
        console.log('b가 바뀝니다.');
        this._b = value; // b값 변경
        this.calculate(); // calculate() 실행. 즉, sum이 다시 계산됨
    }
};



console.log(numbers.sum); // 3
numbers.a = 5; // set a가 실행됨
numbers.b = 7; // set b가 실행됨
console.log(numbers.sum); // 12

🔵 결과

3 // console.log(numbers.sum);
a가 바뀝니다. // numbers.a, set a가 실행됨
calculate // numbers.a, set a가 실행됨
b가 바뀝니다. // numbers.b, set b가 실행됨
calculate // numbers.b, set b가 실행됨
12 // console.log(numbers.sum);

예시1에서는 numbers.sum 이 조회 될 때마다 덧셈이 이루어졌었지만, 예시2는 a 혹은 b 값이 바뀔 때마다 sum 값을 연산함


🔴 예시 3

const numbers = {
    _a : 1,
    _b : 2,
    sum(){
        return this.a + this.b; // sum을 다시 계산함
    },

    get a(){
       return this._a;
    },

    get b(){
        return this._b;
    },

    set a(value){
        console.log('a가 바뀝니다.');
        this._a = value; // a값 변경
    
    },

    set b(value){
        console.log('b가 바뀝니다.');
        this._b = value; // b값 변경
    }
};



console.log(numbers.sum()); // 3
numbers.a = 5; // set a가 실행됨
console.log(numbers.sum()); // 2 + 5 = 7
numbers.b = 7; // set b가 실행됨
console.log(numbers.sum()); // 5 + 7 = 12

🔵 결과

3
a가 바뀝니다.
7
b가 바뀝니다.
12


✅ 배열

💡 TIP 보안 프로그래밍 : 상수로 선언하자!

🔴 예시 1 : for 구문

const array = [1, 2, 3, 4, 5]; // 배열

const objects = [{name : '멍멍이'}, {name:'야옹이'}]; // 객체 배열

for(let i=0; i<objects.length; i++){
    console.log(objects[i]);
}

🔵 결과

{ name: '멍멍이' }
{ name: '야옹이' }

🔴 예시 2 : 배열에 항목 추가하기

const objects = [{name : '멍멍이'}, {name:'야옹이'}]; // 객체 배열

// 객체 배열에 새 항목 추가하기
objects.push({
    name : '멍뭉이',
})

for(let i=0; i<objects.length; i++){
    console.log(objects[i]);
}

🔵 결과

{ name: '멍멍이' }
{ name: '야옹이' }
{ name: '멍뭉이' }

🔴 예시 3 : 배열에 항목 추가하기 (함수)

  let plus = (x,y) => x+y;

  const array = [];

  array.push(plus);

  console.log(array[0](1,3));

🔵 결과

4

함수나 객체도 배열에 push할 수 있다!

🔴 예시 4 : for...of 구문

const objects = [{name : '멍멍이'}, {name:'야옹이'}]; // 객체 배열

// 객체 배열에 새 항목 추가하기
objects.push({
    name : '멍뭉이',
})

for(let object of objects){
    console.log(object);
}

🔵 결과

{ name: '멍멍이' }
{ name: '야옹이' }
{ name: '멍뭉이' }

🔴 예시 5 : for...in 구문

const doggy = {
    name: '멍멍이',
    sound: '멍멍',
    age: 2
  };
  
  console.log(Object.entries(doggy)); // [[키, 값], [키, 값]] 형태의 배열로 변환
  console.log(Object.keys(doggy)); // [키, 키, 키] 형태의 배열로 변환
  console.log(Object.values(doggy)); // [값, 값, 값] 형태의 배열로 변환

  for(let key in doggy){
    console.log(`키 : ${key}, 값 : ${doggy[key]}`);
  }

🔵 결과

[ [ 'name', '멍멍이' ], [ 'sound', '멍멍' ], [ 'age', 2 ] ]
[ 'name', 'sound', 'age' ]
[ '멍멍이', '멍멍', 2 ]
키 : name, 값 : 멍멍이
키 : sound, 값 : 멍멍
키 : age, 값 : 2

✨ 예시 6 : forEach 구문

const doggy = ['멍멍이', '멍멍', 2 ]

doggy.forEach(num => {
    console.log(num)
})

이렇게 함수형태의 파라미터를 전달하는 것을 콜백함수 라고 부릅니다. 함수를 등록해주면, forEach 가 실행을 해주는 거죠.

🔵 결과

멍멍이
멍멍
2

✅ 자바 스크립트 객체는 {} 로 표현함

💡 JSON

JavaScript Object Notation으로 객체 형식만 빌려서 사용할 뿐 데이터를 나타내는 문자열로

{
  키 : 값,
  ...
}

형태로 사용된다.


🔴 예시 7 : 배열의 요소를 제곱하는 새로운 배열 만들기

const array = [1, 2, 3, 4, 5, 6, 7, 8];

const newArray = [];
array.forEach(n => {
    newArray.push(n*n)
});

console.log(newArray);

🔵 결과

[
   1,  4,  9, 16,
  25, 36, 49, 64
]

✨ 🔴 예시 8 : 배열의 요소를 제곱하는 새로운 배열 만들기(map 이용)

const array = [1, 2, 3, 4, 5, 6, 7, 8];

const mul = n => n*n ; // 파라미터 n을 가져와서 제곱하는 함수(변화함수)
const newArray = array.map(mul); 
// map함수는 배열 안의 각 원소를 변환 할 때 사용 되며, 이 과정에서 새로운 배열이 만들어짐
console.log(newArray);

🔵 결과

[
   1,  4,  9, 16,
  25, 36, 49, 64
]

💡 map함수

map 함수의 파라미터로는 변화를 주는 함수를 전달해준다. forEach와 유사하다

변화 함수를 꼭 이름을 붙여서 선언 할 필요는 없다. 코드를 다음과 같이 작성해도 된다. 

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

🔴 예시 9 : indexOf, lastindexOf

const animal = ['호랑이', '고양이', '강아지', '토끼', '사자'];
// indexOf 함수 : 원하는 항목의 인덱스 값 찾아줌
console.log(animal.indexOf('토끼')); 
// lastIndexOf 함수 : 뒤에서 부터 탐색
console.log(animal.lastIndexOf('토끼'));

🔵 결과

3
3

🔴 예시 10 : findIndex, find

const todos = [
    {
      id: 1,
      text: '자바스크립트 입문',
      done: true
    },
    {
      id: 2,
      text: '함수 배우기',
      done: true
    },
    {
      id: 3,
      text: '객체와 배열 배우기',
      done: true
    },
    {
      id: 4,
      text: '배열 내장함수 배우기',
      done: false
    }
  ];

  // id가 3인 객체의 인덱스 찾기
  // findIndex 함수에 검사하고자 하는 조건을 반환하는 함수를 넣어서 찾을 수 있다.
  console.log(todos.findIndex(find => find.id === 3));

  // id가 3인 객체찾기
  console.log(todos.find(find => find.id === 3));

🔵 결과

2
{ id: 3, text: '객체와 배열 배우기', done: true }

✨ 🔴 예시 11 : filter(map과 유사)

const todos = [
    {
      id: 1,
      text: '자바스크립트 입문',
      done: true
    },
    {
      id: 2,
      text: '함수 배우기',
      done: true
    },
    {
      id: 3,
      text: '객체와 배열 배우기',
      done: true
    },
    {
      id: 4,
      text: '배열 내장함수 배우기',
      done: false
    }
  ];

  // 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열
  // done이 false인 객체를 새로운 배열로 만들기
  console.log(todos.filter(todo => !todo.done));

🔵 결과

[ { id: 4, text: '배열 내장함수 배우기', done: false } ]

🔴 예시 12 : splice와 slice

const numbers = [10, 20, 30, 40];


const del_index = numbers.indexOf(30);

// splice : 기존 배열 자체에서 특정 항목 제거
// splice(인덱스값, 몇개를 지울지)
numbers.splice(del_index, 1);
console.log(numbers);

// slice : 특정 항목 제거 but 반환을 받을 변수가 있어야 함
// slice(인덱스값1, 인덱스값2) : 인덱스값1부터 인덱스값2 전(미만)까지
const newNumbers = numbers.slice(0, 2);
console.log(newNumbers);

🔵 결과

[ 10, 20, 40 ]
[ 10, 20 ]

🔴 예시 13 : shift 와 pop

const numbers = [10, 20, 30, 40];

// 배열의 인덱스 첫번째 값 추출
console.log(numbers.shift());
// 기존 배열에서 "추출"됨
console.log(numbers);

// 배열의 인덱스 첫번째 값 추출
console.log(numbers.shift());
// 기존 배열에서 "추출"됨
console.log(numbers);

// 배열의 인덱스 마지막 값 추출
console.log(numbers.pop());
// 기존 배열에서 "추출"됨
console.log(numbers);

🔵 결과

10 // console.log(numbers.shift());
[ 20, 30, 40 ] // console.log(numbers);
20 // console.log(numbers.shift());
[ 30, 40 ] // console.log(numbers);
40 // console.log(numbers.pop());
[ 30 ] // console.log(numbers);

🔴 예시 14 : unshift

const numbers = [10, 20, 30, 40];

// 배열의 맨 앞에 새 원소를 추가
console.log(numbers.unshift(5));
console.log(numbers);

🔵 결과

5
[ 5, 10, 20, 30, 40 ]

🔴 예시 15 : concat

const numbers = [10, 20, 30, 40];

const numbers1 = [1,2,3,4,5];

// concat : 여러개의 배열을 합쳐줌
const newNumber = numbers.concat(numbers1);

console.log(newNumber);

🔵 결과

[
  10, 20, 30, 40, 1,
   2,  3,  4,  5
]

🔴 예시 16 : join

const numbers = [10, 20, 30, 40];

const numbers1 = [1,2,3,4,5];

// .join() : 문자열 형태로 join해줌!
console.log(numbers.join());
console.log(numbers.join(' '));
console.log(numbers.join('-'));

🔵 결과

10,20,30,40
10 20 30 40
10-20-30-40

🔴 예시 17 : reduce

const numbers = [1, 4, 5, 10 ,11];
let sum = numbers.reduce((accumulator, current) => {
    console.log({accumulator, current})
    return accumulator + current }, 0);

console.log(sum);

🔵 결과

{ accumulator: 0, current: 1 }
{ accumulator: 1, current: 4 }
{ accumulator: 5, current: 5 }
{ accumulator: 10, current: 10 }
{ accumulator: 20, current: 11 }
31

accumulator : 초기값 + current값
return 은 accumulator + current로 해줘야함!


🔴 예시 18 : reduce(평균 구하기)

let avg = numbers.reduce((accumulator, current, index, array) => {
    // 인덱스가 마지막 일 때 평균값을 리턴
    if(index === array.length-1){
        return (accumulator + current) / array.length;
    }
    console.log({accumulator, current, index, array})
    return accumulator + current;
}, 0)

console.log(avg)

🔵 결과

{ accumulator: 0, current: 1, index: 0, array: [ 1, 4, 5, 10, 11 ] }
{ accumulator: 1, current: 4, index: 1, array: [ 1, 4, 5, 10, 11 ] }
{ accumulator: 5, current: 5, index: 2, array: [ 1, 4, 5, 10, 11 ] }
{ accumulator: 10, current: 10, index: 3, array: [ 1, 4, 5, 10, 11 ] }
6.2
profile
DANI
이전 포스트

[JavaScript] 기본 문법 1

다음 포스트

[JavaScript] 동기(synchronous) vs 비동기(asynchronous)

0개의 댓글