10일차 프로그래밍 기초

1. obj['key']

오브젝트 key에 여백(스페이스), 대쉬(-), 특수문자(*) 등 일반적인 변수명을 선언할 때 허용되지 않는 문자열을 사용할 경우 obj['key'] 와 같은 표현식을 사용해야 한다. 

 

> name.'per son' 은 에러가 나지만 name['per son'] 은 가능!

 

2. 객체, 배열 구조 분해 할당하기!

객체(Object) 나 배열(List)을 변수로 ‘분해'할 수 있습니다.

const obj = { 'name' : 'hi', 'age' : '22', 'water' : 'good' }

   const { name, age, water, hair } = obj;

   console.log(name) // 'hi'  
   console.log(age) // '22' 
   console.log(hair) // undefined

 const arr = [ '김영재', '물', '좋아' ]

   const [이름 , 워터] = arr;

   console.log(이름) // 김영재   

   console.log(워터) // 물

const user = {name: "손석구", age: 10};

const getUserName = ({name, age}) => {
	return name;
};

getUserName(user) // 손석구



const getUserName = ([name, age]) => {
	return name;
};

///////////// 다시 알아보기 //////////////////////////////////////////

3. NaN(Not a Number)은 어떻게 판별할까?

• NaN은 다른 모든 값과 비교했을 때 같지 않으며, 다른 NaN과도 같지 않다
• NaN의 판별은 Number.isNaN() 또는 isNaN()을 이용하면 제일 분명하게 판별할 수 있다.
• isNaN()은 현재 값이 NaN이거나, 숫자로 변환했을 때 NaN이 될 경우 true를 반환한다.
• Number.isNaN()은 현재 값이 NaN이어야만 true를 반환한다.

 

4. 항상 true가 되는 자료형(중요!)

   >  Array, Object 

 

ps) False 에는 빈 문자열 '', 숫자 0, 불리언 false, null, undefined, NaN가 해당되며 False 가 아닌 모든 값은 True으로 연산되어 결국 true로 평가된다.

 

 

5. 반복문

continue 문은 조건에 상관 없이 해당 명령문을 중단하고 바로 다음 단계인 증감문부터 실행한다.

2는 중단되고 다음부터 진행된 모습

 

for of문

 

Array, Map과 같은 반복 가능한(Iterable) 객체의 value(요소)를 하나씩 반복할 수 있게 해준다.

(Object는 반복 가능한 객체에 해당하지 않습니다!)

for In문

 

for...of 문과 유사하게 객체의 요소를 반복해주지만, 선언한 변수에 값이 직접 들어가지 않고 요소의 key값만 전달하며 for of문과 동일하게 반복가능한 (Iterable) 객체는 모두 사용가능하다.

 

 

❓ 객체(Object) 타입은 반복 가능(iterable) 하지 않는데, 반복문을 사용할 수 없을까요?

객체는 벨류와 키값으로 이루어져있기때문에  단순 for문으로 꺼낼 수가 없다. 하지만 for in문을 쓰면 꺼낼 수 있다.

 

 

 

6. 연습문제

❓ 변수 선언시 값을 할당하지 않으면 어떤 값인가요?

 

undefined 값이 뜬다!

 

❓ 선언되지 않은 변수를 참조하면 어떻게 되나요?

 

is not defined 에러가 뜬다!

 

 

❓ 배열이 기본으로 제공해주는 함수들이 있습니다. 이 중 원하는 데이터를 필터링 해주는 함수는 뭘까요?

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

 

 

 

---

7.  함수 구현해보기!

 

🧩  함수를 실제로 구현해보기

• 요구사항: persons 변수로 입력받은 값의 사람들에게 맥주 주문을 받습니다. 성인(19세 이상)인 경우에만 맥주 주문을 받아 맥주를 제공할 수 있도록 해주세요.
• 성인에게 주문을 받은 경우 "맥주 나왔습니다! [주문한 사람 이름]님" 처럼 출력합니다.
• 미성년자에게 주문을 받은 경우 "나이 더 먹고 오세요! [주문한 사람 이름]님" 처럼 출력합니다.

 

 

8. 함수 선언식 / 함수 표현식/ 화살표 함수

 

function sayHello () {
	return "hello, world!"
}

//함수 선언식

const sayHello = function(){
	return "hello, world!"
}

//함수표현식

작동 방식에 있어서 두 방식에 차이는 없지만 함수 선언식은 호이스팅에 영향을 받고, 함수 표현식은 호이스팅에 영향을 받지 않는다.

 

💡호이스팅은 뭘까?

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언하고 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑으며 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.

유효 범위: 함수 블록 {} 안에서 유효

즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.
실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다.
실제 메모리에서는 변화가 없다.

 

호이스팅의 대상

var 변수 선언과 함수선언문에서 호이스팅이 일어난다.
var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.
let과 const로 선언한 변수도 호이스팅 대상이지만, var와 달리 호이스팅 시 undefined로 변수를 초기화하지는 않습니다. 따라서 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생합니다.

 

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

catName("호랑이");

// "제 고양이의 이름은 호랑이입니다"

catName("클로이");

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

//"제 고양이의 이름은 클로이입니다"

함수 호출이 함수 자체보다 앞서 존재하지만, 잘 동작한다. 이것이 JavaScript에서 실행 맥락이 동작하는 방식이다.

호이스팅은 다른 자료형과 변수에도 작동하며 변수를 선언하기 전에 먼저 초기화하고 사용할 수 있다.

 

console.log(num); // undefined  / 호이스팅한 var때문에 에러가 아닌 undefined가 출력된다
var num;
num = 6; //초기화

console.log(num); // ReferenceError
num = 6; // 초기화

// 예제 1
// y만 호이스팅 대상

x = 1; // x 초기화. x를 선언하지 않은 경우 선언. 그러나 명령문에 var가 없으므로 호이스팅이 발생하지 않음
console.log(x + " " + y); // '1 undefined'
// JavaScript는 선언만 호이스팅하므로, 윗줄의 y는 undefined
var y = 2; //초기화
//만약 y를 선언하지않았으면 y is not defined Error

// 호이스팅은 없지만, 변수 초기화는 (아직 하지 않은 경우) 변수 선언까지 병행하므로 변수를 사용할 수 있음

a = '크랜'; // a 초기화
b = '베리'; // b 초기화

console.log(a + "" + b); // '크랜베리'

 

이해가 어렵다면 var 키워드를 사용하면 호이스팅이 일어나서 안좋다라는것만 기억해도 충분하며 TDZ의 보호를 받고 있지 않은 키워드인 var를 사용하는것은 변수의 값이 언제 바뀔지도 모르며 스파게티 코드를 만드는 주범이 될 수 있으므로 절대로 지양해야한다.

 

https://www.howdy-mj.me/javascript/var-let-const https://evan-moon.github.io/2019/06/18/javascript-let-const/

var, let, const의 차이 ⏤ 변수 선언 및 할당, 호이스팅, 스코프

JavaScript의 let과 const, 그리고 TDZ

변수와 할당, 호이스팅 스코프에 잘 설명된 블로그

 

화살표 함수 (Arrow function)

 

화살표 함수는 간결한 익명 함수와 암시적 반환(implicit return)을 가능하다.

const sayHello = () => {
	return "hello world!"
}

sayHello()
//"hello world!"

암시적 반환(implicit return)

 

만약 함수가 반환하는 값을 한 줄로 표현할 수 있는 경우라면 return을 생략할 수 있다.

const sayHello = () => "hello world!"

sayHello()
//"hello world!"

 

익명 함수

 

함수를 “sayHello”라는 변수에 저장해서 사용하면 해당 변수명을 호출해 몇 번이든 재사용할 수 있는 장점이 있지만 만약 간단한 함수를 일회성으로만 사용한다면 이름을 굳이 붙여놓을 이유가 없기에 화살표 함수에 익명 함수를 사용할 수 있다.

 

// 기본적인 함수 표현 방식

const sayHelloOnClick = () => {
	console.log('hello friend')
}
<App onClick={sayHelloOnClick} />

// 익명 함수
<App onClick={() => console.log('hello friend')} />

// 기본적인 함수 표현 방식
const ReturnItem = (item) => {
	return <div>{item}</div>
}
{array.map(ReturnItem)}

// 익명 함수
{array.map((item)=> <div>{item}</div>))}

 

 

9. 연습문제

 

❓ 함수에서 return을 작성하지않으면 어떻게 될까요?

 

 

 

❓ 다음 보기중 반복문 사용이 가장 적합한 사례는 무엇일까요?

• 상세내용
  1. 배열안에서 특정한 값을 찾을 때
  2. 반복이 끝나야 하는 정확한 조건을 모를 때
  3. 1에서 100의 숫자중 짝수만 카운트할 때 

 

 

❓ 반복문을 이용하여 다음의 배열의 값을 하나씩 차례대로 출력해보세요.

 

const example = ['apple','banana','mango','kiwi','melon'];