22.06.22 TIL
- 매개변수(parameter)
함수가 외부에서 입력 받은 데이터를 처리하는 경우.
함수가 외부의 값을 받을 때.
정의된 함수의 소괄호 내부에 name 이라는 단어가 들어 있습니다.
함수 이름 옆 소괄호 자리에 적혀 있는 단어를 **매개변수(parameter)**라고 부릅니다.
function getName(name) {
return name + '님';
}
매개변수는 외부로부터 들어오는 값을 담아 함수 내부에서 사용하도록 하는 변수의 역할을 합니다.
함수 외부로부터 들어온 값이 담길 '자리' !
- 인자(argument)
let result1 = getName('개발자');
let result1 = getName('개발자'); // '개발자님' 출력
let result3 = getName('프론트엔드 개발자'); // '프론트엔드 개발자님' 출력
let result4 = getName('백엔드 개발자'); // '백엔드 개발자님' 출력
위와 같이 '개발자'라는 값을 보내서 호출할 수 있고, '디자이너', '기획자' 등 또 다른 값을 넣을 수도 있습니다.
'개발자'와 같은 실질적인 값을 인자(argument) 라고 합니다.
앞서 **매개변수(parameter)**는 '자리' 혹은 '변수의 이름'
반면, **인자(argument)**는 그 자리에 들어갈 구체적인 값을 뜻합니다.
- 후위 연산자(postfix operator)
num++
후위 연산자는 연산자가 변수의 뒤에 위치된 것을 말한다.
후위 연산자를 사용한 예시 코드를 살펴보자.
let x = 3;
const y = x++;
console.log(`x:${x}, y:${y}`);
x:4, y:3
후위 연산자는 변수를 먼저 할당(대입)한 뒤에 연산을 수행
- 전위 연산자(prefix operator)
++num
전위 연산자는 연산자가 변수의 앞에 위치된 것을 말한다.
전위 연산자를 사용한 예시 코드를 살펴보자.
let x = 3;
const y = ++x;
console.log(`x:${x}, y:${y}`);
x:4, y:4
연산을 먼저 수행한 뒤에 변수를 할당(대입)
- text and string
서로 다른 type인 String + Number를 시도할 때는 항상 주의해야 합니다.
String과 Number형을 더하면 항상 String 형으로 변환됩니다.
alert("2 더하기 2는 " + 2 + 2);
- 다차원배열의 출력
function getElement() {
let arr = [3, [4, ["array", 9], 2+3], [0]];
return arr[1][1][0];
}
- 배열안의 최대값 최소값
Math.max(...arr)와 같이 작성해주면 실제로는
Math.max(1, 2, 3, 4, 5)와 같이 실행되게 됩니다.
- toUpperCase 와 toLowerCase 메소드
let lastName = 'Yeri Kim';
let upperLastName = lastName.toUpperCase();
let lowerLastName = lastName.toLowerCase();
console.log(lastName); // Yeri Kim
console.log(upperLastName); // YERI KIM
console.log(lowerLastName); // yeri kim
- 문자열 찾기
let info = "JavaScript는 프로그래밍 언어이다.";
indexOf 메소드는 문자열에 특정 문자열이 들어있는지 확인하고,
만약 있다면 몇번 째 순서에 해당 문자열이 있는지 알려 줍니다.
해당 문자열이 없다면 -1을 반환합니다.
댓글에 욕설이 포함되면 달지 못하도록 차단할 때 사용할 수 있습니다.
let info = "JavaScript는 프로래밍 언어이다.";
let firstChar = info.indexOf("프로래밍");
- sibal..더 쉽게 하는 방법이 있는지 searching
function sliceCityFromAddress(address) {
const standardIndex = address.indexOf("시");
let startIndex;
let newAddress;
if (standardIndex !== -1) {
for (i = standardIndex; i > -1; i--) {
if (address[i] === " ") {
startIndex = i;
break;
} else {
startIndex = 0;
}
}
if (startIndex === 0) {
newAddress = address.slice(standardIndex+2, address.legnth);
} else {
newAddress =
address.slice(0, startIndex) +
address.slice(standardIndex+1, address.legnth);
}}
return newAddress;
}
- Date
let rightNow = new Date();
let year = rightNow.getFullYear();
let month = rightNow.getMonth()+1;
let date = rightNow.getDate();
let day = rightNow.getDay();
let currentHour = rightNow.getHours();
let currentMin = rightNow.getMinutes();
처음에 말했듯이 new Date() 가 반환된 rightNow 를 그대로 사용하지 않습니다.
Date 타입이 갖고 있는 메서드를 활용하여 값을 받아옵니다.
getMonth 메서드는, 현재 달보다 1 작은 값을 반환 하므로 주의
또한 1초, 1초 시간이 흐른다고 해서 rightNow 담긴 시간 값이 변하지 않는건 아시겠죠?
위의 코드 1번째 줄이 실행되는 순간의 현재 시간이 담기는 것 입니다.
- 최대값 최소값 사이의 랜덤 넘버
function getRandomNumber (min, max) {
min = Math.ceil(min);
max = Math.floor(max);
var a = Math.floor(Math.random() * (max - min + 1) + min);
return a
}
- 많이 쓰이는 객체 구조
let objData = {
name: 50,
address: {
email: "gaebal@gmail.com",
home: "위워크 선릉2호점"
},
books: {
year: [2019, 2018, 2006],
info: [{
name: "JS Guide",
price: 9000
}, {
name: "HTML Guide",
price: 19000,
author: "Kim, gae bal"
}]
}
};
- string method
ES6에서 추가된 몇 가지 유용한 string method를 소개해 드립니다.
그 동안 string에서 특정 string을 찾기 위해 indexOf 를 사용했었습니다.
그런데 이제 아래의 3가지 method가 생겼습니다.
이름 그대로 기능을 파악하시면 됩니다.
- startsWith
- endsWith
- includes
const email = 'yealee.kim87@gmail.com';
console.log(email.startsWith('ye'));
console.log(email.endsWith('com'));
console.log(email.includes('@gmail'));
- split() : 구분자로 문자열 분리하여 배열로 리턴
split()의 Syntax는 다음과 같습니다. 인자로 구분자와 limit을 받습니다. limit은 구분자로 분리할 문자열의 개수입니다. 예제와 함께 어떻게 동작하는지 확인해보겠습니다.
string.split(splitter, limit);
1.1 구분자만 인자로 전달
구분자만 인자로 전달하면 문자열을 구분자로 분리하고 배열에 담아 리턴합니다.
let str = 'Hello, World, Javascript';
console.log(str.split(','));
Output:
[ 'Hello', ' World', ' Javascript' ]
const handleEdit = (nickname, interests) => {
let newInterests = interests.split(',');
return {
nickname : `${nickname}`,
interests : newInterests,
bio : `제 닉네임은 ${nickname}입니다. 취미는 ${newInterests}입니다.`,
}
- Object
Object.keys 외에도 마찬가지로 Object생성자의 메소드인 Object.values, Object.entries 와 같은 자매품들이 추가되었습니다. Object.values 는 객체의 키가 아닌 값으로 이루어진 배열을 리턴합니다. Object.entries 는 객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열로 이루어진, 배열을 리턴합니다. 각 배열에서 인덱스 [0]의 값은 각각의 키를, 인덱스 [1]의 값은 해당 키에 해당하는 값을 가지게 됩니다.
const values = Object.values(obj)
// values === ['melon', 4350, 16500, true]
const entries = Object.entries(obj)
/*
entries === [
['name', 'melon'],
['weight', 4350],
['price', 16500],
['isFresh', true]
]
*/
Object.entries가 조금 복잡해보이긴 하지만, Object.keys, Object.values, Object.entries 세가지 중에서 제일 유용하게 쓰입니다. 꼭 알아두세요.
- for-in
객체를 순회하는 두번째 방법은 for-in 문입니다. 반복문인 for문과 같은 종류의 문법이지만, 객체와 배열을 위해 특별히 존재하는, ES6 에서 추가된 문법입니다. 이건 객체 순회 외에도, 일반적인 배열을 순회할때도 아주 유용할 수 있는데요.
const arr = ['coconut', 'banana', 'pepper', 'coriander']
for (let i = 0; i < arr.length; i ++) {
console.log(i)
console.log(arr[i])
}
앞서 예시로 등장했었던 배열의 반복문입니다. for문을 그동안 많이 써본 분들이라면, 배열에 대한 for문 선언시 쓰는 for(let i = 0; i < arr.length; i ++) 이런 문법이 아주 자주 사용되는 문법이라는걸 알고계실텐데요. 이걸 간단하게 축약한 문법이 바로 다음과 같습니다.
for (let i in arr) {
console.log(i)
console.log(arr[i])
}
i를 0으로 초기화하고, 배열의 길이와 비교하고, i를 1씩 증가시키는 등의 코드를 생략할수 있게 만든 ES6 문법입니다. 이 for-in 문은 인덱스의 값으로 무엇을 할당하고, 반복문이 몇번 돌아야 할 지를 자바스크립트 엔진 내부에서 자동으로 결정하게 됩니다.
for-in 문은 배열뿐 아니라 객체에서도 작동하도록 만들어졌는데요.
const obj = {
name: 'melon',
weight: 4350,
price: 16500,
isFresh: true
}
for (let key in obj) {
const value = obj[key]
console.log(key)
console.log(value)
}
이렇게 객체를 가지고 for-in 문을 사용하면, for-in 문의 인덱스에 해당하는 변수가, 숫자가 아닌 객체의 각각의 키에 해당하는 문자열을 할당받게 됩니다.