21일차 - 2022.03.21

오늘 공부한 내용 요약

( 모던 JavaScript 튜토리얼 복습 )

자바스크립트, 객체 기본

헷갈렸거나 한번 더 상기시킬 내용

• 화살표함수를 중괄호와 함께 사용할 경우 반드시 return으로 반환값 명시

• 함수에선 외부 변수에 접근이 가능하고 수정도 가능

let userName = 'John';

function showMessage() {
  userName = "Bob"; // (1) 외부 변수를 수정함

  let message = 'Hello, ' + userName;
  alert(message);
}

alert( userName ); // 함수 호출 전이므로 John 이 출력됨
showMessage();
alert( userName ); // 함수에 의해 Bob 으로 값이 바뀜

• const로 선언된 객체를 수정할 수도 있다

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내에서만 호출가능하게 됨.

과제

1. 함수표현식을 사용해 화살표 함수로 변환

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가 반환

4. 100보다 큰 숫자를 입력하게 하는 프롬프트 창을 띄우고 조건에 맞지 않은 값을 입력한 경우 반복문을 사용해 동일한 프롬프트 창을 띄우자.
   사용자가 100을 초과하는 숫자를 입력하거나 취소 버튼을 누른 경우, 혹은 아무것도 입력하지 않고 확인 버튼을 누른 경우엔 더는 프롬프트 창을 띄워주지 않아도 됩니다.
   (사용자가 오직 숫자만 입력한다고 가정)

let num;

do {
num = prompt("100보다 큰 숫자 입력", "");
} while (num <= 100 && num );

num이 null이나 빈문자열이면 num이 거짓이 되므로 반복문 종료됨

5. 2부터 n까지의 숫자 중 소수만 출력해주는 코드를 작성해보자.
   (작성한 코드는 임의의 숫자 n에 대해 동작해야 합니다)

prime :
for(let i=2; i <= n; i++) {
	for(let x=2; x<i; x++) {
 	   if(i % x ==0) continue prime;
	}    
    alert(i);
}

n이하의 수 중 나눌수 있는 수가 있는지 확인해서 있으면 소수가 아니고 없으면 소수로 출력

6. 객체에 프로퍼티가 하나도 없는 경우 true, 그렇지 않은 경우 false를 반환해주는 함수 isEmpty(obj)를 만들어 보자

function isEmpty(obj) {
  for (let key in obj) {
    return false;
  }
  return true;
}

7. 모든 팀원의 월급의 합을 구하고, 그 값을 변수 sum에 저장해주는 코드를 작성해보자. (salaries가 비어있다면 sum에 0이 저장되어야 함)

let salaries = {
  John: 100,
  Ann: 160,
  Pete: 130
}

let sum = 0;
for (let key in salaries) {
	sum += salaries[key];
}

8. 객체 프로퍼티의 값을 2배로 만들어주는 함수 multiple(obj)만들기

function multiple(obj) {
	for (let key in obj) {
	if(typeof(obj[key]) == 'number') {
 		obj[key] * 2;   
}    
}
}

9. 매개변수 age가 18보다 큰 경우 true를 반환하고 그 이외의 경우는 컨펌 대화상자를 통해 사용자에게 질문한 후, 해당 결과를 반환하는 함수를 if문을 사용하지 않고 or연산자를 사용해 아래와 동일하게 작동하는 함수 구하기

function checkAge(age) {
  if (age > 18) {
    return true;
  } else {
    return confirm('보호자의 동의를 받으셨나요?');
  }
}

정답) 
function checkAge(age) {
  return (age > 18) || confirm('보호자의 동의를 받으셨나요?');
}

공부 출처

자바스크립트.info
코어 자바스크립트 -정재남 지음 -

위의 내용은 공부중 본인이 이해한 내용으로 몇몇 틀린 내용이 있을 수 있습니다.
회독중 발견시 수정하겠습니다