오늘 공부한 내용 요약
( 모던 JavaScript 튜토리얼 복습 )
헷갈렸거나 한번 더 상기시킬 내용
화살표함수를 중괄호와 함께 사용할 경우 반드시 return으로 반환값 명시
함수에선 외부 변수에 접근이 가능하고 수정도 가능
let userName = 'John';
function showMessage() {
userName = "Bob"; // (1) 외부 변수를 수정함
let message = 'Hello, ' + userName;
alert(message);
}
alert( userName ); // 함수 호출 전이므로 John 이 출력됨
showMessage();
alert( userName ); // 함수에 의해 Bob 으로 값이 바뀜
const me = {
age : 30
};
me.age = "20";
alert(me.age);
const는 me의 값을 고정하지만 객체의 내용을 고정시키진 않음
let user = {
name: "John",
age: 30
};
let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");
alert( user[key] ); // John (name 입력시)
30 (age 입력시)
let key = "name";
alert( user.key ) // undefined 점 표기법의 경우 이런 방식 불가능
변수의 이름에는 예약어를 사용 못하지만 객체 프로퍼티에는 제약이 없다
아래 2개의 예시는 동일하게 작동
1.
let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {
[fruit]: 5,
};
alert( bag.apple );
2.
let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {};
bag[fruit] = 5;
프로퍼티의 키와 값의 이름이 같다면 단축가능
ex) name : name -> name,
키 값이 문자형이나 심볼형이 아닌 자료형의 경우 자동으로 문자열로 변환
연산자 in으로 존재여부를 확인할 때 in왼쪽에는 프로퍼티 이름이 와야함. 보통 따옴표로 감싼 문자열.
for..in 반복문은 객체의 모든 키를 순회할 수 있음
let a = {};
let b = {}; // 독립된 두 객체
alert( a == b ); // false
객체가 할당된 변수를 복사할때는 객체의 참조값이 복사되고 객체는 복사되지 않는다
객체 자체를 복사하려 할때는 Object.assign(넣을객체, 복사하려는 객체)
가비지 컬렉터는 도달할 가능성이 없는 객체를 삭제한다
서로 연결된 객체들도 도달이 불가능할 수 도 있다
( Core JavaScript 기본서 )
environment (환경 레코드)
현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장됨(매개변수 이름, 함수선언, 변수명 등)
호이스팅
코드를 실행하기전 변수선언,함수선언이 해당 스코프의 최상단으로 끌어오는것이 아니고 끌어올려진 것 같은 현상
자바스크립트의 모든 선언에 호이스팅이 일어난다.
코드가 실행되기 전에 자바스크립트 엔진은 이미 속한 코드의 변수명들을 모두 알고있다.
함수 선언문
function 정의부만 존재 / 별도의 할당 명령 없음 / 함수명 정의필요
함수 표현식
정의한 function을 별도의 변수에 값으로써 할당 / 함수명 없어도 됨
(기명함수 표현식의 경우 외부에서 함수명으로 함수 호출 불가능.
Var a = function b() {}
a(); 가능 /// b(); 에러 발생 함수명은 함수 내부에서만 접근가능
함수선언문은 전체를 호이스팅, 함수표현식은 변수선언부만 호이스팅함.
Ex) 예시로 업무간 거대한 자바스크립트 파일내에서 같은 이름의 A함수가 함수선언문으로 각각 선언시 밑의 함수로 전체가 적용되어 문제가 발생 /
둘다 함수표현식이였다면 2번째 함수 전까지는 첫번째함수로, 2번째 함수 이후는 2번재 함수로 동작됨.
상대적으로 업무간 함수표현식이 더 안전하다.
전역변수
특정지역 밖에서 선언된 변수 / 지역 관계없이 어느 곳에든 유효 /
코드시작 순간 메모리 생성, 코드전체 끝날때까지 유지
지역변수
중괄호{}안,함수내부에서 선언된 변수 / 선언된 지역 내에서만 유효 / 선언되는 순간 메모리 생성, 지역 벗어나면 소멸
위의 예시에서 함수표현식보다 지역변수를 사용하는 것이 더 안전한 방법
A함수를 지역변수로 선언하기 위해 외부에 다른 B함수를 하나더 만들면 해당 A함수는 오직 B내에서만 호출가능하게 됨.
과제
ask(
"동의?",
function() { alert("동의"); },
function() { alert("취소"); }
);
->
ask(
"동의?",
() =>alert("동의");,
() =>alert("취소");
);
alert( alert(1) || 2 || alert(3) ); // 1,2
alert(1)의 평가후 1이 출력되고 alert메서드는 undefined를 반환하기에 다음 피연산자인 2로 넘어가고 truthy값이므로 실행이 멈추고 2가 반환됨
alert( alert(1) && alert(2) ); // 1, undefined
alert(1)의 평가후 1이 출력되고 alert메서드는 undefined를 반환하기에 실행이 멈추고 undefined가 반환
let num;
do {
num = prompt("100보다 큰 숫자 입력", "");
} while (num <= 100 && num );
num이 null이나 빈문자열이면 num이 거짓이 되므로 반복문 종료됨
prime :
for(let i=2; i <= n; i++) {
for(let x=2; x<i; x++) {
if(i % x ==0) continue prime;
}
alert(i);
}
n이하의 수 중 나눌수 있는 수가 있는지 확인해서 있으면 소수가 아니고 없으면 소수로 출력
function isEmpty(obj) {
for (let key in obj) {
return false;
}
return true;
}
let salaries = {
John: 100,
Ann: 160,
Pete: 130
}
let sum = 0;
for (let key in salaries) {
sum += salaries[key];
}
function multiple(obj) {
for (let key in obj) {
if(typeof(obj[key]) == 'number') {
obj[key] * 2;
}
}
}
function checkAge(age) {
if (age > 18) {
return true;
} else {
return confirm('보호자의 동의를 받으셨나요?');
}
}
정답)
function checkAge(age) {
return (age > 18) || confirm('보호자의 동의를 받으셨나요?');
}
공부 출처
자바스크립트.info
코어 자바스크립트 -정재남 지음 -
위의 내용은 공부중 본인이 이해한 내용으로 몇몇 틀린 내용이 있을 수 있습니다.
회독중 발견시 수정하겠습니다