함수는 기존 파이썬과의 차이점을 비교하며 이해해보자.
먼저 함수 정의에는 3가지 방법이 있다. 파이썬도 def으로 정의하는 방법과 람다로 정의하는 방법으로 2가지 였는데, JS에서는 어떻게 표현하는지 살펴보자.

함수 정의 방법

1. 선언식

function funcName (params) {
	statements
}

2. 표현식(호이스팅 되지 않음 => 정의하기 전에 사용불가 => 사용 권장)

const funcName = function () {
	statements
}

2-1. Arrow Fuction

// 표현식 함수
const arrow = function (name) {
	return `hello, ${name}`
}

// 화살표 함수 표현
const arrow = name => `hello, ${name}`


'''
1. function 삭제
2. 매개변수와 중괄호  사이에 화살표 작성
3. 매개변수가 하나 뿐이라면 매개변수의 () 제거
4. 함수 본문의 표현식이 한 줄이라면 {}와 return도 제거 가능
'''

객체(Object)

1. 객체 구조(파이썬의 dictionary와 유사)

   • 중괄호를 이용해 작성
   • 중괄호 안에 key:value 쌍으로 작성
   • key는 문자형만, value는 모든 자료형 가능

2. Method

   객체 속성에 정의된 함수
   object.method() 방식으로 호출

3. this 키워드

   함수나 메서드를 호출한 객체를 가리키는 키워드
   함수 내에서 객체의 속성 및 메서드에 접근하기 위해 사용

3-1. 단순 호출시

const myFunc = function () {
	return this
}

console.log(myFunc()) //window

// 단순 호출 시 최상위 객체 window를 반환

3-2. 메서드 호출 시

const myObj = {
	data: 1,
    myFunc: function () {
    	return this
    }
}

console.log(myObj.myFunc()) //myObj

// 메서드 호출 시 메서드를 호출한 객체 반환

3-3. 중첩된 함수에서 호출 시

const myObj2 = {
	numbers: [1, 2, 3]
    myFunc: function () {
    	this.numbers.forEach(function (number) {
        	console.log(this)
        })
    }
}

console.log(myObj2.myFunc()) //window

// 이를 해결하기 위해서는 화살표 함수로 바꾼다 => 화살표 함수는 자기만의 this를 가지지 않기 때문 

JSON(JavaScript Object Notation)

• Key - Value 형태로 이루어진 자료 표기법
• JavaScript의 Object와 유사한 구조를 가지고 있지만 JSON은 형식이 있는 문자열 타입
• JavaScript에서 JSON을 사용하기 위해서는 Object 자료형으로 변경해야 함.

Object <-> JSON 변환하기

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

// Object -> JSON
const onjToJson = JSON.stringify(jsObject)
console.log(objToJson)
console.log(typeof objToJson) //string

// JSON -> Object
const jsonToObj = JSON.parse(objToJson)
console.log(jsonToObj)
console.log(typeof jsonToObj) // object

<참고> new 연산자 활용

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

const member3 = new Member('Bella', 21, 20226543)

배열(Array)

대괄호를 이용해 작성
요소의 자료형엔 제약 없음
length 속성 바로 사용 가능
음수 인덱스 없음

const names = ['Alice', 'Bella', 'Cathy',]

console.log(names[0])
console.log(names.length)

주요 메서드

1. push()

   배열 끝 요소를 추가

2. pop()

   배열 끝 요소를 제거 및 반환

3. unshift()

   배열 앞 요소를 추가

4. shift()

   배열 앞 요소를 제거 및 반환

5. Array Helper Methods

   1. forEach(undefined를 반환)

      인자로 주어진 함수를 배열 요소 각각에 대해 실행

   const names = ['Alice', 'Bella', 'Cathy',]
   
   names.forEach(function (item, index, array) {
   	console.log(`${item} / ${index} / ${array}`)
   })

   2. map(새로운 요소의 배열을 반환)

      배열 내의 모든 요소 각각에 대해 함수를 호출하고, 함수 호출 결과를 모아 새로운 배열을 반환

   const names = ['Alice', 'Bella', 'Cathy',]
   
   const result1 = names.map(function (name) {
   	return name.length
   })
   
   const result2 = names.map((name) => {
   	return name.length
   })
   
   console.log(result1)  // [5, 5, 5]
   console.log(result2)  // [5, 5, 5]
   
   // ------------------------------
   
   const numbers = [1, 2, 3, ]
   
   const doubleNumber = numbers.map((number) => {
   	return number*2
   })
   
   console.log(doubleNumber) // [2, 4, 6]