02. VJS 요약 (Object, function선언, return)

상수 Object만들고 해당 Object 및 Object의 특정키(gender)의 값만을 호출하기

---

const nicoInfe = { 
  name : "JB", 
  age : 35, 
  gender : "male" 
} 

console.log(nicoInfe.gender) 
console.log(nicoInfe) 

 

function을 선언해서 함수 인자에 값을 넣고 console.log로 출력해보자

---

function hello(parameter_argument_like_variable, para_num){
  console.log("Hello", parameter_argument_like_variable, "THis age is", para_num);
} // console에선 쉼표와 +를 통해 str과 인자를 구분할 수 있다.

hello("JEB", 19); // hello함수에 바로 인자값 넣기. 인자값따라 인자 타입 결정됨. 결과물은 Hello JEB THis age is 19 

//위처럼 불러올 인자값 중 str은 "JEB"을사용, 숫자는 ""없이 숫자 19만

// 참고로 console.log는 객체이다.

 

function의 인자를 return값에 넣어을 때는 +로 구분한다.

---

function say_func(name,age) {

    return 'Hello ' + name + ' you are ' + age +' years old'

} // return문에선 쉼표는 안되고 + 를 통해 str과 인자를 구분한다.

// 강의에선 return 'Hello ${name} you are ${age} years old라고 했으나 ${}를 써도 인자로 인식이 안된다.

// return문을 생략할 경우 undefined를 대신 반환

const greetJBE = say_func("jbe",19) // 이렇게 함수와 함께 인자값을 넣어주면

console.log(greetJBE) // 여기서 출력된다. Hello jbe you are 19 years old

// 그런데 say_func함수에서 return문이 아니라 console문을 사용했다면 여기선 정의안된상태 undefined라고 나온다. 실행된함수의 결과값이 없기 때문. 반환값을 위해 return을 써야만 undefined가 나타나지 않는다.

 

'변수 안'에 '함수 기능을 가진 객체'를 만들어보자. 마치 object.key 처럼 써보자

---

변수안에 함수 기능을 가진 객체를 만들자.
const calculator = { 
     plus : function( a , b ) { 
          return a + b; 
     } 
} 

const plus_ob = calculator.plus(5,5) 
console.log(plus_ob) 

console, calculator 두개 모두 객체. 
console객체는 log()인자를 가진 함수. 
calculator객체는 plus()도 2개의 인자를 가진 함수. 

번외. return명령문에 대한 추가 특징 및 return이 실행될 때.

---

특징

• return 명령문은 자동 세미콜론 삽입(ASI)의 영향을 받습니다. 
• return 키워드와 표현식 사이에는 줄바꿈 문자가 올 수 없습니다.
• 함수는 return을 호출하는 지점에서 즉시 실행을 중단한다!

function counter() {
  for (var count = 1; ; count++) {  // 무한 반복
    console.log(count + "A"); // 5A까지 콘솔저장
      if (count === 5) { // count가 5까지 갔다면 즉, 위 콘솔에서 5A가 나왔다면 즉시 중단하고 쌓은 것을 리턴!
        return;
      }
      console.log(count + "B");  // 5까지만 됐으므로 4B까지만 쌓여서 리턴된다
    }
  console.log(count + "C");  // JS는 순차적으로 실행되기에 이 콘솔앞에서 return됐으므로 절대 나타나지 않는다.
}

counter();

// 출력:
// 1A
// 1B
// 2A
// 2B
// 3A
// 3B
// 4A
// 4B
// 5A

 

번외. return명령문 / 클로저에 대한 설명 : 어휘적 범위 지정(lexical scoping)

---

function init() {
  var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다.
  function displayName() { // displayName() 은 내부 함수이며, 클로저다.
    alert(name); // 부모 함수에서 선언된 변수를 사용한다.
  }
  displayName();
}
init();

init()은 지역 변수 name과 함수 displayName()을 생성한다. displayName()은 init() 안에 정의된 내부 함수이며 init() 함수 본문에서만 사용할 수 있다. 이 예시를 통해 함수가 중첩된 상황에서 파서가 어떻게 변수를 처리하는지 알 수 있다.

여기서 주의할 점은 displayName() 내부엔 자신만의 지역 변수가 없다는 점이다. 그런데 함수 내부에서 외부 함수의 변수에 접근할 수 있기 때문에 displayName() 역시 부모 함수 init()에서 선언된 변수 name에 접근할 수 있다. 만약 displayName()내에서 같은 이름을 가진 변수, name이 정의된 상황이라면 외부 변수에 접근하는 대신 내부 변수를 먼저 사용(this.name)했을 것이다.

어휘적 범위를 지정할 땐, 변수를 어느 범위까지 사용할 수 있는지 결정하기 위해 소스 코드 내 어디에서 변수가 정의되었는지에 대한 정보를 사용한다. 단어 "lexical"은 이런 사실을 나타낸다. 중첩 함수는 외부 범위(scope)에서 선언한 변수에도 접근할 수 있습니다.

아직 학습할 내용이 더 남았으니 추가자료는 여기에!

---

index.js : 인자, argument, return의 중요성, object내부의 function

function sayHello(name,age){
    return `Hello My name is ${name} and My age is ${age}`;
}
const Hi = sayHello("JBE",29);
console.log(Hi);

const cal = {
 plus : function(a,b) {
     return a+b
 },
 minus : function(a,b) {
     return a-b
 }
};

const res = cal.plus(3,4);
console.log(res);

console도 object이고 document도 object야

html을 DOM객체로 변경할 수 있다.