[JS] 기본적인 개념 3

//코딩앙마님의 "자바스크립트 기초 강좌: 100분 완성" 듣는 중//

​

허우.. 드디어 끝... 코드를 쳐가면서.. 하니깐.. 너무 오래 걸림..

이론 공부 했으니깐.

하나 더 만들어보고 다시 중급 강좌 들어야지..ㅎ

---

[함수 선언문 vs. 함수 표현식]

​

<함수 선언문>

: 어디서든 호출 가능 sayHello();가 함수 위로 올라와도 됨.

sayHello();

function sayHello(){
console.log('Hello');
}

• JS는 위에서 아래로 순차적으로 실행되는 함수(인터프리터 언어, interpreted language)인데 how?

console.log(num); // num is not defined로 에러 뜸
let num = 1;

• js는 내부 알고리즘 때문. js 실행 전에 코드의 모든 함수 선언문을 찾아서 선언해 둠.
• =>​ 호이스팅 hoisting: 함수의 사용 가능 범위가 선언문 아래 뿐만이 아니라 넓어짐. 그렇다고, 함수 자체가 위로 올라간다는 뜻은 아님.

​

​

<함수 표현식>

: 한줄 씩 읽으면서 실행하고 코드에 도달해야 생성됨.

let sayHello = function(){
console.log('Hello');
}
sayHello();

• 그래서 생성해야지만, 사용이 가능함.

• => 둘 다 써도 상관 없지만, 에러가 발생 시 위로 옮기면 됨. BUT, 좀 더 자유롭게 하고 싶으면 그냥 함수 선언문으로 하면 됨

​

<화살표 함수 arrow function>

• 지금까지 배웠던 함수를 보다 간결하게

let add = function(num1, num2){
  return num1 +  num2;
}

let add = (num1, num2) => {
  return num1 +  num2; //function 대신 =>
}

let add = (num1, num2) => (
  num1 +  num2; //return을 중괄호가 아닌 일반괄호로 
)

let add = (num1, num2) => num1 + num2; //걍 한 문장으로도 변경 가능

//--------------

let sayHello = (name) => `Hello, ${name}`

let sayHello = name => `Hello, ${name}` // 인수 하나면 괄호 생략 가능

//---------------
let showError = () => {
  alert('error!'); // 인수가 없ㅇ면, () 생략 x
}

//---------------
let add = function(num1, num2){
   const result = num1 +  num2;
   return result; //리턴 전에 여러 줄의 코드가 있으면 () 사용 x
}

let add = (num1, num2) => {
  const result = num1 +  num2;
   return result; 
}

 

[Object 객체]

​

• 객체는 {}로 구성되고, 키 key : 값 value로 구성된 프로퍼티가 들어가고, 각 프로퍼티는 ","로 구분하고 맨 마지막 것은 안 들어가도 되지만 넣어주는 것이 수정과 삭제에 용이함.

const superman = {
name : 'clark',
age : 33, 
}

 

<접근, 추가, 삭제>

​

• 접근 하고 싶을 때는 . or [] 사용
• superman.name // 'clark'
• superman['age'] // 33

​

• 추가할 때도 . or [] 사용
• superman.gender = 'male';
• superman['hairColor'] = 'black';

​

• 삭제는 delete를 지우고 싶은 프로퍼티 앞에 붙여주면 됨.
• delete superman.hairColor;

​

<단축 프로퍼티>

const superman = {
  name: "clark",
  age: 30,
};

superman.hairColor = "black";
superman["hobby"] = "football";
console.log(superman); 
//{name: "clark", age: 30, hairColor: "black", hobby: "football"}

delete superman.age;
console.log(superman);
//{name: "clark", hairColor: "black", hobby: "football"}

 

function makeObject(name, age) {
  return {
    name, //name: name,
    age, //age: age,
    hobby: "football",
  };
}

const Mike = makeObject("Mike", 30);
console.log(Mike);

• superman.birthDay; // undefined
• 'birthDay' in superman; // false
• 'age' in superman; // true
• in은 안에 뭐가 들어있는지 모를 때 사용하면 됨.

function isAdult(user) {
  if (!("age" in user) // user에 age가 없거나
  || user.age < 20) {  // 20살 미만이거나
    return false;
  } // else 굳이 필요 없음. 어차피 많드는 거니까.
  return true;
}

const Mike = {
  name: "Mike",
  age: 30,
};

const Jane = {
  name: "Jane",
};

console.log(isAdult(Mike)); // true
console.log(isAdult(Jane)); // false

 

 

<for ...in 반복문>

• 객체를 순회하면서 값을 얻을 수 있음

const Mike = {
  name: "Mike",
  age: 30,
};

for (x in Mike) {
  console.log(x); // key 값이 나옮. name, age
  console.log(Mike[x]); // value 값. Mike, 30 
}

 

 

[객체의 method, this]

​

<method>

• 객체 프로퍼티로 할당 된 함수

const superman = {
  name: "clark",
  age: 30,
  fly() { //fly: function(){ function 생략 가능 
  console.log('날아갑니다.') //
 } 
};

superman.fly(); //날아갑니다. fly가 method : 객체 프로퍼티로 할당 된 함수

 

<this>

• 너무 복잡해서 이건 누나 강의 따로 들어야 함.. 솔직히 이해 못 했음. 중급 강의에서 추가로 알려준다고 하심....

let boy = {
  name: "Mike",
  sayHello,
};

let girl = {
  name: "Jane",
  sayHello,
};

sayHello : function() {
  console.log(`Hello, I'm ${this.name}`); // 뭐가 문제라서 실행이 안되지?? 
};

boy.sayHello();
girl.sayHello();

// this는 함수를 실행하는 시점에 결정되기 때문에, 뭐가 앞에 들어가느냐에 따라서 달라짐.
// 즉 boy나 girl이 되는 것임.

sayHello : function() {
  console.log(`Hello, I'm ${this.name}`);
};

// arrow 함수로 바꾸면

sayHello : () => {
  console.log(`Hello, I'am ${this.name}`)
}
// 화살표 함수는 일반 함수와 달리 자신만의 this가 x
// 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져 옴. 
// 전역 객체가 되는 것. 

let boy = {
  name: "Mike",
  sayHello: () => {
    console.log(this); // 전역객체 --> 브라우저 한경에서: window // Node js: global
  }
};

boy.sayHello(); // this != boy

• 조금 더 쉬운 설명인 듯.

let boy = {
  name: "Mike",
  showName: function () {
    console.log(this.name);
    // method의 this는 해당 객체를 가리키는 것.
    // 뒤에서 변수 명이 바뀔 수도 있기 때문에, 되도록 this로 써서 다른 것들과도 호환이 가능하게 만들어주는 것.
  },
};

let man = boy; // 사람은 mike 한 명인데 접근은 man, boy 둘 다 가능
boy = null; // man으로만 접근 가능

man.showName(); //  but, 위에 this가 아닌 boy.name이면 함수 전체가 null이라서 error가 뜸.
//but, this로 바꿔주면 그대로 Mike로 뜨기 때문에 괜찮음.

// man.name = "Tom";

// console.log(boy.name); // Tom 같으니까.

 

• 애로우 함수의 경우; 지역이 아닌 전역 객체가 되어 버리니깐, this 넣어야 하면 애로우 사용하지말 것.

 

let boy = {
  name: "Mike",
  sayThis: function () {
    console.log(this);
  },
}; // this는 let boy = {} --> 객체 전부를 의미함.

boy.sayThis();
// {name: "Mike", sayThis: function}

//------------ 애로우 함수의 경우
let boy = {
  name: "Mike",
  sayThis: () => {
    console.log(this);
  },
};

boy.sayThis();
//window로 하라고 뜸.. 전역 객체가 되니깐.. this 넣어야 할 땐, 애로우 함수 사용하지 말 것.

 

 

[배열 Array]

​

• 순서가 있는 리스트
• 탐색 시 고유 번호를 사용하고, 이를 index라고 부름
• index는 0부터 시작함.

const names = ["철수", "영희", "미란"];

console.log(names[0]); //철수
console.log(names[2]); //미란
names[0] = "써니"; // 0번이 써니로 변경

console.log(names); //["써니", "영희", "미란"]

• 문자, 숫자, 객체, 함수도 포함 가능.
• length는 배열의 길이로 index와 다르게 총 개수임 헷갈리지 말 것.

const names = ["철수", "영희", "미란"];

console.log(names.length); //3

 

push(): 배열 끝에 추가

 

const names = ["철수", "영희", "미란"];

names.push("태민");

console.log(names); //["철수", "영희", "미란", "태민"]

 

• pop(): 배열 끝에 요소 제거

const names = ["철수", "영희", "미란"];

names.pop();

console.log(names); //["철수", "영희"]

 

• shift(): 배열 앞에 요소 제거
• unshift(): 배열 앞에 요소 추가

const names = ["철수", "영희", "미란"];

names.unshift("다인", "재현");
console.log(names); //["다인", "재현", "철수", "영희", "미란"]

names.shift();
console.log(names); //["재현", "철수", "영희", "미란"]

 

• 배열을 쓰는 이유 중 하나는 반복을 위해서기 때문에 for를 익힐 것

const names = ["철수", "영희", "미란"];

for (let index = 0; index < names.length; index++) {
  console.log(names[index]); // 각각 한 번씩 반복.
}

• for...of 사용.
• cf) 객체를 순회하는 for..in과 헷갈리면 x. 원하면 쓸 수는 있으나 단점이 다多. 걍 for of 쓰면 됨.
• 결과는 for이랑 같음. for보다 단순하지만, index를 얻을 수 없음.

const names = ["철수", "영희", "미란"];

for (let name of names) {
  console.log(name); // 각각 한 번씩 반복.
}