오늘 내가 배운 것
1. 함수 선언식과 함수 표현식
- 함수 선언식과 함수 표현식
- 즉시 실행 함수
- 함수를 값으로 사용
- 콜백 함수 - 함수를 매개변수로 사용
- 화살표 함수식
- 콜스택과 콜백 함수를 이용한 예제 문제
2. 객체
- 객체 생성 문법
- 객체는 어떻게 쓰이는가?
- 객체 생성하기
- 객체 안에 데이터 호출하기
- 객체 안에 속성 확인하기
- For in 문을 이용한 속성과 속성 값 출력
- 객체 안에 속성 추가하기
3. 객체 복사와 특성
- 객체 복사하기
- Spread Operator
- 객체 복사시 왜 이런 결과가 나왔을까?
1. 함수 선언식과 함수 표현식
함수 선언식과 함수 표현식
// 기본 문법 //
//함수 선언식
function showMessage(){
}
//함수 표현식
const showMessage = function (){
}특징 :
1. 함수 선언식은 호이스팅이 되지만, 함수 표현식은 호이스팅이 되지 않는다.
2. 함수도 값처럼 쓸 수 있다. 따라서 함수도 값처럼 할당, 복사, 선언을 할 수 있다.
3. 일회성으로 사용하는 함수는 함수명을 지정해주지 않는다.
4. 선언식에 비해 표현식의 가독성이 안좋다.
즉시 실행 함수
함수를 정의함과 동시에 실행하는 함수다. 함수를 괄호로 묶어서 사용한다.
;(function(){
}) ()앞에 괄호가 있을 때 어디까지가 끝인지를 확인하기 위해서
'하나의 식'인 function 이 시작하는 곳 이전에 세미콜론을 (;) 작성하여 준다.
함수도 값으로 사용 가능
function showMessage(){
consol.log("hello!")
}
const fn = showMessage
const showMSG = fn
console.log(showMSG)응용을 해서 함수를 매개변수에도 넣을 수 있나? **yes**
function hello(fn) {
consol.log(fn())
}
function print(){
return 10
}
hello (print)매개변수에 넣은 함수를 `콜백 함수`라고 한다.
매개 변수의 값은 함수 자체이고 , `hello` 함수 호출 시 `인자`로 함수명을 사용한다.
함수 안에 있는 변수 값을 함수 밖에서 호출하여 사용하고 싶을 때도 사용할 수 있다.
function hello(fn){
let kim = 'javascript'
console.log(fn(kim))
}
function print(name){
return 10 + name
}
hello(print)또 다른 함수 표현식 - 화살표 함수식
함수 표현식을 조금 더 간결한 문법으로 만드는 방법, ES6에서 추가된 문법으로 `화살표 함수 (Arrow function)`이라고 한다.
// 문법 (단계별 변화)
//함수 표현식
const sum = function (a+b) {
return a+b
}
//화살표 함수 :
//함수 표현식에서 function을 지우고 매개변수 뒤에 '=>' 넣기
const sum = (a+b) =>{
return a+b
}
//중괄호 + retrun이 생략가능
const sum = (a+b) => a+b// 매개 변수가 1개인 경우 ()는 생략가능하다
// (구분을 위해서 생략은 잘 안하지만...)
const sum = (a) => {
return a+1
}
// 중괄호+return 생략
const sum = a => a+1
콜 스택과 콜백 함수를 이용한 예제 문제 풀기
문제 1번
//console 에 출력되는 값을 구하시오.
function jh(callback) {
return callback
}
function band(callback) {
const fn = function(){
return 30
}
const result = 1 + callback(fn)
return result
}
function getNumber(callback){
return 2 * callback()
}
console.log(band(getNumber))
문제 2번
//console 에 출력되는 값을 구하시오.
function box(callback){
const fn=function (){
console.log('1')
return 30
}
const result = 1 + callback(fn)
console.log(2)
return result
}
function getNumber(callback) {
console.log('3')
return 2* callback()
}
console.log(box(getNumber))
console.log(getNumber(() => 60))
2. 객체
객체는 자바스크립트를 잘 다루기 위해서 꼭 알아야 할 `데이터` 이다.
데이터 타입 보기⬇️
-원시형
-문자형
-숫자형
-불리언
-undefined
-null
- ...
-객체형 (참조형)
-배열
-객체
객체 생성 문법
// 1. new 키워드를 사용해서 객체를 생성하는 방법
// 객체 생성자 문법
const user = new Object ()
// 2. {}을 활용해서 객체를 생성하는 방법
//객체 리터럴 문법 - 가장 많이 쓰이는 문법
const user ={}<-- 사물 리스트 -->
변수 하나에 여러 가지 데이터를 담고 싶을 때 사용하는 것이 `배열` 이다.
<-- 사물의 상세정보 -->
변수 하나에 여러가지 데이터를 담고 싶을 때 사용하는 것이 `객체` 이다.
둘의 개념은 비슷하지만 데이터의 형태가 다르다...
어떻게 쓰이는가?
EX )
반 전체의 학생 리스트를 나열하는 것은 `배열`
반 학생 한 명의 정보를 나열하는 것은 `객체`
배열을 이용하여 리스트를 작성하면 총 학생 수를 구하기 쉽다(length 이용)
하나의 변수에 관리하니 편하다.
학생 한명의 정보를 저장하기 위해서 배열을 사용하기엔 한계가 있다.
그래서 `객체`를 이용하여 정보를 나열한다.
객체 생성하기
//객체 생성
const Person={
name : '홍길동',
age : 30,
'content-type ': "text/javascript"
}객체를 생성할 때 속성과 속성 값을 넣는 것이 CSS문법과 비슷하다.
객체에서는 속성 값이 끝나면 ';(세미콜론)' 대신 ',(쉼표)' 를 이용하여 문장을 마무리한다.
변수 Person 안에서
*name* 속성에 `홍길동` 을 입력
*age* 속성에 `30`을 입력했다.
속성 값은 `데이터 타입` 이 중요한데, 어떤 것이든 들어올 수 있다
String, Number, Boolean, Function, Object .....
속성 이름을 쓸 때 특수문자가 쓰여있는 경우가 있다. 보통 '-' 나 띄어쓰기를 많이 쓰는데
" " 로 묶어서 하나의 속성임을 알려줘야 한다.
객체 안에 데이터 호출하기
객체 안에 변수가 많이 있다 보니, 특정 값만 뽑아야 하는 경우가 있다.
객체 안에 있는 name의 값을 console에 출력하고 싶을 때 어떻게 해야 할까?
// 점 표기법
console.log(Person.name)
// 대괄호 표기법 객체명+[]
console.log(Person["name"])
// 변수를 이용한 표기법
let contentType = "content-type"
console.log(Person2[contentType])대괄호 표기법을 사용할 때 `Person [name]`으로 쓰면 undefined가 출력되니 name에 ""를 사용해서 `Person ["name"]`으로 작성해야 한다.
특수문자가 있는 속성 이름은 " "를 포함하여 "ConTent-type"로 사용하고 호출할 때에는 대괄호 표기법을 이용하여 `Person ["Content-type"]`으로 사용한다.
"Content-type" 내용을 담고 있는 변수를 만든 다음, 변수를 넣어 주어도 된다.
// 속성 이름을 변수로 대입시킨 후 변수를 출력
let contentType = "content-type"
Person[contentType]
객체 안에 속성 확인하기
객체 안에 여러 속성 중에 해당 속성이 포함되어 있는지 확인하는 방법으로 `in` 연산자를 이용하여 확인할 수 있다. 결과는 boolean 타입으로 나온다. 속성이 있다면 True / 속성이 없다면 False
const Person={
name = '홍길동',
age = 30,
}
//기본 문법
"name" in Person
console.log("name" in Person) // T
console.log("subName" in Person) // FFor in 문
객체 내용을 반복문을 통해 객체 안에 있는 속성과 속성 값을 모두 출력하고 싶을 때 사용할 수 있는 코드
// 기본 문법
for (let key in 객체) {
console.log(key) //key(속성) 종류
console.log(객체[key]) //key값 (속성값)
} //모든 객체 속성을 호출할 때까지 반복해서 출력객체 안에 속성 추가하기
// 기본 문법
//객체명.추가속성 = 속성값
Person.height = 180
Person.height = 170 // 내용을 수정할 수 있다.
3. 객체 복사와 특성
객체 복사하기
// 기존에 있는 객체를 복사하고 싶다.
const Person={
name = '홍길동',
age = 30,
}
//clone 객체를 생성 후 `...obj`으로 obj에 있는 속성과 속성 값을 넣어준다.
const clone = {...obj}Spread Operator
`...` 는 스프레드 연산자 (spread operator)
기본 개념은 '내용을 펼쳐서 놓는다'인데,
괄호 안에 요소(속성과 속성 값)를 펼쳐서 clone의 객체 안에 펼쳐서(모든 요소를) 대입시켜 준다.
정말 중요하고 이해하기 어려웠던 파트여서 주석을 하나씩 달아 놨다.
const Person2 = {
name : '홍길동',
age : 30,
sizes :{
weight : 70,
height : 180,
},
"content-type": 'text/javascript',
}
//여기까지가 기본 객체를 생성한다.
const clone3 = Person2 //clone3 객체 대입연산자를 이용한 복사
console.log(Person2 === clone3) //True
// - 객체가 복사되는 것이 아닌 객체의 참조 값이 복사가 된다.
// - 같은 참조 값을 사용하기 때문에 True
clone3.age = 28; //clone3 의 나이를 바꾸면
console.log(Person2.age) //28
console.log(clone3.age) //28
// 두 개의 값은 같다. 객체의 위치는 다르지만 같은 객체에 대한 참조 값이기 때문에 clone3에 의해 Person2의 값도 바뀌었다.
// clone4 를 다른 방법으로 복사
const clone4 = {...Person2, } //객체를 새로 생성 후 객체의 요소들을 대입하여 주면
console.log(clone4)
console.log(Person2)
//clone4 와 Person2의 속성,속성값들은 같아보이지만
console.log(clone4 === Person2) //F
//두 객체는 각각 독립된 객체이기 때문에 다르다.
console.log(clone4.sizes === Person2.sizes) //T
//clone4 와 Person2의 참조 값이 같기 때문이다.
const clone5 = {...Person2, sizes:{...Person2.sizes} }
//근데 clone5 처럼 앞에 객체의 참조 값을 복사하되, sizes를 새로 넣어주면
console.log(clone5.age=== Person2.age) //T
console.log(clone5.sizes === Person2.sizes) //F
//sizes 는 False가 된다.
clone5.. 왜 이러한 결과가 나왔을까?
객체의 참조 값을 다 복사하는 과정에서 sizes를 재할당 했다면 sizes의 값들은 각각 독립된 객체로 다른 값을 같게 된다. (clone4 주석 참고)
재할당 하지 않았던 name이나, age는 기존의 Person2의 참조값을 그대로 사용하고 있기 때문에
Person2와 clone5의 age는 True를 출력하였고,
재할당 하면서 독립된 객체가 된 sizes의 참조값은 같은 값을 참조하는 것이 아니기 때문에
둘은 False를 출력한다.
댓글