Function / Arrays / Object

이 글은 var, let, const 차이점 (velog.io) bathingape님의 글을 참고해서 작성하였습니다

Function (함수)

**변수 선언시에 var, let, const의 차이
1. 선언 시 차이
var : 같은 이름의 변수를 선언해도 에러를 출력시키지 않고 덮어씌운다. -> 이를 보완하기 위해 나온것이 let과 const
let : 같은 이름의 변수를 선언하면 이미 선언된 변수명이라고 에러메세지를 출력시켜준다. 변수에 다른 값을 입력시키기 가능(재할당 가능)
const : let과 같이 같은 이름의 변수를 선언하면 에러메세지 출력. 재할당도 불가능.

    var name = 'bathingape'
    console.log(name) // bathingape

    var name = 'javascript'
    console.log(name) // javascript 에러발생 없음

    let name = 'bathingape'
    console.log(name) // bathingape

    let name = 'javascript'
    console.log(name) 
    // Uncaught SyntaxError: Identifier 'name' has already been declared 오류발생

    const name = 'bathingape'
    console.log(name) // bathingape

    const name = 'javascript'
    console.log(name) 
    // Uncaught SyntaxError: Identifier 'name' has already been declared

    name = 'react'
    console.log(name) 
    //Uncaught TypeError: Assignment to constant variable. 변수의 재선언, 재할당 모두 불가

2. 호이스팅

호이스팅이란 var 선언문이나 함수선언문을 해당 스코프의 선두로 옮기는 것을 말한다. JS는 let, const를 비롯해서 모든 선언(var, let, const, function, function*, class)을 호이스팅한다.

하지만, var 로 선언된 변수와는 달리 let 로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다.

	console.log(foo); // undefined
	var foo;

	console.log(bar); // Error: Uncaught ReferenceError: bar is not defined
	let bar;

이는 let 로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문이다.

참고로, 변수는 선언 단계 > 초기화 단계 > 할당 단계 에 걸쳐 생성되는데

var 으로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다. 

// 스코프의 선두에서 선언 단계와 초기화 단계가 실행된다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 있다.

console.log(foo); // undefined

var foo;
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

let 로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.

// 스코프의 선두에서 선언 단계가 실행된다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 없다.

console.log(foo); // ReferenceError: foo is not defined

let foo; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

3. return statement

- 함수 내부에서 return이 실행되면 해당 함수는 종료된다.
- 함수 실행문이 있는 자리는 해당 함수의 반환값(return 값)으로 대체된다.
- return 뒤에 값을 지정해주지 않거나 return이 없으면 undefined를 반환하게 된다.

 

Array(배열)

forEach
arr.forEach(function (x){
	console.log(x);
})

forEach는 배열의 처음부터 마지막 요소까지 반복하여 실행해주는 메서드이다.
인자로 콜백함수를 받아온다.
주어진 콜백함수를 배열 요소 각각에 대해 반복실행.

콜백함수는 다음 글에서 설명!

다양한 배열 메서드)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#%EB%A9%94%EC%84%9C%EB%93%9C

Array - JavaScript | MDN

 

Object (객체)

객체란?

 https://velog.io/@surim014/%EC%9B%B9%EC%9D%84-%EC%9B%80%EC%A7%81%EC%9D%B4%EB%8A%94-%EA%B7%BC%EC%9C%A1-JavaScript%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-part-7-Object-35k01xmdfp
** 질문사항 : 객체에서 key/value를 삭제하려면 delete person.age; 같이 delete를 쓰면 되는데, 그냥 객체내의 값을 지우면 되지 않나요?

프로퍼티(Property) & 메서드(Method)
객체는 케이스를 이루는 말이고 실제 객체를 완성하는 구성품들은 데이터를 의미하는 '프로퍼티', 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 '메서드'이다.
JS의 객체는 Key(키)와 value(값)으로 구성된 '프로퍼티'들의 집합이다. 프로퍼티의 값으로는 JS에서 사용할 수 있는 모든 값을 사용할 수 있다.
프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 '메서드'라고 부른다.

프로퍼티와 메서드란? 

https://velog.io/@canonmj/%ED%95%A8%EC%88%98%EC%99%80-%EB%A9%94%EC%84%9C%EB%93%9C%EC%9D%98-%EC%B0%A8%EC%9D%B4%EB%8A%94-object-%EC%8B%AC%ED%99%94%EC%9D%B4%ED%95%B4

Javascript : 함수와 메서드의 차이는? object를 파헤쳐보자!

 

리터럴이란? : 변수의 값이 변하지 않는 데이터(메모리위치 안의 값)
상수란? : 변수의 값(메모리 위치)이 변하지 않는 변수
var a=5; 에서 a는 상수이다. 값은 변할 수 있지만 a그 자체의 메모리 주소는 변하지 않는다.
따라서 객체 리터럴이라는 것은 var name = {};라는 객체를 정의해주는 틀 그 자체라고 볼 수 있다.

 

**JS에서는 배열과 함수 또한 객체에 포함된다. 배열과 함수 또한 일반 객체와 동일한 성질을 가지고 있다.
**console.log(Object.keys(arr)); 를 통해 배열의 속성(키)를 알아본 결과 배열의 default키는 index번호이다.