[Javascript] 03)Array & Object

Sergemeow 2023. 4. 19. 15:00

배열(Array)

키와 속성들을 담고 있는 참조 타입의 객체
순서를 보장하는 특징이 있음
주로 대괄호를 이용하여 생성하고, 0을 포함한 양의 정수 인덱스로 특정 값에 접근 가능
배열의 길이는 array.length 형태로 접근 가능

배열 메서드

reverse : 원본 배열의 요소들의 순서를 반대로 정렬
push & pop : 배열의 가장 뒤에 요소를 추가 또는 제거
unshift & shift : 배열의 가장 앞에 요소를 추가 또는 제거
includes: 배열의 특정 값이 존재하는지 판별 후 참/거짓 반환
indexOf: 배열에 특정 값이 있으면 첫번째 인덱스 반환. 없으면 -1

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

numbers.reverse()
numbers.push(100)
let a = numbers.pop()
numbers.includes(1) // true
numbers.indexOf(3) // 2
numbers.indexOf(100) // -1

Array Helper Methods

배열을 순회하며 특정 로직을 수행하는 메서드
메서드 호출 시 인자로 callback 함수를 받는 것이 특징

콜백함수: 다른 함수의 인자로 전달되는 함수

// 예시

const numbers = [1, 2, 3]
numbers.forEach(function(num){
	console.log(num**2)
})

const callBackFuction = function(num){
	console.log(num**2)
}

const numbers = [1,2,3]
numbers.forEach(callBackFunction)

콜백 함수 예시

python의 map에 square 함수를 인자로 넘겨 numbers 배열의 각 요소를 square 함수의 인자로 사용하였음

numbers = [1, 2, 3]

def square(num):
	return num ** 2

squared_numbers = list(map(square, numbers))
print(squared_numbers) # [1, 4, 9]

forEach 메서드에 callBackFunc을 인자로 넘겨 numbers 배열의 각 요소를 callBackFunc 함수의 인자로 사용함

const callBackFunc = function(num){
	console.log(num**2)
}
// 1
// 4
// 9
const numbers = [1, 2, 3]
numbers.forEach(callBackFunc)

1) forEach

array.forEach(function(element, index, array){
	// 실행 코드
})

인자로 주어지는 함수를 배열의 각 요소에 대해 한번씩 실행
- 3가지 매개변수로 구성됨
  - element
  - index
  - array
반환 값 없음

const colors = ['red', 'blue', 'green']

const printFunc = function (color) {
	console.log(color)
}
colors.forEach(printFunc)

colors.forEach(function(color, index, array){
	console.log(color)
	console.log(index)
	console.log(array)
})

 ////////

2)map

array.map(callback(element[,index[,array]]))
배열의 각 요소에 대해 콜백 함수를 한번씩 실행
콜백 함수의 반환 값을 요소로 하는 새로운 배열 반환
기본 배열 전체를 다른 형태로 바꿀 때 유용
- forEach + return 에 가까움

// 1. 
const numbers = [1,2,3]

// 함수 정의(표현식)
const doubleFunc = function(number){
	return number 8 2
}

// 함수를 다른 함수의 인자로 넣기
const doubleNumbers = numbers.map(doubleFunc)
console.log(doubleNumbers) // [2,4,6]

// 2. 함수 정의를 인자로 넣어보기
const doubleNumbers = numbers.map(function(number){
	return number * 2
})
console.log(doubleNumbers) // [2, 4, 6]

// 3. 화살표 함수 적용하기
const doubleNumbers = numbers.map((number) => {
	return number * 2
})
console.log(doubleNumbers) // [2, 4, 6]

3)filter

배열의 각 요소에 대해 콜백 함수를 한번씩 실행
콜백 함수의 반환 값이 true인 요소들만 모아서 새로운 배열 반환
기존 배열의 요소들을 필터링할 때 유용

// 1. 사용해보기
const products = [
	{name: 'cucumber', type: 'vege'},
	{name: 'banana', type: 'fruit'},
	{name: 'carrot', type: 'vege'},
	{name: 'apple', type: 'fruit'},
]

// 함수 정의하고
const fruitFilter = function(product){
	return product.type === 'fruit'
}

// 콜백으로 넘기고
const fruits = products.filter(fruitFilter)
console.log(fruits)

// [{name: 'banana', type: 'fruit'}, {name: 'apple', type:'fruit'}]

// 2. 함수 정의를 인자로 넣어보기
const fruits = products.filter(function(product){
	return product.type === 'fruit'
})
console.log(fruits)

// 3. 화살표 함수 적용하기
const fruits = products.filter((product) => {
	return product.type === 'fruit'
})
console.log(fruits)

4)reduce

인자로 주어지는 함수(콜백함수)를 배열의 각 요소에 대해 한번씩 실행하여 하나의 결과값을 반환
즉, 배열을 하나의 값으로 계산하는 동작이 필요할 때 사용(총합, 평균 등)
map, filter 등 여러 배열 메서드 동작을 대부분 대체할 수 있음

array.reduce(function (acc, element, index, array){
	// codes here
}, initialValue)

reduce 메서드의 주요 매개변수
- acc
  - 이전 callback 함수의 반환 값이 누적되는 변수
- initialValue(optional)
  - 최초 callback 함수 호출 시 acc에 할당되는 값, default 값은 배열의 첫 번째 값
reduce의 첫번째 매개변수인 콜백함수의 첫번째 매개변수(acc)는 누적된 값(전단계까지의 결과)
reduce의 두번째 매개변수인 initialValue는 누적될 값의 초기값, 지정하지 않을 경우 첫번째 요소의 값이 됨

const tests = [90, 100, 80, 77]

const sum = tests.reduce(function (total, x){
	return total + x
}, 0)

// acc = 90 + 0 
// acc += 100
// acc += 80

// 화살표 함수로는...
const sum = tests.reduce((total, x) => total + x, 0)
console.log(sum)

5)find

배열의 각 요소에 대해 콜백 함수를 한번씩 실행
콜백 함수의 반환 값이 true면 조건에 맞는 첫번째 요소를 반환
찾는 값이 배열에 없으면 undefined 반환

array.find(function(element, index, array){
	// execution
})

const avengers = [
	{name: 'Tony', age: 45},
	{name: 'Steve', age: 32},
	{name: 'Thor', age: 40},
]
const avengers = avengers.find(function(avenger){
	return avenger.name === 'Tony'
})
console.log(avenger) // {name: 'Toney', age:45}

// 화살표 함수로는
const avenger = avenger.find((avenger) => {
	return avenger.name === 'Tony'
})
console.log(avenger)

6)some

배열의 요소 중 하나라도 주어진 판별 함수를 통과하면 true 반환

const arr = [1,2,3,4,5]
const result = arr.some((elem) =>{
	return elem%2 === 0
})
// true

7)every

배열의 모든 요소가 주어진 판별 함수를 통과하면 true 반환
하나라도 통과하지 못하면 false 반환
빈 배열은 항상 true 반환

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

const result = arr.every((elem) => {
	return elem % 2 === 0
})
// false

객체(object)

객체는 속성의 집합이며 중괄호 내부에 key와 value의 쌍으로 표현
key
- 문자열 타입만 가능
- key 이름에 띄어쓰기 등의 구분자가 있으면 따옴표로 묶어서 표현
value
- 모든 타입(함수포함) 가능
객체 요소 접근
- 점 또는 대괄호로 가능
- key 이름에 띄어쓰기 같은 구분자가 있으면 대괄호 접근만 가능

const person = {
	name : 'Vic',
	age : 30,
	greeting: function() {
		console.log(`Hello, my name is ${this.name}.`)
	}
};

// 객체의 메서드 호출
person.greeting(); // "Hello, my name is Vic."

생성자 함수

일종의 자바 class.
함수 이름은 반드시 대문자로 시작
생성자 함수를 사용할 때는 반드시 new 연산자를 사용

function Member(name, age, sId){
	this.name = name
	this.age = age
	this.sId = sId
}

const memeber3 = new Member('an', 21, '3dsa')

객체 관련 ES6 문법 익히기

ES6에 새로 도입된 문법들로 객체 생성 및 조작에 유용하게 사용 가능
- 속성명 축약
- 메서드명 축약
- 계산된 속성명 사용하기
- 구조 분해 할당
- 객체 전개 구문(spread operator)

속성명 축약

객체를 정의할 때 key와 할당하는 변수의 이름이 같으면 예시와 같이 축약 가능

var books = ['Learning JavaScript', 'Learning Python']
var magazines = ['Vogue', 'Marie Claire']

// 기존의 방식 ES5
var bookShop = {
	books : books,
	magazines : magazines,
}
console.log(bookShop)

// 신규 방식 ES6+
const bookShop = {
	books,
	magazines,
}
console.log(bookShop)

메서드명 축약

메서드 선언시 function 키워드 생략 가능

// ES5
var obj = {
	greeting: function(){
		console.log('Hi!')
	}
}
obj.greeting() // Hi!

// ES6+
const obj = {
	greeting(){
		console.log('Hi!')
	}
}

obj.greeting() // Hi!

계산된 속성(computed property name)

객체를 정의할 때 key의 이름을 표현식을 이용하여 동적으로 생성 가능

const key = 'country'
const value = ['한국', '미국', '일본', '중국']

const myObj = {
	[key] : value,
}///////////

console.log(myObj) // {country: ['한국', '미국', '일본', '중국']}
console.log(myObj.country) // ['한국', '미국', '일본', '중국']

구조 분해 할당(destructing assignment)

배열 또는 객체를 분해하여 속성을 변수에 쉽게 할당할 수 있는 문법

// ES5
const userInformation = {
	name: 'kim',
	userId: 'ssafKim123',
	email: 'kimSaf@ssaf.com'
}

const name = userInformation.name
const userId = userInformation.userId
const email = userInformation.email

// ES6+
const userInformation = {
	name: 'kim',
	userId: 'ssafKim123',
	email: 'kimSaf@ssaf.com'
}

const{name} = userInformation
const{userId, email} = userInformation

Spread syntax(…)

배열과 마찬가지로 전개구문을 사용해 객체 내부에서 객체 전개 가능
얕은 복사에 활용 가능

const obj = {b:2, c:3, d:4}
const newObj = {a: 1, ... /////////////////

JSON

JavaScript Object Notation
Key-Value 형태로 이루어진 자료 표기법
JavaScript의 Object와 유사한 구조를 가지고 있지만 Object는 그 자체로 타입이고, JSON은 형식이 있는 ‘문자열’
즉, JSON을 Object로 사용하기 위해서는 변환 작업이 필요

JSON 변환

const jsObject = {
	coffee : 'Americano',
	iceCream: 'Cookie and Cream',
}

// Object -> JSON

const objToJson = JSON.stringify(jsObject)

console.log(objToJson) // ////////////

배열은 객체
- 배열은 키와 속성들을 담고 있는 참조 타입의 객체
- 배열은 인덱스를 키로 가지로 length 프로퍼티를 갖는 특수한 객체

저작자표시 (새창열림)