JavaScript 문법 종합 1주차(객체, 배열)

객체

자바스크립트에서는 객체(Object)를 사용하여 여러 개의 값을 하나의 변수에 담고 관리할 수 있다.

 

기본적인 객체 생성

객체를 만들 때는 중괄호({ })를 사용하며, 속성과 값을 콜론(:)으로 구분하여 작성한다. 각 속성과 값은 쉼표(,)로 구분한다.

let person = {
//key: value (어떤 값이라도 올 수 있다)
  name: "홍길동",
  age: 30,
  gender: "남자"
};

 

생성자 함수를 사용한 객체 생성

생성자 함수 Person()을 사용하여 객체 person1과 person2를 생성한다. 생성자 함수를 사용하면 객체를 일괄적으로 생성할 수 있다.

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

// 객체 생성
let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 20, "여자");

 

객체 속성 접근

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

// console.log(객체의이름.객체의key)
console.log(person.name);   // "홍길동"
console.log(person.age);    // 30
console.log(person.gender); // "남자"

---

객체의 메소드

객체가 가진 여러가지의 기능들 : objet.~~

 

Object.keys( ) 메소드

객체의 key가 되는 것들을 가져온다. Object.keys() 메소드를 사용하여 객체의 속성 이름_key을 배열로 반환한다. Object.keys() 메소드는 객체의 속성 이름을 배열로 반환다.

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};


// keys라는 변수에 person 객체의 key들을 배열의 형태로 가져옴
let keys = Object.keys(person);
console.log(keys);   // ["name", "age", "gender"]

 

Object.values( ) 메소드

Object.values() 메소드를 사용하여 객체의 속성 값_value들을 배열로 반환한다. Object.values() 메소드는 객체의 속성 값들을 배열로 반환다.

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

// values라는 변수에 person 객체의 속성값들을 배열의 형태로 가져옴
let values = Object.values(person);
console.log(values);   // ["홍길동", 30, "남자"]

 

Object.entries( ) 메소드

key와 value를 묶어서 배열로 만든 배열, Object.entries() 메소드를 사용하여 객체의 속성 이름과 속성 값들을 2차원 배열로 반환한다. Object.entries() 메소드는 객체의 속성 이름_key과 속성 값_value들을 2차원 배열로 반환한다.

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

// entries라는 변수에 person객체의 이름과 속성값들을 배열의 형태로 가져옴
let entries = Object.entries(person);
console.log("entries => ", entries);
// entries =>  [ [ 'name', '홍길동' ], [ 'age', 30 ], [ 'gender', '남자' ] ]

console.log(entries);
// [ [ 'name', '홍길동' ], [ 'age', 30 ], [ 'gender', '남자' ] ]

 

Object.assign() 메소드

Object.assign() 메소드는 기존 객체를 복사하여 새로운 객체를 만든다.

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let newPerson = {}
Object.assign(newPerson, person);
// Object.assign(target: {}_어디에, source: any_어떤걸);
console.log("newPerson => ", newPerson);
// newPerson =>  { name: '홍길동', age: 30, gender: '남자' }

let person = {
    name: "홍길동",
    age: 30,
    gender: "남자"
  };
  
  let newPerson = {}
  Object.assign(newPerson, person, { age : 31 })
  // Object.assign(target: {}_어디에, source: any_어떤걸, { 이 속성값은 : 로 바꾸고 싶어})
  console.log("newPerson => ", newPerson);
  // newPerson =>  { name: '홍길동', age: 31, gender: '남자' }
  // age가 31로 바뀜

 

💫객체 비교

객체를 비교할 때는 일반적으로 === 연산자를 사용할 수 없다. 대신 JSON.stringify() 함수를 사용하여 객체를 문자열로 변환한 후, 문자열 비교를 한다.

JSON.stringify( )는 자바스크립트의 값이나 객체를 JSON 문자열로 변환한다.

JSON은 JavaScript Object Notation의 약자로, 브라우저와 서버사이에서 오고가는 데이터의 형식이다.

JSON.stringify(value, replacer, space)
*value(필수): JSON 문자열로 변환할 값이다.(배열, 객체, 또는 숫자, 문자 등이 될 수 있다.)
*replacer(선택): 함수 또는 배열이 될 수 있다. 이 값이 null 이거나 제공되지 않으면, 객체의 모든 속성들이 JSON 문자열 결과에 포함된다.

let person1 = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let person2 = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

console.log(person1 === person2);   
// false_객체와 배열은 크기가 커서 별도의 저장공간에 저장하는데, 
// 이 저장공간은 각각의 주소를 가지고 이 주소들이 달라서 false로 나온다.

console.log(JSON.stringify(person1) === JSON.stringify(person2));   
// true_JSON에서 제공하는 stringify를 이용해 문자열과 시키게 된다.
// 문자열화 되어서 true로 나온다.

 

객체 병합

객체 병합을 할 때는 전개 연산자(...)_spread operator를 사용한다.

let person1 = {
  name: "홍길동",
  age: 30
};

let person2 = {
  gender: "남자"
};

let perfectMan = {...person1, ...person2};

console.log(perfectMan);   // { name: "홍길동", age: 30, gender: "남자" }

 

---

배열

자바스크립트에서는 배열(Array)을 사용하여 여러 개의 값을 저장하고 관리할 수 있다.

 

기본적인 배열 생성

배열을 만들 때는 대괄호([ ])를 사용하며, 각 요소는 쉼표(,)로 구분한다.

let fruits = ["사과", "바나나", "오렌지"];

 

배열의 크기 지정

new Array()를 사용하여 배열의 크기를 지정할 수 있다.

let numbers = new Array(5);
//  크기가 5인 배열 numbers를 생성

let numbers = new Array(5);

let fruits = ["사과", "바나나", "키위"];

console.log(numbers.length); // 5
console.log(fruits.length); // 3

 

배열 요소 접근

배열의 요소에 접근할 때는 대괄호([ ]) 안에 인덱스 값을 넣는다.

let fruits = ["사과", "바나나", "오렌지"];

console.log(fruits[0]);   // "사과"
console.log(fruits[1]);   // "바나나"
console.log(fruits[2]);   // "오렌지"

 

배열 메소드

push( ) 메소드

push() 메소드는 배열의 끝에 요소를 추가한다.

let fruits = ["사과", "바나나"];

fruits.push("오렌지");

console.log(fruits);   // ["사과", "바나나", "오렌지"]

 

pop( ) 메소드

pop() 메소드는 배열의 마지막 요소를 삭제한다.

let fruits = ["사과", "바나나", "오렌지"];

fruits.pop();

console.log(fruits);   // ["사과", "바나나"]

 

shift( ) 메소드

shift() 메소드는 배열의 첫 번째 요소를 삭제한다.

let fruits = ["사과", "바나나", "오렌지"];

fruits.shift();

console.log(fruits);   // ["바나나", "오렌지"]

 

unshift( ) 메소드

unshift() 메소드는 배열의 맨 앞에 요소를 추가한다.

let fruits = ["바나나", "키위"];

fruits.unshift("사과");

console.log(fruits);   // ["사과", "바나나", "키위"]

 

splice( ) 메소드

splice() 메소드는 배열의 요소를 삭제하거나, 새로운 요소를 추가할 수 있다.

let fruits = ["사과", "바나나", "키위"];

// .splice(start: number_시작위치의 인덱스번호, deleteCount: number_지울 갯수, 그자리에 대신 할 요소)
fruits.splice(1, 1, "포도");

console.log(fruits);   // ["사과", "포도", "키위"]

 

slice( ) 메소드

slice() 메소드는 배열의 일부분을 새로운 배열로 만든다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

let fruits = ["사과", "바나나", "키위"];

// ( 추출 구간의 시작점,  추출 구간의 종료점, 생략하면 배열의 끝점까지를 추출 구간으로 지정)
let slicedFruits = fruits.slice(1, 2);

console.log(slicedFruits);   // ["바나나"]

var a = [1, 2, 3, 4, 5];
a.slice(0, 3); 		// [1, 2, 3]을 반환한다.
a.slice(3); 		// [4, 5]를 반환한다.
a.slice(1, -1); 	// [2, 3, 4]를 반환한다.
a.slice(-3, -2)		// [3]을 반환한다.

 

💫forEach( ) 메소드

forEach() 메소드는 배열의 각 요소에 대해 콜백 함수(매개변수의 자리에 함수를 넣는것)를 실행한다.

let numbers = [1, 2, 3, 4, 5];

// forEach(매개변수)_의 자리에 함수 function(number)을 넣었고 이것을 '콜백함수'라고 한다.
numbers.forEach(function (item) { 
  console.log("item입니다 => " + item);
});

// 배열의 요소를 돌아가면서 함수의 기능을 실행시켜 값을 출력
// item입니다 => 1
// item입니다 => 2
// item입니다 => 3
// item입니다 => 4
// item입니다 => 5

 

💫map( ) 메소드

map() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환한다. 항상 원본 배열의 길이만큼의 새로운 배열 return된다.(아래 예제는 5개로 마지막에 출력된 값도 5개인걸 알 수 있다.) return필

let numbers = [1, 2, 3, 4, 5];

let newNumbers = numbers.map(function(item) {
    return item * 2;  // return을 해줘야함
});

console.log(newNumbers); // [ 2, 4, 6, 8, 10 ]

 

💫filter( ) 메소드

filter() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 조건의 결과가 true인 요소만 새로운 배열로 반환한다.

let numbers = [1, 2, 5, 4, 5];

let filterdNumbers = numbers.filter(function(item) {
  return item === 5;  // return을 통해 반환하고 조건식이 들어감
});

console.log(filterdNumbers);   // [ 5, 5 ]


let filterdNumbers = numbers.filter(function(item) {
  return item !== 5;  // return을 통해 반환하고 조건식이 들어감
});

console.log(filterdNumbers);   // [ 1, 2, 4 ]

let numbers = [1, 2, 5, 4, 5];

let filterdNumbers = numbers.filter(function(item) {
  return item > 3;  // // return을 통해서 조건에 맞는 값들을 반환
});

console.log(filterdNumbers);  // [ 5, 4, 5 ]

 

reduce( ) 메소드

let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum);

 

find( ) 메소드

find() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 첫 번째 요소를 반환한다.

let numbers = [1, 2, 3, 4, 5];

let result = numbers.find(function(item) {
  return item > 3; // return을 통해서 조건에 맞는 첫번째의 값만을 반환
});

console.log(result);   // 4

 

some( ) 메소드

some() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 하나라도 있는지 확인한다.

let numbers = [1, 2, 3, 4, 5];

let hasEvenNumber = numbers.some(function(number) {
  return number % 2 === 0;
});

console.log(hasEvenNumber);   // true

 

every( ) 메소드

every() 메소드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 true인 요소가 모든 요소인지 확인한다.

let numbers = [2, 4, 6, 8, 10];

let isAllEvenNumbers = numbers.every(function(number) {
  return number % 2 === 0;
});

console.log(isAllEvenNumbers);   // true

 

sort( ) 메소드

sort() 메소드는 배열의 요소를 정렬한다.

let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];

numbers.sort(function(a, b) {
  return a - b;
});

console.log(numbers);   // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

• 비교함수는 두개의 매개변수(a, b)를 받고 비교함수 내부의 로직을 실행하여 비교한다.
• 비교함수의 반환값이 음수면 순서를 그대로 유지하고 반환값이 양수이면 b를 a보다 우선하여 정렬하고 반환값이 0인 경우 서로에 대해 변경하지 않고 모두 다른 요소에 대해 정렬한다.

 

reverse() 메소드

reverse() 메소드는 배열의 요소를 역순으로 정렬다.

let numbers = [1, 2, 3, 4, 5];

numbers.reverse();

console.log(numbers);   // [5, 4, 3, 2, 1]