개발 공부하는 HEY

함수 선언문

function hello(name) {
    return `${name}님 안녕하세요.`;
}

함수 호출

console.log(hello('홍길동'));
// 홍길동님 안녕하세요.

함수 표현식

자바스크립트의 함수는 객체 타입의 값으로 값의 성질을 갖는 일급 객체이다.(밑에 설명)

함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다.

• 함수 표현식에서는 함수명을 생략할 수 있다.

var hello = function (name) {
    return `${name}님 안녕하세요`;
}

console.log(hello('홍길동'));
// 홍길동님 안녕하세요

• 함수 표현식에서 함수명을 생략하지 않아도 문제는 없다.

var calc = function add(a,b) {
    return a + b;
}

• 단, 함수 호출은 식별자로 이루어지며 함수명으로 호출할 수 없다.

console.log(calc(10, 20));
//console.log(add(10,20));

함수 호이스팅

함수 선언문은 런타임 이전 자비스크립트 엔젠에 의해 먼저 실행된다. 따라서 함수 선언문 이전에 함수를 참조할 수 있고 호출할 수 있다. 

함수 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 것을 '함수 호이스팅'이라고 한다.

console.log(hello('홍길동'));
console.log(hi('홍길동'));      //TypeError: hi is not a function

//함수 선언문
function hello(name) {
    return `${name}님 안녕하세요!`;
}

// 함수 표현식
var hi = function(name) {
    return `${name} 안녕!`;
}

변수 할당문의 값은 할당문이 시행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.

함수 표현식으로 정의한 함수는 반드시 함수 표현식 이후에 참조하고 호출해야 한다.

매개변수와 인수

function hello(name) {
	
    console.log(arguments);
    
    return `${name}님 안녕하세요`;
}


//console.log(name); -> 매개변수는 함수 몸체 외부에서 참조할 수 없다.

var result = hello('홍길동');
console.log(result);  

//  [Arguments] { '0': '홍길동' }
//  홍길동님 안녕하세요

result = hello();
console.log(result);

// [Arguments] {}
// undefined님 안녕하세요

result = hello('유관순', '신사임당');
console.log(result);

// [Arguments] { '0': '유관순', '1': '신사임당' }
// 유관순님 안녕하세요

function hi(name = '아무개') {

    return `${name} 안녕~`;
}

result = hi('홍길동');
console.log(result);     //홍길동 안녕~
result = hi();
console.log(result);	 //아무개 안녕~

반환문

function hello(name) {
    // 반환문
    return `${name}님 안녕하세요!`;
    // 반환문 이후의 문은 실행되지 않고 무시 된다.
    console.log(name);
}



console.log(hello('유관순'));



-> 유관순님 안녕하세요!

function func() {
    console.log('함수가 호출 되었습니다.');
    //return; 
    // 반환 값이 없을 시 반환문 생략 가능하며 이 때도 암묵적으로 undefined 반환
}

console.log(func());




-> 함수가 호출 되었습니다.
   undefined

일급 객체 

예시 (뒤에 함수 내용 숙지)

- 무명의 리터럴로 생성할 수 있다.

// 함수명이 없고 변수 hello에 저장됨
var hello = function () {
    return '안녕!';
};

- 객체에 저장할 수 있다.

var obj = { hello };     // hello : hello   hello라는 함수를 hello라는 속성으로 객체에 저장

function repeat(func, count) {          //매개변수
    for(var i = 0; i < count; i++) {
        console.log(func());
    }
    
    return function () {  // 반환값
        console.log(`${count}번 반복 완료`);
    }
}

var returnFunc = repeat(obj.hello, 5);
returnFunc();


실행 시
안녕!
안녕!
안녕!
안녕!
안녕!
5번 반복 완료
출력

프로퍼티 값 단축 구문

ES6에서는 프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있다. 이 경우 프로피터 키는 변수 이름으로 자동 생성된다.

var id = 'p-00001';
var price = 30000;

var product = {
    id : id,
    price : price
};

var product2 = { id, price };

// product, product2 둘다 { id: 'p-00001', price: 30000 } 출력됨

계산된 프로퍼티 이름

ES5에서는 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성하려면 객체 리터럴 외부에서 대괄호 표기법을 사용해야 한다. 

obj[key] = value;

var prefix = 'key';
var index = 0;
var obj = {};

obj[prefix + '-' + index++] = index;
obj[prefix + '-' + index++] = index;
obj[prefix + '-' + index++] = index;

console.log(obj);

// 출력 -> { 'key-0': 1, 'key-1': 2, 'key-2': 3 }

ES6에서는 객체 리터럴 내부에서도 계산되니 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있다.

var obj2 = {
    [`${prefix}-${index++}`] : index,
    [`${prefix}-${index++}`] : index,
    [`${prefix}-${index++}`] : index
};

console.log(obj2);

// 출력 -> { 'key-3': 4, 'key-4': 5, 'key-5': 6 }

메서드 단축

ES5에서 메서드를 정의하려면 프로퍼티 값으로 함수를 할당한다.

ar dog = {
    name : '뽀삐',
    // 메소드 : 객체 내부에 정의된 함수
    eat : function(food){
        console.log(`${this.name}(은)는 ${food}를 맛있게 먹어요.`);
    }
};

dog.eat('고구마');

// 뽀삐(은)는 고구마를 맛있게 먹어요.

ES6에서 메서드를 정의할 때 function 키워드를 생략한 축약 표현을 사용할 수 있다.

var dog2 = {
    name : '뽀삐',
    eat(food){
        console.log(`${this.name}(은)는 ${food}를 맛있게 먹어요.`);
    }
};

dog2.eat('고구마');

//뽀삐(은)는 고구마를 맛있게 먹어요.

in 연산자

in 연산자를 통해 프로퍼티 존재 여부를 확인할 수 있다.

프로퍼티 값이 undefined일 뿐 프로퍼티는 존재하는데, 존재하지 않는다고 판별될 수 있는 문제가 있다.

var student = {
    name : '유관순',
    age : 16,
    test : undefined
};

console.log(student.name === undefined);     // false - 존재
console.log(student.height === undefined);     // true - 존재하지 않음
console.log(student.test === undefined)     // true - 존재하지 않음

이럴 경우 in 연산자로 판단한다.    

console.log("name" in student);    //true
console.log("height" in student);  // false
console.log("test" in student);    // true

for in 반복문 

for in 반복문을 이용해 객체의 모든 키를 순회할 수 있다.

var student = {
    name : '유관순',
    age : 16,
    getInfo(){
        return `${this.name}(은)는 ${this.age}세 입니다.`;
    }
};


console.log(student);

// { name: '유관순', age: 16, getInfo: [Function: getInfo] }

- 반복할 때마다 프로퍼티 키 값을 준다.

for(var key in student) {  
    console.log(`key : ${key}`);                    //프로퍼티 키 값
    console.log(`student['${key}'] : ${student[key]}`);  //프로퍼티 키에 해당하는 value 값
}


// 출력
key : name
student['name'] : 유관순
key : age
student['age'] : 16
key : getInfo
student['getInfo'] : getInfo(){
        return `${this.name}(은)는 ${this.age}세 입니다.`;
    }

- value 값 호출할 때 student.key 형태는 안된다.

key : value 라는 프로퍼티가 있어야 사용 가능, key라는 키값이 있는 것이 아니다.

var student = {
	name : '유관순', // key값 : value값
    age : 16,
    getInfor : function(){
        return `${this.name}(은)는 ${this.age}세 입니다.`;
    }   // 메소드
};


console.log(typeof student);   // object
console.log(student);		   // { name: '유관순', age: 16, getInfor: [Function: getInfor] }

var student2 = {};  // 프로퍼티를 정의하지 않을 시 빈 객체 생성
console.log(typeof student2);  // objct
console.log(student2);		   // {}

프로퍼티 (속성)

프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값

var obj = {
    normal : 'normal value',
    '@ s p a c e @' : 'space value',    //특수문자 사용시에는 ''사용 
    '' : '',                            //빈 문자열 키는 오류 발생하지 않지만 권장하지 않음
    0 : 1,                              //숫자 키는 내부적으로 문자열로 변환
    var : 'var',                        //예약어 키는 오류 발생하지 않지만 권장하지 않음
    normal : 'new value'                //이미 존재하는 키를 중복 선언하면 나중에 선언한 프로퍼티로 덮어씀

}

console.log(obj);  //선언하는 순서대로 출력되진 않음. 내부적으로 결정됨.


// 출력 값
{
  '0': 1,
  normal: 'new value',
  '@ s p a c e @': 'space value',
  '': '',
  var: 'var'
}

메소드 

객체 내부에 정의된 함수로, 함수는 값으로 취급할 수 있고, 프로퍼티 값으로도 사용할 수 있다.

var dog = {
    name : '뽀삐',
    eat : function(food){
        console.log(`${this.name}(은)는 ${food}를 맛있게 먹어요.`);
    }

};

dog.eat('고구마');


// 출력 값
뽀삐(은)는 고구마를 맛있게 먹어요.

프로퍼티 접근

console.log(dog.name);    // 뽀삐
dog.eat('고고마');		   // 뽀삐(은)는 고고마를 맛있게 먹어요.​

console.log(dog['name']); // 뽀삐
  console.log(dog[name]);  // -> 출력X
dog['eat']('고구마'); // 뽀삐(은)는 고구마를 맛있게 먹어요.

- 프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는 이름일 경우 반드시 대괄호 표기법을 사용한다.

var obj = {
    'dash-key' : 'dash-value',
    0 : 1
};

//console.log(obj.dash-key);
//console.log(obj.'dash-key');
//console.log(obj[dash-key]);
//위의 경우 다 에러 

console.log(obj['dash-key']);    //dash-value

- 프로퍼티 키가 숫자로 이루어진 문자열인 경우 대괄호 표기법에서 따옴표를 생략할 수 있다.

//console.log(obj.0);
//console.log(obj.'0');
// 위의 경우 다 에러

console.log(obj[0]);    //1
console.log(obj['0']);  //1

프로퍼티 변경, 추가, 삭제

- 이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다. 거듭 할당해도 마찬가지임

var dog = {
    name : '뽀삐'
};

dog.name = '두부';       
dog['name'] = '두부';
console.log(dog.name);   //두부

- 프로퍼티 동적 추가

존재하지 않는 프로퍼티 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.

dog.age = 3;
dog['age'] =3;
console.log(dog);   

// 출력 -> { name: '두부', age: 3 }

- 프로퍼티 삭제

delete dog.age;
delete dog['age'];
console.log(dog);

// 출력 -> { name: '두부' }

delete dog.something;   // ->무시됨

ECMAScript(2020) - ES11에서 도입 된 연산자

 

1. 옵셔널 체이닝 연산자

 

좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

 

 

옵셔널 체이닝 연산자 이전에는 논리 연산자 &&를 사용한 단축 평가를 활용했었는데 빈 문자열과 같은 Falsy 값을 false 취급해서 생기는 문제가 있다.

2. null 병합 연산자

좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.

변수에 기본 값을 설정할 때 유용하다.

 

 

null 병합 연산자 이전에는 논리 연산자 || 를 사용한 단축 평가로 변수에 기본 값을 설정할 수 있었다.

단, 빈 문자열과 같은 Falsy 값을 false로 취급해서 생기는 문제가 있다.

 

<비교 연산자>

• 동등 비교 ( ==, != ) : 암묵적 타입 변환을 통해 타입 일치 시킨 후 같은 값인지 비교
• 일치 비교 (===, !==) : 타입과 값이 모두 일치하는지 비교

- NaN은 자신과 일치하지 않는 유일한 값이다. 빌트인 함수 Number.isNaN을 사용해서 확인해야 한다.

- 비교 연산자를 통해 문자열끼리 비교도 가능하며 유니코드 순으로 비교한다.

 

• 일치 비교 연산자

 

• 대소 비교 연산자

<단축 평가>

•   OR의 경우

• AND의 경우

좌항, 우항 모두 확인해야 하므로 논리 연산의 결과를 결정하는 두 번째 피연산자 'banana'를 그대로 반환한다.

2. 단축 평가를 활용하면 if문을 대체할 수 있다.

3. 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 

var obj = null;
var val = obj.value;
// TypeError: Cannot read properties of null (reading 'value')

01. 문자열 타입으로 변환

1) 문자열 연결 연산자

문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적으로 변환

2) 템플릿 리터럴 표현식 삽입

표현식의 결과를 문자열 타입으로 암묵적으로 변환

-문자열 타입이 아닌 값을 문자열 타입으로 암묵적으로 변환하는 결과

-> 원시 타입은 형태 그대로의 문자열로 변환하나, symbol은 문자열로 형변환 되지 않는다.

3) String 생성자 함수를 new 연산자 없이 호출

4) toString() 메소드 사용

2. 숫자 타입으로 변환

1) 산술 연산자

산술 연산자의 피연산자는 모두 숫자여야 하므로 숫자가 아닌 피연산자를 숫자 타입으로 암묵적 타입 변 환한다.

2) 비교 연산자

비교 연산자로 크기를 비교하기 위해 모두 숫자 타입이어야 하므로 숫자가 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다. 단, 문자는 제외.

* NaN 비교 : isNaN(NaN)

3) + 단항 연산자

+단항 연산자는 피연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환한다.

빈 문자열, 빈 배열, null, false는 0으로 객체와 undefined, 함수는 NaN이 반환된다.

-> symbol은 문자로 형변환하지 않는다.

4) * 산술 연산자 이용

5) Number 생성자 함수를 new 연산자 없이 호출

6) parseInt, parseFloat 함수 이용 (문자열 -> 숫자만 가능)

3. 논리 타입으로 변환

자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값), Falsy 값(거짓으로 평가되는 값)으로 구분한다.

1) Truthy -> true, Falsy -> false로 암묵적 타입 변환된다.

2) Boolean 생성자 함수를  new 연산자 없이 호출하는 방법

3) ! 부정 논리 연산자를 두 번 사용하는 방법

01.number

숫자 타입은 모두 실수로 처리된다. 실수끼리의 나누기이므로 소수점까지 처리된다.

02. string

작은 따옴표로 감싼 문자열 내의 큰 따옴표 -> 문자열로 인식

큰 따옴표로 감싼 문자열 내의 작은 따옴표 -> 문자열로 인식

- 템플릿 리터럴

ES6부터 도입된 멀티라인 문자열, 표현식 삽입 등 편리한 문자열 처리 기능을 제공하는 문자열 표기법 

 1) 멀타라인 문자열

 2) 표현식 삽입

문자열은 문자열 연산자 '+'를 이용하여 연결하는데, 표현식 삽입을 이용하면 문자열 연산자보다 가독성 좋고 간편하게 문자를 조합할 수 있다.

표현식 삽입은 백틱 내에서만 사용해야 한다.

var lastName = '홍';
var firstName = '길동';

console.log('제 이름은 ' + lastName + firstName + '입니다.');

console.log(`제 이름은 ${lastName}${firstName}입니다.`);

03. boolean

04. undifined and null

1) undifined

자바스크립트 엔젠이 변수 초기화 시 undefined를 사용한다. 개발자가 의도적으로 변수에 할당하는 것은 지양한다.

2) null

변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다.

05.symbol and object

1) symbol

symbol은 ES6에서 추가된 7번째 타입으로 다른 값과 중복되지 않는 유일무이한 값이다.

이름 충돌 위험이 없는 객체의 유일한 프로퍼티이며, 키 값을 만들기 위해 사용한다.

심벌 외의 원시값은 리터럴을 통해 생성하지만 심벌은 Symbol 함수를 통해 호출해서 생성한다.

-

2) 객체타입

자바스크립트의 데이터 타입은 크게 원시 타입, 객체 타입으로 분류한다.

원시 타입 : number, string, boolean, undefined, null, symbol

객체 타입 : 객체, 함수, 배열 등

<동적 타입>

JavaScript는 동적타입언어이다.

데이터 타입을 사전에 선언하지 않음 변수 선언이 아니라 할당에 의해 타입이 결정되어

재할당에 의해 동적을 변수의 타입이 변화할 수 있다.